Belajar CSS Bagian 11 : Fill Project HTML (Panduan Lengkap Mengisi Proyek Website Company Profile)

Setelah mempelajari dasar HTML dan CSS, langkah berikutnya yang sangat penting adalah mengisi proyek secara utuh.
Pada tahap ini, kita tidak lagi sekadar belajar tag, tetapi mulai menyusun halaman website nyata, yaitu Company Profile Website.

Tahap ini disebut Fill Project HTML:
👉 proses melengkapi struktur HTML dari atas sampai bawah sebelum fokus ke styling CSS.

---

Tujuan Tahap Fill Project HTML

Tahap ini bertujuan untuk:

• Mengisi seluruh struktur konten website

• Menyusun elemen secara teratur dan rapi

• Menyiapkan HTML yang siap di-styling dengan CSS

💡 Prinsip penting:

HTML harus beres dulu, CSS menyusul belakangan.

---

Gambaran Umum Proyek

Website yang dibuat adalah Company Profile, yang berisi:

• Header

• Hero / Landing Section

• About / Statistik

• Our Services

• Contact

• Footer

Struktur ini menyerupai rumah:

• Fondasi → project

• Dinding → section

• Pintu & jendela → konten & statistik

• Dekorasi → CSS

---

1. Menyiapkan Folder Gambar (Images)

Langkah awal adalah mengatur aset gambar.

Langkah-langkah:

1. Download file gambar (biasanya bentuk .zip)

2. Extract file tersebut

3. Buat folder bernama images di dalam project

4. Masukkan semua gambar ke folder images

📌 Praktik ini penting agar:

• File terorganisir

• Mudah dipanggil di HTML & CSS

---

2. Mengisi Hero / Landing Section

Struktur Dasar:

Hero section biasanya dibagi menjadi dua bagian:

• Kiri → gambar

• Kanan → teks

<section class="hero">
  <div class="hero-left">
    <img src="images/landing.png" alt="Landing Image">
  </div>

  <div class="hero-right">
    <h1>We Are The Best In Our Field</h1>
    <p>For the last 5 years, we always deliver the best result.</p>
  </div>
</section>

📌 Gunakan:

• alt untuk aksesibilitas

• Struktur div yang jelas

---

3. Membuat Section Statistik

Bagian statistik menampilkan angka pencapaian perusahaan.

Konsep:

• 1 container utama

• Dipecah menjadi 3 div statistik

<div class="stats">
  <div class="stat">
    <h2>500+</h2>
    <p>Projects</p>
  </div>

  <div class="stat">
    <h2>100+</h2>
    <p>Experts</p>
  </div>

  <div class="stat">
    <h2>5+</h2>
    <p>Years Experience</p>
  </div>
</div> 

📌 Teknik ini fleksibel dan mudah diatur dengan CSS.

---

4. Our Services Section

Bagian ini menjelaskan layanan yang ditawarkan.

Struktur Utama:

• Judul

• Deskripsi

• Tombol Call to Action

• Kartu layanan (Service Cards)

<section class="services">
  <h1>Our Services</h1>
  <p>We provide the best solutions for your business</p>
 

---

Tombol Call to Action

<a href="#" class="btn">Contact Us</a> 

📌 Gunakan <a> dengan class btn agar:

• Bisa distyling seperti tombol

• Mudah diarahkan ke halaman lain

---

Service Cards (3 Kotak)

<div class="service-list">
  <div class="service-card">
    <img src="images/service1.png" alt="Web Application">
    <h3>Web Application</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="service-card">
    <img src="images/service2.png" alt="UI/UX Design">
    <h3>UI/UX Design</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="service-card">
    <img src="images/service3.png" alt="Mobile Application">
    <h3>Mobile Application</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div> 

📌 Isi teks boleh dummy dulu, yang penting struktur lengkap.

---

5. Contact Section (Form + Location)

Bagian kontak dibagi menjadi dua kolom:

• Kiri → Form

• Kanan → Location (Google Maps)

---

Form Kontak

<form>
  <label>Name</label>
  <input type="text">

  <label>Email</label>
  <input type="email">

  <label>Message</label>
  <textarea></textarea>

  <button type="submit">Submit</button>
</form> 

📌 Elemen yang digunakan:

• label

• input

• textarea

• button

---

Location (Google Maps)

<iframe src="https://www.google.com/maps/embed?..." width="100%" height="250"> </iframe> 

📌 Gunakan Google Maps Embed agar:

• Lokasi terlihat profesional

• Mudah disesuaikan

---

6. Footer Section

Footer biasanya dibagi menjadi dua bagian:

• Kiri → Info / teks

• Kanan → Social Media

<iframe 
  src="https://www.google.com/maps/embed?..."
  width="100%" 
  height="250">
</iframe> 

📌 Bisa menggunakan gambar ikon atau font icon.

---

Kenapa Banyak Menggunakan <div>?

Karena <div>:

• Mudah dibagi

• Fleksibel

• Cocok dikombinasikan dengan Flexbox/Grid

• Memudahkan pengelompokan konten

Div adalah kerangka utama layout HTML modern.

---

Prinsip Penting Fill Project HTML

1. Jangan fokus desain dulu

2. Lengkapi HTML secara menyeluruh

3. Gunakan struktur konsisten

4. Pastikan semua section ada

5. Baru lanjut ke CSS

---

Ringkasan Tahapan Fill Project HTML

1. Siapkan folder project

2. Tambahkan images folder

3. Isi hero section

4. Tambahkan statistik

5. Buat services

6. Tambahkan contact + form

7. Pasang map

8. Buat footer

9. Rapikan struktur

---

Penutup

Tahap Fill Project HTML adalah jembatan antara:

• belajar HTML/CSS
  dan

• membangun website nyata

Jika HTML sudah rapi:
➡️ Styling jadi mudah
➡️ Flexbox & Grid bekerja optimal
➡️ Website siap dikembangkan lebih lanjut