Tujuan Pembelajaran
Menguasai Fundamental CSS: Menganalisis dan menerapkan konsep dasar seperti Selectors, Specificity, dan Box Model (Margin, Padding, Border) secara akurat.
Merancang Tata Letak Tingkat Lanjut: Memanfaatkan modul tata letak modern, khususnya CSS Flexbox dan CSS Grid, untuk menyusun elemen antarmuka web yang dinamis dan kompleks.
Menerapkan Responsive Web Design: Mengonfigurasi Media Queries dan pendekatan Mobile-First untuk memastikan antarmuka website beradaptasi sempurna pada berbagai ukuran layar (gawai, tablet, layar lebar).
Meningkatkan Interaktivitas Visual: Mengimplementasikan elemen UX/UI yang menarik melalui penggunaan CSS Transitions, Transforms, dan Keyframe Animations.
Membangun Aset Portofolio Profesional: Memproduksi ratusan komponen web fungsional dan halaman landing page utuh yang memenuhi standar estetika dan aksesibilitas industri.
Konten Kursus
13 bab • 88 materi
Persiapan Folder dan File
Campuran
Kerangka HTML
Campuran
Mengatur Tata Letak Dasar di CSS
Campuran
Membentuk Foto Profil
Campuran
Merapikan Teks
Campuran
Menata Tombol (Button)
Campuran
Membuat Tombol Interaktif (Hover Effect)
Campuran
Menerapkan Desain Responsif
Campuran
Menambahkan Animasi Kartu (Card Hover)
Campuran
Menambahkan Struktur Ikon di HTML
Campuran
Mengatur Tata Letak dengan Flexbox
Campuran
Mempercantik Ikon Tautan
Campuran
Menambahkan Interaksi pada Ikon
Campuran
Tantangan Pengembangan Mandiri
Campuran
Deskripsi, Tujuan, Manfaat, Tantangan Projek, dan Persiapan Ruang Kerja
Campuran
Kerangka HTML
Campuran
Teori Desain Interaksi
Campuran
Tantangan Pengembangan
Campuran
Deskripsi, Tujuan, Manfaat, dan Tantangan Projek Serta Persiapan Ruang Kerja
Campuran
Kerangka HTML
Campuran
Teori Desain Animasi (Timeline)
Campuran
Membentuk Spinner dan Menjalankan Animasi
Campuran
Menganimasi Teks (Efek Berdenyut)
Campuran
Menghilangkan Preloader (Simulasi Dunia Nyata)
Campuran
Tantangan Pengembangan
Campuran
Merancang Cetak Biru (Blueprint)
Campuran
Membangun Kerangka Portofolio
Campuran
Menghubungkan Elemen dengan Area
Campuran
Memasukkan Konten (Integrasi Flexbox)
Campuran
Deskripsi, Tujuan, Manfaat, dan Tantangan Projek Serta Kerangka HTML
Campuran
Memberi Warna agar Terlihat Jelas
Campuran
Memberi "Papan Nama" (Grid Area)
Campuran
Menggambar Tata Letak (Keajaiban Grid)
Campuran
Responsivitas Layar HP
Campuran
Deskripsi, Tujuan, Manfaat, dan Tantangan Projek serta Kerangka HTML Bento Box
Campuran
CSS Dasar & Mendefinisikan Ruang
Campuran
Membentangkan Kotak Utama
Campuran
Mengatur Tinggi Baris
Campuran
Bento Box Responsif (Layar HP)
Campuran
Deskripsi, Tujuan, Manfaat, Tantangan Projek, dan Persiapan serta Kerangka HTML
Campuran
Tampilan Dasar CSS
Campuran
Memberikan Jarak Antar Kotak
Campuran
Menyingkat Penulisan dengan repeat()
Campuran
Membuat Galeri Responsif (Layar HP)
Campuran
Tantangan 1 Kolom (Layar Sangat Sempit)
Campuran
Persiapan Folder dan File
Campuran
Menggabungkan Kerangka HTML
Campuran
Mengatur Tata Letak Utama di CSS
Campuran
Menyatukan Semua CSS
Campuran
Menyempurnakan Responsivitas Tombol
Campuran
Persiapan Folder dan File
Campuran
Kerangka HTML
Campuran
Mengaktifkan Tata Letak Mendatar
Campuran
Membersihkan dan Menyusun Menu
Campuran
Mempercantik Tautan Menu
Campuran
Persiapan Folder dan File
Campuran
Kerangka HTML
Campuran
Mendesain Tombol Garis (Outline Button)
Campuran
Mendesain Tombol Membulat (Pill Button)
Campuran
Memberikan Efek Hover (Interaksi Sentuhan)
Campuran
Memberikan Efek Klik (Active State)
Campuran
Arsitektur Proyek & Manajemen Aset
Teks
Setup Global, SEO Dasar, dan Arsitektur CSS
Campuran
Membangun Homepage (Beranda)
Campuran
Arsitektur Layout Asimetris (Blog & Sidebar)
Campuran
Halaman Kontak (Interaksi Pengguna)
Campuran
Halaman Layanan/Produk (Product Page)
Campuran
Halaman Profil (About Page)
Campuran
PENYEMPURNAAN RESPONSIF
Campuran
MODUL TANTANGAN MANDIRI
Campuran
Arsitektur Proyek & Global CSS (Cascading Style Sheets)
Campuran
Pengembangan Homepage (Beranda) Berkonversi Tinggi
Campuran
Halaman Katalog Produk (Shop Page) dengan Sidebar
Campuran
Integrasi Sisa Halaman Pendukung
Campuran
Halaman Detail Produk (Product Detail Page)
Campuran
Halaman Dasbor/Profil Pengguna (Profile Page)
Campuran
Halaman Keranjang & Checkout (Cart & Checkout Page)
Campuran
Modul Tantangan Eksplorasi (Challenge Module)
Campuran
Latar Belakang & Arsitektur Proyek
Teks
Sistem Desain, Variabel CSS, & Fondasi Responsif
Campuran
Membangun Homepage Berorientasi Konversi
Campuran
Halaman Katalog & Filter Interaktif
Campuran
Halaman Detail & Silabus
Campuran
Memperbarui Desain Sistem untuk Halaman
Campuran
Halaman Blog / Artikel Edukasi
Campuran
Halaman Profil Lembaga
Campuran
Halaman Hubungi Kami / Formulir Bantuan
Campuran
MODUL TANTANGAN MANDIRI: Eskalasi Keterampilan Antarmuka (UI)
Campuran
Persyaratan
- Penguasaan Dasar HTML: Memahami semantik HTML, penggunaan tag dasar, struktur dokumen, dan cara menautkan file eksternal.
- Perangkat Kerja: Menggunakan komputer/laptop yang terinstal Text Editor (misal: Visual Studio Code) dan peramban web modern (Google Chrome atau Mozilla Firefox).
- Pemahaman Manajemen Direktori: Mampu mengelola folder kerja, path absolut/relatif, dan hierarki file aset (gambar, font, file stylesheet).
- Ketekunan Praktik: Mengingat kurikulum berbasis ratusan projek, dibutuhkan komitmen tinggi untuk menulis kode secara rutin alih-alih sekadar membaca teori.
Deskripsi Lengkap
Kelas Belajar CSS | Ratusan Projek Sederhana Hingga Profesional dirancang menggunakan pendekatan Project-Based Learning untuk mengubah peserta dari pemula menjadi pengembang antarmuka web yang kompeten. Melalui ratusan latihan berjenjang—mulai dari styling komponen dasar hingga membangun arsitektur website modern—kelas ini berfokus pada praktik langsung (hands-on coding). Fokus utamanya bukan sekadar menghafal sintaks, melainkan melatih insting visual, pemecahan masalah desain, dan penerapan praktik terbaik industri dalam menulis kode gaya (CSS) yang bersih dan terstruktur.
Gratis
Masuk untuk MendaftarKelas ini mencakup:
- Video on-demand
- Modul teks & kode
- Akses seumur hidup
- Sertifikat Penyelesaian PCIC