Proyek HTML & CSS untuk Mengasah Skill Frontend-mu

Hampir setiap pemula di dunia frontend pasti pernah menghadapi jalan buntu ini.

Tutorial-tutorial mulai terasa membingungkan. Kamu tahu apa itu div. Kamu bisa melihat stylesheet orang lain dan paham apa yang sedang terjadi. Tiga video Flexbox? Sudah ditonton. Tapi begitu kamu membuka file index.html yang kosong dan kursor berkedip di depanmu, otakmu langsung terasa buntu.

Tutorial lain bukanlah solusinya. Sebuah proyek nyata adalah jawabannya.

Sesuatu yang cukup kecil untuk diselesaikan dalam satu akhir pekan, dengan hasil nyata yang bisa kamu tunjukkan ke temanmu. HTML dan CSS akan benar-benar melekat di ingatanmu saat kamu mengetiknya sendiri, membuatnya error, lalu kembali untuk memperbaikinya.

Jalur belajar HTML dan CSS adalah salah satu yang paling aktif di platform Coddy. Dan mereka yang terus bertahan hingga merasa percaya diri dengan kode frontend biasanya melakukan hal ini: menyelesaikan proyek-proyek kecil secara rutin. Mereka tidak menunggu sampai mereka "merasa cukup tahu". Mereka langsung membuat sesuatu, menemui kendala, mencari solusinya, lalu lanjut ke langkah berikutnya.

Panduan ini menyajikan 18 proyek HTML dan CSS yang diurutkan berdasarkan tingkat kesulitan, mulai dari situs satu halaman hingga carousel yang hanya menggunakan CSS. Kamu tidak harus membuat semuanya. Pilih satu akhir pekan ini dan selesaikan.

Mengapa Proyek Nyata Jauh Lebih Baik daripada Terus-terusan Menonton Tutorial

Membaca kode memang terasa produktif. Masalahnya, sebenarnya tidak begitu.

Menonton video YouTube selama sebulan penuh pun bisa saja membuatmu tetap tidak bisa menyusun landing page sederhana, karena menonton dan menulis kode melatih bagian otak yang berbeda. CSS, khususnya, harus diketik langsung agar bisa dipahami, karena sebagian besar bagiannya melibatkan penyesuaian-penyesuaian kecil yang hanya bisa kamu pelajari lewat proses trial and error.

Proyek nyata juga memaksamu untuk mencari tahu banyak hal. Pekerjaan frontend itu sekitar 30% menulis kode dan 70% mencari informasi di MDN, membaca dokumentasi, dan mencari tahu mengapa sebuah elemen bergeser dua piksel. Tutorial menyembunyikan semua proses itu.

Hal lain yang diberikan oleh proyek nyata adalah sesuatu yang bisa kamu pamerkan. Mengatakan "Aku sedang belajar HTML dan CSS" rasanya kurang memuaskan. Tapi, "Aku membuat halaman restoran ini, ini link-nya" adalah sesuatu yang bisa kamu kirimkan ke temanmu. Perasaan bangga karena berhasil membuat sesuatu itulah yang membuat orang-orang terus bertahan melewati minggu-minggu yang sulit.

Cara Melakukan Setup (Lewati jika Sudah Selesai)

Tidak perlu setup yang rumit untuk HTML dan CSS. Cukup tiga hal ini:

1. Text editor. VS Code adalah pilihan utama bagi kebanyakan orang. Aplikasi ini gratis, dan setelah kamu menyelesaikan beberapa proyek, ada beberapa ekstensi CSS yang sangat berguna untuk diinstal.
2. Browser. Gunakan browser apa saja yang biasa kamu pakai. Fitur dev tools (klik kanan, lalu pilih Inspect) adalah cara terbaik untuk melakukan debug pada masalah layout. Biasakan hal ini sejak awal.
3. Folder untuk setiap proyek. Cukup buat file index.html dan style.css untuk memulai. Jangan pusingkan dulu tentang build tools, framework, atau "best practices" di proyek pertamamu.

Jika kamu ingin melewati langkah setup ini, pelajaran HTML dan pelajaran CSS dari Coddy bisa dijalankan langsung di browser tanpa perlu instalasi apa pun. Ini sangat berguna saat kamu ingin melatih konsep tertentu tanpa harus membuat proyek baru. Jika tidak, sebuah folder dan text editor saja sudah lebih dari cukup.

Proyek HTML & CSS untuk Pemula

Kelima proyek ini menggunakan konsep dasar: heading, paragraf, gambar, list, link, serta sedikit sentuhan warna dan jarak (spacing). Setelah menyelesaikan beberapa pelajaran HTML dan CSS, semua proyek ini bisa diselesaikan dalam beberapa jam saja.

1. Halaman Penghormatan (Tribute Page)

Pilih seseorang yang kamu kagumi (musisi, penulis, atlet, ilmuwan) dan buatlah halaman penghormatan satu halaman. Gunakan satu heading besar, gambar utama (hero image), biodata singkat, lini masa kehidupan mereka, dan daftar link untuk mempelajari lebih lanjut. Seluruh halaman ini hanya menggunakan heading, paragraf, gambar, list, serta CSS dasar untuk tipografi dan jarak. Ini adalah proyek HTML pertama yang klasik karena suatu alasan: tidak ada bagian yang sulit di sini.

2. Halaman Pribadi "Tentang Saya" (About Me)

Situs pribadi satu halaman untuk memperkenalkan dirimu. Berisi foto, biodata singkat, daftar hal-hal yang kamu sukai, dan bagian untuk menghubungimu. Nilai plus jika kamu men-deploy situs ini ke internet. GitHub Pages gratis dan hanya butuh waktu beberapa menit untuk setup. Sekarang kamu punya link asli yang bisa dibagikan.

3. Kartu Resep (Recipe Card)

Sebuah resep makanan yang dilengkapi dengan gambar hidangan, daftar bahan, langkah-langkah bernomor, dan waktu persiapan yang ditampilkan dalam kotak detail kecil. Proyek ini mengajarkanmu perbedaan ordered vs unordered list, pengaturan ukuran gambar, dan cara membuat halaman yang padat konten agar terlihat rapi dan tidak berantakan.

4. Halaman Formulir Kontak (Contact Form)

Halaman yang berisi formulir: nama, email, pesan, dan tombol kirim. Formulir ini belum perlu berfungsi untuk mengirim data, karena itu adalah bagian JavaScript. Fokus utamanya adalah elemen formulir HTML (input, textarea, label, button) dan cara mendesainnya agar tidak terlihat kaku seperti tampilan bawaan browser. Formulir hampir selalu ada di setiap proyek frontend, jadi membiasakan diri dengannya sekarang akan sangat berguna nanti.

5. Menu Restoran Sederhana

Menu satu halaman untuk restoran fiktif. Berisi kategori (makanan pembuka, makanan utama, makanan penutup), dengan nama dan deskripsi singkat untuk setiap hidangan. Tambahkan banner utama di bagian atas dan footer kecil berisi jam buka. Proyek ini melatih cara mengelompokkan konten ke dalam beberapa bagian, membuat layout yang berulang, dan memilih skema warna yang terlihat serasi.

Proyek Tingkat Menengah (Flexbox, Grid, Layout)

Di tingkat ini, kamu akan menyusun tata letak dengan benar, mengelola beberapa bagian halaman sekaligus, dan menghasilkan sesuatu yang terlihat seperti situs web sungguhan di internet. Sebagian besar proyek ini mengandalkan Flexbox atau CSS Grid, yang merupakan skill utama yang perlu kamu asah.

6. Landing Page untuk Produk Fiktif

Pilih sebuah produk (aplikasi, layanan SaaS, toko lilin aroma terapi, atau apa saja) dan buatlah landing page seperti yang biasa kamu lihat di beranda situs web. Berisi bagian hero dengan judul utama dan tombol call-to-action (CTA). Di bawahnya, buat bagian yang menampilkan tiga fitur utama. Tambahkan testimoni dan footer berisi link. Seluruh proyek ini akan melatih kemampuan Flexbox dan Grid-mu, sekaligus mengajarkan tentang jarak (spacing) dan hierarki visual.

7. Situs Portofolio

Halaman dengan beberapa bagian untuk memamerkan hasil karyamu, meskipun saat ini "karyamu" baru berupa dua halaman penghormatan dan satu kartu resep. Berisi header dengan navigasi, bagian hero, grid proyek, bagian tentang saya, dan bagian kontak. Gunakan Grid untuk layout proyek, dan Flexbox untuk navigasi serta bagian hero.

Ini adalah proyek yang sangat berguna bahkan jika kamu merasa belum membutuhkan portofolio saat ini. Begitu kamu mulai melamar pekerjaan atau mencari proyek freelance, kamu sudah memiliki portofolio yang siap ditunjukkan.

8. Tabel Harga (Pricing Table)

Tiga paket harga yang disusun berdampingan, masing-masing dalam bentuk kartu yang berisi nama paket, daftar fitur, dan tombol CTA. Tambahkan sorotan "Paling Populer" pada kartu di bagian tengah. Tabel harga terlihat sederhana namun sebenarnya cukup menantang: kamu harus membuat tinggi kartu yang sama rata, merapikan daftar poin, dan mengatur efek hover pada tombol. Ini adalah latihan Flexbox yang sangat bagus.

9. Beranda Blog

Halaman indeks blog: header dengan navigasi dan pencarian, artikel utama di bagian atas, grid artikel terbaru di bawahnya, sidebar berisi kategori dan komentar terbaru, serta footer di bagian paling bawah. Proyek ini mengajarkanmu cara menangani layout konten dengan beberapa area berbeda, yang sangat mirip dengan tampilan web di dunia kerja nyata.

10. Halaman Login dan Daftar (Signup)

Dua halaman yang saling terhubung, halaman login di satu sisi dan halaman daftar di sisi lain, dengan formulir di tengah, header berlogo, dan link untuk berpindah halaman. Tantangannya adalah membuat tampilan yang terlihat rapi dan profesional tanpa berlebihan. Halaman login terbaik adalah yang posisinya presisi dan sedikit lebih menarik dari yang dibayangkan pengguna. Ini adalah latihan yang sangat bagus untuk mengasah selera desainmu.

11. Mockup Dashboard

Layout dashboard statis: navigasi sidebar di sebelah kiri, bar atas berisi informasi pengguna, area konten utama dengan beberapa kartu statistik, placeholder untuk grafik, dan daftar aktivitas terbaru. Belum ada interaktivitas di sini. Ini murni proyek untuk melatih layout. Grid akan sangat membantu dalam proses ini. Setelah selesai, kamu akan paham mengapa CSS Grid dibuat, dan mengapa orang-orang yang belum pernah mencobanya selalu mengeluh tentang sulitnya mengatur layout.

Proyek Animasi & Efek CSS

Sekarang kita masuk ke bagian yang menyenangkan. Proyek-proyek ini memiliki cakupan yang lebih kecil namun lebih fokus pada CSS. Sangat cocok untuk mempelajari transition, keyframe, transform, serta pseudo-class seperti :hover dan :focus.

12. Loading Spinner

Membuat loading spinner murni menggunakan CSS. Cobalah beberapa variasi: lingkaran yang berputar, tiga titik yang memantul, lingkaran yang berdenyut, atau progress bar yang terisi berulang kali. Masing-masing hanya membutuhkan sekitar 15 baris CSS dan akan mengajarkanmu tentang @keyframes, animation, dan transform.

13. Galeri Gambar dengan Efek Hover

Grid foto di mana saat kursor diarahkan (hover) ke setiap foto, akan muncul teks keterangan dengan transisi yang mulus. Cobalah berbagai efek: overlay yang bergeser, efek zoom pada gambar, atau filter warna yang memudar. Ini adalah proyek di mana konsep transition biasanya mulai benar-benar dipahami oleh banyak orang. Kamu juga akan belajar cara menumpuk elemen menggunakan position: absolute.

14. Bar Navigasi Beranimasi (Animated Navigation Bar)

Bar navigasi dengan logo di sebelah kiri dan menu di sebelah kanan, di mana menu tersebut akan memunculkan garis bawah dengan animasi bergeser saat diarahkan kursor, dan halaman yang aktif akan tetap memiliki garis bawah. Pada tampilan mobile, menu akan mengecil menjadi ikon hamburger yang membuka menu dropdown. Ini adalah pola yang akan terus kamu gunakan selamanya: animasi pada elemen interaktif, ditambah dengan perilaku responsif di berbagai ukuran layar.

15. Efek Kartu Berputar (CSS Card Flip)

Kartu yang akan berputar saat diarahkan kursor untuk menampilkan informasi di bagian belakangnya (kutipan, definisi, atau detail tambahan). Proyek ini menggunakan transform: rotateY dan backface-visibility, dua properti CSS yang jarang digunakan tetapi terasa seperti sihir saat pertama kali berhasil diterapkan. Proyek cepat dengan dampak besar bagi rasa percaya dirimu.

16. Image Slider Hanya dengan CSS

Carousel gambar yang bergeser secara horizontal dengan tombol navigasi sebelum/berikutnya, dibuat sepenuhnya menggunakan CSS tanpa JavaScript. Triknya adalah menggunakan tombol radio yang disembunyikan di luar layar dan selektor :checked untuk mengganti gambar yang ditampilkan. Pola yang cerdas, dan ini mengajarkanmu seberapa banyak hal yang bisa dilakukan hanya dengan CSS sebelum beralih ke JS. Sangat layak dicoba sekali, meskipun biasanya kamu akan membuatnya menggunakan JavaScript.

Proyek HTML & CSS Tingkat Lanjut

Beberapa proyek terakhir ini ditujukan bagi kamu yang sudah merasa terbiasa dengan dasar-dasarnya dan menginginkan tantangan nyata. Proyek-proyek ini masih murni menggunakan HTML dan CSS (tanpa JavaScript), namun akan menguji kemampuanmu dalam hal layout, presisi, dan kesabaran.

17. Kloning Beranda Situs Terkenal

Pilih situs web nyata (beranda Netflix, landing page Spotify, atau halaman produk Apple untuk perangkat tertentu) dan buat ulang bagian yang terlihat menggunakan HTML dan CSS seakurat mungkin. Tidak perlu membuatnya berfungsi, cukup samakan layout, tipografi, jarak, dan warnanya.

Kamu mungkin akan menghabiskan waktu berjam-jam hanya untuk memikirkan bagaimana mereka mendapatkan padding yang sangat pas, lalu belajar mengapa grid diukur dengan cara tertentu, dan mulai menyadari keputusan layout pada setiap situs yang kamu kunjungi. Para developer frontend sering membicarakan latihan semacam ini bahkan setelah bertahun-tahun bekerja.

18. Karya Seni CSS (CSS Art)

Menggambar sesuatu hanya dengan menggunakan elemen div dan CSS. Banyak orang telah membuat ilustrasi yang sangat detail dengan cara ini: karakter kartun, pemandangan, hewan, bahkan potret wajah. Mulailah dengan sesuatu yang sederhana, seperti secangkir kopi, wajah tersenyum, atau robot sederhana.

Terdengar konyol sampai kamu mencobanya sendiri. Setelah dicoba, ini akan menjadi pelajaran berharga tentang position, border-radius, box-shadow, gradien, dan transform. Pada akhirnya, kamu akan memahami CSS di tingkat yang jarang dicapai oleh pemula, hanya dari mencoba menggambar lingkaran di dalam persegi panjang.

Di Mana Peran Coddy?

Pelajaran HTML dan pelajaran CSS dari Coddy dirancang untuk menjembatani celah antara "Aku ingin belajar ini" dan "Aku bisa membuat proyek sendiri." Setiap pelajaran hanya memakan waktu sekitar lima menit, kamu menulis kode asli langsung di browser, dan Bugsy (asisten AI di dalam pelajaran) akan selalu siap membantumu saat kamu bingung mengapa margin: auto tidak bisa membuat elemenmu rata tengah secara vertikal.

Seluruh strukturnya dibangun untuk latihan harian. Lima menit di sini, lima menit di sana, pola yang sama dengan orang-orang yang membuka aplikasi belajar bahasa setiap pagi, kini diterapkan untuk coding. Jika kamu pernah berhenti di tengah jalan saat mengikuti kursus mandiri (biasanya di sekitar progres 30%), format materi yang ringkas ini mungkin adalah solusi yang kamu butuhkan selama ini.

HTML and CSS sepenuhnya berada di paket gratis, untuk setiap pelajaran, tanpa perlu setup. Hal ini sering kali membuat orang terkejut. Kamu tidak akan menemui paywall di tengah jalan saat sedang asyik belajar Flexbox!

Beberapa Kebiasaan yang Sangat Membantu

Sebelum kamu memilih proyek, ada tiga hal kecil yang bisa memberikan perbedaan besar:

Gunakan browser dev tools. Klik kanan pada elemen apa saja, pilih Inspect, dan lihat panel styles. Kamu bisa mengedit CSS secara langsung di browser untuk melihat perubahannya secara real-time. Ini adalah alat debug terbaik yang pernah ada, dan sudah tersedia gratis di setiap browser.

Buat dengan pendekatan mobile-first. Mulailah menulis CSS untuk layar kecil terlebih dahulu, lalu tambahkan media query agar tampilannya tetap bagus di layar yang lebih besar. Melakukan hal sebaliknya justru jauh lebih sulit. Ini adalah pola yang digunakan oleh sebagian besar kode frontend modern saat ini, jadi membiasakannya sejak sekarang akan menghemat waktumu dari menulis ulang kode di kemudian hari.

Selesaikan versi kasarnya dulu. Buat halaman berfungsi terlebih dahulu dengan konten placeholder dan desain seadanya. Rapikan tampilannya nanti. Kesalahan yang sering dilakukan oleh banyak pemula adalah menghabiskan waktu tiga jam hanya untuk membuat tombol yang sempurna, sebelum akhirnya menyadari bahwa layout halaman tersebut ternyata tidak berfungsi dengan baik, sehingga semuanya harus diulang dari awal.

Apa yang Harus Dibuat Selanjutnya?

Jika kamu menyelesaikan sebuah proyek dan langsung tahu apa yang ingin dibuat selanjutnya, itu pertanda bagus. Kamu sudah siap!

Pilih proyek berikutnya dari daftar ini dan mulailah. Jangan menunggu sampai kamu merasa "cukup siap", karena perasaan itu tidak akan pernah datang. Kamu hanya akan menyadari suatu hari nanti bahwa kamu sudah membuat enam hal dan proyek ketujuh terasa sangat bisa diselesaikan.

Jika kamu bingung harus memilih apa selanjutnya, pilihlah proyek yang sedikit membuatmu merasa tertantang atau ragu. Peningkatan skill terjadi saat kamu berada di batas zona nyamanmu, bukan di tengah-tengahnya.

Dan jika kamu menemui jalan buntu pada hal-hal dasar (selektor tidak berfungsi, layout berantakan, Flexbox tidak merespons), tinggalkan proyekmu sejenak dan ikuti beberapa pelajaran terfokus untuk mengisi celah pemahaman tersebut.

Jalur belajar HTML dan CSS di Coddy dirancang khusus untuk hal itu: latihan singkat dan terarah pada konsep yang membuatmu bingung, lalu kembali melanjutkan proyekmu.