Help your students learn the foundations of HTML and CSS with this engaging, beginner-friendly project! In this step-by-step activity, students create a complete “My Hero Webpage”, choosing a figure from sports, film, music, or any area of interest. Perfect for ICT, Computer Science, Technology, or Web Design classes.

💻 What Students Will Learn

• Creating and saving HTML files
• Structuring a webpage using HTML tags
  , , , ,

  , ,

  ,
  1. ,
  2. Styling a webpage using an external CSS stylesheet
  3. Adding headings, paragraphs, lists, and multiple images
  4. Formatting with CSS:
     background colors, fonts, text alignment, image styling, borders, and more
  5. Previewing their webpage in a browser
     

📁 What’s Included

✔ Student-friendly PDF with clear step-by-step instructions
✔ Instructions for creating two files:
 • hero.html
 • stylesheet.css
✔ Copy-ready HTML & CSS code samples
✔ Example “Andy Murray Hero Page” final solution
✔ Visual guides for saving files, folder setup, and browser preview
✔ Ideal for beginners—no previous coding experience required

🎯 Skills Covered

• Introductory HTML coding
• Introductory CSS styling
• File management & folder organization
• Webpage structure & layout
• Digital literacy & creative expression
  

👩‍🏫 Perfect For:

• Middle School and High School ICT / Computing
• Web Design units
• STEM/STEAM lessons
• Sub plans or independent learning projects
• Early coding lessons using Notepad++, VS Code, or online editors (e.g., W3Schools)

🔧 Requirements

• Any basic text editor (Notepad++, Visual Studio Code, online HTML editor, etc.)
• Browser access to preview webpages
• Optional: Internet for finding hero images