PWeb - Proyek 3

 

Judul Proyek:

“BeritaKu - Portal Berita Online Sederhana”

---

Deskripsi Proyek:

Aplikasi web halaman berita yang menyajikan berbagai artikel, dilengkapi dengan gambar, tanggal publikasi, dan fitur pencarian berita. Tujuannya adalah untuk membuat portal berita sederhana yang informatif dan responsif.

---

Tujuan Pembelajaran:

• Membangun struktur HTML5 yang semantik untuk konten berita

• Mendesain layout artikel dengan CSS

• Menambahkan interaksi seperti pencarian dan filter dengan JavaScript

• Memahami komponen umum dalam portal berita

---

Fitur-Fitur yang Harus Diimplementasikan:

1. Halaman Utama (Beranda)

• Menampilkan daftar berita terbaru (title, thumbnail, ringkasan, tanggal)

• Layout responsif dengan 2 atau 3 kolom menggunakan CSS Grid/Flexbox

• Judul berita dapat diklik untuk menuju ke halaman detail

2. Halaman Detail Berita

• Tampilkan isi lengkap dari satu artikel: judul, penulis, tanggal, gambar utama, dan isi berita

• Tombol “Kembali ke Beranda”

3. Pencarian Berita

• Input pencarian untuk mencari berita berdasarkan kata kunci (JavaScript)

• Hasil pencarian ditampilkan secara dinamis

4. Kategori Berita (opsional)

• Tampilkan kategori: teknologi, pendidikan, olahraga, dll

• Saat klik kategori, filter berita berdasarkan kategori tersebut

5. Navigasi

• Navigasi antar halaman: Beranda, Tentang Kami, Kontak

• Tambahkan navigasi sticky jika memungkinkan

---

Teknologi yang Digunakan:

Teknologi	Kegunaan
HTML	Struktur halaman dan artikel berita (gunakan tag semantik seperti <article>, <section>, <aside>, <nav>)
CSS	Layout halaman dan styling elemen berita (Grid, Flexbox, media queries)
JavaScript	Pencarian berita, filter berdasarkan kategori, interaksi tombol, manipulasi DOM