htmlcssjavascriptfooterlandingPemula8 mnt baca

Footer Modern

Membangun footer lengkap: kolom link, newsletter, ikon sosial media, dan copyright.

Footer adalah "ruang bawah tanah" website: peta situs, kontak, newsletter, dan legal. Pengguna yang scroll sampai bawah biasanya mencari sesuatu yang spesifik; footer yang baik membantu mereka menemukannya.

Langkah Membangun

HTML: <footer> berisi 4 kolom: tentang + ikon sosial, link produk, link perusahaan, dan form newsletter. Di bawahnya bar copyright dengan "Syarat & Ketentuan" dan "Privasi".

CSS: Grid 4 kolom yang menjadi 1-2 kolom di HP. Background gelap agar kontras dengan konten. Ikon sosial sebagai lingkaran dengan hover berubah warna.

JS: Form newsletter dengan validasi email sederhana. Saat dikirim, tampilkan pesan sukses dan simpan ke localStorage agar tidak meminta email yang sama dua kali.

  1. Navigasi: Kelompok link yang logis.
  2. Kontak: Email, telepon, alamat.
  3. Newsletter: Cara membangun audiens.
  4. Legal: Copyright dengan tahun OTOMATIS (jangan tulis manual!).
  5. Sosial: Link ke media sosial.

Kesalahan Umum

  • Tahun copyright ditulis manual ("© 2023" di tahun 2026) -> pakai new Date().getFullYear().
  • Terlalu banyak link hingga footer seperti labirin (maksimal 5-6 per kolom).
  • Newsletter tanpa validasi dan feedback (pengguna tidak tahu terkirim atau tidak).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tombol Kembali ke Atas di Footer

Tambahkan link "↑ Kembali ke atas" di bar bawah footer yang smooth-scroll ke atas halaman.