Alatunniste ja viimeistely · Koodaa Martinin kanssa

Viimeistele verkkosivusi ulkoasu: alatunniste, pienet yksityiskohdat jotka tekevät suuren vaikutuksen, ja lopputarkistus.

Näytän sinulle: alatunniste

Alatunniste sulkee sivun. Se on yleensä tummempi, rauhallinen ja pysyy alhaalla:

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 */
}

Alatunnisteessa pitäisi olla: kuka teki verkkosivun, vuosi ja yhteystiedot (voit keksiä ne tai käyttää koulun – älä koskaan laita kotiosoitettasi tai puhelinnumeroasi verkkosivulle).

Näytän sinulle: pienet yksityiskohdat jotka tekevät sinusta ammattilaisen

Kolme pientä asiaa joita melkein kukaan ei tiedä, mutta ne tekevät valtavan eron:

/* 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) kasvattaa elementin 103 % kokoon, ja transition sanoo: “Tee muutokset sujuvasti 0,2 sekunnissa.” Vie hiiri kuvan päälle – näetkö tuon lempeän pienen noston? Juuri sitä modernit verkkosivut tekevät.

Nyt sinun vuorosi 💪

Tyylittele alatunnisteesi esimerkin mukaan (voit sovittaa värin headeriin) ja tarkista että siinä on: kuka teki verkkosivun + vuosi.
Lisää kolme ammattilaisen yksityiskohtaa esimerkistä.
Iso tarkistus koko verkkosivustasi. Käy läpi tämä lista:
- Valikko toimii jokaiselta sivulta jokaiselle sivulle.
- Kaikki kuvat näkyvät ja alt on täytetty.
- Pienennä ikkuna puhelimen leveydeksi – kaikki mahtuu, mikään ei valu sivusuunnassa.
- Alatunnisteessa ei ole kotiosoitetta, puhelinnumeroa tai täyttä koulu-/luokkatietoa (turvallisuus!).
- <title> on järkevä jokaisella sivulla.

Täydellinen alatunnisteratkaisu (säädä värit)

HTML (sama jokaisella sivulla):

<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);
}

⚠️

Turvallisuus ensin: seuraavassa oppitunnissa verkkosivusi menee oikeaan internetiin, jossa kuka tahansa voi nähdä sen. Siksi siinä ei saa koskaan olla: tarkkaa kotiosoitettasi, puhelinnumeroa, sähköpostia, täyttä koulun nimeä luokalla tai kuvia joista sinä tai niissä olevat ihmiset eivät olisi mukavia. Käy verkkosivu läpi vanhemman kanssa ja tarkistakaa yhdessä.

✅

Tarkista itse: Verkkosivullasi on header valikolla, sisältö mukavassa sarakkeessa, kortit, kuvat, alatunniste – ja asiat liikkuvat lempeästi kun viet hiiren niiden päälle. Se näyttää oikealta verkkosivulta. Koska se on sellainen! Yksi viimeinen askel jäljellä: näytä se maailmalle.

Mitä opit tästä oppitunnista

Alatunniste: tumma tausta, vaalea teksti, text-align: center, margin-top.
transition + transform = sujuvat pienet animaatiot, aivan kuin ammattilaisverkkosivuilla.
Tarkista aina sisältö vanhemman silmin ennen julkaisua – henkilötiedot eivät kuulu internetiin.