Quiz tentang Layout Responsive dengan HTML dan CSS
Quiz
•
Information Technology (IT)
•
Professional Development
•
Practice Problem
•
Easy
Didi Wahyudi
Used 3+ times
FREE Resource
Enhance your content in a minute
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
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

Continue with Google

Continue with Email

Continue with Classlink

Continue with Clever
or continue with

Microsoft
%20(1).png)
Apple
Others
Already have an account?
Similar Resources on Wayground
11 questions
Lesson01 Quiz
Quiz
•
Professional Development
10 questions
Post Test - Good Project Management for Aggressive Organization
Quiz
•
Professional Development
11 questions
TIK KELAS 4
Quiz
•
Professional Development
10 questions
Rabbitleap - Tailwind Review
Quiz
•
Professional Development
10 questions
Intro AI
Quiz
•
Professional Development
15 questions
PENGENALAN FORENSIK DIGITAL 2
Quiz
•
Professional Development
10 questions
Phishing Awareness Quiz
Quiz
•
Professional Development
10 questions
[FE] Ice Breaking - Tailwind CSS: Building Dynamic and User-Enga
Quiz
•
Professional Development
Popular Resources on Wayground
5 questions
This is not a...winter edition (Drawing game)
Quiz
•
1st - 5th Grade
15 questions
4:3 Model Multiplication of Decimals by Whole Numbers
Quiz
•
5th Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
10 questions
The Best Christmas Pageant Ever Chapters 1 & 2
Quiz
•
4th Grade
12 questions
Unit 4 Review Day
Quiz
•
3rd Grade
10 questions
Identify Iconic Christmas Movie Scenes
Interactive video
•
6th - 10th Grade
20 questions
Christmas Trivia
Quiz
•
6th - 8th Grade
18 questions
Kids Christmas Trivia
Quiz
•
KG - 5th Grade
