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 |
