Checkpoint: You Can Build a Page That Responds

You can build a page that responds to its visitor.

That is not a vague cheer. It is a concrete claim about what this act put in your hands. Run the page below. Scroll the preview to Skills for the cards and count, and to Contact for the form. Both sit below the header. If you already ran the exercises through the skills count, this sandbox should open with your own version. If not, it opens with the completed Act III starter, the same behaviour either way. Try the buttons, the theme toggle, the skills summary, and the contact form.

YOUR PAGE AT THE END OF ACT III · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <p class="tagline"></p>
      <button type="button" class="change-tagline btn">Change tagline</button>
      <button type="button" class="theme-toggle btn">Toggle theme</button>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row"></ul>
        <p class="skill-summary"></p>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
        <p class="form-feedback"></p>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
    <script>
      function setTagline(text) {
        const tagline = document.querySelector(".tagline");
        tagline.textContent = text;
        tagline.classList.add("is-set");
      }
      const profile = {
        name: "Your Name",
        tagline: "Building things for the web",
      };
      const heading = document.querySelector("h1");
      heading.textContent = profile.name;
      setTagline(profile.tagline);
      let showingAlt = false;
      function showAltTagline() {
        if (showingAlt) {
          setTagline(profile.tagline);
          showingAlt = false;
        } else {
          setTagline("Learning in public");
          showingAlt = true;
        }
      }
      const changeButton = document.querySelector(".change-tagline");
      changeButton.addEventListener("click", showAltTagline);
      let theme = "light";
      function toggleTheme() {
        if (theme === "dark") {
          document.body.classList.remove("theme-dark");
          theme = "light";
        } else {
          document.body.classList.add("theme-dark");
          theme = "dark";
        }
      }
      const themeButton = document.querySelector(".theme-toggle");
      themeButton.addEventListener("click", toggleTheme);
      const skills = [
        { name: "HTML", role: "Structure" },
        { name: "CSS", role: "Look" },
        { name: "JavaScript", role: "Behaviour" },
      ];
      const skillRow = document.querySelector(".skill-row");
      for (const skill of skills) {
        const item = document.createElement("li");
        item.classList.add("skill-card");
        item.textContent = skill.name;
        skillRow.append(item);
      }
      const skillSummary = document.querySelector(".skill-summary");
      skillSummary.textContent = "Skills listed: " + skills.length;
      const contactForm = document.querySelector("form");
      const nameInput = document.querySelector("#name");
      const feedback = document.querySelector(".form-feedback");
      function showThanks(event) {
        event.preventDefault();
        feedback.textContent = "Thanks, " + nameInput.value;
      }
      contactForm.addEventListener("submit", showThanks);
    </script>
  </body>
</html>

RUN TO SEE YOUR PAGE

What this page can do

Everything interactive on that page was added on purpose, one lesson at a time. Structure came from Act I. Styling came from Act II.

It runs JavaScript from a <script> at the end of body. It stores values, including lists and labeled objects. It finds elements with querySelector and updates text with textContent. It wraps repeated steps in functions and listens for clicks with addEventListener. It branches with if / else so one control can flip light and dark, and so the tagline button can alternate. It walks an array with for…of, builds skill cards with createElement and append, and reads skill.name from objects. It can count matching skills with a running total (count = count + 1 inside a loop). On this shared page the skills line is visitor-facing: "Skills listed: " + skills.length. It reads an input's .value on submit and answers on the page.

You can download those files from the sandbox and open them outside this site. The behaviour is real JavaScript, not a demo that only works here.

Real projects give JavaScript its own file the same way CSS got one. This track kept the script inline so each lesson could stay on one idea. When you leave the rails, a script.js next to index.html and styles.css is the usual next step.

What it cannot do yet

It responds on this profile page because the lessons led you there. That is not the same as building a second project from a blank file with no starter in front of you. Wiring a small app end to end, from a blank file, is what sits ahead. The scoring pieces themselves, the running total, the comparison, the loop, you have already written.

What comes next

The capstone asks you to prove it without the rails. You will build a mini quiz app from scratch: HTML structure, CSS layout, and JavaScript scoring over an array of question objects. It is a second thing, not another section on this profile page. One continuous track got you here. The capstone checks whether the pieces travel with you.