Kursus Pelatihan CSS3 Lanjutan

1. CSS Modern dan Evolusi CSS

• Dari CSS3 ke CSS modern
• Standar CSS terkini dan implementasi browser
• Memahami spesifikasi CSS dan dukungan browser
• Progressive enhancement
• Deteksi fitur dan graceful degradation
• Memahami ekosistem CSS modern

2. Selektor Lanjutan

• Selektor atribut lanjutan
• Pseudo-kelas struktural
• :is()
• :where()
• :not()
• :has() dan selektor relasional
• Spesifisitas selektor
• Manajemen spesifisitas dalam proyek besar
• Praktik terbaik selektor modern

3. Warna dan Efek Visual Modern

• RGB, HSL, dan fungsi warna modern
• color(), lab(), lch(), oklab(), dan oklch()
• Warna relatif
• Transparansi dan kanal alfa
• Gradasi lanjutan
• Gradasi linear, radial, dan konik
• color-mix()
• Interpolasi warna
• Filter CSS dan efek visual
• Tema dan sistem warna modern

4. Properti Kustom CSS dan Sistem Desain

• variabel CSS / properti kustom
• Variabel dan nilai fallback
• Peng tema dinamis
• Kustomisasi tingkat komponen
• Design tokens dengan CSS
• Membuat tema terang dan gelap
• Menggunakan var(), @property, dan properti kustom bertipe
• Membangun sistem desain CSS yang mudah dirawat

5. Nesting CSS dan Manajemen Kaskade

• Nesting CSS native
• Sintaks nesting dan praktik terbaik
• Nesting CSS vs. pre-prosesor
• Kaskade dan pewarisan
• Lapisan kaskade dengan @layer
• Manajemen CSS pihak ketiga
• @scope dan konsep penataan gaya berlingkup
• Membangun arsitektur CSS yang dapat diprediksi

6. Tata Letak Lanjutan dengan Flexbox

• Ulasan dasar Flexbox
• Sumbu utama dan sumbu silang
• Perataan lanjutan
• Ukuran fleksibel
• gap
• Wrapping dan urutan
• Tata letak Flexbox bersarang
• Polakan Flexbox umum
• Komponen responsif menggunakan Flexbox

7. CSS Grid Lanjutan

• Ulasan dasar Grid
• Grid eksplisit dan implisit
• Penentuan ukuran track lanjutan
• minmax()
• auto-fit dan auto-fill
• min(), max(), dan clamp()
• Area Grid
• Tata letak Grid responsif
• Tata letak halaman kompleks
• CSS Subgrid
• Menggunakan Subgrid untuk tata letak komponen yang sejajar

8. Kueri Kontainer dan Responsivitas Berbasis Komponen

• Mengapa kueri media viewport tidak selalu cukup
• Konsep kueri kontainer
• container-type
• @container
• Unit panjang kueri kontainer
• Desain responsif yang digerakkan oleh komponen
• Kueri gaya kueri kontainer
• Merancang komponen responsif yang dapat digunakan kembali
• Kueri kontainer vs. kueri media

9. Desain Responsif Modern

• Desain mobile-first
• Titik putus responsif
• Tipografi cair
• Jarak cair
• clamp()
• Unit viewport modern:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Pertimbangan viewport dinamis
• Unit relatif kontainer
• Gambar dan media responsif
• Memperkecil kueri media yang tidak perlu

10. Properti Logis dan Internasionalisasi

• Properti CSS logis vs. fisik
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Penentuan ukuran logis
• Mode penulisan
• Tata letak dari kanan ke kiri (RTL)
• Membangun antarmuka yang dapat beradaptasi secara internasional

11. Tipografi Modern

• Tipografi responsif
• Font variabel
• Pertimbangan pemuatan font
• font-size-adjust
• Skala jenis cair
• Pembungkusan teks dan overflow
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Praktik terbaik tipografi modern

12. Transformasi, Transisi, dan Animasi

• Transformasi 2D dan 3D
• Transisi
• Animasi keyframe
• Fungsi penentuan waktu
• Komposisi animasi
• Performa transformasi
• Animasi yang digerakkan oleh scroll
• animation-timeline
• Konsep view-timeline
• Aksesibilitas gerakan
• prefers-reduced-motion
• Pertimbangan performa

13. Fitur UI CSS Modern

• Dialog dan popover CSS native
• Penataan gaya keadaan UI interaktif
• :popover-open
• :modal
• :focus-visible
• :target
• Penataan gaya keadaan formulir
• accent-color
• appearance
• field-sizing
• Kontrol formulir modern
• Membangun interaksi CSS-only yang aksesibel

14. Fungsi CSS Lanjutan

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Fungsi warna relatif
• Menggabungkan fungsi untuk tata letak cair
• Polakan desain responsif praktis

15. Pre-prosesor CSS

• Tinjauan pre-prosesor CSS
• LESS
• Variabel dan mixins
• Penataan gaya nesting
• Fungsi dan operasi
• LESS vs. CSS native modern
• Kapan pre-prosesor masih berguna
• Migrasi fitur pre-prosesor ke CSS native

16. Pertimbangan Desain dan Aksesibilitas

• Praktik terbaik CSS modern
• Penataan gaya dengan fokus aksesibilitas
• Keadaan fokus keyboard
• :focus-visible
• Gerakan yang dikurangi
• Pertimbangan kontras dan warna
• Te dan konten responsif
• Te di atas gambar
• Komponen responsif yang aksesibel
• Progressive enhancement

17. Performa dan Kelayakan CSS

• Memperkecil kompleksitas CSS
• Menghindari spesifisitas yang tidak perlu
• Lapisan kaskade untuk kelayakan
• Polakan utilitas dan komponen yang dapat digunakan kembali
• Konsep containment CSS
• content-visibility
• Performa rendering dan tata letak
• Memperkecil pergeseran tata letak
• Penataan basis kode CSS besar
• Pengujian CSS dengan alat pengembang browser modern

18. Proyek CSS Modern Praktis

Peserta membangun antarmuka web responsif modern yang mencakup:

• CSS Grid
• Flexbox
• Subgrid
• Kueri kontainer
• Nesting CSS
• Properti kustom
• Lapisan kaskade
• Selektor modern
• Tipografi cair
• Unit viewport modern
• Desain responsif
• Warna dan gradasi modern
• Animasi dan transisi
• Pertimbangan aksesibilitas
• Praktik terbaik performa