Design Website Hardy Web Studio
Membangun website bukan hanya soal membuat halaman yang bisa dilihat—tetapi bagaimana peserta memahami pondasi utama sebuah web modern. Pada tugas final Bootcamp Web Development Dasar ini, setiap peserta diminta membuat website sederhana yang menampilkan struktur, desain, dan konten mandiri menggunakan HTML dasar dan CSS dasar.
Melalui tugas ini, peserta belajar membangun elemen-elemen penting layaknya studio web profesional, mulai dari halaman utama, layanan, hingga kontak seperti yang biasa diterapkan di industri.
1. Struktur Website Dengan HTML Dasar
Setiap peserta menyusun struktur halaman menggunakan elemen-elemen HTML fundamental:
- Header
- Navigation menu
- Section konten
- Footer
Struktur ini menjadi kerangka utama yang membentuk halaman seperti:
- Home
- Tentang Kami
- Layanan
- Kontak Kami
Dengan HTML dasar, peserta sudah mampu membangun layout terorganisir menyerupai website profesional Hardy Web Studio.
2. Styling Tampilan Dengan CSS Dasar
Setelah struktur terbentuk, peserta memperindah tampilan dengan CSS dasar, seperti:
- Pengaturan warna & tipografi
- Layout menggunakan flexbox
- Spasi, margin, padding
- Hover effect sederhana
- Responsive sederhana
Hasilnya, peserta dapat menghasilkan tampilan yang bersih, modern, dan mudah dibaca—serupa konsep desain:
“Empower Your Business Through Web.”
“Website Profesional, Langkah Awal Kesuksesan.”
3. Elemen-Elemen yang Dibangun Peserta
Dalam tugas ini, peserta meniru komponen yang biasa ada pada website layanan profesional:
a. Hero Section
Dengan heading besar dan sub-headline yang menjelaskan misi web.
b. Statistik Singkat
Seperti:
- 5+ Years Experience
- 50+ Projects Delivered
- 90+ Client Satisfaction
Peserta belajar menyusun teks dan ikon menggunakan kombinasi HTML paragraf dan CSS alignment.
c. Daftar Layanan
Menggunakan struktur card sederhana:
- Premium Website
- Pro Website
- Fullstack
- SEO Optimization
Walaupun pada bootcamp ini peserta hanya fokus pada HTML & CSS dasar, mereka belajar meniru layout profesional seperti layanan:
- HTML, CSS, JavaScript
- Laravel, jQuery, Database
- Bootstrap 5, Tailwind CSS
- UI/UX Pro Design
- Fullstack Integration
- SEO & Performance Optimization
(Bagian-bagian tersebut tetap ditampilkan dalam bentuk konten statis.)
4. Halaman “Tentang Kami”
Peserta membuat section yang menceritakan identitas brand, terinspirasi dari konten:
“Kami menghadirkan solusi digital yang estetik, fungsional, dan dinamis.”
Peserta belajar menyusun paragraf yang rapi, heading yang proporsional, dan foto profil atau logo sederhana.
Mereka juga meniru style penulisan profesional seperti:
“Meskipun masih dalam tahap berkembang, saya berkomitmen memberikan hasil yang rapi dan sesuai kebutuhan.”
5. Halaman “Kontak Kami”
Menggunakan HTML formulir dasar, peserta membuat:
- Formulir nama
- Pesan
- Tombol kirim
Serta bagian informasi kontak statis seperti:
- Alamat
- Nomor WhatsApp
Section ini melatih peserta membuat form, label, input, dan layout fleksibel dengan CSS.
6. Hasil Akhir yang Diharapkan
Di akhir tugas, peserta dapat menghasilkan website:
- Tersusun rapi dengan HTML dasar
- Tampil menarik dengan CSS dasar
- Memiliki navigasi lengkap
- Menjadi latihan nyata membangun landing page profesional
Walaupun masih sederhana, tujuan utamanya adalah memahami pondasi paling penting dari web development sebelum melangkah ke level berikutnya seperti JavaScript, Bootstrap, Tailwind, Laravel, dan teknologi lanjutan lainnya.
