Pemula

CSS Fundamental: Menata Halaman Web sampai Responsif

Dari aturan CSS pertama sampai landing page yang rapi di HP dan laptop

Belum ada rating0 siswa82 aktivitas17j 16m

Untuk siapa: Usia 12–99 tahun (SMA)
Tingkat: Pemula
Yang dibuat: Landing page responsif Warung KodingYuk dengan Flexbox, Grid, variabel CSS, media query, dan efek hover/fokus
Lama belajar: 17j 16m, 82 aktivitas
Perangkat: Cukup laptop atau tablet, tanpa alat tambahan
Sertifikat: Ada, setelah lulus ujian akhir

Untuk siapa: kamu yang sudah bisa menulis HTML dasar (heading, paragraf, link, list) dan ingin halamanmu tampil rapi. Cocok untuk pelajar SMP/SMA maupun dewasa yang baru mulai belajar web.

Yang kamu pelajari: cara kerja aturan CSS, selector, box model, cascade dan specificity, warna, satuan, tipografi, variabel CSS, tata letak dengan Flexbox dan Grid, Responsive Web Design dengan media query dan container query, border, bayangan, gradien, pseudo-class, fokus keyboard, transisi, dan animasi. Modul lanjutan mengenalkan fitur CSS modern seperti anchor positioning, popover, clip-path, dan view transitions.

Cara belajar: 9 modul bertahap. Setiap modul berisi artikel dengan contoh yang bisa langsung dijalankan, latihan coding yang dinilai otomatis, rangkuman, dan kuis.

Hasil akhir: landing page responsif Warung KodingYuk yang kamu tulis sendiri, memakai Flexbox, Grid, variabel CSS, media query, serta efek hover dan fokus yang ramah keyboard.

Materi Kelas

Modul 1 — Kenalan dengan CSS

Pembuka: Kenapa Halaman Butuh CSS?Gratis5m

Selamat Datang di Kursus CSSGratis13m

Anatomi Aturan CSS dan Tiga Cara Memasangnya5m

Selectors17m

Box Model14m

Latihan: Kartu Menu Pertama15m

Rangkuman Modul 13m

Kuis Modul 1: Kenalan dengan CSS10m

Modul 2 — Siapa yang Menang? Cascade, Specificity, dan Pewarisan

Pembuka: Ketika Dua Aturan Berebut Satu Elemen4m

Cascade14m

Specificity13m

Inheritance15m

Nesting13m

Latihan: Harga Promo yang Selalu Kalah15m

Rangkuman Modul 23m

Kuis Modul 2: Cascade, Specificity, dan Pewarisan10m

Modul 3 — Warna, Ukuran, Teks, dan Variabel CSS

Pembuka: Dari Warna Asal Pilih ke Sistem Tema4m

Color13m

Sizing14m

Typography — Font Stack, Variable Fonts, dan Ritme Baca14m

Custom Properties — Variabel CSS yang Hidup16m

Fungsi CSS — calc, min, max, clamp, var, attr, env17m

Latihan: Teks Menu yang Nyaman Dibaca15m

Latihan: Tema Warna Warung dengan Variabel CSS15m

Rangkuman Modul 33m

Kuis Modul 3: Warna, Ukuran, Teks, dan Variabel10m

Modul 4 — Layout: Display, Position, Flexbox, dan Grid

Pembuka: Dari Tumpukan Kotak ke Tata Letak4m

Layout18m

Flexbox — Baris, Kolom, dan Ruang yang Adil20m

Grid — Petak Dua Dimensi yang Tegas18m

Spacing — Jarak yang Berirama15m

Latihan: Navbar Warung dengan Flexbox15m

Latihan: Daftar Menu dengan Grid15m

Rangkuman Modul 44m

Kuis Modul 4: Layout, Flexbox, dan Grid10m

Modul 5 — Responsive Web Design

Pembuka: Satu Halaman, Banyak Ukuran Layar4m

Responsive Web Design: Viewport, Tata Letak Cair, dan Gambar Lentur6m

Media Query: Mengubah Tata Letak di Breakpoint7m

Container Queries — Komponen yang Sadar Wadah16m

Overflow — Sumbu Scroll, Scroll-Snap, dan Overscroll15m

Latihan: Halaman Menu Mobile-First20m

Latihan: Kartu Menu yang Sadar Wadah15m

Rangkuman Modul 53m

Kuis Modul 5: Responsive Web Design10m

Modul 6 — Tampilan Visual: Border, Bayangan, Latar, dan List

Pembuka: Dari Datar ke Menonjol4m

Borders — Bingkai, Sudut, dan Garis Luar16m

Shadows — Bayangan dan Elevasi yang Natural14m

Backgrounds — Lapisan, Ukuran, Posisi, dan Multi-Background14m

Gradients14m

Lists — list-style, Marker, dan Custom Bullets18m

Counters — Penomoran Kustom dengan counter-reset & counter-increment14m

Latihan: Kartu Promo yang Menonjol15m

Rangkuman Modul 63m

Kuis Modul 6: Tampilan Visual10m

Modul 7 — Interaksi dan Gerak

Pembuka: Halaman yang Menjawab Sentuhan4m

Pseudo-Elements — Melukis Tanpa HTML Tambahan16m

Pseudo-Classes — Keadaan, Struktur, dan Validasi17m

Focus — Fokus yang Terlihat dan Tetap Cantik16m

Transitions — Gerakan Halus untuk Umpan Balik UX15m

Animations — Keyframes, Timing, dan Reduced Motion19m

Kursor, Pointer Events, dan Touch Action25m

Latihan: Tombol Pesan yang Menjawab Sentuhan15m

Latihan: Lencana "Baru" yang Berdenyut20m

Rangkuman Modul 74m

Kuis Modul 7: Interaksi dan Gerak10m

Modul 8 — CSS Modern (Lanjutan)

Pembuka: CSS Terus Bertumbuh5m

Logical Properties — Menulis CSS yang Siap Dua Arah15m

Z-Index dan Stacking Context19m

Anchor Positioning19m

Popover, Dialog, dan Top Layer19m

Shapes, Clip-Path, dan Masking16m

Filters dan Backdrop-Filter16m

Blend Modes — mix-blend-mode dan background-blend-mode15m

View Transitions — Pindah Halaman SPA yang Mulus14m

Latihan: Galeri Bergaya Majalah15m

Rangkuman Modul 83m

Kuis Modul 8: CSS Modern (Lanjutan)10m

Modul 9 — Proyek Akhir: Landing Page Responsif

Pembuka Proyek Akhir: Landing Page Warung KodingYuk5m

Proyek Akhir: Landing Page Responsif Warung KodingYuk45m

Conclusion — Rangkuman, Checklist Skill, dan Capstone CSS17m

Penutup: Setelah Kursus CSS5m

Kuis Akhir: Cek Kesiapan CSS10m

Rp59.000

Akses materi selamanya

Praktik & quiz interaktif

Sertifikat kelulusan

Bayar via Xendit (aman)

Garansi 7 hari uang kembali