Boilerplate HTML5 modern, ringan, dan siap pakai untuk memulai proyek pengembangan web dengan cepat. Dilengkapi dengan optimasi SEO dasar, PWA manifest, kerangka gaya Bootstrap 5, utilitas interaktivitas Alpine.js, serta animasi AOS.
├── css/
│ └── style.css # Kustomisasi stylesheet utama
├── js/
│ └── app.js # Logika JavaScript utama (Alpine & AOS init)
├── 404.html # Halaman error 404 kustom
├── favicon.ico # Favicon universal
├── icon.png # Ikon aplikasi/PWA (PNG)
├── icon.svg # Ikon aplikasi (SVG)
├── index.html # Halaman utama (template boilerplate)
├── LICENSE # Informasi lisensi proyek
├── README.md # Dokumentasi proyek (file ini)
├── robots.txt # Pengaturan perayapan search engine
└── site.webmanifest # Manifest PWA dasar
Proyek ini menggunakan beberapa library eksternal yang dimuat via CDN demi performa yang optimal:
- Bootstrap v5: Framework CSS untuk grid sistem, tata letak responsif, dan komponen UI siap pakai.
- Bootstrap Icons: Pustaka ikon vektor gratis yang dirancang khusus untuk Bootstrap.
- Alpine.js: Framework JavaScript minimalis dan deklaratif untuk menambahkan perilaku/interaktivitas pada HTML.
- AOS (Animate On Scroll): Pustaka animasi ringan yang dipicu ketika elemen masuk ke dalam viewport saat halaman digulir.
- Struktur HTML5 Semantik & Valid: Menggunakan standar HTML5 modern dengan struktur tag yang bersih.
- Kesiapan SEO & Media Sosial:
- Tag metadata standar (
description,keywords,author). - Tag Open Graph (OG) bawaan untuk optimasi pratinjau media sosial (Facebook, Twitter, dll.).
- Dilengkapi
robots.txtdan deklarasi URL kanonikal.
- Tag metadata standar (
- Komponen UI Umum:
- Navbar sticky responsif dengan dropdown tema bawaan (terang/gelap/sistem).
- Tombol Back-to-Top interaktif yang mendeteksi posisi scroll (ditenagai oleh Alpine.js).
- Footer dinamis dengan tahun hak cipta otomatis (
currentYear).
- Optimasi Performa:
dns-prefetchdanpreconnectCDN pra-konfigurasi untuk memuat aset lebih cepat. - Kesiapan PWA (Progressive Web App): File
site.webmanifestdengan konfigurasi tema dan ikon responsif.
- Unduh atau Kloning repositori boilerplate ini ke direktori lokal Anda.
- Buka
index.htmldi browser untuk melihat hasilnya secara langsung. - Kustomisasi:
- Ubah meta tags di bagian
<head>pada index.html sesuai dengan identitas situs Anda. - Tambahkan halaman atau komponen baru di dalam elemen
<main>. - Modifikasi style global di style.css dan logika tambahan di app.js.
- Ubah meta tags di bagian