Quiz tentang Layout Responsive dengan HTML dan CSS

Apa yang dimaksud dengan layout responsive?

• Teknik untuk mengoptimalkan gambar

• Teknik untuk membuat website hanya untuk desktop

• Teknik untuk membuat website terlihat optimal di berbagai perangkat

• Teknik untuk menambahkan animasi pada website

Answer explanation

Layout responsive adalah teknik untuk membuat website terlihat optimal di berbagai perangkat, seperti smartphone, tablet, dan desktop, dengan menyesuaikan elemen desain agar sesuai dengan ukuran layar yang berbeda.

Apa fungsi dari meta tag viewport?

• Mengatur ukuran viewport dan skala halaman web

• Menambahkan gambar ke halaman web

• Mengatur warna latar belakang

• Menambahkan efek transisi

Answer explanation

Meta tag viewport berfungsi untuk mengatur ukuran viewport dan skala halaman web, sehingga tampilan situs web dapat disesuaikan dengan berbagai perangkat, terutama pada perangkat mobile.

Apa yang dilakukan media queries dalam CSS?

• Mengubah warna teks

• Mengatur ukuran font

• Menambahkan gambar ke halaman web

• Menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat

Answer explanation

Media queries dalam CSS digunakan untuk menerapkan gaya yang berbeda berdasarkan karakteristik perangkat, seperti ukuran layar. Ini memungkinkan desain responsif yang menyesuaikan tampilan halaman web di berbagai perangkat.

Apa yang terjadi pada sidebar ketika lebar layar kurang dari atau sama dengan 768px?

• Sidebar ditampilkan dengan lebar 50%

• Sidebar disembunyikan

• Sidebar ditampilkan dengan warna berbeda

• Sidebar ditampilkan di atas konten utama

Answer explanation

Ketika lebar layar kurang dari atau sama dengan 768px, sidebar biasanya disembunyikan untuk memberikan lebih banyak ruang bagi konten utama, sehingga pengguna dapat fokus pada informasi yang lebih penting.

Apa yang digunakan untuk mengatur layout konten dalam baris dan kolom?

• Flexbox

• Position

• Grid layout

• Float

Answer explanation

Grid layout digunakan untuk mengatur konten dalam baris dan kolom secara efisien, memungkinkan desain yang responsif dan terstruktur. Sementara Flexbox lebih fokus pada satu dimensi, Grid layout ideal untuk tata letak dua dimensi.

Apa yang dilakukan kode CSS '.container { display: grid; }'?

• Mengatur elemen dalam grid

• Mengatur elemen dalam flexbox

• Mengatur elemen menjadi inline

• Mengatur elemen menjadi block

Answer explanation

Kode CSS '.container { display: grid; }' mengatur elemen dengan kelas 'container' untuk menggunakan model layout grid, yang memungkinkan penataan elemen dalam baris dan kolom.

Apa yang harus dilakukan untuk mengoptimalkan gambar pada layout responsive?

• Menggunakan gambar berformat JPEG saja

• Menggunakan gambar berformat PNG saja

• Menggunakan gambar dengan ukuran yang sama untuk semua perangkat

• Menggunakan gambar dengan ukuran yang berbeda untuk berbagai perangkat

Answer explanation

Menggunakan gambar dengan ukuran yang berbeda untuk berbagai perangkat memungkinkan gambar ditampilkan dengan kualitas optimal sesuai resolusi layar, meningkatkan kecepatan loading dan pengalaman pengguna pada layout responsive.

Apa yang dimaksud dengan 'flex-wrap' dalam CSS?

• Mengatur warna latar belakang

• Membungkus konten jika tidak muat dalam satu baris

• Mengatur jarak antar elemen

• Mengatur ukuran font

Answer explanation

'Flex-wrap' dalam CSS digunakan untuk membungkus konten ke baris berikutnya jika tidak muat dalam satu baris. Ini memungkinkan elemen fleksibel untuk mengatur tata letak secara responsif.

Apa yang dilakukan kode CSS '@media (max-width: 768px)'?

• Menerapkan gaya untuk layar dengan lebar maksimum 768px

• Mengatur ukuran font untuk semua layar

• Mengubah warna teks untuk semua layar

• Menambahkan gambar untuk layar kecil

Answer explanation

Kode CSS '@media (max-width: 768px)' digunakan untuk menerapkan gaya khusus pada layar yang memiliki lebar maksimum 768px, sehingga memungkinkan desain responsif yang lebih baik pada perangkat kecil.

Apa yang harus dilakukan untuk menguji layout responsive?

• Uji layout di berbagai browser dan perangkat

• Uji layout hanya di smartphone

• Uji layout hanya di satu browser

• Uji layout hanya di desktop

Answer explanation

Untuk menguji layout responsive, penting untuk melakukan pengujian di berbagai browser dan perangkat. Ini memastikan tampilan yang konsisten dan fungsional di semua platform, bukan hanya di satu jenis perangkat atau browser.