Day 5 — Polish, Publish & Gallery Walk

Finish your site · Get it online · Show it off

Schedule

Add One More Feature (JavaScript)

You have JavaScript now — add one finishing touch that makes people stop and look at the gallery walk. Every example below is complete: copy it in, change it to fit your site. Each can live in your script.js file (just drop the surrounding <script> tags).

Starter · Auto-updating footer year

The year updates itself, forever — every professional site does this.

<footer>© <span id="year"></span> My Site</footer>

<script>
  document.querySelector("#year").textContent = new Date().getFullYear();
</script>

Starter · Back-to-top button

A button that appears once you scroll down and smooth-scrolls back up.

<button id="topBtn" style="position: fixed; bottom: 1rem; right: 1rem; display: none;">↑ Top</button>

<script>
  const topBtn = document.querySelector("#topBtn");
  window.addEventListener("scroll", () => {
    // show it only after scrolling down a bit
    topBtn.style.display = window.scrollY > 300 ? "block" : "none";
  });
  topBtn.addEventListener("click", () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>

Standard · Countdown timer

Count down to an event — great for a party, tournament, or launch page.

<p id="countdown"></p>

<script>
  const target = new Date("2026-12-31");   // your event date
  const out = document.querySelector("#countdown");

  function update() {
    const days = Math.floor((target - new Date()) / 86400000);  // ms per day
    out.textContent = days + " days to go!";
  }
  update();                    // show it right away
  setInterval(update, 1000);   // then keep it fresh
</script>

Standard · Image slideshow

Next / previous buttons cycle through a list of photos and wrap around.

<img id="slide" src="photo1.jpg" alt="slideshow">
<button id="prev">‹ Prev</button>
<button id="next">Next ›</button>

<script>
  const pics = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
  let i = 0;
  const img = document.querySelector("#slide");

  document.querySelector("#next").addEventListener("click", () => {
    i = (i + 1) % pics.length;                 // wrap to the first after the last
    img.src = pics[i];
  });
  document.querySelector("#prev").addEventListener("click", () => {
    i = (i - 1 + pics.length) % pics.length;   // wrap to the last before the first
    img.src = pics[i];
  });
</script>

Standard · Live filter / search

Type in a box to filter a list as you go — perfect for a review or recipe site.

<input id="search" placeholder="Filter my list...">
<ul id="list">
  <li>Inception</li>
  <li>Interstellar</li>
  <li>Dune</li>
  <li>Arrival</li>
</ul>

<script>
  const box = document.querySelector("#search");
  box.addEventListener("input", () => {
    const term = box.value.toLowerCase();
    document.querySelectorAll("#list li").forEach(li => {
      const match = li.textContent.toLowerCase().includes(term);
      li.style.display = match ? "" : "none";   // hide the ones that don't match
    });
  });
</script>

<button id="dogBtn">New dog 🐶</button><br>
<img id="dog" alt="a random dog" width="300">

<script>
  document.querySelector("#dogBtn").addEventListener("click", () => {
    fetch("https://dog.ceo/api/breeds/image/random")   // ask the API
      .then(res => res.json())                          // turn the reply into data
      .then(data => {
        document.querySelector("#dog").src = data.message;  // show the photo
      });
  });
</script>

Before You Publish — Final Check

Walk through your site once before it goes live. Fix these first:

• Every image loads — check the file names, and that the image files are in the folder you'll upload.
• Every link works — click all of them, including your nav bar.
• It reads well narrow — drag your browser skinny; does text stay readable and do cards stack?
• Your one interactive feature works — and the console (F12) shows no red errors.
• No leftover placeholder text like "lorem ipsum" or "hero.jpg".
• Your main file is named index.html — hosts open that one first.

Publish — Pick a Host

Time to put your site on the real internet. You'll leave with a link you can text to a friend. Pick one:

Gallery Walk

No presentations, no pressure. Open your finished site on your screen. For 30 minutes, walk around and browse everyone else's — find the coolest design, the funniest content, the neatest feature. Trade links.

Add a Favicon (Stretch)

The favicon is the tiny icon in the browser tab. Adding one makes your site feel finished.

1. Find or make a small square image and save it as favicon.png in your site folder (an emoji screenshot works fine).
2. Add this line inside your <head>:

<link rel="icon" href="favicon.png">

Keep Going After Camp

• MDN Web Docs — the reference for everything web
• Frontend Mentor — real designs to rebuild
• freeCodeCamp — a full free web-design course

The Rest of the Web-Dev World

You built the front end — the part that runs in the browser. That's a real skill, and it's just the start. Here's what else is out there to explore when you're ready:

• Back-end / server-side — code that runs on a server instead of the browser (handling logins, saving data, sending email). Languages: Python, Node.js (JavaScript), PHP, Go, Ruby.
• Databases — store data that sticks around between visits: SQL, PostgreSQL, MySQL, SQLite.
• JavaScript frameworks — tools for building bigger, app-like sites: React, Vue, Svelte.
• CSS frameworks & tools — style faster and stay consistent: Tailwind, Sass, Bootstrap.
• Git & GitHub — version control: track every change and collaborate with others (you already touched this with GitHub Pages).
• APIs & full-stack — connect your front end to live data and services, and build the whole thing end to end.