Kodeloka
  1. Kodeloka
  2. Kelas CSS
  3. Materi

Materi tertulis · 20 modul

Materi CSS

Kelas CSS berbahasa Indonesia: 20 modul tentang selektor dan kaskade, box model, satuan, flexbox, grid, desain responsif, warna dan tipografi, animasi, variabel CSS, dan performa.

Buka kelas interaktif →Mulai dari awal

1 · Fondasi

  1. 1. Cara CSS Bekerja dan Selektor ModernMemahami anatomi aturan CSS, bagaimana peramban mencocokkan selektor dari kanan ke kiri, serta menguasai selektor dasar, atribut, kombinator, pseudo-element, hingga…
  2. 2. Kaskade (Cascade), Spesifisitas, Pewarisan, dan @layerMemahami bagaimana peramban menyelesaikan konflik aturan CSS melalui algoritma Cascade, menghitung bobot spesifisitas (A, B, C), mengatur pewarisan properti, serta…
  3. 3. Box Model, Margin Collapsing, dan Properti Logis (inline & block)Memahami empat lapisan kotak CSS (konten, padding, border, margin), mengapa box-sizing: border-box wajib menjadi standar, cara kerja peleburan margin vertikal (margin…
  4. 4. Satuan Ukuran Modern (rem, ch, dvh) dan Fungsi Matematika (calc, clamp)Memilih satuan CSS yang tepat antara satuan absolut (px) dan relatif (rem, em, ch, %, vw, dvh, svh), serta merancang tipografi dan spasi yang luwes menggunakan fungsi…

2 · Tata Letak

  1. 5. Aliran Dokumen Normal, display, position, dan Stacking Context (z-index)Menguasai perbedaan perilaku kotak block, inline, dan inline-block, lima mode position (static, relative, absolute, fixed, sticky), properti logis inset, serta cara…
  2. 6. Tata Letak Satu Dimensi dengan FlexboxMenguasai model Flexible Box Layout (Flexbox) melalui konsep dua poros (Main Axis dan Cross Axis), perataan dan distribusi ruang, properti gap, perhitungan flex-grow…
  3. 7. Tata Letak Dua Dimensi dengan CSS Grid dan subgridMerancang tata letak dua dimensi (baris dan kolom sekaligus) menggunakan CSS Grid, satuan fraksi (fr), minmax(), grid responsif otomatis (auto-fit vs auto-fill)…
  4. 8. Desain Responsif, Sintaks @media Modern, dan Container Queries (@container)Merancang halaman dan komponen yang beradaptasi secara mulus di segala ukuran layar maupun ukuran wadah induknya menggunakan strategi Mobile-First, sintaks rentang…
  5. 9. Tata Letak Multi-Kolom (columns) dan Stylesheet Cetak (@media print)Membagi aliran teks panjang atau daftar menjadi kolom-kolom koran otomatis dengan CSS Multi-column Layout (columns, break-inside: avoid), serta merancang halaman web…

3 · Warna, Teks & Visual

  1. 10. Sistem Warna Modern (oklch, color-mix) dan Tipografi WebMengelola palet warna yang konsisten secara persepsi manusia dengan oklch() dan color-mix(), memastikan kontras aksesibilitas WCAG, memuat fon web secara efisien dengan…
  2. 11. Efek Visual Lanjutan: filter, backdrop-filter, Gradien Kompleks, dan clip-pathMenciptakan efek visual modern seperti kaca buram (glassmorphism) dengan backdrop-filter, bayangan mengikuti bentuk transparan dengan filter: drop-shadow(), diagram…

4 · Gerak & Interaksi

  1. 12. Transisi, Transformasi, Animasi @keyframes, dan Performa 60fpsMenghidupkan antarmuka secara halus menggunakan properti transform individual (translate, scale, rotate), transition, dan @keyframes, memahami mengapa hanya transform…
  2. 13. Pengalaman Gulir Modern: scroll-snap, overscroll-behavior, dan Scroll-Driven AnimationsMembangun galeri geser (carousel) yang mulus tanpa JavaScript menggunakan CSS Scroll Snap (scroll-snap-type, scroll-snap-align), mencegah kebocoran guliran modal dengan…
  3. 14. Transisi Antar-Tampilan (View Transition API) dan CSS Anchor PositioningMenghaluskan perpindahan antarmuka saat DOM berubah atau saat berpindah halaman menggunakan View Transition API (document.startViewTransition dan @view-transition)…

5 · Komponen & Arsitektur

  1. 15. Custom Properties (Variabel CSS), @property, light-dark(), dan CSS NestingMembangun sistem token desain yang dinamis menggunakan variabel CSS (--* dan var()), mendefinisikan tipe variabel dengan @property, menerapkan tema terang dan gelap…
  2. 16. Menata Formulir dan Tabel Modern (accent-color, appearance, :focus-within, Sticky Table)Menata ulang kontrol formulir secara konsisten dan aksesibel menggunakan accent-color, caret-color, appearance: none, :focus-within, :placeholder-shown, field-sizing…
  3. 17. Arsitektur CSS Skala Aplikasi, Konvensi BEM, dan Debugging di DevToolsMengelola kode CSS pada proyek besar agar tetap rapi dan bebas benturan nama menggunakan konvensi penamaan BEM, struktur lapisan @layer, desain token, serta teknik…
  4. 18. Merancang Sistem Desain (Design System) dan Komponen UI Aksesibel Tanpa FrameworkMenyusun fondasi Design System yang terukur menggunakan skala token tiga tingkat (primitif, semantik, komponen), tipografi dan spasi harmonis, serta pola CSS produksi…

6 · Performa & Proyek

  1. 19. Optimasi Performa Rendering CSS: content-visibility: auto, contain, dan Pencegahan Layout ThrashingMempercepat waktu pemuatan dan perenderan halaman panjang secara drastis menggunakan content-visibility: auto dan contain-intrinsic-size, memahami isolasi perhitungan…
  2. 20. Proyek Akhir Kelas CSS: Antarmuka Dasbor Pemantauan Infrastruktur ResponsifMembangun sistem desain dan halaman dasbor metrik server secara utuh dengan memadukan @layer, token warna oklch() & light-dark(), CSS Grid & subgrid, Flexbox, @container…