htmlcssjavascripterrorlandingPemula8 mnt baca

Halaman 404 Kreatif

Membangun halaman error 404 yang lucu dan membantu dengan animasi dan game mini.

Kenapa 404 Butuh Desain?

Halaman 404 muncul saat URL salah. Halaman 404 yang buruk membuat pengunjung pergi; yang baik membuat mereka tersenyum dan kembali menjelajah. Ini kesempatan menunjukkan kepribadian brand.

Langkah Membangun

HTML: Angka "404" raksasa, ilustrasi/pesan lucu ("Ups! Halaman ini tersesat di luar angkasa"), tombol "Kembali ke Beranda", dan link populer.

CSS: Animasi mengambang pada ilustrasi (astronot/planet dengan emoji), angka 404 dengan efek glitch atau gradien. Background bertema luar angkasa dengan bintang-bintang (titik-titik putih via box-shadow atau radial-gradient).

JS: Dua fitur interaktif:

Game mini: "klik astronot yang bergerak" untuk menghibur sambil menunggu.
Tombol kembali otomatis menghitung mundur 10 detik lalu redirect ke beranda (bisa dibatalkan).

Prinsip Error Page yang Baik

Jelaskan dengan bahasa manusia (bukan "Error 404 Not Found" saja).
Tawarkan jalan keluar (tombol beranda, pencarian, link populer).
Hibur sedikit (humor yang sopan).

Kesalahan Umum

Hanya menampilkan teks error tanpa navigasi (pengunjung buntu).
Redirect otomatis terlalu cepat tanpa opsi batal (minimal 10 detik + tombol batal).
Humor yang menyinggung atau membingungkan pengguna internasional.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Efek Glitch pada 404

Tambahkan efek glitch pada angka 404: teks berbayang merah/biru yang bergeser acak setiap beberapa detik memakai pseudo-element dan clip-path.

Kuis Bab

Uji pemahamanmu: Persiapan & Navigasi

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Di mana sebaiknya tag <script> diletakkan agar elemen HTML sudah tersedia saat JS berjalan?

2.Properti CSS apa yang membuat navbar menempel di atas saat halaman di-scroll?

3.Fungsi CSS apa yang membuat ukuran font responsif otomatis tanpa media query?

4.Kenapa mega menu memakai position: absolute dengan acuan navbar, bukan item menu?