Butuh inspirasi dan ide untuk membuat proyek website dengan menggunakan HTML dan CSS? Kamu datang ke artikel yang tepat!
HTML dan CSS adalah dua dari banyaknya bahasa pemrograman yang wajib dikuasai jika kamu ingin berkarir sebagai web developer. Namun untuk bisa meyakinkan rekruter dan user, tentunya kamu butuh portofolio sebagai bukti pendukung.
Simak 6 ide proyek website di bawah ini untuk memamerkan skill codingmu!
Apa itu CSS dan HTML
CSS (Cascading Style Sheets) dan HTML (Hypertext Markup Language) adalah bahasa pemrograman dan bahasa markup yang berbeda namun saling berkaitan.
CSS adalah bahasa pemrograman yang menentukan layout, gaya, dan elemen yang ditampilkan di website. HTML adalah bahasa markup yang berisi metadata tentang halaman dan berbagai elemen yang akan ditampilkan di website. Sehingga, CSS yang menjelaskan bagaimana elemen HTML ditampilkan sedemikian rupa di halaman website.
Ibarat rumah, HTML adalah kerangka dan pondasi yang membentuk rumah, sedangkan CSS adalah tata letak yang mengatur dimana letak berbagai ruangan beserta penampilannya.
Apa yang Bisa Dilakukan dengan CSS dan HTML
Seperti yang sudah dijelaskan, CSS dan HTML adalah pondasi dari sebuah website. Hanya berbekal dua bahasa pemrograman ini, kamu bisa membuat berbagai bentuk website sesuai dengan yang kamu harapkan lho!
Dengan menggunakan HTML, kamu bisa membuat struktur halaman dan menambahkan elemen seperti:
- Teks
- Gambar
- Link
- Button
- Video
- Headings, dan masih banyak lagi
Dengan menggunakan CSS, kamu bisa menata halaman dan membuat halaman tersebut responsif seperti:
- Layar responsif untuk tampilan desktop sekaligus mobile
- Experience seperti scroll, swipe, hover, dropdown, dan lainnya
- Animasi
- Warna pada teks
- Jenis font
- Posisi konten, dan masih banyak lagi
Bagaimana contoh website yang bisa dibuat menggunakan kedua bahasa pemrograman ini? Berikut ide proyek yang bisa kamu contoh
6 Contoh Proyek Sederhana Menggunakan CSS & HTML
Blog atau Web Pribadi
Kamu bisa membuat sebuah situs web sederhana yang berguna untuk memamerkan proyek-proyek kamu, situs web ini bisa dijadikan sebagai latihan menulis markup serta membuat stylesheet. Kamu bisa mulai dengan CMS seperti WordPress untuk memulai, lalu kamu bisa menambahkan CSS kustom untuk menunjukkan skill kamu sekaligus membuat website yang personal sesuai stylemu.
Form pada website
Formulir akan selalu menjadi elemen penting dari sebuah website, karena dengan adanya form maka kita dapat mengubah traffic menjadi leads. Kamu bisa membuat berbagai jenis form yang biasa dibutuhkan dalam website seperti, form konsultasi, form pendaftaran untuk event, form subscribe newsletter, form login / registrasi, dan masih banyak lainnya. Berbagai jenis form ini tentu memerlukan beragam kolom dan jenis opsi jawabannya, sehingga kamu bisa melatih skill HTML untuk menyusun struktur yang tepat. Penggunaan CSS juga dapat membantu untuk mempercantik formulirmu agar dapat memberikan experience yang menyenangkan.
Email Newsletter yang Dicustom
Selain membuat website, kamu juga bisa menunjukkan skill HTML dan CSS dengan membuat email newsletter dengan custom desain yang interaktif dan isi yang menarik. Kamu bisa menggunakan CRM tool seperti MailChimp untuk memulai, lalu kamu bisa mengatur struktur dan desain newsletter nya dengan custom manual HTML dan CSS. Kamu bisa menggunakan berbagai topik untuk membuat newsletter, seperti rekomendasi film, insight dari buku bacaan minggu ini, list cafe yang nyaman untuk WFC di kotamu, dan lain sebagainya.
Landing Page
Ingin membuat proyek yang benar-benar dibuat dari 0 tanpa bantuan platform apapun? Kamu bisa menantang diri untuk membuat landing page. Proyek ini akan membutuhkan kreativitas dan kejelianmu dalam menggunakan CSS. Ada banyak section yang harus kamu buat mulai dari header, footer, hero section yang nge-hook, form, dan lain sebagainya. Selain itu kamu juga harus memadukan kombinasi warna, font, padding, margin, space antar section, space antar paragraf, dan elemen lainnya yang mempengaruhi penampilan landing page mu. Kamu bisa membuat landing page untuk company profile, sales landing page, dan lain-lain.
Website untuk Menu Restoran
Next level dari proyek-proyek sebelumnya, kamu bisa membuat website untuk menu sebuah restoran atau cafe. Proyek ini akan melatih skill HTML dan CSS untuk membuat layout menu dengan masing-masing kategori sajiannya. Kamu akan menyelaraskan berbagai item makanan dan minuman dengan CSS layout grid. Tentunya juga menambahkan harga, foto makanan atau minuman, dengan tampilan kombinasi warna, jenis font, dan bentuk layout yang tepat. Kamu juga bisa menambah experience seperti sliding image, drop down menu add ons, internal link ke product terkait, dan lain sebagainya.
Landing Page Event / Conference
Kamu juga bisa membuat landing page statis untuk sebuah event atau conference, yang membutuhkan berbagai section seperti hero section, penjelasan tentang event, profil pembicara, benefit yang didapatkan peserta, harga dan paket yang ditawarkan, testimoni, logo sponsor, dan form pendaftaran. Dengan banyaknya ragam struktur section ditambah kombinasi warna, font, dan elemen lainnya, kamu membutuhkan pengetahuan HTML/HTML5 dan CSS yang mendalam. Jika hasil dari proyek ini bisa memberikan experience dan tampilan yang berkesan, kamu tidak hanya membuat portofolio untuk melamar kerja, melainkan juga dapat dijadikan contoh service jasa yang bisa kamu jual.
Tempat untuk Mulai Belajar CSS dan HTML
Biar kamu bisa bikin beragam jenis website dan landing page yang canggih, yuk belajar ngoding CSS dan HTML lebih terstruktur dengan Bootcamp Full Stack Web Development dari BINAR!
Bootcamp Full-Stack Web Dev di BINAR pakai studi kasus dan best practice yang dipakai oleh praktisi di pekerjaannya sehari-hari, apa yang kamu pelajari akan sesuai dengan di lapangan kerja.
Bootcamp BINAR juga ngasih bonus untuk kamu supaya bisa bekerja di luar negeri dengan course English for Work Setting yang mengasah skill bahasa Inggris untuk kebutuhan profesional. Kesempatan untuk berkarir di perusahaan global sampai ke luar negeri jadi lebih luas!
Source:
The Best HTML And CSS Projects For Beginners
Top 10 Projects For Beginners To Practice HTML and CSS Skills
.png)
.jpg)
