Final Project — Build a Complete Website
Congratulations on reaching Lesson 22! You have learned all the HTML fundamentals. Now it is time to put it all together and build a real, complete website using everything you know.
Project: Your Personal Portfolio
Final Project — Complete Portfolio Website
<!-- Your portfolio should have all of these --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>Your Name — Web Developer Portfolio</title> <meta name="description" content="..."/> </head> <body> <header> <nav aria-label="Main navigation"> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> </header> <main> <section id="about"> <h1>Your Name — Web Developer</h1> <img src="photo.webp" alt="Your Name, Web Developer" width="200" height="200" loading="eager"/> </section> <section id="projects"> <h2>My Projects</h2> <article> <h3>Project 1</h3> </article> </section> <section id="contact"> <h2>Contact Me</h2> <form>...</form> </section> </main> <footer> <p>© 2026 Your Name. Built with HTML.</p> </footer> </body> </html>
Your portfolio is your proof of skill. Keep it simple, accessible, and valid HTML. Employers will view source on your portfolio.
Final Project Checklist
Must IncludeAll 22 Lessons Applied
StructureDOCTYPE, charset, viewport, descriptive title, meta description
Semantic layoutheader, nav (aria-label), main, at least 2 sections, footer
ContentOne h1, multiple h2/h3, paragraphs, a list, a table or figure
LinksNav links, anchor links (#section), external link with target+rel, email link
ImagesAt least one img with alt, width, height, loading. Use figure/figcaption.
FormsContact form with labels, required, at least 3 input types, submit button
SEOog:title, og:description, og:image in head
Accessibilityaria-label on nav, aria-current on active link, all form inputs have labels
You Made It!
You have completed all 22 lessons of the CIWeb HTML Foundations Course. You now know everything needed to build semantic, accessible, SEO-friendly, valid HTML5 websites. The next step is CSS — making your HTML look great. Subscribe to Coding Infinite on YouTube for the CSS course.
What Comes Next?
HTML is the foundation. The web stack goes: HTML (structure) → CSS (design) → JavaScript (behaviour) → React/Vue (frameworks) → Node.js/Python (backend) → Databases. Master HTML first, then build up. You are already one step ahead.