Interactive HTML + JavaScript Mission Worksheet

Use this sheet to capture notes, fill in blanks, and keep track of what you learned today. No perfect answers needed; curiosity wins.

1) Warm-Up Check-In

  • One website I like to use:
  • One thing I want to make interactive:

2) HTML Structure

Fill in the blanks.

  • HTML is the of a web page.
  • A label uses the attribute to connect to an input.
  • An is for short text; a is for longer messages.

3) CSS Style Notes

  • One CSS property that adds space:
  • One CSS property that changes color:
  • A class I used for color themes:

4) DOM + JavaScript Basics

Complete the sentence:

  • The DOM is:
  • querySelector helps us:
  • textContent is used to:

5) Event Listener Practice

Write the missing pieces:

const titleInput = document.querySelector("#titleInput");
const updatePreview = () => {
  // update text here

};

titleInput.addEventListener("________", updatePreview);

6) Message Box Planning

Plan your message box content:

  • Title text:
  • Message text:
  • Theme color:
  • Box size (px):

7) Reflection

  • Coolest thing I made today:
     
  • One thing I want to add to my project: