NEW
Font size
WorksheetsOlimpiade Web Design UBSI FLASH TEGAL 2026
Total questions: 50
Worksheet time: 1hrs 15mins
Apa fungsi utama dari CSS dalam desain web?
Membuat struktur halaman
Menambah interaktivitas
Menyimpan data pengguna
Mengatur tampilan dan gaya halaman
Memproses data pada server
Apa fungsi html dari elemen 'head' pada HTML?
Mengatur tata letak kolom
Sebagai kepala atau judul sebuah halaman web
Menampilkan informasi kontak
Mengatur tata letak kolom
Menyimpan konten utama
Responsive design bertujuan untuk……
Meningkatkan kecepatan website
Membuat desain lebih menarik secara estetika
Menambah keamanan website
Mengurangi ukuran file gambar
Membuat desain dapat diakses dengan baik di berbagai perangkat
Konsep dasar UI/UX adalah….
Hanya estetika visual sebuah website
Tampilan dan fungsi sebuah produk digital
Penyusunan data dalam server
Kombinasi warna dan ukuran font
Desain hardware komputer
Apa yang dimaksud dengan color scheme dalam desain grafis?
Pemilihan elemen desain yang konsisten
Kombinasi warna yang digunakan dalam desain
Gaya tipografi dalam desain
Jenis file yang digunakan untuk gambar
Struktur tata letak dalam desain
Dalam merancang sebuah website, pemilihan jenis huruf, ukuran, dan warna yang tepat akan mempengaruhi kejelasan serta kepuasan pengguna. Hal ini disebut typography. Berikut ini adalah elemen-elemen yang termasuk ke dalam typography, kecuali……
Typeface
Font size
Line spacing
Color
Database
Prinsip "Mobile-First" dalam desain web responsif adalah sebuah pendekatan strategis yang mengutamakan...
Pengembangan versi desktop terlebih dahulu secara lengkap
Perancangan dan pembangunan pengalaman untuk layar terkecil (ponsel)
Pembuatan dua versi situs web yang terpisah
Penggunaan JavaScript secara ekstensif
Fokus eksklusif pada pengalaman pengguna di ponsel
Dalam perancangan UX Design terdapat metode Design Thinking yang digunakan sebagai cara pemecahan masalah, baik secara kognitif, kreatif, maupun praktis. Metode ini memiliki 5 tahapan. Manakah di bawah ini yang merupakan salah satu tahapan Design Thinking?
Debugging
Empathize
Compiling
Deploying
Hosting
Ada banyak tools yang biasa digunakan untuk membuat prototype dalam perancangan UI/UX, misalnya untuk merancang tampilan dan alur interaksi sebuah aplikasi atau website. Berikut ini adalah contoh tools yang umum digunakan, kecuali …
Figma
Adobe XD
Sketch
InVision
MySQL
Rancangan yang menunjukkan contoh tampilan sebuah website dengan detail visual seperti warna, font, dan tata letak, namun belum bersifat interaktif, disebut ...
Wireframe
Mockup
Prototype
Flowchart
Sitemap
Pak roro sedang membangun fitur galeri gambar. Ketika pengguna mengklik sebuah thumbnail, gambar versi resolusi penuh harus ditampilkan. Masalahnya, gambar-gambar ini berukuran besar dan butuh waktu untuk diunduh dari server. Selama proses pengunduhan, antarmuka pengguna (UI) terasa macet dan tidak responsif. Bagaimana cara memuat gambar tersebut dari API tanpa memblokir UI?
Menggunakan 'Promise' dengan rantai '.then()' dan '.catch()'
Menggunakan 'async/await' dengan 'fetch' API di dalam sebuah fungsi 'async'
Membuat semua gambar resolusi penuh di-load di awal dengan 'display: none;' dan menampilkannya saat diklik
Menggunakan 'XMLHttpRequest' dalam mode sinkron ('async: false') agar lebih mudah dipahami alurnya
Menyembunyikan thumbnail, menampilkan ikon loading, lalu membuat elemen '' baru dengan 'src' gambar resolusi penuh
Agus adalah Seorang developer junior, ia sedang mengerjakan halaman checkout sebuah e-commerce. Ia ingin mengubah warna tombol 'Bayar Sekarang' yang memiliki id='submit-btn' dan class='btn-primary'. Namun, style yang ia tulis di file 'custom.css' tidak berhasil diterapkan karena tertimpa oleh style dari framework CSS yang digunakan. Manakah cara yang paling tepat dan profesional bagi Agus untuk memastikan stylenya diterapkan tanpa menyebabkan masalah di kemudian hari?
Menambahkan style langsung di dalam tag HTML-nya: '<button id="submit-btn" style="background-color: green">'
Mengubah nama kelas tombol menjadi unik dan menargetkannya, misal `.btn bayar-custom { background-color: green; }`
Membuat selector yang lebih spesifik di `custom.css`, contohnya `form.checkout-form #submit-btn { background-color: green; }`
Menggunakan selector `#submit-btn { background-color: green !important; }` di `custom.css`
Memuat file `custom.css` miliknya menggunakan JavaScript setelah halaman selesai dimuat
Anda memiliki sebuah daftar navigasi. Elemen HTML yang secara semantik paling tepat untuk membungkus daftar link tersebut adalah:
<div>
<ul>
<section>
<nav>
<span>
Untuk memastikan website memuat secepat mungkin, terutama pada koneksi lambat, cara paling efektif untuk memuat file CSS adalah:
Menempatkan tag `<link rel="stylesheet">' tepat sebelum tag penutup '</body>
Menempatkan tag `<link rel="stylesheet">` di dalam tag `<head>`.
Menggunakan CSS inline dengan atribut `style` pada setiap elemen.
Mengimpor semua file CSS menggunakan `@import` di dalam file CSS utama.
Memuat file CSS secara dinamis menggunakan JavaScript setelah halaman selesai.
Anda perlu menampilkan ikon sederhana yang tajam di semua resolusi layar (termasuk Retina) dan dapat diubah warninya dengan CSS. Format gambar yang paling efektif untuk ini adalah:
GIF
JPG “dengan kualitas kompresi rendah”
Webp
SVG
PNG “dengan ukuran resolusi tinggi”
Anda sedang membuat halaman blog. Setiap postingan blog di halaman utama berisi judul, ringkasan, dan link 'Baca Selengkapnya'. Tag HTML mana yang paling tepat untuk membungkus setiap unit postingan blog secara individual?
<p>
<div>
<li>
<article>
<section>
Di bagian bawah halaman web Anda, terdapat informasi hak cipta, link ke kebijakan privasi, dan beberapa ikon media sosial. Pembungkus semantik yang paling sesuai untuk area ini adalah:
<aside>
<address>
<section id="bottom">
<div class="footer">
<footer>
Anda ingin menandai sebuah kutipan (quote) dari sumber lain di dalam paragraf Anda. Tag semantik yang paling tepat untuk kutipan singkat tersebut adalah:
<q>
<blockqoute>
<span> “dengan tanda kutip”
<em>
<i>
Di samping artikel utama Anda, terdapat sebuah kotak yang menampilkan 'Artikel Terkait' dan 'Iklan'. Pembungkus semantik yang paling cocok untuk seluruh area sidebar ini adalah:
<section>
<footer>
<div>
<nav>
<aside>
Anda ingin memandu perhatian pengguna untuk melakukan tindakan paling penting di halaman, yaitu menekan tombol 'Beli Sekarang'. Prinsip desain yang paling efektif untuk membuat tombol tersebut menonjol adalah:
Membuat lima tombol 'Beli Sekarang' lainnya dengan warna berbeda di halaman yang sama.
Membuat tombol dengan warna yang sama persis seperti warna latar belakangnya.
Menggunakan kontras warna yang tinggi dan ruang putih (white space) yang cukup di sekeliling tombol.
Menempatkan tombol di bagian paling bawah halaman (footer).
Menggunakan ukuran font yang sangat kecil di dalam tombol.
Anda ingin mengubah warna latar belakang sebuah tombol menjadi merah secara langsung menggunakan JavaScript saat tombol tersebut diklik. Anda ingin melakukannya tanpa harus mendefinisikan class CSS baru di stylesheet Anda dan tanpa menulis kode JavaScript di dalam tag HTML. Manakah pendekatan yang paling tepat untuk tugas spesifik ini?
Menggunakan pseudo-class :active di CSS.
Menggunakan JavaScript untuk menambahkan event listener 'click' yang mengubah style.backgroundColor.
Menggunakan JavaScript untuk menambahkan event listener 'click' yang menambahkan sebuah class CSS (misal .clicked), di mana class tersebut memiliki background-color: red.;
Menggunakan pseudo-class :focus di CSS.
Menggunakan atribut onclick="this.style.backgroundColor='red'" langsung di HTML.
Selain membuat kode lebih mudah dibaca, apa dua manfaat utama menggunakan tag HTML semantik seperti <header>, <nav> dan <article>
?
Meningkatkan kecepatan download halaman dan keamanan situs.
Meningkatkan SEO (Search Engine Optimization) dan aksesibilitas (Ally) untuk pembaca layar.
Mengurangi jumlah file CSS yang dibutuhkan dan memungkinkan penggunaan JavaScript yang lebih canggih.
Mengaktifkan fitur browser khusus dan meningkatkan kompatibilitas dengan browser lama.
Secara otomatis memvalidasi HTML dan membuat halaman render lebih cepat.
Skenario manakah yang paling tepat untuk menggunakan CSS Flexbox daripada CSS Grid?
Membuat tata letak halaman utama dengan header, sidebar, konten utama, dan footer.
Menyelaraskan item-item (logo, tautan, tombol) secara horizontal di dalam sebuah navbar.
Membuat galeri gambar 3x3 yang responsif.
Membuat formulir pendaftaran yang kompleks dengan label dan input yang tersusun dalam kolom.
Memusatkan (centering) sebuah kotak tunggal di tengah-tengah halaman.
Anda perlu membuat tata letak untuk galeri foto yang harus menampilkan item dalam grid yang rapi (misalnya, 3 kolom dan beberapa baris). Manakah teknologi tata letak CSS yang paling cocok dan efisien untuk tugas ini?
CSS Grid
CSS Flexbox
CSS Float
CSS position: absolute
HTML <table>
Dalam sebuah kontainer Flexbox (display: flex;), Anda ingin semua item memiliki tinggi yang sama dan meregang untuk mengisi tinggi kontainer. Properti apa yang harus digunakan?
align-items: stretch;
align-items: baseline;
justify-content: space-between;
flex-direction: column;
align-content: stretch;
Sebuah halaman pendaftaran webinar memiliki tingkat konversi yang sangat rendah. Analisis *heatmap* menunjukkan bahwa pengguna tidak mengklik tombol utama "Daftar Sekarang!". Tombol tersebut terletak di bagian bawah halaman setelah daftar fitur, testimoni, dan biografi pembicara yang panjang. Apa perubahan desain yang paling efektif untuk membuat tombol tersebut menjadi pusat perhatian utama?
Menambahkan ikon panah besar yang berkedip di samping tombol untuk menunjuk ke arahnya
Menempatkan tombol di dalam *header* yang 'lengket' (*sticky header*) sehingga selalu terlihat di bagian atas layar
Membuat tombol beranimasi secara terus-menerus agar menarik perhatian
Mengulang tombol yang sama di beberapa bagian halaman, misalnya setelah setiap bagian testimoni dan fitur
Menambah ukuran tombol, menggunakan warna dengan kontras paling tinggi di halaman tersebut, dan memberinya banyak ruang kosong (whitespace) di sekelilingnya
Seorang desainer merancang formulir di mana *border* kolom input akan berubah menjadi merah jika ada kesalahan validasi. Pengujian menunjukkan bahwa pengguna yang buta warna merah-hijau kesulitan membedakan antara kolom yang valid dan yang salah. Apakah solusi yang paling inklusif dan sesuai standar aksesibilitas (WCAG)?
Membuat *border* yang salah menjadi jauh lebih tebal daripada *border* yang benar
Menambahkan ikon (misalnya, tanda seru) dan pesan teks yang jelas di bawah kolom input yang salah, seperti "Format email tidak valid"
Mengganti warna merah dengan warna biru terang yang lebih mudah dilihat
Memutar suara 'bip' setiap kali pengguna membuat kesalahan
Menampilkan satu pesan *pop-up* di akhir yang berisi daftar semua kesalahan setelah pengguna menekan tombol 'Kirim'
Sebuah aplikasi *e-commerce* yang kompleks memiliki menu pengaturan dengan lebih dari 30 pilihan yang ditampilkan dalam satu daftar panjang, seperti 'Profil', 'Alamat', 'Keamanan', 'Notifikasi', 'Bahasa', 'Tema', dan lainnya. Pengguna sering mengeluh bahwa mereka kesulitan menemukan pengaturan yang mereka cari. Berdasarkan Hukum Hick (Hick's Law), strategi desain manakah yang paling efektif untuk mengatasi masalah ini?
Mengurutkan semua pilihan pengaturan berdasarkan abjad agar mudah dicari
Memindahkan pengaturan yang paling jarang digunakan ke dalam menu 'Pengaturan Lanjutan'
Mengelompokkan pengaturan terkait ke dalam kategori yang lebih kecil dan dapat diperluas, seperti 'Akun', 'Preferensi Aplikasi', dan 'Keamanan'
Menambahkan fungsi pencarian di bagian atas halaman pengaturan
Menggunakan ikon yang berbeda untuk setiap pilihan pengaturan agar lebih mudah dibedakan secara visual
Pengguna mencoba masuk ke akunnya tetapi salah memasukkan password. Aplikasi menampilkan pesan error berwarna merah di atas formulir yang bertuliskan: "Terjadi Kesalahan. Silakan coba lagi." Pengguna menjadi frustrasi karena tidak tahu persis apa yang salah. Pesan error manakah yang paling ideal dari segi UX dan keamanan?
Login Gagal. Anda telah mencoba 2 dari 3 kali percobaan.
Error #401: Unauthorized Access
Kombinasi username atau password tidak cocok. Lupa password?
Username 'Budi' terdaftar, tetapi password yang Anda masukkan tidak cocok.
Password Salah. Silakan coba lagi.
Sebuah perusahaan sedang merancang ulang situs web berita besar mereka. Tim teknis berdebat antara pendekatan "Desktop-First" (merancang situs versi desktop yang kaya fitur, lalu menyederhanakannya untuk mobile) atau "Mobile-First" (merancang versi mobile yang esensial, lalu meningkatkannya untuk desktop). Apa argumen strategis terkuat yang mendukung pendekatan "Mobile-First"?
Pengguna desktop biasanya menghasilkan lebih banyak pendapatan, jadi pengalaman mereka harus didahulukan
Hover state dan interaksi kompleks lainnya hanya ada di desktop, jadi harus dirancang dari awal
Developer lebih mudah bekerja dari layar besar ke kecil karena lebih mudah menghapus elemen daripada menambahkannya
Mendesain untuk layar kecil terlebih dahulu lebih cepat dan lebih murah
Pendekatan ini memaksa tim untuk fokus pada konten dan fitur yang paling penting, yang menghasilkan produk inti yang lebih kuat dan tidak berantakan di semua platform
Anda ingin menerapkan gaya khusus hanya untuk layar tablet dan yang lebih besar (lebar 768px ke atas) menggunakan pendekatan mobile-first. Manakah media query yang paling tepat?
@media (max-width: 767px) {...}
@media (min-width: 768px) {...}
@media (screen-size: 768px) {...}
@media (orientation: landscape) {...}
@screen (min-width: 768px) {...}
Mengapa memastikan kontras warna yang cukup antara teks dan latar belakang penting?
Agar desain terlihat lebih profesional dan modern.
Untuk meningkatkan keterbacaan bagi semua orang, terutama bagi pengguna dengan gangguan penglihatan.
Agar sesuai dengan pedoman merek perusahaan.
Untuk membuat halaman dimuat lebih cepat.
Untuk membantu meningkatkan peringkat SEO secara langsung.
Tino membuat sebuah aplikasi dengan tujuan memudahkan aktivitas penggunanya. Namun, masih banyak orang yang kurang paham cara menggunakan aplikasi digital tersebut. Apa yang sebaiknya dilakukan Tino agar aplikasinya tetap mudah digunakan oleh semua orang?
membiarkan pengguna beradaptasi sendiri karna lama lama pasti terbiasa
menyediakan panduan interaktif atau petunjuk langkah-langkah yang mudah dipahami agar pengguna baru tidak bingung saat pertama kali
menambahkan banyak fitur baru supaya terlihat lebih canggih meskipun bisa membuat pengguna semakin sulit memahami
membatasi aplikasi hanya untuk kalangan yang sudah terbiasa menggunakan teknologi
menghapus sebagian besar fitur penting agar aplikasi terlihat lebih sederhana, walaupun fungsi utama jadi hilang
Eta ingin melakukan salah satu tahap eksperimen user research kepada Zeyi. Ia meminta Zeyi untuk mencoba prototype yang sudah ia buat secara langsung. Tujuannya adalah untuk mengamati interaksi Zeyi dan melihat apakah alur desain sudah sesuai dengan kebutuhannya atau belum. Dari cerita tersebut, dapat disimpulkan Eta memakai metode...
Card sorting
Prototype testing
Eye-Tracking
A/B Testing
User Catching
Anda ditugaskan untuk menampilkan logo perusahaan pada sebuah situs web. Logo ini harus terlihat sangat tajam dan tidak pecah saat diperbesar di berbagai resolusi layar, mulai dari ponsel hingga monitor 4K (Retina Display). Format gambar manakah yang secara fundamental paling superior untuk kebutuhan ini?
SVG (Scalable Vector Graphics)
PNG (Portable Network Graphics)
JPG (Joint Photographic Experts Group)
WebP
GIF (Graphics Interchange Format)
Sebuah tombol didesain dengan efek bayangan (*drop shadow*) dan sedikit gradien, membuatnya terlihat seolah-olah menonjol dari halaman. Prinsip desain ini, yang memberikan petunjuk visual bahwa sebuah elemen dapat diklik, dikenal sebagai...
Affordance (Afordansi)
Repetition (Repetisi)
Symmetry (Simetri)
White Space (Ruang Kosong)
Hierarchy (Hierarki)
Pada sebuah halaman artikel yang sangat panjang dengan banyak gambar, teknik optimasi apa yang paling efektif untuk mempercepat waktu muat awal halaman tanpa mengorbankan kualitas gambar?
Memperbesar ukuran resolusi semua gambar agar terlihat tajam
Menerapkan Lazy Loading pada gambar
Menghapus semua atribut `alt` dari tag `<img>`
Menempatkan semua gambar di bagian paling atas dokumen HTML
Menggunakan format gambar `.BMP` untuk semua gambar
Manakah dari faktor tipografi berikut yang memiliki dampak paling signifikan terhadap keterbacaan (readability) sebuah paragraf panjang di layar digital?
Menggunakan jenis font *serif* yang sangat dekoratif
Membuat ukuran baris teks (line length) menjadi sangat lebar, selebar layar
Menggunakan perataan teks 'Justify' (rata kanan-kiri)
Kontras yang cukup antara warna teks dan latar belakang
Mengatur spasi antar huruf (letter-spacing) menjadi sangat rapat
Bayangkan kamu sedang merancang User Flow untuk sebuah aplikasi belanja online. User Flow ini harus bisa menggambarkan langkah-langkah yang dilakukan pengguna mulai dari membuka aplikasi hingga selesai melakukan transaksi. Dari gambaran berikut, manakah yang paling tepat menunjukkan alur User Flow aplikasi belanja online?
Buka aplikasi → Pilih tema warna → Ubah font → Simpan → Selesai
Buka aplikasi → Edit kode program → Jalankan server → Upload database → Selesai
Buka aplikasi → Desain logo → Export file → Upload ke media sosial → Selesai
Buka aplikasi → Masuk ke hosting → Hubungkan domain → Konfigurasi server → Selesai
Buka aplikasi → Cari produk → Tambahkan ke keranjang → Checkout → Pilih metode pembayaran → Selesai
Ada beberapa metode yang digunakan untuk menyisipkan CSS ke dalam suatu kode, salah satunya adalah metode eksternal CSS. Dengan menggunakan metode ini, apa kelebihannya dibandingkan metode lain?
Hanya bisa digunakan pada satu elemen saja
Tidak bisa dipakai ulang di halaman lain
Lebih profesional, rapi, dan reusable
Lebih cepat tapi sulit dipelihara
Hanya mendukung satu jenis browser
Azka ingin membuat web yang menceritakan tentang sejarah kuno dan cerita tentang peradaban lama, tapi ia merasa banyak orang yg mudah bosan dengan membaca hal seperti itu. Maka ia membuat animasi di web nya yang membuat informasi yang ingin di sampaikan dalam web tersebut tersampaikan secara naratif, tentu user juga lebih mudah mengerti data yang di sampaikan. Cara Azka menangani problem tadi menggunakan salah satu tren UI/UX yang disebut?
Emotional design
Motion design
Scrollytelling
Data storytelling
Personalisasi
Dalam konteks branding sebuah perusahaan, apakah fungsi strategis utama dari sebuah color scheme (skema warna) selain hanya untuk tujuan estetika?
memastikan bahwa desain dapat dicetak dengan kualitas tertinggi
membangun identitas visual yang konsisten dan mudah dikenali
mematuhi standar aksesibilitas web (WCAG)
Lebih cepat tapi sulit dipelihara
Hanya mendukung satu jenis browser
Seorang desainer membuat poster dengan menempatkan sebuah gambar besar di sisi kiri dan blok teks yang lebih kecil di sisi kanan untuk menyeimbangkan "berat" visual dari kedua elemen tersebut. Prinsip dasar desain grafis yang sedang diterapkan secara dominan di sini adalah...
Keseimbangan Asimetris (Asymmetrical Balance)
Ritme (Rhythm)
Kontras (Contrast)
Hierarki (Hierarchy)
Proporsi (Proportion)
Dalam pengembangan web modern, apakah tujuan fundamental dari penggunaan media query dalam CSS?
a. mendeteksi jenis browser yang digunakan oleh pengunjung
b. membuat kueri atau permintaan ke database
c. aturan gaya (style rules) yang berbeda berdasarkan karakteristik perangkat pengguna
d. mengurangi kualitas gambar secara otomatis pada koneksi internet yang lambat
e. menganalisis metadata dari file media dan menampilkan informasi
Manakah pernyataan yang paling akurat dalam mendefinisikan typography sebagai sebuah disiplin dalam desain grafis?
Proses memilih jenis-jenis font
Teknik menata huruf dan teks agar terlihat menarik secara visual
Seni dan teknik menata huruf dan teks agar mudah dibaca (legible)
Kemampuan teknis untuk membuat atau memodifikasi file font digital
Studi tentang sejarah dan evolusi bentuk huruf
Seorang developer ingin memastikan bahwa tata letak halaman webnya tetap konsisten, rapi, dan terstruktur di berbagai ukuran layar. Ia memutuskan untuk menggunakan *Grid System* (misalnya, grid 12 kolom). Apakah fungsi fundamental dari *Grid System* dalam konteks ini?
secara otomatis mengompres ukuran gambar agar situs web memuat lebih cepat di koneksi internet yang lambat
memastikan bahwa situs web dapat diakses oleh pengguna dengan teknologi bantu seperti pembaca layar (*screen reader*)
membagi antarmuka pengguna menjadi serangkaian baris dan kolom yang berpotongan
mendefinisikan skema warna utama dan tipografi yang akan digunakan secara seragam di seluruh halaman situs web
membuat animasi dan transisi yang mulus saat pengguna berinteraksi dengan elemen-elemen di halaman
Manakah dari konsep berikut yang merupakan pilar fundamental dari *Responsive Web Design* (Desain Web Responsif)?
Fluid Grids, Flexible Images, dan Media Queries
Lazy Loading
Fixed-Width Layouts
Progressive Web Apps (PWA)
Server-Side Rendering (SSR)
Dalam desain grafis, penggunaan area kosong atau ruang negatif (negative space) secara strategis memiliki tujuan fungsional yang sangat penting. Apakah tujuan tersebut?
memberikan area bagi pengiklan untuk menempatkan banner tanpa mengganggu konten utama
mengurangi ukuran file dari desain akhir agar lebih cepat diunduh
menghemat tinta saat proses pencetakan desain dalam jumlah besar
memenuhi persyaratan rasio aspek standar untuk berbagai platform media sosial
meningkatkan keterbacaan, mengurangi kekacauan visual, dan memberikan penekanan pada elemen-elemen penting dengan cara mengisolasinya
Dalam konteks CSS untuk desain web responsif, istilah breakpoint merujuk pada...
Titik di mana kode JavaScript berhenti dieksekusi karena terjadi kesalahan (error) pada halaman
Versi browser tertua yang masih didukung oleh kode CSS yang digunakan, di mana fitur-fitur baru mungkin 'rusak' atau tidak berfungsi
Nilai ambang batas lebar viewport di mana tata letak (layout) situs web akan berubah atau beradaptasi untuk mengakomodasi ukuran layar yang berbeda
Koneksi internet minimum yang diperlukan agar semua elemen interaktif di situs web dapat berfungsi dengan lancar
Batas maksimum jumlah baris kode CSS yang direkomendasikan dalam satu file stylesheet untuk menjaga performa
Anda ingin sebuah elemen
position: relative; z-index: -1;
display: block; overflow: hidden;
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000;
display: inline-block; padding: 100%;
float: left; width: 100%;
