Complete solution (100% reference)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
This is the complete reference solution for Project 1. Students build a simple HTML page demonstrating core elements: headings, lists, images, paragraphs, and special characters.
Key Learning Goal: Mastery of HTML structure and basic elements before introducing CSS.
Students should demonstrate:
<ol>
<li>
Main point
<ul>
<li>Detail</li>
</ul>
</li>
</ol>
Teaching Point: Shows list nesting, helps students understand parent-child relationships in HTML. Common mistake: nesting <ul> outside <li>.
<img src="https://via.placeholder.com/300x200/...">
Teaching Point:
© < > &
Teaching Point: Shows HTML isn't just tags - introduces concept of entities. Prepares for later CSS/JS where < and & have special meanings.
<!DOCTYPE html> <!-- HTML5 declaration -->
<html lang="en"> <!-- Language attribute for accessibility -->
<head>
<meta charset="UTF-8"> <!-- Character encoding (UTF-8 standard) -->
<meta name="viewport"... <!-- Responsive viewport meta tag -->
<title>...</title> <!-- Browser tab title -->
</head>
Teaching Notes:
<!DOCTYPE html> - tells browser it's HTML5lang="en" - important for screen readerscharset="UTF-8" - supports international characters<h1>My HTML Learning Journey</h1> <!-- Main title - only ONE h1 per page -->
<h2>What I've Learned About HTML</h2> <!-- Section title - multiple OK -->
Common Student Mistakes:
<h1> tags (SEO and accessibility issue)Good nesting:
<ol>
<li>
Point
<ul><li>Detail</li></ul> <!-- ul INSIDE li -->
</li>
</ol>
Bad nesting (what students might try):
<ol>
<li>Point</li>
<ul><li>Detail</li></ul> <!-- ul OUTSIDE li - WRONG! -->
</ol>
Validation: Use https://validator.w3.org/ to show errors
<!-- ❌ WRONG -->
<h1>Title
<p>Paragraph
<!-- ✅ CORRECT -->
<h1>Title</h1>
<p>Paragraph</p>
How to Help: Show browser inspector - unclosed tags create weird DOM nesting.
<!-- ❌ WRONG -->
<img src="image.jpg"> <!-- No alt -->
<img alt="Image"> <!-- No src -->
<!-- ✅ CORRECT -->
<img src="image.jpg" alt="Descriptive text">
Teaching Moment: Explain alt is for:
<!-- ❌ WRONG -->
<ul>
<ul><li>Item</li></ul> <!-- ul can't be direct child of ul -->
</ul>
<!-- ✅ CORRECT -->
<ul>
<li>
Item
<ul><li>Nested</li></ul>
</li>
</ul>
How to Teach: Draw box diagrams showing parent-child relationships.
<!-- ❌ WRONG -->
<p>I learned < & > symbols</p> <!-- Breaks HTML parsing -->
<!-- ✅ CORRECT -->
<p>I learned < & > symbols</p>
Teaching Moment: Show how < triggers tag parsing. Introduce concept of escaping.
Valid HTML5 Structure (20 points)
Proper Use of Headings (15 points)
Correct List Implementation (25 points)
Images with Alt Text (20 points)
Written Reflection (15 points)
Code Quality (5 points)
🚩 Plagiarism Indicators:
🚩 Understanding Gaps:
<font>, <center>)Live Coding Approach (15 minutes):
Student Engagement:
</h1>?" (show in browser)<ol> and <ul>?" (ordered vs unordered)Teach Debugging Process:
Common Fix Process:
Student: "My image doesn't show!"
Teacher:
1. "Let's open the inspector"
2. "Do you see an <img> tag?"
3. "What does the src attribute say?"
4. "Let's check if that file exists"
5. "Try a placeholder URL to test"
For Fast Finishers:
For Struggling Students:
All features used are HTML5 standard, supported by:
No polyfills or fallbacks needed.
What This Project Teaches:
Future Lessons:
Before this project:
After this project:
Video Resources:
Interactive Tools:
Assessment Tools:
# Create student folders
for i in {1..30}; do
mkdir "student_$i"
cp -r project-01-html-fundamental/* "student_$i/"
done
Option One: Direct Download
Option 2: Git Clone (if students know Git)
git clone [repo-url]
cd project-01-html-fundamental
Option 3: Online (StackBlitz)
Success Metric: If students can create a valid HTML page with headings, lists, images, and understand why each element is used, they're ready for CSS!
Last Updated: January 2025 For questions about this solution, contact the course instructor.