Membangun FrontEnd

 

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

1. Analisis Kebutuhan (Requirement Gathering)

🎯 Tujuan:

Mendefinisikan apa yang akan dibangun

📌 Studi Kasus: Portal Berita

Fitur utama:

• Homepage (headline + berita terbaru)
• Kategori (Politik, Teknologi, Lifestyle)
• Detail berita
• Pencarian berita
• Login/akun user (opsional)
• Bookmark / simpan berita

👥 Target User:

• Pembaca umum
• Siswa / mahasiswa
• Profesional

🧠 Output:

• User Requirement Document
• Daftar fitur (feature list)

2. Perancangan UI/UX (Wireframe & Design)

🎯 Tujuan:

Mendesain tampilan dan pengalaman pengguna

✏️ Wireframe (low fidelity)

Struktur:

• Header (logo + menu)
• Hero headline
• List berita
• Sidebar (trending / kategori)
• Footer

🎨 High Fidelity Design (UI Design)

Tools:

• Figma
• Adobe XD

•  Output:

  • Design system (warna, font, spacing)
  • Prototype interaktif

  ---

  ⚙️ 3. Perencanaan Teknologi (Tech Stack)

  🎯 Tujuan:

  Menentukan tools untuk development

  💻 Front-End Stack:

  • HTML5
  • CSS3 (Flexbox, Grid)
  • JavaScript (ES6)

  Framework:

  • React
  • Bootstrap
  • Tailwind CSS (opsional)

  📦 Tools:

  • Visual Studio Code
  • Git & GitHub

  ---

  🧩 4. Struktur Project

  🎯 Tujuan:

  Membuat struktur folder yang rapi

  🧱 5. Implementasi UI (Coding HTML, CSS, JS)

  🎯 Tujuan:

  Mengubah desain menjadi kode

https://legacy.reactjs.org/tutorial/tutorial.html

https://codepen.io/gaearon/pen/oWWQNa?editors=0010

https://react.dev/learn/writing-markup-with-jsx

https://vite.dev/

https://v3.vitejs.dev/guide/

https://idwebhost.com/blog/vite-adalah/

https://idwebhost.com/blog/bash-adalah/

https://learn.microsoft.com/id-id/shows/reactor/introduction-to-bash

https://idwebhost.com/blog/vercel-adalah/

https://www.youtube.com/watch?v=9hb_0TZ_MVI

https://indodax.com/academy/apa-itu-vercel-platform-developer-crypto/