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 'async/await' dengan 'fetch' API di dalam sebuah fungsi 'async'

Menggunakan 'Promise' dengan rantai '.then()' dan '.catch()'

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?

Membuat selector yang lebih spesifik di `custom.css`, contohnya `form.checkout-form #submit-btn { background-color: green; }`

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; }`

Menggunakan selector `#submit-btn { background-color: green !important; }` di `custom.css`

Memuat file `custom.css` miliknya menggunakan JavaScript setelah halaman selesai dimuat

Untuk memastikan website memuat secepat mungkin, terutama pada koneksi lambat, cara paling efektif untuk memuat file CSS adalah:

Menempatkan tag `<link rel="stylesheet">` di dalam tag `<head>`.

Menempatkan tag `<link rel="stylesheet">' tepat sebelum tag penutup '</body>

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:

JPG “dengan kualitas kompresi rendah”

PNG “dengan ukuran resolusi tinggi”

Anda ingin menandai sebuah kutipan (quote) dari sumber lain di dalam paragraf Anda. Tag semantik yang paling tepat untuk kutipan singkat tersebut adalah:

<span> “dengan tanda kutip”

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:

Menggunakan kontras warna yang tinggi dan ruang putih (white space) yang cukup di sekeliling tombol.

Membuat lima tombol 'Beli Sekarang' lainnya dengan warna berbeda di halaman yang sama.

Membuat tombol dengan warna yang sama persis seperti warna latar belakangnya.

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 JavaScript untuk menambahkan event listener 'click' yang mengubah style.backgroundColor.

Menggunakan pseudo-class :active di CSS.

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 SEO (Search Engine Optimization) dan aksesibilitas (Ally) untuk pembaca layar.

Meningkatkan kecepatan download halaman dan keamanan situs.

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?

Menyelaraskan item-item (logo, tautan, tombol) secara horizontal di dalam sebuah navbar.

Membuat tata letak halaman utama dengan header, sidebar, konten utama, dan footer.

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.

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?

justify-content: space-between;

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?

Menambah ukuran tombol, menggunakan warna dengan kontras paling tinggi di halaman tersebut, dan memberinya banyak ruang kosong (whitespace) di sekelilingnya

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

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)?

Menambahkan ikon (misalnya, tanda seru) dan pesan teks yang jelas di bawah kolom input yang salah, seperti "Format email tidak valid"

Membuat *border* yang salah menjadi jauh lebih tebal daripada *border* yang benar

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?

Mengelompokkan pengaturan terkait ke dalam kategori yang lebih kecil dan dapat diperluas, seperti 'Akun', 'Preferensi Aplikasi', dan 'Keamanan'

Mengurutkan semua pilihan pengaturan berdasarkan abjad agar mudah dicari

Memindahkan pengaturan yang paling jarang digunakan ke dalam menu 'Pengaturan Lanjutan'

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?

Kombinasi username atau password tidak cocok. Lupa password?

Login Gagal. Anda telah mencoba 2 dari 3 kali percobaan.

Error #401: Unauthorized Access

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"?

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

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

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 (min-width: 768px) {...}

@media (max-width: 767px) {...}

@media (screen-size: 768px) {...}

@media (orientation: landscape) {...}

@screen (min-width: 768px) {...}

Mengapa memastikan kontras warna yang cukup antara teks dan latar belakang penting?

Untuk meningkatkan keterbacaan bagi semua orang, terutama bagi pengguna dengan gangguan penglihatan.

Agar desain terlihat lebih profesional dan modern.

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?

menyediakan panduan interaktif atau petunjuk langkah-langkah yang mudah dipahami agar pengguna baru tidak bingung saat pertama kali

membiarkan pengguna beradaptasi sendiri karna lama lama pasti terbiasa

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

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?

PNG (Portable Network Graphics)

JPG (Joint Photographic Experts Group)

GIF (Graphics Interchange Format)

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?

Menerapkan Lazy Loading pada gambar

Memperbesar ukuran resolusi semua gambar agar terlihat tajam

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?

Kontras yang cukup antara warna teks dan latar belakang

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)

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 → Cari produk → Tambahkan ke keranjang → Checkout → Pilih metode pembayaran → Selesai

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

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?

Lebih profesional, rapi, dan reusable

Hanya bisa digunakan pada satu elemen saja

Tidak bisa dipakai ulang di halaman lain

Lebih cepat tapi sulit dipelihara

Hanya mendukung satu jenis browser

Dalam konteks branding sebuah perusahaan, apakah fungsi strategis utama dari sebuah color scheme (skema warna) selain hanya untuk tujuan estetika?

membangun identitas visual yang konsisten dan mudah dikenali

memastikan bahwa desain dapat dicetak dengan kualitas tertinggi

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)

Dalam pengembangan web modern, apakah tujuan fundamental dari penggunaan media query dalam CSS?

c. aturan gaya (style rules) yang berbeda berdasarkan karakteristik perangkat pengguna

a. mendeteksi jenis browser yang digunakan oleh pengunjung

b. membuat kueri atau permintaan ke database

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?

Seni dan teknik menata huruf dan teks agar mudah dibaca (legible)

Proses memilih jenis-jenis font

Teknik menata huruf dan teks agar terlihat menarik secara visual

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?

membagi antarmuka pengguna menjadi serangkaian baris dan kolom yang berpotongan

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*)

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

Dalam desain grafis, penggunaan area kosong atau ruang negatif (negative space) secara strategis memiliki tujuan fungsional yang sangat penting. Apakah tujuan tersebut?

meningkatkan keterbacaan, mengurangi kekacauan visual, dan memberikan penekanan pada elemen-elemen penting dengan cara mengisolasinya

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

Dalam konteks CSS untuk desain web responsif, istilah breakpoint merujuk pada...

Nilai ambang batas lebar viewport di mana tata letak (layout) situs web akan berubah atau beradaptasi untuk mengakomodasi ukuran layar yang berbeda

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

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 menutupi seluruh layar (fullscreen) dan berada di atas semua konten lain untuk membuat overlay modal. Kombinasi properti CSS manakah yang paling penting untuk mencapai ini?

position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000;

position: relative; z-index: -1;

display: block; overflow: hidden;

display: inline-block; padding: 100%;

Olimpiade Web Design UBSI FLASH TEGAL 2026

University

•

50 Qs

Similar activities

SAS GANJIL INFORMATIKA KELAS 7 TAHUN 2024-2025

7th Grade - University

•

45 Qs

UH INFORMATIKA BAB 2

10th Grade - University

•

50 Qs

Latihan USP Informatika IX paket 1

9th Grade - University

•

50 Qs

KUIS INFORMATIKA KELAS 7 — SPENTRI

7th Grade - University

•

45 Qs

INFORMATIKA KELAS 7

7th Grade - University

•

45 Qs

Berpikir Komputasional Sehari-hari

10th Grade - University

•

50 Qs

Quiz Microsoft PowerPoint

10th Grade - University

•

50 Qs

Midterm GEE-LIE

University

•

50 Qs

Olimpiade Web Design UBSI FLASH TEGAL 2026

Quiz

•

Information Technology (IT)

•

University

•

Practice Problem

•

Medium

HIMSI Tegal

Used 3+ times

FREE Resource

Penggunaan JavaScript secara ekstensif

Fokus eksklusif pada pengalaman pengguna di ponsel

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

Apple

Others

Already have an account?

Similar Resources on Wayground

50 questions

PSAT TIK VII A 2025

Quiz

•

7th Grade - University

50 questions

Soal Ujian Microsoft Excel

Quiz

•

10th Grade - University

45 questions

INFORMATIKA JARINGAN KOMPUTER DAN INTERNET

Quiz

•

10th Grade - University

50 questions

Pre-test Praktikum Jaringan Telekomunikasi

Quiz

•

University

50 questions

Latihan soal SAS X 2025

Quiz

•

10th Grade - University

50 questions

Quiz Pengetahuan Umum

Quiz

•

10th Grade - University

50 questions

Инф 7 нұсқа

Quiz

•

11th Grade - University

50 questions

Pelatihan Generative AI

Quiz

•

University

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

Discover more resources for Information Technology (IT)

26 questions

Christmas Movie Trivia

Lesson

•

8th Grade - Professio...

7 questions

Different Types of Energy

Interactive video

•

4th Grade - University

20 questions

Slopes and Slope-Intercept Form

Quiz

•

8th Grade - University

7 questions

Force and Motion

Interactive video

•

4th Grade - University

7 questions

Biomolecules (Updated)

Interactive video

•

11th Grade - University

20 questions

Winter/Holiday Trivia

Quiz

•

KG - University

10 questions

WINTER WIN Time - ELA - 12/9/2025

Quiz

•

KG - University

7 questions

Human Impact on Resources

Interactive video

•

4th Grade - University

Olimpiade Web Design UBSI FLASH TEGAL 2026

50 questions

Apa fungsi utama dari CSS dalam desain web?

Apa fungsi html dari elemen 'head' pada HTML?

Responsive design bertujuan untuk……

Konsep dasar UI/UX adalah….

Apa yang dimaksud dengan color scheme dalam desain grafis?

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……

Prinsip "Mobile-First" dalam desain web responsif adalah sebuah pendekatan strategis yang mengutamakan...

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?

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 …

Rancangan yang menunjukkan contoh tampilan sebuah website dengan detail visual seperti warna, font, dan tata letak, namun belum bersifat interaktif, disebut ...

Create a free account and access millions of resources

Similar Resources on Wayground

Popular Resources on Wayground

Discover more resources for Information Technology (IT)