BAGIAN 1: PENGANTAR CSS
CSS Dasar #1 - Apa Itu CSS? Cara Kerja dan 3 Cara Menambahkannya ke HTML
CSS Dasar #2 - Sintaks Dasar CSS: Selektor, Properti, dan Nilai
CSS Dasar #3 - Mengenal CSS Reset dan Box Sizing
BAGIAN 2: SELECTOR CSS (LANJUTAN)
CSS Dasar #4 - Selektor Dasar: Tag, Class, dan ID (Review + Contoh Praktis)
CSS Dasar #5 - Selektor Turunan dan Anak (Descendant & Child Selector)
CSS Dasar #6 - Selektor Sibling (Adjacent & General Sibling Selector)
CSS Dasar #7 - Pseudo-class (hover, focus, active, visited, first-child, last-child, nth-child)
CSS Dasar #8 - Pseudo-element (before, after, first-line, first-letter, selection)
CSS Dasar #9 - Selektor Atribut (Attribute Selector)
BAGIAN 3: WARNA, BACKGROUND, DAN TYPOGRAPHY
CSS Dasar #10 - Warna di CSS: Named Colors, HEX, RGB, RGBA, HSL, HSLA
CSS Dasar #11 - Background: background-color, background-image, background-repeat, background-position, background-size
CSS Dasar #12 - Gradient: Linear Gradient dan Radial Gradient
CSS Dasar #13 - Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing
CSS Dasar #14 - Menggunakan Google Fonts di CSS (Lanjutan)
BAGIAN 4: BOX MODEL DAN LAYOUT DASAR
CSS Dasar #15 - Box Model: Margin, Padding, Border, dan Content
CSS Dasar #16 - Margin Collapse dan Negative Margin
CSS Dasar #17 - Width, Height, Min-Width, Max-Width, Min-Height, Max-Height
CSS Dasar #18 - Overflow: visible, hidden, scroll, auto
BAGIAN 5: POSITIONING
CSS Dasar #19 - Position Static dan Relative
CSS Dasar #20 - Position Absolute
CSS Dasar #21 - Position Fixed dan Sticky
CSS Dasar #22 - Z-Index: Mengatur Tumpukan Elemen
BAGIAN 6: FLEXBOX
CSS Dasar #23 - Pengenalan Flexbox: display: flex, flex-direction
CSS Dasar #24 - justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly
CSS Dasar #25 - align-items dan align-content
CSS Dasar #26 - flex-wrap, flex-flow, dan gap
CSS Dasar #27 - Properti Flex Item: order, flex-grow, flex-shrink, flex-basis, align-self
CSS Dasar #28 - Membuat Layout dengan Flexbox (Navbar, Card Grid, Footer)
BAGIAN 7: CSS GRID
CSS Dasar #29 - Pengenalan CSS Grid: display: grid, grid-template-columns, grid-template-rows
CSS Dasar #30 - Unit fr, repeat(), minmax(), dan auto-fill vs auto-fit
CSS Dasar #31 - grid-template-areas: Membuat Layout dengan Nama Area
CSS Dasar #32 - gap, row-gap, column-gap
CSS Dasar #33 - grid-column dan grid-row (Spanning Items)
CSS Dasar #34 - justify-items, align-items, justify-self, align-self
CSS Dasar #35 - Membuat Layout Website dengan CSS Grid (Header, Sidebar, Konten, Footer)
BAGIAN 8: RESPONSIVE DESIGN
CSS Dasar #36 - Media Query: max-width, min-width, dan range
CSS Dasar #37 - Breakpoint Umum untuk HP, Tablet, dan Desktop
CSS Dasar #38 - Mobile First vs Desktop First
CSS Dasar #39 - Menggunakan Media Query untuk Layout Responsif
CSS Dasar #40 - Responsive Images: max-width, picture, srcset
CSS Dasar #41 - Responsive Typography (clamp, vw, rem)
BAGIAN 9: TRANSITION, TRANSFORM, DAN ANIMATION
CSS Dasar #42 - CSS Transition: transition-property, transition-duration, transition-timing-function, transition-delay
CSS Dasar #43 - Membuat Hover Effect dengan Transition
CSS Dasar #44 - CSS Transform: scale, rotate, translate, skew
CSS Dasar #45 - Kombinasi Transition dan Transform
CSS Dasar #46 - CSS Animation: @keyframes, animation-name, animation-duration, animation-iteration-count
CSS Dasar #47 - Properti Animation Lengkap (direction, fill-mode, timing-function, delay, play-state)
CSS Dasar #48 - Membuat Loading Spinner dengan CSS Animation
BAGIAN 10: FITUR MODERN CSS
CSS Dasar #49 - CSS Variables (Custom Properties)
CSS Dasar #50 - Filter CSS: blur, brightness, contrast, grayscale, drop-shadow
CSS Dasar #51 - Clip-path dan Shape Outside
CSS Dasar #52 - CSS Columns (Multi-column Layout)
CSS Dasar #53 - Aspect Ratio (menjaga rasio elemen)
CSS Dasar #54 - Container Queries (Alternatif Media Query untuk komponen)
CSS Dasar #55 - Dark Mode dengan prefers-color-scheme
BAGIAN 11: UTILITY DAN BEST PRACTICE
CSS Dasar #56 - CSS Spesifisitas dan Cara Mengatasinya
CSS Dasar #57 - Pengenalan CSS Framework (Tailwind CSS, Bootstrap)
CSS Dasar #58 - CSS Architecture: BEM (Block Element Modifier)
CSS Dasar #59 - Debugging CSS dengan Developer Tools
CSS Dasar #60 - Proyek Akhir: Membuat Website Landing Page Modern dengan CSS
CSS Dasar #61 - Proyek Akhir: Membuat Portofolio Website Responsif
BAGIAN 12: BONUS (OPTIONAL)
CSS Dasar #62 - Membuat Tooltip dengan CSS Murni
CSS Dasar #63 - Membuat Card dengan Efek Glassmorphism
CSS Dasar #64 - Membuat Neumorphism UI dengan CSS
CSS Dasar #65 - Membuat Dark Mode Toggle dengan CSS dan JavaScript
CSS Dasar #66 - Tips Optimasi CSS untuk Performa Website
CSS Dasar #67 - Apa Selanjutnya? (SCSS, Tailwind, atau JavaScript Lanjutan)