HTML dan CSS

Struktur dan gaya untuk web, dengan pratinjau langsung yang memeriksa halamanmu saat kamu membangunnya. 14 modul masing-masing 10 menit, dengan soal yang mengecek jawabanmu di browser.

Mulai jalurnya

Dasar

• 1. Struktur halaman web; tag HTMLGratis
  Apa itu HTML, bagaimana tag dan elemen bersarang, dan kerangka yang menjadi titik awal setiap halaman web.
• 2. Teks, link, gambar, dan listGratis
  Elemen HTML sehari-hari, mencakup paragraf dan penekanan, link (absolut, relatif, di dalam halaman, dan email), gambar dengan teks alt yang baik, serta list berurutan, tidak berurutan, dan bersarang.
• 3. Semantic HTML (header, nav, main, footer)Gratis
  Susun seluruh halaman dengan elemen landmark seperti header, nav, main, article, section, aside, dan footer, supaya browser, screen reader, dan rekan setim memahami layout-nya.
• 4. Formulir dan inputGratis
  Bangun formulir yang mengumpulkan data dengan benar, memakai label, tipe input yang tepat, menu select, radio button dan checkbox, pengelompokan dengan fieldset, serta validasi bawaan.

Menengah

• 5. Dasar CSS: selector dan box modelGratis
  Tulis rule CSS dengan selector tipe, class, id, descendant, dan kelompok, serta kendalikan ukuran dan jarak setiap elemen dengan box model, termasuk padding, border, margin, dan box-sizing.
• 6. Warna, font, dan satuanGratis
  Tentukan warna dalam hex, rgb, dan hsl dengan transparansi, siapkan tipografi yang mudah dibaca dengan font stack, ukuran, dan line height, serta pilih antara px, rem, em, %, dan satuan viewport.
• 7. Cascade, specificity, dan inheritanceGratis
  Pahami bagaimana browser memilih pemenang saat beberapa rule CSS mengatur property yang sama, lewat urutan source, specificity, dan !important, serta property mana yang diwarisi anak dari induknya.
• 8. FlexboxGratis
  Susun item dalam baris atau kolom dengan display flex, ratakan di kedua sumbu dengan justify-content dan align-items, beri jarak dengan gap, biarkan mereka turun baris, dan biarkan item membesar dengan flex.
• 9. CSS GridPro
  Bangun layout dua dimensi dengan display grid, definisikan kolom dengan satuan fr dan repeat, bentangkan item melintasi beberapa sel, beri nama area halaman dengan grid-template-areas, dan buat grid kartu yang menyesuaikan diri.

Lanjutan

• 10. Responsive design dan media queryPro
  Buat satu halaman yang berfungsi di ponsel, tablet, dan laptop dengan meta tag viewport, stylesheet mobile-first, media query min-width, gambar yang fleksibel, dan clamp() untuk huruf yang fleksibel.
• 11. Positioning dan z-indexPro
  Keluarkan elemen dari aliran normal dengan positioning relative, absolute, fixed, dan sticky, tempatkan dengan top, right, bottom, dan left, serta atur elemen mana yang berada di atas dengan z-index.
• 12. Transition dan animasi sederhanaPro
  Haluskan perubahan state dengan transition, geser dan skalakan elemen dengan transform, bangun animasi keyframe, dan hormati pengguna yang memilih gerakan yang dikurangi.

Ahli

• 13. CSS variable dan menata stylesheetPro
  Definisikan design token dengan CSS custom property, pakai dengan var() dan fallback, bangun tema gelap dengan mendefinisikan ulang variabel, dan tata stylesheet menjadi lapisan-lapisan yang tetap mudah dirawat.
• 14. Aksesibilitas dan markup yang bersih serta mudah dirawatPro
  Bangun halaman yang bisa dipakai semua orang dengan tombol dan link sungguhan, kontrol berlabel, teks alt yang bermakna, kerangka heading yang logis, fokus yang terlihat, kontras yang cukup, dan ARIA hanya saat HTML tidak mencukupi.

Proyek jalur

• Proyek HTML & CSS: halaman beranda baru Toko KitaPro
  Tiga tugas bernilai yang membangun halaman beranda baru toko bagian demi bagian. Grid produk yang responsive, formulir newsletter yang bisa diisi semua orang, dan layout halaman mobile-first dengan header, navigasi, sidebar, dan footer.

Modul Pro terbuka dengan sekali bayar Rp 149.000, milikmu selamanya.