Quiz tentang Layout Responsive dengan HTML dan CSS

Quiz tentang Layout Responsive dengan HTML dan CSS

Professional Development

10 Qs

quiz-placeholder

Similar activities

QUIZ IT HSSE MONTHLY MEETING - EDISI KEMERDEKAAN

QUIZ IT HSSE MONTHLY MEETING - EDISI KEMERDEKAAN

Professional Development

11 Qs

OPTIK SMP 2024 REDTOP JAKARTA

OPTIK SMP 2024 REDTOP JAKARTA

Professional Development

10 Qs

Uji Kompetensi Program Gemini Academy 2024

Uji Kompetensi Program Gemini Academy 2024

Professional Development

10 Qs

HTML Fundamentals Assessment

HTML Fundamentals Assessment

Professional Development

10 Qs

Pre Test Workshop Risiko dan Aset ISO 27001:2022

Pre Test Workshop Risiko dan Aset ISO 27001:2022

Professional Development

10 Qs

DIGITALISASI PEMBELAJARAN

DIGITALISASI PEMBELAJARAN

Professional Development

10 Qs

Internal Order Perta Arun Gas

Internal Order Perta Arun Gas

Professional Development

15 Qs

Internalisasi All-Indonesia

Internalisasi All-Indonesia

Professional Development

10 Qs

Quiz tentang Layout Responsive dengan HTML dan CSS

Quiz tentang Layout Responsive dengan HTML dan CSS

Assessment

Quiz

Information Technology (IT)

Professional Development

Practice Problem

Easy

Created by

Didi Wahyudi

Used 3+ times

FREE Resource

AI

Enhance your content in a minute

Add similar questions
Adjust reading levels
Convert to real-world scenario
Translate activity
More...

10 questions

Show all answers

1.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

2.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

3.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

4.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Media Image

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.

5.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

6.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

7.

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

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.

Create a free account and access millions of resources

Create resources

Host any resource

Get auto-graded reports

Google

Continue with Google

Email

Continue with Email

Classlink

Continue with Classlink

Clever

Continue with Clever

or continue with

Microsoft

Microsoft

Apple

Apple

Others

Others

Already have an account?