CSS

Kenali CSS sebagai bahasa yang mengatur tampilan halaman web dan lihat perannya pada contoh nyata.

Pahami pembagian tugas antara HTML dan CSS, tiga cara menyisipkan CSS, dan alasan halaman tetap terbaca tanpa CSS.

Ikuti alur browser mengubah HTML dan CSS menjadi tampilan: DOM, CSSOM, pencocokan selector, computed style, hingga paint.

Kuasai anatomi aturan CSS: selector, deklarasi, komentar, whitespace, shorthand, dan perilaku parser terhadap deklarasi tidak valid.

Kenali peran CSS Working Group, status spesifikasi, cara membaca Baseline dan caniuse, serta pola @supports untuk progressive enhancement.

Pahami cara menghubungkan berkas CSS ke HTML melalui tag link, membedah jalur relatif dan absolut, serta memilih antara CSS eksternal, internal, dan inline.

Gunakan browser DevTools untuk membuka panel Elements dan Styles, menginspeksi elemen, menonaktifkan properti, serta mengenal device mode.

Bedah perbedaan declared, computed, dan used value serta cara membaca panel Computed dan urutan aturan di panel Styles.

Terapkan alur debugging CSS yang sistematis: reproduksi, isolasi, hipotesis, dan uji, disertai teknik praktis di panel Styles.

Validasi CSS dengan W3C CSS Validator, kenali peran linter seperti stylelint, dan bangun kebiasaan formatting yang konsisten.

Kenali type selector, cara paling dasar menunjuk elemen melalui nama tag HTML-nya.

Gunakan class untuk mengelompokkan banyak elemen dan ID untuk menunjuk satu elemen khusus, lengkap dengan panduan memilih keduanya.

Menunjuk elemen berdasarkan atribut HTML-nya, dari pencocokan persis hingga pola awalan, akhiran, dan potongan nilai.

Rangkai beberapa selector untuk menunjuk elemen berdasarkan hubungannya di pohon DOM: descendant, child, dan sibling.

Tunjuk elemen berdasarkan state, posisi dalam struktur, dan kondisi form dengan pseudo-class, tanpa menambah class ke HTML.

Hiasi elemen dengan ::before, ::after, dan pseudo-element lain untuk menggayakan bagian elemen yang tak bisa ditunjuk selector biasa.

Tulis beberapa selector dalam satu aturan dengan koma, pahami list yang memafkan dan yang tidak, serta kenali :is() sebagai solusinya.

Hitung specificity tiga komponen (ID, class, type) untuk memahami aturan CSS mana yang menang saat beberapa selector menunjuk elemen yang sama.

Susun selector yang rendah specificity, tahan perubahan HTML, dan tetap mudah dibaca seiring proyek membesar.

Kenali tiga origin gaya pada CSS — user-agent, user, dan author — beserta urutan prioritas yang dipakai browser menyelesaikan konflik di antara mereka.

Pelajari dua penentu berikutnya dalam cascade — specificity dan source order — yang memutuskan pemenang ketika beberapa deklarasi author menunjuk elemen yang sama.

Pahami mekanisme inheritance CSS: properti mana yang mengalir ke turunan, mana yang tidak, dan bagaimana deklarasi langsung mengalahkan nilai warisan.

Gunakan kata kunci CSS initial, inherit, dan unset untuk mengontrol nilai sebuah properti secara eksplisit, termasuk perilaku shorthand all.

Gunakan kata kunci revert dan revert-layer untuk mengembalikan properti ke nilai dari origin sebelumnya atau dari layer sebelumnya.

Kelola prioritas stylesheet secara eksplisit dengan @layer: urutan deklarasi layer, kedudukan gaya unlayered, dan pembalikan urutan oleh !important.

Ikuti prosedur diagnosis konflik gaya CSS: memeriksa origin, specificity, source order, inheritance, dan cascade layers hingga konflik terselesaikan.

Kenali berbagai notasi nilai warna CSS, dari named colors dan hex hingga rgb(), hsl(), dan oklch().

Pelajari cara menuliskan nilai panjang di CSS beserta konversi antara px, em, dan rem.

Bandingkan kelompok satuan absolut (px, pt, cm, in) dengan satuan relatif (em, rem, ch, ex) dan ketahui kapan masing-masing tepat dipakai.

Pahami nilai persentase di CSS beserta rujukan perhitungannya: lebar, tinggi, padding, dan font-size.

Gunakan satuan viewport (vw, vh, vmin, vmax) serta varian dinamisnya (dvh, svh, lvh) untuk mengukur elemen relatif terhadap jendela browser.

Kenali satuan container query (cqw, cqi, cqh, cqb, cqmin, cqmax) yang mengukur elemen relatif terhadap query container terdekatnya.

Kenali function bawaan CSS — dari rgb(), hsl(), dan url() hingga calc(), min(), max(), clamp(), dan var() — serta cara menggabungkannya.

Definisikan variabel CSS sendiri dengan custom properties, lengkap dengan nilai cadangan, pewarisan, dan perilaku saat nilai tidak valid.

Hitung nilai CSS secara langsung dengan calc(), dan kendalikan batas atas-bawahnya menggunakan min(), max(), serta clamp().

Gunakan logical properties seperti margin-inline-start, padding-block, dan inline-size untuk menata elemen berdasarkan alur teks, bukan sisi fisik.

Bedah anatomi kotak CSS — content, padding, border, dan margin — beserta cara menghitung ukuran total elemen di layar.

Pahami perbedaan box-sizing content-box dan border-box serta alasan reset universal border-box menjadi praktik umum.

Pahami kapan margin atas dan bawah bergabung menjadi satu jarak, tiga kasus margin collapse, dan kondisi yang menghentikannya.

Atur ukuran elemen dengan width dan height, pahami perilaku nilai auto, serta kapan deklarasi ukuran diabaikan.

Batasi ukuran elemen dengan min-width, max-width, min-height, dan max-height beserta urutan penerapannya terhadap width dan height.

Atur nasib konten yang meluber dari kotaknya dengan nilai visible, hidden, scroll, auto, dan clip beserta pengaturan per sumbu.

Gunakan DevTools — panel Computed dan diagram box model — serta teknik outline sementara untuk mendiagnosis kotak yang berperilaku tidak sesuai harapan.

Pilih keluarga huruf untuk halaman web dengan font-family, kenali generic families, dan bangun fallback stack yang aman.

Atur ukuran huruf dengan px, rem, em, dan keyword, lalu kontrol ketebalan melalui skala font-weight 100 hingga 900.

Atur jarak antar baris teks dengan line-height, pahami tiga bentuk nilainya, dan pahami mengapa nilai unitless paling disarankan.

Sejajarkan teks secara horizontal dengan text-align, pelajari nilai start dan end, serta text-align-last untuk baris terakhir.

Tambahkan dan hias garis pada teks dengan text-decoration: line, color, style, dan thickness.

Atur jarak antarhuruf dengan letter-spacing dan jarak antarkata dengan word-spacing, termasuk perilaku satuan em-nya.

Bawa font pilihan sendiri ke halaman web dengan @font-face, kenali font-display, dan pelajari strategi pemuatannya.

Kenali variable fonts yang menyimpan banyak bobot dalam satu file, dan kendalikan sumbunya lewat font-weight, font-stretch, serta font-variation-settings.

Kendalikan bagaimana teks melipat dengan white-space, overflow-wrap, word-break, hyphens, dan text-wrap: balance.

Susun tipografi yang menyesuaikan ukuran layar dengan clamp(), skala tipografi berbasis rem, dan penghormatan atas preferensi pengguna.

Kenali berbagai cara menulis nilai warna di CSS: named colors, hex, rgb(), hsl(), hingga oklch().

Berikan warna latar pada elemen dan atur luas area catnya dengan background-clip.

Tempelkan gambar pada latar elemen, lalu atur ukuran, pengulangan, dan posisinya.

Buat latar bertingkat dengan linear-gradient, radial-gradient, dan conic-gradient.

Tumpuk beberapa latar pada satu elemen, pahami urutan layer, dan kendalikan shorthand background.

Atur transparansi seluruh elemen dengan opacity dan bedakan dengan kanal alpha pada warna.

Campur warna elemen dengan latarnya menggunakan mix-blend-mode dan background-blend-mode.

Jaga keterbacaan teks dengan menghitung dan menguji rasio kontras WCAG.

Gambar garis tepi pada elemen dengan border: lebar, gaya, warna, shorthand, dan pengaturan per sisi.

Melengkungkan sudut elemen dengan border-radius: satu nilai, per sudut, lingkaran, pil, hingga elips.

Menggambar garis di luar tepi elemen dengan outline untuk penanda fokus yang ramah aksesibilitas.

Memberi kedalaman pada elemen dengan box-shadow: offset, blur, spread, bayangan inset, dan bayangan bertingkat.

Menambahkan bayangan pada teks dengan text-shadow untuk keterbacaan di latar ramai dan untuk efek gaya.

Menerapkan efek grafis seperti blur, brightness, dan drop-shadow pada elemen dengan properti filter.

Menakar penggunaan efek visual: batas wajar, performa animasi, token konsisten, dan aksesibilitas.

Pahami normal flow, alur tata letak bawaan browser tempat elemen block bertumpuk vertikal dan teks inline mengalir horizontal.

Bandingkan perilaku elemen block dan inline terkait lebar, tinggi, margin, serta cara keduanya menempati baris.

Kenali inline-block, tipe kotak hibrida yang mengikuti aliran teks namun menerima width, height, margin, dan padding secara penuh.

Gunakan display: none untuk menyingkirkan elemen sepenuhnya dari render tree, tanpa jejak ruang, dan pahami dampaknya pada aksesibilitas.

Gunakan visibility: hidden untuk menyembunyikan elemen tanpa menggeser layout, pulihkan anak dengan visible, dan bandingkan tiga cara menyembunyikan.

Kenali replaced elements seperti img dan input yang isinya berasal dari luar dokumen, lengkap dengan ukuran intrinsik dan rasio aspeknya.

Pahami block formatting context, cara membentuknya dengan flow-root, serta kegunaannya menghentikan margin collapse dan menampung float.

Kenali dua nilai position paling dasar, static dan relative, beserta cara properti offset menggeser elemen dari posisi normalnya.

Pahami cara position absolute mengeluarkan elemen dari alur dokumen dan menempatkannya berpatokan pada ancestor positioned terdekat.

Pelajari position fixed yang berpatokan pada viewport, tidak ikut bergulir, beserta jebakan transform pada ancestor.

Gunakan position sticky untuk header yang menempel saat digulir dan pahami syarat inset serta batas parent yang mengikatnya.

Kuasai properti offset top, right, bottom, left, shorthand inset, serta inset logis untuk penempatan elemen positioned.

Pahami stacking context: lingkup urutan menggambar elemen, daftar properti pembentuknya, dan cara men-debug urutan lapisan.

Atur urutan tumpukan elemen dengan z-index: syarat berlakunya, perilaku nilai negatif, dan praktik penataan yang sehat.

Kumpulkan resep positioning yang siap pakai: badge, tooltip, overlay modal, header sticky, dan skip link.

Kenali dua peran utama flexbox: flex container yang mengatur tata letak dan flex items yang tersusun di dalamnya.

Pahami dua sumbu flexbox — main axis dan cross axis — beserta arah keduanya pada baris dan kolom.

Atur arah penyusunan flex items dengan flex-direction: row, row-reverse, column, dan column-reverse.

Distribusikan ruang kosong pada main axis dengan justify-content, dari flex-start hingga space-evenly.

Sejajarkan flex items pada cross axis dengan align-items dan timpa satu item dengan align-self.

Izinkan flex items pindah baris dengan flex-wrap dan pahami perilaku default nowrap yang menyusutkan items.

Kuasai flex-grow, flex-shrink, dan flex-basis untuk mengatur bagaimana flex items mengambil dan melepas ruang di main axis.

Berikan jarak antar flex items dengan row-gap, column-gap, dan shorthand gap — tanpa margin tambahan.

Terapkan pola layout flexbox yang lazim: navbar, perfect centering, media object, kartu dengan footer terdorong, dan sticky footer.

Kenali dua peran utama dalam CSS Grid: container yang membentuk kisi dan item yang mengisinya, termasuk baris implicit yang terbentuk otomatis.

Tentukan struktur kisi secara eksplisit dengan grid-template-columns dan grid-template-rows, serta pahami batas antara track eksplisit dan implicit.

Gunakan satuan fr untuk mendistribusikan ruang bebas grid secara proporsional dan pahami urutan perhitungannya.

Reringkas daftar track dengan repeat() dan kendalikan batas ukuran track dengan minmax(), termasuk pola auto-fill yang responsif.

Tempatkan item secara presisi menggunakan nomor grid line, nama garis, serta grid-template-areas dengan grid-area.

Pahami algoritma penempatan otomatis grid: urutan pengisian sel, grid-auto-flow, serta perbedaan mode sparse dan dense.

Bandingkan kata kunci auto-fill dan auto-fit pada repeat() dan pelajari kapan track kosong dipertahankan atau di-collapse.

Atur perataan item dan track pada dua sumbu dengan justify-items, align-items, justify-content, dan align-content, serta beri jarak lewat gap.

Warisi track grid induk ke dalam grid anak dengan subgrid agar baris antar kartu sejajar sempurna.

Terapkan resep grid yang teruji: holy grail dua belas kolom, galeri kartu responsif, dan dashboard dengan area bernama.

Pahami tiga bahan dasar responsive design — fluid grid, flexible images, dan media queries — serta peran meta viewport.

Rancang gaya dasar untuk ponsel terlebih dahulu, lalu tambahkan enhancement dengan min-width untuk layar yang lebih besar.

Kuasai sintaks @media: media type, media feature, serta penggabungan kondisi dengan and, not, dan koma.

Pilih titik perubahan layout berdasarkan kebutuhan konten, kenali skala umum, dan hindari media query yang berlebihan.

Jaga gambar tetap dalam bingkai dengan max-width dan height auto, lalu kenali srcset, sizes, dan picture untuk kasus lanjutan.

Atur ukuran teks yang menyesuaikan viewport dengan clamp(), jaga skala rem, dan sesuaikan line-height antar ukuran layar.

Ubah navbar desktop menjadi menu ponsel dengan checkbox hack atau scroll horizontal, lengkap dengan trade-off dan catatan aksesibilitasnya.

Susun layout halaman utuh yang responsif: sidebar grid yang berpindah kolom dan card grid auto-fit yang mengatur dirinya sendiri.

Uji halaman responsif secara sistematis: device mode DevTools, mode responsif Firefox, alat online, dan checklist uji manual.

Kenali properti container-type dengan nilai inline-size dan size beserta implikasi containment-nya, plus container-name untuk menandai container tertentu.

Gunakan aturan @container dengan kondisi ukuran untuk mengubah gaya komponen berdasarkan lebar wadahnya, bukan lebar viewport.

Pelajari style query @container style() yang menyesuaikan komponen berdasarkan nilai custom property pada wadahnya, lengkap dengan pola progressive enhancement.

Gunakan enam satuan container query (cqw, cqi, cqh, cqb, cqmin, cqmax) agar ukuran elemen mengikuti container terdekatnya, dengan pemahaman atas fallback viewport-nya.

Bangun komponen yang responsif terhadap ruangnya sendiri dengan membandingkan pendekatan media query dan container query, lalu praktikkan pola kartu portabel.

Rapikan tabel data dengan border-collapse, zebra rows berbasis nth-child, caption, dan header sticky saat tabel digulir.

Atur tampilan input, select, dan textarea dengan padding, border, dan font: inherit agar kontrol form konsisten dengan desain halaman.

Restyle elemen button dengan font: inherit, varian warna lewat class, ukuran tap minimal 44px, dan umpan balik hover yang halus.

Rancang indikator fokus yang terlihat jelas bagi pengguna keyboard dengan :focus, :focus-visible, dan :focus-within beserta outline kustom.

Tampilkan status validasi form dengan :valid, :invalid, :required, dan :disabled, serta kenali :user-valid/:user-invalid yang lebih ramah pengguna.

Warnai kontrol form native seperti checkbox, radio, range, dan progress dengan satu properti accent-color.

Hapus gaya native kontrol form dengan appearance: none, lalu bangun tampilan kustom untuk select dan checkbox tanpa mengabaikan semantik HTML.

Susun form yang accessible dengan label eksplisit, fieldset/legend, aria-describedby untuk hint dan galat, serta target sentuh minimal 44px.

Berikan umpan balik visual saat kursor melayang di atas elemen dan saat elemen ditekan dengan pseudo-class :hover dan :active.

Bedakan :focus dan :focus-visible agar indikator fokus muncul tepat bagi pengguna keyboard tanpa mengganggu pengguna mouse.

Sorot kartu atau panel form secara otomatis ketika salah satu isian di dalamnya menerima fokus dengan :focus-within.

Gaya kontrol form berdasarkan keadaannya: kotak terpilih dengan :checked serta isian terkunci dan aktif dengan :disabled dan :enabled.

Tandai isian wajib dan bermasalah dengan :required, :valid, dan :invalid, lalu perbaiki pengalamannya dengan :user-valid dan :user-invalid.

Sorot bagian halaman yang dituju fragment URL dengan pseudo-class :target, lengkap dengan pola buka dan tutup.

Pilih elemen berdasarkan isi atau saudaranya dengan selector relasional :has(), dari kartu bergambar hingga form dengan isian bermasalah.

Hormati preferensi gerakan pengguna dengan media query prefers-reduced-motion melalui dua pola pembungkusan animasi.

Pelajari empat properti penyusun transisi CSS beserta shorthand transition dan daftar properti yang dapat dianimasikan.

Kenali kurva timing function bawaan, cubic-bezier(), dan steps() untuk mengatur ritme transisi sesuai konteks.

Geser, putar, perbesar, dan miringkan elemen dengan transform, pahami hasil matrix computed, dan urutan fungsi yang menentukan hasil.

Gambarkan perjalanan animasi bertahap dengan @keyframes, mulai dari from/to hingga pemberhentian persen yang lebih kaya.

Kuasai delapan properti longhand animation beserta urutan nilai shorthand dan cara menghentikan serta mengisi animasi.

Pahami alur render browser, pilih properti murah seperti transform dan opacity, dan gunakan will-change secara hemat.

Hormati preferensi gerak pengguna dengan prefers-reduced-motion dan kenali @starting-style untuk kemunculan halus.

Terapkan pola umpan balik interaksi: tombol hover-active-focus, skeleton loading, toast dengan @starting-style, dan form.

Kuasai tiga fungsi transform yang paling sering dipakai: menggeser, memutar, dan menskalakan elemen tanpa mengganggu layout.

Atur titik poros transform dengan transform-origin dan pahami mengapa rotasi yang sama dapat menghasilkan posisi akhir yang berbeda.

Jelajahi keluarga fungsi transform 2D, pelajari cara browser menyerialisasikannya menjadi matrix(), dan buktikan bahwa urutan fungsi mengubah hasil.

Beri kedalaman pada transform 3D dengan properti perspective dan fungsi perspective(), lalu pilih nilai yang pas untuk efek yang diinginkan.

Putar elemen pada sumbu X, Y, dan Z dengan rotateX, rotateY, translateZ, transform-style: preserve-3d, serta backface-visibility untuk kartu flip.

Terapkan transform pada pola antarmuka yang lazim: kartu lift, badge miring, pemusatan absolut, kartu flip, dan lapisan parallax.

Tulis selector anak dan varian di dalam aturan induknya dengan nesting bawaan CSS, lengkap dengan tanda & untuk konteks eksplisit.

Bangun tema terang dan gelap dengan custom properties pada :root, lalu tukar seluruh palet lewat satu atribut data-tema.

Organisasi stylesheet proyek nyata dengan @layer — reset, base, components di dalam layer, utilities unlayered sebagai lapisan penimpa.

Gabungkan :is() untuk pengelompokan ringkas, :where() untuk gaya nol specificity, dan :has() untuk memilih elemen berdasarkan isinya.

Kunci rasio lebar-terhadap-tinggi sebuah kotak dengan properti aspect-ratio sehingga tata letak stabil sebelum konten maupun gambar selesai dimuat.

Kendalikan cara gambar mengisi kotaknya dengan object-fit — fill, cover, contain, none — dan arahkan fokusnya dengan object-position.

Kunci posisi gulir ke titik-titik tertentu dengan scroll-snap-type pada container dan scroll-snap-align pada item, tanpa JavaScript.

Jalankan animasi yang digerakkan posisi gulir dengan animation-timeline: scroll() dan view(), tanpa event scroll dan tanpa JavaScript.

Tempatkan tooltip dan popover pada elemen pemicunya dengan anchor positioning — anchor-name, position-anchor, dan position-area.

Susun stylesheet berlapis dengan pendekatan progressive enhancement — gaya dasar yang selalu aktif, lalu peningkatan di dalam @supports.

Bangun wadah konten terpusat dengan max-width, margin auto, dan padding-inline yang tetap aman di semua ukuran layar.

Susun dua area berdampingan dengan proporsi fr pada grid, lengkap dengan perilaku collapse ke satu kolom di layar sempit.

Bagi halaman menjadi tiga kolom sama lebar dengan repeat(3, 1fr) dan kenali variasi holy grail yang mengapit konten dengan dua aside.

Bangun galeri kartu responsif dengan repeat(auto-fit, minmax(220px, 1fr)) yang menyesuaikan jumlah kolom tanpa media query.

Bangun layout dokumentasi dengan sidebar navigasi tetap lebar 260px dan panel yang menempel (sticky) saat halaman digulir.

Buat header navigasi yang tetap terlihat saat halaman digulir dengan position: sticky dan efek kaca berlapis backdrop-filter.

Dorong footer selalu menempel di dasar viewport dengan flexbox, min-height 100dvh, dan flex: 1 pada area konten utama.

Rakit kerangka dashboard dengan grid areas bernama: header penuh, sidebar 240px, dan area konten yang menggulir sendiri.

Gabungkan seluruh resep section ini menjadi satu halaman utuh: header sticky, wadah terpusat, dua kolom, dan footer di dasar viewport.

Susun stylesheet proyek ke dalam folder per concern, atur urutan import, dan terapkan konvensi nama file yang konsisten.

Beri nama class secara bermakna, konsisten, dan mudah dicari dengan pola kebab-case serta prefiks peran yang jelas.

Susun CSS sebagai kumpulan komponen mandiri yang kohesif, bervariasi lewat modifier, dan dapat dikomposisi ulang.

Terapkan konvensi BEM (Block, Element, Modifier) untuk menamai komponen dengan flat selectors yang bebas konflik.

Kenali utility classes — satu class untuk satu tugas — beserta trade-off-nya dan situasi ketika pendekatan ini paling cocok.

Simpan keputusan desain sebagai design tokens berupa custom properties bernama semantik dan dokumentasinya sebagai kontrak tim.

Atur custom properties sebagai arsitektur berlapis: token global, variabel lokal komponen dengan fallback, dan pendaftaran tipe via @property.

Cegah konflik specificity dengan selector satu class, pemisahan prioritas lewat @layer, dan disiplin menghindari !important.

Rangkum kebiasaan perawatan CSS: checklist kualitas, komentar seksi, review, refactor bertahap, dan penerapan DRY dengan batas yang sehat.

Susun design tokens menjadi sistem tiga tier yang terarah: nilai primitive, alias semantik, dan konsumsi di tingkat komponen.

Bangun palet warna berupa ramp 50-900 untuk warna netral dan aksen, lalu turunkan variasinya dengan color-mix().

Susun skala tipografi berbasis rasio 1.25 sebagai custom properties agar hierarki teks konsisten di seluruh sistem desain.

Terapkan skala spasi berbasis kelipatan 4px sebagai custom properties untuk padding, margin, dan gap yang konsisten.

Rancang hover, focus, active, dan disabled sebagai kontrak visual per state yang konsisten untuk setiap komponen.

Bangun dark mode dengan token semantik, media query prefers-color-scheme, dan fungsi light-dark().

Kenali media query prefers-color-scheme, perilaku default headless, emulasi DevTools, dan kombinasinya dengan override data-tema.

Rangkai pola theme switching lengkap: atribut data-tema, penimpaan token, transisi halus, dan penyimpanan preferensi dengan localStorage.

Tutup section dengan prinsip sistem desain yang dapat dipakai ulang: tokens, komponen inti, dokumentasi, versioning, dan checklist adopsinya.

Kenali ambang kontras WCAG untuk tiap jenis konten — teks normal, teks besar, dan elemen non-teks — serta biasakan memeriksa pasangan warna sejak desain.

Rancang indikator fokus yang tetap terlihat dan berkontras bagi pengguna keyboard, mulai dari outline bawaan hingga cincin kustom.

Pastikan teks tetap terbaca saat pengguna memperbesar: gunakan rem, jaga layout tetap utuh, dan uji zoom 200% sesuai WCAG 1.4.4.

Pahami dampak gerak antarmuka bagi pengguna dengan gangguan vestibular, kaitkan dengan WCAG 2.3.3, dan pastikan animasi dapat dihentikan.

Hormati mode kontras tinggi sistem operasi dengan media query forced-colors, system colors, dan forced-color-adjust.

Ukur area sasaran tombol dan kontrol dengan benar: ambang WCAG 2.5.8 sebesar 24×24px, praktik baik 44×44px, dan peran spacing antartarget.

Susun alur pemeriksaan aksesibilitas halaman: uji keyboard, zoom 200%, emulasi reduced motion dan forced colors di DevTools, serta checklist rutin.

Ikuti perjalanan CSS dari teks yang diunduh hingga menjadi piksel: parsing, CSSOM, style, layout, paint, dan composite.

Kenali dampak CSS yang tidak terpakai dan terapkan strategi audit, pembersihan, serta pengurangan varian gaya.

Atur kapan dan bagaimana file CSS dimuat: link render-blocking, media query pada link, dan preload.

Kelola pemuatan web font dengan font-display, preload, dan penyesuaian ukuran agar teks tampil cepat tanpa lompatan.

Ukur animasi yang berat lalu kendalikan dengan contain, content-visibility, dan will-change secara hemat.

Kenali pola baca-tulis bergantian yang memaksa layout dihitung berulang dan perbaiki dengan pengelompokan lewat rAF.

Baca metrik render halaman dengan panel Performance DevTools dan PerformanceObserver untuk menemukan biaya CSS.

Kuasai panel Styles DevTools: membaca urutan aturan, coretan deklarasi, filter, emulator :hover, dan editor class.

Gunakan panel Computed sebagai alat kerja debugging: membaca nilai akhir, menyaring daftar properti, dan menelusuri sumber nilai.

Periksa tata letak secara visual dengan overlay grid, flexbox, box model, dan scroll-snap di DevTools.

Baca angka specificity di DevTools, buktikan aturan mana yang menang, dan terapkan strategi perbaikan tanpa !important.

Kenali bagaimana browser menandai dan melewati CSS yang tidak valid, serta kesalahan umum yang membuat gaya tidak berlaku.

Gunakan W3C CSS Validator dan stylelint untuk memeriksa stylesheet secara menyeluruh, serta pahami batas pemeriksaannya.

Susun strategi pengujian lintas browser: menentukan target, memeriksa dukungan fitur, dan menyusun pola fallback dengan @supports.

Bangun halaman profil pribadi dengan typography dan warna yang konsisten, box model yang rapi, serta layout responsif.

Bangun website portofolio dengan design tokens, navigasi dan hero, grid proyek, serta desain responsif.

Bangun landing page responsif dengan fondasi visual, flexbox dan grid, navigasi responsif, serta animasi dan polish.

Bangun dashboard admin dengan layout dashboard, sidebar dan navigasi, kartu data dan tabel, serta dashboard responsif.

Bangun component library dengan design tokens, buttons dan inputs, cards dan navigation, serta themes dan documentation.

Menjelajahi dokumentasi CSS resmi di MDN Web Docs sebagai rujukan utama.

Membaca spesifikasi CSS resmi dari CSS Working Group.

Memeriksa dukungan browser melalui caniuse dan data kompatibilitas MDN.

Memvalidasi CSS dengan W3C CSS Validator dan alat bantu lainnya.

Menerapkan WCAG dan pedoman aksesibilitas pada styling.