Mini Project Front End

 


Project : News Portal Website

Deskripsi: Website portal berita dengan kategori dan headline dinamis.

Fitur:

  • Landing page (headline + trending)
  • Kategori berita (politik, teknologi, olahraga)
  • Detail berita
  • Search berita
  • Dark mode

Project : E-Commerce Product Catalogue

Deskripsi: Katalog produk dengan fitur keranjang.

Fitur:

  • List produk (grid)
  • Detail produk
  • Add to cart (localStorage)
  • Filter & sorting

Project : Portal Online Learning

Deskripsi: Platform pembelajaran online.

Fitur:

  • Dashboard siswa
  • List course
  • Video pembelajaran
  • Progress bar

Project : Booking Hotel Website

Deskripsi: Sistem booking hotel sederhana.

Fitur:

  • Search hotel
  • List kamar
  • Detail + booking form
  • Kalender tanggal


Project :  Job Portal

Deskripsi: Portal lowongan kerja.

Fitur:

  • List job
  • Filter lokasi/kategori
  • Detail pekerjaan
  • Apply form

Projetct :  Food Ordering Website

Deskripsi: Sistem pemesanan makanan online.

Fitur:

  • Menu makanan
  • Cart system
  • Checkout
  • Total harga otomatis

Latihan :

1. Buatkan deskripsi aplikasi
2. Jelaskan fitur yang ada di aplikasi
3. Desain Wireframe
4. Implementasikan dalam Coding dan Struktur File
5. Deploy dan Publikasi.

Studi Kasus HTML 1






Buatlah sebuah website profil sekolah asal menggunakan HTML murni (tanpa CSS dan JavaScript). Website harus terdiri dari minimal 3 halaman yang saling terhubung. Dokumentasi sertakan screenshot website sekolah asal beserta linknya.

📋 Kebutuhan Halaman

1️⃣ index.html

  • Header berisi:

    • Nama Sekolah

    • Logo (gunakan tag <img>)

  • Navigation menu (Home, Jurusan, Kontak)

  • Section:

    • Sambutan Kepala Sekolah

    • Visi & Misi (gunakan <ul> atau <ol>)

  • Footer:

    • Copyright

2️⃣ jurusan.html

  • Daftar jurusan menggunakan:

    • <h2>

    • <p>

    • <ul>

  • Buat tabel jumlah siswa tiap jurusan menggunakan <table>

3️⃣ kontak.html

  • Form kontak menggunakan:

    • <form>

    • <input type="text">

    • <input type="email">

    • <textarea>

    • <button>