Brief-nya
Toko Kita adalah toko online kecil di Indonesia yang menjual kopi, peralatan dapur, alat tulis, perlengkapan rumah, dan beberapa barang elektronik. Halaman berandanya sekarang berasal dari sebuah template, dan itu kelihatan. Di ponsel produk-produknya terjepit menjadi satu kolom teks kecil, formulir newsletter-nya tidak bisa dipakai dengan keyboard atau screen reader, dan separuh halamannya berupa tumpukan <div> yang tidak bisa dipahami siapa pun di tim.
Sebagian besar pelanggan Toko Kita belanja lewat ponsel, jadi halaman barunya harus bekerja di layar sempit lebih dulu, lalu memanfaatkan layar lebar dengan baik. Dan halamannya harus bisa dipakai semua orang: orang yang bernavigasi dengan keyboard, orang yang memakai screen reader, dan orang dengan koneksi lambat. Kamu akan membangunnya dalam tiga bagian. Setiap tugas adalah satu bagian halaman, ditulis dengan elemen yang tepat untuk tugasnya, lalu diberi gaya.
Cara kerja tugas-tugasnya
Setiap tugas punya tab HTML dan tab CSS, dan pratinjau langsung di sebelahnya. Pengecek membaca halamannya seperti cara browser membacanya: melihat elemen mana yang kamu pakai dan bagaimana elemen-elemen itu terhubung (misalnya label ke input-nya), serta gaya yang benar-benar dihitung browser. Kalau tiket memberi nama class, teks, atau nilai yang persis, itulah yang dicek. Teks di halaman ditulis dalam bahasa Inggris persis seperti di tiket. Ada petunjuk kalau kamu buntu, tapi coba setiap tugas tanpa membuka solusinya dulu.
Tugas-tugasnya
| # | Tugas | Keterampilan utama |
|---|---|---|
| 1 | Grid produk yang responsive | Kartu yang semantik, atribut img, CSS grid dengan auto-fill, gaya fokus |
| 2 | Formulir newsletter | Label, tipe input, fieldset dan legend, atribut validasi |
| 3 | Layout halaman | header/nav/main/aside/footer, flexbox, media query mobile-first |
Kalau sudah siap, buka Task 1.