HTML Exercises by Phase 🏋️
Mentor's Note: Practice makes permanent! Each phase includes three levels of exercises — Starter (foundational), Medium (applied), and Hard (mastery). Work through them in order, and don't skip the Hard challenges — that's where real learning happens!
🗺️ Exercise Progression
🎯 How Exercises Are Structured
Each phase follows a Starter → Medium → Hard progression:
| Level | Difficulty | Time | Goal |
|---|---|---|---|
| 🔰 Starter | Beginner | 10-15 min | Learn one new concept at a time |
| ⭐ Medium | Intermediate | 15-25 min | Combine concepts into a mini-project |
| 🏆 Hard | Advanced | 25-40 min | Build something portfolio-worthy |
Three Levels of Mastery
- Starter: Focused exercises that introduce a single new tag or concept. Complete these first to build confidence.
- Medium: Combine multiple concepts from the phase into a coherent page. These exercises add complexity and require planning.
- Hard: Full-featured projects that demonstrate mastery of the entire phase. These are portfolio-ready pieces.
📚 Phase Exercise Pages
| Phase | Focus Area | Level |
|---|---|---|
| Phase 0 — Getting Started | Setup, first HTML file | Beginner |
| Phase 1 — Foundations | Text, links, lists, images | Beginner |
| Phase 2 — Structure | Semantic tags, tables | Beginner |
| Phase 3 — Multimedia | Audio, video, SVG, iframes | Intermediate |
| Phase 4 — Forms | Input types, validation | Intermediate |
| Phase 5 — APIs | Canvas, localStorage | Advanced |
| Phase 6 — Professional | SEO, accessibility, OG | Advanced |
| Phase 7 — Modern Web | Web Components, PWA, email | Advanced |
| Phase 8 — Capstone Projects | Full websites | Advanced |
| Phase 9 — Integration & Interview | CSS/JS, mock interview | Advanced |
💡 Tips for Getting the Most Out of Exercises
- Type, Don't Copy — Manually type every code example. Muscle memory matters!
- Modify Before Moving On — Change colors, text, and layout to make each exercise your own.
- Validate Your Work — Run every page through the W3C Validator.
- Use DevTools — Inspect your pages in the browser to understand the rendered structure.
- Keep a Portfolio Folder — Save every Hard challenge. They become your portfolio!
- Teach Someone Else — Explain your solution to a friend. If you can teach it, you've mastered it.
🏅 Badge Progression
Earn badges as you complete phases:
- Phase 1 → 🧱 HTML Basics
- Phase 4 → 📝 Forms Master
- Phase 6 → 💼 Pro HTML
- Phase 8 → 🏆 Portfolio Ready