Catatan kaki dan sentuhan akhir

Selesaikan tampilan situs web kamu: footer, detail kecil yang memberi kesan besar, dan pemeriksaan terakhir.

Sebuah footer menutup halaman. Biasanya lebih gelap, tenang, dan tetap di bawah:

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

Catatan kaki harus mencantumkan: siapa yang membuat situs web, tahun, dan informasi kontak (silakan membuat ulang atau menggunakan milik sekolah – jangan pernah mencantumkan alamat rumah atau nomor telepon kamu di situs web).

Tunjukkan pada saya: detail kecil yang membuat kamu terlihat seperti seorang profesional

Tiga hal kecil yang hampir tidak diketahui oleh siapa pun, namun dapat memberikan perbedaan besar:

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) memperbesar ukuran elemen menjadi 103%, dan transition mengatakan: “Lakukan perubahan dengan lancar dalam 0,2 detik.” Arahkan mouse kamu ke atas foto – lihat lift kecil yang lembut itu? Itulah tepatnya yang dilakukan situs web modern.

Giliran kamu 💪

Tata gaya footer kamu dengan mengikuti contoh (jangan ragu untuk mencocokkan warna dengan header kamu) dan periksa apakah itu mencakup: siapa yang membuat situs web + tahunnya.
Tambahkan tiga detail pro dari contoh.
Pemeriksaan besar-besaran terhadap keseluruhan situs web kamu. Periksa daftar periksa ini:
- Menu berfungsi dari setiap halaman ke setiap halaman.
- Semua gambar muncul dan diisi alt.
- Kecilkan jendela hingga lebar ponsel – semuanya pas, tidak ada yang meluap ke samping.
- Footer tidak memiliki alamat rumah, nomor telepon, atau info lengkap sekolah/kelas (keamanan!).
- <title> masuk akal di setiap halaman.

Solusi footer lengkap (sesuaikan warnanya)

HTML (sama di setiap halaman):

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

Keselamatan diutamakan: pada pelajaran berikutnya, situs web kamu akan terhubung ke internet sebenarnya, sehingga siapa pun dapat melihatnya. Jadi, jangan pernah mencantumkan: alamat rumah persis kamu, nomor telepon, email, nama lengkap sekolah beserta kelasnya, atau foto apa pun yang membuat kamu atau orang-orang di dalamnya merasa tidak nyaman. Buka situs web bersama orang tua dan periksa bersama.

✅

Periksa diri kamu: Situs web kamu memiliki header dengan menu, konten di kolom yang bagus, kartu, foto, footer – dan segala sesuatunya bergerak dengan lembut saat kamu mengarahkan kursor ke atasnya. Ini terlihat seperti situs web nyata. Karena itu satu! Masih ada satu langkah terakhir: menunjukkannya kepada dunia.

Apa yang bisa diambil dari pelajaran ini

Footer: latar belakang gelap, teks terang, perataan teks: tengah, margin-top.
transition + transform = animasi mikro yang halus, sama seperti situs web pro.
Selalu periksa ulang konten kamu dari sudut pandang orang tua sebelum dipublikasikan – informasi pribadi tidak boleh disimpan di internet.

Tunjukkan pada saya: footer

Tunjukkan pada saya: detail kecil yang membuat kamu terlihat seperti seorang profesional

Giliran kamu 💪

Apa yang bisa diambil dari pelajaran ini