Understand & Fix the Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Film Night · Erasmus Club</title>
  <style>
    body { font-family: sans-serif; margin: 0;
           text-align: center; }
    .hero { background: #1f1140; color: white;
            padding: 40px 20px; }
    .btn { background: #f5a300; font-size: 18px;
           padding: 12px 24px; border: 0; }
    @media (max-width: 600px) {
      .hero h1 { font-size: 28px; }
    }
  </style>
</head>
<body>
  <header class="hero">
    <h1>Film Night 🎬</h1>
    <p>Friday 9 October · 19:00 · Room B12</p>
  </header>
  <section>
    <h2>Join us!</h2>
    <p>Free popcorn. Bring a friend.</p>
    <button class="btn" id="join-btn">I'm coming</button>
    <p id="message"></p>
  </section>
  <script>
    const button = document.getElementById("join-btn");
    const message = document.getElementById("message");

    function sayThanks() {
      message.textContent = "See you there! 🍿";
    }

    button.addEventListener("click", sayThanks);
  </script>
</body>
</html>

1. <!DOCTYPE html> is always the very first line. It tells the browser: “This page uses modern HTML.” Visitors never see it.

   If you delete it: the browser switches to an old “quirks mode” from the 1990s. Sizes and spacing can suddenly look strange.

2. Everything between <head> (line 3) and </head> (line 19) is information for the browser, not content for visitors.

   Line 4, charset="utf-8", lets the page show every letter and emoji: ü, ç, ş, é, 🎬.

   If you delete the charset line: special letters can turn into strange symbols, like ü instead of ü.

3. This tag tells phones: “Use your real screen width.” It is split over two lines, and that's fine: HTML doesn't care about line breaks inside a tag.

   If you delete it: phones pretend to be a big desktop screen and show your page tiny and zoomed out. Your phone rules on line 15 stop working properly. Always keep this tag!

4. The text inside <title> appears in the browser tab, in bookmarks, in search results and when you share the link. Keep it short and clear.

   If you delete it: the tab shows the file name or web address instead, for example film-night.html. It looks unfinished.

5. On line 21, class="hero" is like a name tag on the header. On line 11, .hero (with a dot!) means “style everything that wears the name tag hero”. That's how CSS and HTML connect.

   The names must match exactly: hero, Hero and heros are three different names.

   If you delete or misspell class="hero": the header loses its dark background and white text. There is no error message. It just looks plain.

6. A CSS rule starts with a selector (.btn = “which elements?”). Then come curly brackets { } with property: value; pairs inside.

   #f5a300 is a hex color code: a color written as 6 characters (here: amber). 18px means 18 pixels, the size of the letters.

   If you delete a ;: the browser can't tell where one pair ends and ignores the next pair. Delete the } and the rules after it can break too.

7. @media (max-width: 600px) means: “Use the rules inside only when the screen is 600 pixels wide or less.” That's phones. Here the big title gets smaller so it fits.

   If you delete it: the page still works, but on a phone the long title may break into ugly lines or stick out of the screen.

8. id="join-btn" (line 28) gives the button a unique name. On line 32, document.getElementById("join-btn") means “find the element with the id join-btn”.

   Class or id? Many elements can share a class (for style). An id must be used only once per page.

   If the two names don't match: JavaScript finds nothing and the button does nothing. This is one of the most common AI bugs. You'll hunt it further down!

9. function sayThanks() { … } is a list of steps with a name. When the browser reads it, nothing happens yet. It waits until someone calls the function.

   Line 36 is the only step: put the text “See you there! 🍿” into the empty paragraph <p id="message"> from line 29.

   If you delete it: line 39 calls a recipe that doesn't exist. The Console shows a red error: sayThanks is not defined.

10. addEventListener("click", sayThanks) means: “When someone clicks this button, run sayThanks.” An event is something that happens on the page: a click, a key press, scrolling.

    Notice: sayThanks has no () here. We hand over the recipe; the browser runs it later, at the moment of the click.

    If you delete it: the page looks exactly the same, but clicking the button does nothing.