FRONT END - Html Coding

 

https://www.youtube.com/watch?v=-nytw2hZw20

https://www.youtube.com/watch?v=tVBuw-RkUU4&list=PLQW-B1cY2ZzN-AuoEoaDYa8ROgwVMbzVE

https://www.youtube.com/watch?v=WG5ikvJ2TKA

https://www.youtube.com/watch?v=XBu54nfzxAQ

Analisis Kebutuhan

      ↓

Buat Struktur Halaman

      ↓

Wireframe (Low → High)

      ↓

Setup Project

      ↓

HTML (Struktur)

      ↓

CSS (Tampilan)

      ↓

JavaScript (Interaksi)

      ↓

Testing

      ↓

Deploy

Link slide https://drive.google.com/file/d/1KX8js03Je4BThAiL3oEqnqdJrlay6Ohh/view?usp=drive_link

https://drive.google.com/file/d/1dNC928S57Ojwczl5PyxpNzQigZFjc7TL/view?usp=drive_link

LANGKAH-LANGKAH MEMBUAT FRONT-END

(Dari Konsep hingga Implementasi)

---

1️⃣ ANALISIS KEBUTUHAN (Requirement)

🎯 Tujuan

Menentukan apa yang akan dibangun dan untuk siapa.

Langkah:

1. Identifikasi pengguna (user persona)

2. Tentukan tujuan aplikasi

3. Tentukan fitur utama

4. Buat user flow sederhana

Contoh Studi Kasus

Aplikasi: Sistem Pemesanan Makanan UMKM

Fitur utama:

• Lihat daftar menu

• Tambah ke keranjang

• Checkout

• Konfirmasi pesanan

---

2️⃣ MENYUSUN STRUKTUR HALAMAN (Information Architecture)

🎯 Tujuan

Menentukan halaman apa saja yang dibutuhkan.

Contoh struktur:

• Home

• Menu

• Detail Produk

• Cart

• Checkout

---

3️⃣ MEMBUAT WIREFRAME

🎯 Tujuan

Membuat gambaran layout sebelum coding.

---

A. Low Fidelity Wireframe

4

Ciri-ciri:

• Hitam putih

• Kotak-kotak layout

• Belum ada warna

• Fokus struktur

Langkah membuat:

1. Tentukan header

2. Tentukan navigasi

3. Tentukan area konten

4. Tentukan footer

Bisa dibuat di:

• Kertas

• Whiteboard

• Figma

---

B. High Fidelity Wireframe (Mockup)

4

Ciri-ciri:

• Sudah ada warna

• Sudah ada font

• Sudah mirip tampilan final

Langkah:

1. Tentukan color palette

2. Tentukan typography

3. Gunakan grid system

4. Pastikan konsisten

---

4️⃣ SETUP PROJECT FRONT-END

🎯 Tujuan

Menyiapkan struktur kerja yang rapi.

Struktur Folder

project/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    └── images/

Langkah:

1. Buat folder project

2. Buat file HTML

3. Hubungkan CSS

4. Hubungkan JS

---

5️⃣ IMPLEMENTASI HTML (Membangun Struktur)

🎯 Tujuan

Menerjemahkan wireframe menjadi struktur HTML.

Gunakan Semantic HTML:

<header>
  <h1>UMKM Food</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Menu</a>
  </nav>
</header>

<main>
  <section class="menu">
    <article class="card">
      <h3>Ayam Goreng</h3>
      <p>Rp 15.000</p>
      <button>Beli</button>
    </article>
  </section>
</main>

<footer>
  <p>&copy; 2026 UMKM</p>
</footer>

Prinsip:

• Gunakan tag sesuai fungsi

• Gunakan heading berurutan

• Tambahkan alt pada image

---

6️⃣ IMPLEMENTASI CSS (Styling & Layout)

🎯 Tujuan

Mengubah struktur HTML menjadi tampilan sesuai desain.

---

A. CSS Dasar

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

header {
  background: #2E7D32;
  color: white;
  padding: 1rem;
}

---

B. Gunakan Flexbox

.menu {
  display: flex;
  gap: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  width: 200px;
}

---

C. Responsive Design

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

---

7️⃣ IMPLEMENTASI JAVASCRIPT (Interaktivitas)

🎯 Tujuan

Menambahkan behavior ke dalam aplikasi.

---

A. Tambah Event Click

const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", function() {
    alert("Produk ditambahkan ke cart!");
  });
});

---

B. Validasi Form

const form = document.querySelector("form");

form.addEventListener("submit", function(e) {
  e.preventDefault();
  alert("Pesanan berhasil!");
});

---

8️⃣ TESTING

Checklist:

✅ Semua tombol berfungsi
✅ Layout rapi di mobile
✅ Tidak ada error console
✅ Gambar tampil sempurna
✅ Link tidak rusak

Gunakan:

• Chrome DevTools

• Inspect Element

• Lighthouse

---

9️⃣ DEPLOY WEBSITE

Langkah:

1. Upload ke GitHub

2. Aktifkan GitHub Pages
   atau

3. Deploy ke Netlify / Vercel

https://codestudio80.blogspot.com/2026/02/langkah-membuat-front-end.html

https://codestudio80.blogspot.com/2026/02/langkah-membuat-frontend-1.html