CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan halaman web: warna, ukuran, tata letak, tipografi, hingga animasi. Pada Course ini kita akan mempelajari CSS secara bertahap, dimulai dari sintaks paling dasar, menuju box model dan layout modern dengan Flexbox serta Grid, hingga tujuh proyek nyata yang siap Anda jadikan portofolio.

Setiap chapter dilengkapi contoh kode dan demo interaktif yang dapat dijalankan langsung di halaman. Seluruh materi mengikuti praktik modern yang direkomendasikan dokumentasi resmi MDN dan status Baseline web platform, sehingga yang Anda pelajari langsung siap dipakai di proyek sungguhan.

# Pengenalan CSS

Apa itu CSS, cara kerjanya, hubungannya dengan HTML, dan halaman pertama Anda.

Buka → # Persiapan Lingkungan

Siapkan editor, browser, dan struktur folder untuk bekerja dengan CSS secara nyaman.

Buka → # Sintaks Dasar

Selector, property, value, declaration, dan aturan penulisan CSS yang benar.

Buka → # Selectors

Semua jenis selector CSS: element, class, id, attribute, hingga combinator.

Buka → # Cascade, Inheritance, dan Specificity

Bagaimana browser memilih aturan mana yang menang ketika ada benturan gaya.

Buka → # Values, Units, dan Sizing

Satuan pengukuran CSS dan strategi menentukan ukuran elemen secara responsif.

Buka → # Box Model

Content, padding, border, margin, dan cara browser menghitung ukuran kotak elemen.

Buka → # Warna, Background, dan Borders

Format warna, gradien, background image, border, outline, dan kontras.

Buka → # Typography

Font, ukuran, spasi, dan teknik tipografi agar teks nyaman dibaca.

Buka → # Display dan Normal Flow

Bagaimana browser menyusun elemen secara default dan opsi display yang tersedia.

Buka → # Positioning

position: static hingga sticky, inset, z-index, dan stacking context.

Buka → # Flexbox

Layout satu dimensi: flex container, alignment, flex-grow/shrink, hingga pola navigasi dan card.

Buka → # CSS Grid

Layout dua dimensi: grid template, fr unit, areas, hingga layout dashboard.

Buka → # Responsive Web Design

Mobile-first, media query, breakpoint, dan teknik layout yang menyesuaikan semua layar.

Buka → # Images dan Media

Styling gambar: object-fit, aspect-ratio, caption, overlay, dan media responsif.

Buka → # Pseudo-classes dan Pseudo-elements

Styling berdasarkan state dan struktur DOM: hover, focus, nth-child, ::before, ::after.

Buka → # Styling Forms dan Controls

Input, select, checkbox, button, focus state, validasi, dan layout form yang aksesibel.

Buka → # Tables dan Lists

Styling tabel data dan daftar: list-style, border-collapse, zebra striping, tabel responsif.

Buka → # Transitions dan Animations

Animasi antarmuka: transition, transform, keyframes, dan prefers-reduced-motion.

Buka → # Custom Properties dan Organisasi CSS

CSS variables, design token, naming convention, reset, dan struktur stylesheet proyek.

Buka → # Accessibility dan Debugging

CSS yang inklusif dan DevTools untuk menelusuri masalah style secara sistematis.

Buka → # Pola Layout

Kumpulan pola layout siap pakai: container, hero, sidebar, card grid, dashboard, footer.

Buka → # Proyek

Tujuh proyek nyata untuk merangkai seluruh materi CSS menjadi portofolio.

Buka → # Sumber Belajar

Rujukan resmi, panduan, dan tools untuk melanjutkan pembelajaran CSS.

Buka →