Lesson 1
Apa Itu CSS?
Selamat datang di dunia CSS! Pahami apa itu Cascading Style Sheets, peran krusialnya dalam web development, dan kenapa ini adalah langkah wajib setelah HTML.
Lesson 2
Kuis: Belum dikerjakanSintaks Dasar CSS
Yuk, belajar 'bahasa' CSS! Pahami komponen utama aturan CSS: selector untuk memilih elemen HTML, property untuk menentukan aspek gaya, dan value untuk nilainya.
Lesson 3
Kuis: Belum dikerjakanMenambahkan CSS ke HTML
Pelajari tiga metode untuk menerapkan style CSS ke HTML: External CSS (paling direkomendasikan), Internal CSS, dan Inline CSS. Pahami kapan menggunakan masing-masing.
Lesson 4
Kuis: Belum dikerjakanSelector Dasar CSS
Belajar cara paling fundamental memilih elemen HTML untuk diberi style menggunakan Type Selector, Class Selector, dan ID Selector di CSS.
Lesson 5
Kuis: Belum dikerjakanSelector Kombinasi & Grup CSS
Buat seleksimu lebih presisi! Pelajari cara menggunakan Descendant, Child, Adjacent Sibling, General Sibling, dan Grouping selector di CSS.
Lesson 6
Kuis: Belum dikerjakanSelector Atribut & Pseudo CSS
Kuasai teknik seleksi elemen tingkat lanjut di CSS! Pelajari cara menggunakan selector berdasarkan atribut, state elemen (pseudo-class), dan bagian spesifik elemen (pseudo-element).
Lesson 7
Kuis: Belum dikerjakanWarna, Background, & Gradient CSS
Pelajari cara mengubah warna teks, warna latar belakang, menggunakan gambar sebagai background, dan menciptakan efek gradient yang menawan dengan CSS.
Lesson 8
Kuis: Belum dikerjakanTipografi CSS
Bikin teks di websitemu enak dibaca dan sesuai desain! Pelajari cara mengontrol jenis font, ukuran, ketebalan, gaya, perataan, dan spasi teks dengan CSS.
Lesson 9
Kuis: Belum dikerjakanBox Model CSS
Bongkar rahasia di balik ukuran dan spasi elemen HTML! Pelajari konsep fundamental Box Model CSS yang terdiri dari content, padding, border, dan margin.
Lesson 10
Kuis: Belum dikerjakanShadow & Outline CSS
Bikin elemenmu makin 'pop out'! Pelajari cara menambahkan efek bayangan pada kotak (box-shadow) dan teks (text-shadow), serta menggunakan outline untuk penegasan.
Lesson 11
Kuis: Belum dikerjakanDisplay, Visibility, Opacity CSS
Pelajari cara mengatur bagaimana elemen HTML ditampilkan (block, inline, none), cara menyembunyikannya, dan cara membuat elemen jadi transparan dengan properti CSS.
Lesson 12
Kuis: Belum dikerjakanTransformasi CSS
Bikin elemenmu bergerak, berputar, berubah ukuran, atau miring! Pelajari properti `transform` CSS dan fungsi-fungsinya seperti `translate`, `scale`, `rotate`, dan `skew`.
Lesson 13
Kuis: Belum dikerjakanPositioning CSS
Kuasai penempatan elemen di halaman web! Pelajari berbagai nilai properti `position` CSS (static, relative, absolute, fixed, sticky) dan cara kerjanya.
Lesson 14
Kuis: Belum dikerjakanCSS Flexbox
Ucapkan selamat tinggal pada float dan trik layout kuno! Pelajari CSS Flexbox, cara modern dan powerful untuk mengatur tata letak item dalam satu dimensi (baris atau kolom).
Lesson 15
Kuis: Belum dikerjakanCSS Grid Layout
Naik level dari Flexbox! Pelajari CSS Grid Layout untuk menciptakan tata letak halaman web yang kompleks dan responsif dengan kontrol penuh atas baris dan kolom.
Lesson 16
Kuis: Belum dikerjakanDesain Responsif & Media Queries
Pastikan websitemu tampil sempurna di semua perangkat! Pelajari konsep Desain Web Responsif (RWD) dan cara menggunakan Media Queries CSS untuk mengatur style berdasarkan ukuran layar, termasuk pengenalan dark/light mode.
Lesson 17
Kuis: Belum dikerjakanUnit & Nilai CSS
Lebih dari sekadar pixel! Kenali berbagai jenis unit ukuran (absolut & relatif), format nilai warna, cara menggunakan URL, dan fungsi-fungsi CSS seperti calc() dan var().
Lesson 18
Kuis: Belum dikerjakanSpesifisitas, Inheritance, Cascade CSS
Kenapa style CSS-ku gak ngefek? Pelajari bagaimana browser menentukan style mana yang akan diterapkan jika ada konflik, melalui konsep The Cascade, Spesifisitas Selector, dan Inheritance (Pewarisan).
Lesson 19
Kuis: Belum dikerjakanPraktik Terbaik & Framework CSS
Naikkan level skill CSS-mu! Pelajari praktik terbaik untuk menulis kode CSS yang mudah di-maintain, plus kenalan singkat dengan konsep CSS Framework seperti Tailwind CSS.
Lesson 20
Kuis: Belum dikerjakanTransisi CSS
Bikin perubahan style di websitemu jadi lebih smooth! Pelajari cara menggunakan properti `transition` CSS untuk menganimasikan perubahan nilai properti secara bertahap.
Lesson 21
Kuis: Belum dikerjakanAnimasi CSS (Keyframes)
Lebih dari sekadar transisi! Pelajari cara membuat animasi yang lebih kompleks dan terkontrol di CSS menggunakan aturan `@keyframes` dan berbagai properti `animation-*`.
Lesson 22
Penutup CSS & Lanjutan
Kamu berhasil! Rangkuman perjalanan belajar CSS, motivasi untuk terus praktik, dan arahan ke dunia JavaScript atau topik CSS lanjutan seperti Preprocessor dan Framework.
Lesson 23
Cheat Sheet Tabel CSS
Navigasi cepat ke materi CSS! Tabel referensi properti CSS dasar, selector, konsep layout, dan link ke penjelasan detailnya.
Lesson 24
Contoh Akhir: Kartu Profil CSS
Lihat bagaimana semua konsep CSS beraksi! Studi kasus lengkap membuat halaman profil menarik mirip Linktree, lengkap dengan daftar link dan video YouTube responsif.
Module ini digunakan dalam 1 course. Progress, quiz akhir, dan sertifikat dikelola melalui course terkait.