← Semua track
🎨

CSS

Styling dari dasar sampai Tailwind & Figma-to-CSS pixel-perfect.

±70 jam · 0/62 selesai (0%)

💡 Saran (bukan syarat): sebaiknya selesaikan dulu HTML. Tapi semua materi tetap terbuka — kamu yang menentukan.

Modul 1: Dasar Styling

Cara CSS bekerja: selector, cascade, dan box model — fondasi yang salah paham di sini bikin frustrasi bertahun-tahun.

9 bab dalam modul ini
  1. 1.1Tiga cara memasang CSS & kenapa external stylesheet menang
  2. 1.2Selector dasar: tag, class, id
  3. 1.3Combinator: descendant, child (>), sibling (+, ~)
  4. 1.4Specificity & cascade — kenapa style-mu 'tidak jalan'
  5. 1.5Warna: keyword, hex, rgb, hsl, dan opacity
  6. 1.6Unit: px, %, em, rem — kapan pakai yang mana
  7. 1.7Box model: content, padding, border, margin
  8. 1.8box-sizing: border-box dan kenapa semua orang memakainya
  9. 1.9Margin collapse — jebakan klasik pemula

Modul 2: Layout Klasik

display, position, dan float — cukup untuk membaca & memperbaiki kode lama di tempat kerja.

6 bab dalam modul ini
  1. 2.1display: block, inline, inline-block, none
  2. 2.2position: static, relative, absolute, fixed, sticky
  3. 2.3z-index & stacking context
  4. 2.4overflow: hidden, scroll, auto
  5. 2.5float & clear — kenal saja, jangan dipakai untuk layout baru
  6. 2.6Centering klasik: margin auto & teknik lama yang masih muncul di codebase

Modul 3: Flexbox

Layout satu dimensi — skill yang disebut eksplisit di lowongan frontend.

7 bab dalam modul ini
  1. 3.1Konsep main axis vs cross axis
  2. 3.2display: flex, flex-direction, flex-wrap
  3. 3.3justify-content & align-items — peta mental yang benar
  4. 3.4gap: cara modern memberi jarak
  5. 3.5flex-grow, flex-shrink, flex-basis (dan shorthand flex)
  6. 3.6align-self & order
  7. 3.7Pola nyata: navbar, card row, sticky footer, media object

Modul 4: CSS Grid

Layout dua dimensi untuk halaman utuh — pasangan Flexbox, bukan pesaingnya.

7 bab dalam modul ini
  1. 4.1grid-template-columns/rows & unit fr
  2. 4.2repeat(), minmax(), auto-fit vs auto-fill
  3. 4.3Menempatkan item: grid-column, grid-row, span
  4. 4.4grid-template-areas — layout yang bisa dibaca
  5. 4.5Implicit grid & grid-auto-flow
  6. 4.6Kapan Grid, kapan Flexbox (jawaban interview yang benar)
  7. 4.7Pola nyata: dashboard, galeri responsif tanpa media query

Modul 5: Responsive Design

Mobile-first yang benar — bukan sekadar 'tambah media query di akhir'.

7 bab dalam modul ini
  1. 5.1Viewport meta & kenapa tanpa itu semua berantakan
  2. 5.2Media query: min-width, mobile-first workflow
  3. 5.3Breakpoint: memilih berdasarkan konten, bukan device
  4. 5.4Fluid typography & clamp()
  5. 5.5Responsive image: srcset & sizes
  6. 5.6Container query — pendekatan modern per-komponen
  7. 5.7Menguji: DevTools device mode & perangkat nyata

Modul 6: Tipografi & Efek Visual

Detail yang membuat UI terlihat profesional: font, bayangan, transisi, dan animasi.

8 bab dalam modul ini
  1. 6.1font-family, web font, dan font loading (FOUT/FOIT)
  2. 6.2font-size, line-height, letter-spacing — skala tipografi
  3. 6.3text-overflow, ellipsis, dan line-clamp
  4. 6.4box-shadow & drop-shadow yang tidak norak
  5. 6.5Gradient: linear, radial, conic
  6. 6.6transition: property, duration, timing-function
  7. 6.7transform: translate, scale, rotate
  8. 6.8@keyframes & animation — plus prefers-reduced-motion

Modul 7: CSS Modern

Fitur yang sudah aman dipakai produksi dan bikin kode lebih bersih.

7 bab dalam modul ini
  1. 7.1Custom properties (variabel CSS) & theming
  2. 7.2Nesting native
  3. 7.3:has() — parent selector yang mengubah banyak pola
  4. 7.4:is() dan :where() untuk selector rapi
  5. 7.5@layer untuk mengatur cascade
  6. 7.6aspect-ratio, object-fit, dan logical properties
  7. 7.7Dark mode dengan prefers-color-scheme

Modul 8: Tailwind CSS

Utility-first framework yang jadi requirement lowongan — dipelajari SETELAH paham CSS murni.

7 bab dalam modul ini
  1. 8.1Filosofi utility-first & setup Tailwind
  2. 8.2Terjemahan mental: CSS yang kamu tahu → kelas Tailwind
  3. 8.3Spacing, warna, dan skala bawaan
  4. 8.4Responsive & state variant (hover:, md:, dark:)
  5. 8.5Ekstraksi komponen: kapan pakai @apply (jarang) vs komponen framework
  6. 8.6Kustomisasi theme & design token
  7. 8.7Anti-pattern Tailwind yang bikin kode tak terbaca

Modul 9: Figma → CSS

Skill yang diminta lowongan: menerjemahkan desain jadi UI pixel-perfect.

6 bab dalam modul ini
  1. 9.1Membaca file Figma: inspect, ukuran, warna, font
  2. 9.2Auto layout Figma ≈ Flexbox — pemetaan konsep
  3. 9.3Ekstrak design token: spacing, radius, shadow
  4. 9.4Menangani keadaan yang tidak digambar desainer (hover, error, loading, teks panjang)
  5. 9.5Komunikasi dengan desainer: pertanyaan yang benar
  6. 9.6Workflow review: membandingkan hasil vs desain