FINAL PROJECT30 min50 XP

Final Project

Learn Final Project with syntax-highlighted examples, live output, and Shiv AI.

Final Project: Build a Real Website

Congratulations on reaching the final lesson! You have learned all 22 HTML topics. Now it is time to build a real complete website that uses everything you know — from scratch, on your own.

Your Final Project Requirements

Project — Complete Personal Website
<!-- Your website must include ALL of these: -->

<!-- 1. Proper document structure -->
<!DOCTYPE html>
<html lang="en">
  <head><!-- charset, viewport, title, meta -->

<!-- 2. Semantic layout -->
<header><nav></nav></header>
<main><article></article><aside></aside></main>
<footer></footer>

<!-- 3. Image with all attributes -->
<img src="..." alt="..." width="..." height="..." loading="lazy"/>

<!-- 4. A data table -->
<table><thead><tr><th scope="col">...</th></tr></thead></table>

<!-- 5. A contact form -->
<form><label for="..."><input required/></form>
Build this step by step. Start with the HTML structure. Then add content section by section. Test in browser as you go.

Recommended Structure

Page SectionsBuild in this order
1. HeadDOCTYPE, charset, viewport, title, description, og: tags
2. HeaderYour name as h1, nav links to each section using anchor #ids
3. AboutWho you are, what you do, a profile image with proper alt text
4. SkillsAn HTML/CSS/JS skills table with thead, tbody, tfoot
5. ProjectsA ul list of your projects with descriptive links
6. ContactA form with name, email, message. All inputs labeled. required validation
7. FooterCopyright with &copy;, your email in address tag, social links

Tips for Success

Pro Tips
Build section by sectionDo not try to write the whole page at once. Header first, then add sections
Test in browser oftenClick Run after every 10 lines. Catch mistakes immediately
Validate when doneCopy your HTML to validator.w3.org - fix all errors
Ask Shiv AIStuck on any part? Ask Shiv AI — describe what you want to build
Get your certificateComplete all requirements and collect your CIWeb HTML certificate!
Real World Deployment

Once you finish, upload your HTML file to Netlify Drop (drag and drop, instant live URL), GitHub Pages (free hosting), or Vercel. Your first real website will be live on the internet for anyone to visit.

What You Have Learned

You learned 22 HTML topics: document structure, headings, text, links, images, lists, tables, forms, semantic layout, div/span, display types, meta/SEO, entities, media, iframes, data attributes, ARIA, validation, canvas/SVG, and best practices. That is every core HTML concept used in professional web development.

You Have Come So Far

When you started Lesson 1 you did not know what DOCTYPE meant. Now you know semantic HTML, SEO meta tags, form validation, ARIA accessibility, and canvas drawing. You have learned in 22 lessons what took developers years of trial and error to discover. Build something great with it.

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using only real-life analogies. No code at all.

Click the Explain tab to generate analogies automatically.
index.html
Live Preview
Start coding - Shiv AI monitors automatically

Which free service lets you host an HTML file by drag-and-drop?

ExplanationNetlify Drop (drop.netlify.com) lets you drag and drop an HTML folder and get a live URL in seconds — no account needed. Perfect for your first deployed website.
Build Challenge
Complete Portfolio Website
Build a full personal website with header, nav, about section with image, skills table, projects list, contact form, and footer.
Requirements (6 to pass)
DOCTYPE
header with nav
img with alt
table with thead
form with labels
footer
solution.html
Preview
Community Wall
Lesson 22
0/500
0/20 lines
as
Final Project Showcase
Lesson 22 only

Support CIWeb + Get +50 AI Messages

Just Rs.11 keeps CIWeb free for everyone and gets you 50 extra Shiv AI messages.

AI
Shiv AI
Online