Section ini membahas proyek sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Proyek: Koleksi Kartu UI

Merangkai token, komponen kartu, elevasi, tipografi, spasi, dan state menjadi galeri kartu satu halaman dengan tema terang dan gelap.

Lihat proyek → # Proyek: Halaman Harga Layanan

Membangun halaman harga SaaS lengkap: saklar tagihan bulanan-tahunan, tiga kartu paket dengan varian terlaris, tabel perbandingan fitur, tombol call-to-action, dan tata letak responsif.

Lihat proyek → # Proyek: Majalah Digital

Rangkai tipografi editorial, grid artikel, media responsif, dan navigasi seluler menjadi beranda majalah digital yang utuh.

Lihat proyek → # Proyek: Katalog Tanaman

Membangun katalog tanaman hias satu halaman: layout bilah filter dan grid produk, kartu dengan area foto berlapis gradasi, panel filter, serta tampilan responsif yang bisa menyaring kategori.

Lihat proyek → # Proyek: Dashboard Keuangan

Membangun dasbor keuangan pribadi: cangkang aplikasi grid dengan sidebar, tiga kartu ringkasan berpenekanan angka, tabel transaksi dengan lencana status, dan keruntuhan responsif menjadi bilah atas.

Lihat proyek → # Proyek: Galeri Fotografi

Membangun galeri foto satu halaman bertema gelap: grid berirama dengan rentang baris-kolom, pemangkasan foto memakai object-fit, rasio bidang dengan aspect-ratio, keterangan overlay, penyaring kategori, serta tampilan responsif.

Lihat proyek → # Proyek: Portofolio Desainer

Membangun situs portofolio desainer satu halaman yang merangkum seluruh materi kursus: design token, hero, galeri karya grid, strip keahlian, navigasi responsif, animasi halus, dan perbaikan aksesibilitas.

Lihat proyek →