Winter Holiday Website Project

It’s time to build a real holiday-themed website! You and your group will use HTML (and a little CSS) in our online editor to create a webpage that celebrates a winter holiday you love — traditions, food, decorations, music, or memories.

← Back to 7th Grade

Step-by-Step Instructions

  • Open the class editor.
    Go to https://class.bsfstem.com/edit/ and log in with our class username and password.
    • Hint: If you see a “code-server is being accessed in an insecure context” message, that’s okay. It’s just reminding you we’re using a web editor.
  • Open your group’s folder.
    In the left sidebar (Explorer), click Open Folder and choose /var/www/students. Then open the folder for your group (for example, group1), and click on index.html.
  • Set up your basic HTML structure.
    Make sure your file has this basic skeleton: 
    • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Holiday Web Page</title>
</head>
<body>
  <!-- Your holiday content goes here -->
</body>
</html>
    Hint: Everything that visitors can see belongs between <body> and </body>.
  • Add the required tags for your content.
    Your page must include all of these:
    • <html> — wraps the whole page.
    • <head> and <title> — set the page title (in the browser tab).
    • <body> — holds all visible content.
    • <h1> — main heading for your page.
    • <p> — a paragraph describing your holiday.
    • <ul> and <li> — a list of your favorite things about the holiday (at least 3 items).
  • Choose at least 2–4 extra tags to make your page interesting.
    Pick from this list until your page has at least 8–10 total tags:
    • <h2> — subheading for a new section (like “Favorite Foods” or “Traditions”).
    • <a> — a link to a recipe, song, story, or holiday event.
    • <img> — an image related to your holiday (use an online image or one your teacher provides).
    • <strong> — bold important words.
    • <em> — italicize something for emphasis.
    • <br> — line break to add spacing.
    • Example: <h1>Happy Hanukkah!</h1>
    <p>My family celebrates by...</p>
    <h2>My Favorite Traditions</h2>
    <ul>...</ul>
  • Save and view your live website.
    Press Ctrl + S (or use the menu) to save your file. Then open your group’s site in a new tab, for example:
    https://class.bsfstem.com/group1/
    (Your teacher will tell you which group URL to use.)
    • If something doesn’t look right, double-check that every opening tag has a matching closing tag and that your tags are nested in the correct order.
  • Make it festive with style!
    Open style.css in your group folder and:
    • Choose a color scheme that matches your holiday (winter blues, red & green, gold & white, etc.).
    • Change the font size and style for your headings and body text.
    • Add borders, backgrounds, or spacing to make sections stand out.
  • Polish and prepare to share.
    Read your page out loud. Check spelling, grammar, and that all requirements are complete:
    • All mandatory tags are included.
    • You used at least 2–4 optional tags.
    • Your page is readable, organized, and looks like a real website.