CSS-Responsive

Berikut ini adalah pengumpiulan tugas CSS responsive tapi ingat yang responsive CSS nya bukan si DIA

Pengertian CSS Responsive

Salah satu prinsip halaman website adalah dapat dijalankan pada browser dari berbagai tipe device pengguna. Kategori device pengguna dapat dibedakan menjadi kategori perangkat mobile, dektop, dan tablet. Kategori perangkat tersebut berbeda dalam ukuran layarnya. Halaman website yang baik harus dapat menyesuaiakan ukuran layer dari device pengguna. Untuk mengatasi hal tersebut, dibutuhkan sebuah style yang responsive yang biasa disebut dengan CSS Responsive.

---

Penggunaan Media Query

Fitur media query adalah fitur untuk yang digunakan sebagai filter terhadap lebar layar pengguna. Berikut ini contoh sintak penggunaan media query. @media only screen and

• (min-width: 780px) { body { background:yellow; } } Dari sintak di atas dapat diartikan bahwa background dari body akan berwarna kuning ketika lebar layar minimal 768 pixel (background berwarna kuning ketika lebar layar berukuran > 780 pixel).

---

Konsep Grid Halaman Web

Konsep grid merupakan sebuah trik untuk membagi lebar layar menjadi 12 bagian. Konsep ini sangat membantu untuk membuat tampilan web menjadi lebih mudah. Berikut ini contoh sintak pembagian grid.

Fungsi CSS Responsive

Untuk membuat website menjadi lebih menarik dan memiliki sifat responsive.

---

Kelebihan CSS

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain. Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

---

Poin Kesimpulan CSS

Berikut beberapa poin yang dapat disimpulkan dari artikel ini;

1. CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.
2. Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.
3. Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.

---

Latihan Project CSS

Latihan 1

Mempelajari tentang cara membuat halaman web berubah warna setiap ukuran desktop kita di minimize atau di maximize ataupun diperbesar/diperkecil

Latihan 2

Mempelajari tentang cara membuat sebuah grid dengan berbagai jumlah warna dan ukuran , dan juga membuat grid itu semua berubah bentuk dan merespon terhadap jendela windows.

Latihan 3

Cara membuat text box dengan posisi dibagi tiga secara bersebelahan dan apabila jendela windows di minimize atau diubah ukuran akan mersepon dengan berganti posisi dan berganti warna

Latihan 4

Cara menampilkan foto dengan box bundar dan responsive apabila diubah ukuran jendela windows akan berubah posisi dan ukuran.

Latihan 5

Cara membuat header dan footer dengan menambahkan logo gambar sesuai selera dan membuat side bar dengan pilihan menu serta menambahkan copyright dari halaman website kita.

Latihan 6

Cara membut formulir registrasi pendaftaran dengan data berupa tanggal lahir dan nama .

---

THANK YOU Semoga Bermanfaat :D