Semua course
Materi oleh Hifzon · Pemula

CSS dari Nol: Mendesain Tampilan Website yang Menarik

Bagian dari jalur: Frontend Developer, Frontend dengan Vue.js, Fullstack Developer (JavaScript), Fullstack Developer (Laravel & Vue)

Belajar CSS dengan bahasa yang mudah dipahami, dari nol sampai bisa mendesain website sendiri. Belajar santai lewat animasi, materi singkat, dan latihan yang langsung dicek.

4.9 rating 25 part Jadilah peserta pertama Pemula
Coba Gratis Sekarang, Tanpa Daftar Lihat kurikulum
Akses gratis Tanpa instalasi Sertifikat kelulusan
25Part seru
GratisAkses penuh
0Peserta aktif
1Sertifikat kelulusan
Hasil belajar

Setelah ini, kamu bisa...

Selector, pseudo-class, pseudo-element, warna, teks, dan font
Box model, border, bayangan, background, gradient, display, dan position
Cascade, specificity, dan pewarisan: paham kenapa sebuah gaya menang atau kalah
Flexbox dan CSS Grid untuk layout modern, variabel CSS, dan calc()
Transisi, transform, animasi @keyframes, serta desain responsif mobile-first
Latihan CSS dicek di browser + proyek akhir landing page responsif + kuis
Keunggulan

Belajar jadi lebih gampang dan nggak ngebosenin

Animasi konsep

Tiap part dibuka dengan animasi singkat, jadi konsepnya langsung kebayang. Nggak cuma baca teks!

Materi mudah dipahami

Dijelaskan pelan-pelan pakai analogi, contoh kode, dan tips biar nggak salah di hal yang umum.

Latihan interaktif langsung

Langsung praktik di halaman yang sama. Jawabanmu dicek otomatis, dan ada petunjuk kalau kamu mentok.

Belajar bertahap

Selesaikan latihan untuk membuka part berikutnya, jadi dasarmu selalu kuat.

Quiz akhir

Tes seberapa paham kamu sebelum ambil sertifikat.

Sertifikat kelulusan

Sertifikat atas namamu siap diambil setelah semua part selesai dan quiz minimal 70.

Peta Petualangan

Tuntaskan misi, kumpulkan XP

1Apa itu CSS & Cara Menulisnya +100 XP
Selector Dasar: Elemen, Class, dan ID+100 XP
Selector Lanjutan & Kombinator+100 XP
Pseudo-class & Pseudo-element+100 XP
Warna di CSS+100 XP
Teks & Font+100 XP
Satuan Ukuran: px, %, em, rem, vw, vh+100 XP
Box Model: Content, Padding, Border, Margin+100 XP
Border, Border-radius, & Box-shadow+100 XP
Background: Gambar & Gradient+100 XP
Display, Visibility, & Overflow+100 XP
Position & z-index+100 XP
Cascade, Specificity, & Inheritance+100 XP
Flexbox 1: Container+100 XP
Flexbox 2: Item & Pola Layout+100 XP
CSS Grid 1: Dasar Kolom & Baris+100 XP
CSS Grid 2: Area, Span, & Grid Responsif+100 XP
Variabel CSS (Custom Properties) & calc()+100 XP
Transisi & Transform+100 XP
Animasi dengan @keyframes+100 XP
Desain Responsif & Media Query+100 XP
Gambar & Media Responsif+100 XP
Mendesain Formulir, Tombol, Daftar, & Tabel+100 XP
Praktik Terbaik: Reset, Penamaan, & Struktur CSS+100 XP
Proyek Akhir: Landing Page Responsif+100 XP
🏆Quiz Arena+150 XP
Lulus Misi aktif Terkunci 🏆 Quiz Arena membuka sertifikat · tamat course +300 XP bonus
Kurikulum

25 part, dari nol sampai bisa

Daftar part
0 dari 25 part selesai
1
Apa itu CSS & Cara MenulisnyaMengenal CSS, fungsinya mempercantik HTML, bentuk aturan (selector, properti, nilai), dan tiga cara memasangnya.
Buka
Selector Dasar: Elemen, Class, dan IDSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Selector Lanjutan & KombinatorSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Pseudo-class & Pseudo-elementSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Warna di CSSSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Teks & FontSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Satuan Ukuran: px, %, em, rem, vw, vhSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Box Model: Content, Padding, Border, MarginSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Border, Border-radius, & Box-shadowSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Background: Gambar & GradientSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Display, Visibility, & OverflowSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Position & z-indexSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Cascade, Specificity, & InheritanceSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Flexbox 1: ContainerSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Flexbox 2: Item & Pola LayoutSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
CSS Grid 1: Dasar Kolom & BarisSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
CSS Grid 2: Area, Span, & Grid ResponsifSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Variabel CSS (Custom Properties) & calc()Selesaikan part sebelumnya untuk membuka latihan. Baca materinya
Transisi & TransformSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Animasi dengan @keyframesSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Desain Responsif & Media QuerySelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Gambar & Media ResponsifSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Mendesain Formulir, Tombol, Daftar, & TabelSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Praktik Terbaik: Reset, Penamaan, & Struktur CSSSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Proyek Akhir: Landing Page ResponsifSelesaikan part sebelumnya untuk membuka latihan. Baca materinya
Pengajar

Ditemani mentor

H
Mentor kamu

Hifzon

Course ini disusun santai tapi praktis: teori singkat, animasi, lalu langsung latihan, supaya kamu terbiasa mencoba sendiri sejak part pertama.

Lanjut belajar

Course lain yang cocok untukmu

HTML dari Nol: Membuat Halaman Web Pertamamu Pemula · 20 part · 0 peserta aktif Lihat course Scratch dari Nol: Belajar Pemrograman dengan Blok Pemula · 18 part · 1 peserta aktif Lihat course TypeScript dari Nol: Tipe Aman, Kode Rapi, Bug Berkurang Pemula · 24 part · 0 peserta aktif Lihat course
FAQ

Masih bingung? Cek ini dulu

Apakah course ini gratis?

Gratis! Cukup daftar dan verifikasi email, lalu semua part bisa langsung kamu buka.

Apakah saya perlu memasang aplikasi tambahan?

Nggak perlu. Semua latihan dikerjakan langsung di KelasIT, cukup pakai browser.

Bagaimana sistem kelulusan dan sertifikat?

Setiap part punya latihan singkat. Kalau sudah lulus, part berikutnya terbuka. Sertifikat bisa kamu ambil setelah semua part selesai dan quiz akhir minimal 70.

Harus selesai dalam berapa lama?

Bebas! Belajar sesuai tempomu, berhenti dan lanjut kapan saja. Progress-mu selalu tersimpan.

Apakah bisa dipelajari lewat ponsel?

Bisa banget untuk baca materi. Tapi untuk menulis kode, laptop atau tablet berkeyboard akan lebih nyaman.

Siap mulai belajar CSS dari Nol: Mendesain Tampilan Website yang Menarik?

Part pertama ringan kok. Mulai sekarang dan rasakan sendiri serunya belajar!

Coba Gratis Sekarang, Tanpa Daftar