Final Project, Review, and Next Steps

Final Project, Review, and Next Steps

This chapter brings the course together. By now, you have learned HTML structure, semantic layout, links, media, tables, forms, attributes, accessibility basics, and structured content.

The best way to strengthen that knowledge is to build a complete project. A project forces you to make real decisions:

  • which tags fit the content
  • how pages connect
  • which attributes matter
  • how to keep markup readable
  • how to make content understandable for both people and browsers

What a Good Final Project Should Include

A strong HTML-only or HTML-first project should include many of the ideas from this course:

  • a correct HTML5 boilerplate
  • meaningful page titles and metadata
  • semantic structure
  • navigation links
  • headings and readable text content
  • images with good alt text
  • at least one list
  • at least one table
  • at least one form
  • if useful, audio, video, SVG, or canvas
  • good use of attributes
  • clean and readable code

Project Goal

Choose a project that feels interesting to you. A good beginner project should be:

  • realistic enough to feel useful
  • small enough to finish
  • rich enough to use several HTML concepts together

Below are six project ideas you can build with HTML skills from this course.

Project 1: Personal Portfolio Website

Idea

Build a personal site that introduces who you are, what you are learning, and what projects you want to show.

Good Pages to Include

  • index.html
  • about.html
  • projects.html
  • contact.html

HTML Features to Use

  • <header>, <nav>, <main>, <section>, <article>, <footer>
  • headings and paragraphs
  • profile image with alt
  • project cards using semantic structure
  • contact form with labels and inputs
  • social or external links

Implementation Idea

On the home page:

  • add your name as the main heading
  • write a short intro paragraph
  • include a navigation bar
  • add a featured projects section

On the projects page:

  • use <article> for each project
  • include a title, description, image, and link

On the contact page:

  • add a simple form with name, email, and message fields

What This Project Teaches

  • semantic layout
  • navigation between pages
  • text structure
  • image usage
  • form basics

Project 2: Course or Study Guide Website

Idea

Build a study resource site for a topic you like, such as HTML, science, math, history, or language learning.

Good Pages to Include

  • index.html
  • lessons.html
  • schedule.html
  • resources.html

HTML Features to Use

  • ordered and unordered lists
  • tables for schedules or topic breakdowns
  • links to lessons and resources
  • embedded videos or audio explanations
  • structured headings for lesson sections

Implementation Idea

Use:

  • a table to show a study plan
  • <section> blocks for lesson groups
  • resource links with descriptive text
  • <figure> and <figcaption> for diagrams or screenshots

What This Project Teaches

  • content organization
  • table structure
  • educational page hierarchy
  • link clarity

Project 3: Restaurant or Cafe Website

Idea

Build a small website for an imaginary restaurant, bakery, or cafe.

Good Pages to Include

  • index.html
  • menu.html
  • gallery.html
  • contact.html

HTML Features to Use

  • menus with lists
  • tables for opening hours
  • images of dishes
  • embedded map using iframe
  • reservation or contact form

Implementation Idea

On the menu page:

  • use sections for breakfast, lunch, and dinner
  • use lists for menu items
  • include prices clearly

On the contact page:

  • add address, phone, opening hours, and a reservation form

What This Project Teaches

  • practical business-style content structure
  • tables for real-world data
  • embedded content
  • form and contact details

Project 4: Event or Conference Website

Idea

Build a site for a school event, workshop, coding camp, or mini conference.

Good Pages to Include

  • index.html
  • schedule.html
  • speakers.html
  • register.html

HTML Features to Use

  • hero section with event title
  • table for event schedule
  • speaker cards using semantic articles
  • registration form
  • time and date markup

Implementation Idea

The schedule page can use:

  • a <table> with time slots and sessions

The speakers page can use:

  • <article> for each speaker
  • images with alt text
  • biography text

The register page can use:

  • text inputs
  • radio buttons
  • checkboxes
  • submit button

What This Project Teaches

  • structured schedules
  • event-oriented page design
  • more advanced form thinking
  • content grouped by purpose

Project 5: Recipe or Cooking Website

Idea

Build a recipe website with multiple recipe pages and cooking instructions.

Good Pages to Include

  • index.html
  • recipes.html
  • recipe-pasta.html
  • recipe-dessert.html

HTML Features to Use

  • headings for recipe sections
  • ingredient lists
  • ordered steps
  • images and captions
  • nutrition table
  • audio or video cooking tip

Implementation Idea

Each recipe page can include:

  • a title
  • cooking time using <time>
  • ingredients in <ul>
  • steps in <ol>
  • a nutrition facts table
  • a media section with a short cooking clip

What This Project Teaches

  • strong content hierarchy
  • list usage
  • media embedding
  • semantic grouping

Project 6: School Club or Community Website

Idea

Build a site for a school club, reading group, robotics team, or neighborhood community group.

Good Pages to Include

  • index.html
  • about.html
  • activities.html
  • join.html

HTML Features to Use

  • semantic sections
  • photos from events
  • activity lists
  • table of meeting times
  • join form
  • accessibility-friendly navigation

Implementation Idea

On the activities page:

  • use <article> blocks for past or upcoming activities
  • include dates, titles, and short descriptions

On the join page:

  • ask for name, email, age group, and interests

What This Project Teaches

  • multi-page structure
  • practical forms
  • community-oriented content planning
  • real-world semantic layout

How to Choose the Best Project

Choose a project that:

  • gives you enough content to practice
  • feels fun enough to finish
  • lets you use several HTML topics together

If you are unsure, a portfolio website is often the easiest place to start because it naturally supports headings, images, links, and a contact form.

Suggested Implementation Plan

A simple way to build your project is:

  1. choose the project type
  2. sketch the page list
  3. decide what content goes on each page
  4. create the HTML boilerplate for every page
  5. add semantic layout tags
  6. add headings, paragraphs, lists, links, and images
  7. add tables or forms where needed
  8. check accessibility and metadata
  9. test links and file paths
  10. review and improve the structure

Suggested Folder Structure

my-project/
├── index.html
├── about.html
├── contact.html
├── assets/
│   ├── images/
│   ├── audio/
│   └── video/
└── pages/

You may also keep all HTML files in the main folder if the project is small.

Required HTML Skills to Show

Try to demonstrate these skills in your final project:

  • correct boilerplate and metadata
  • heading hierarchy
  • semantic layout tags
  • descriptive links
  • image and media attributes
  • form and input attributes
  • table structure where appropriate
  • accessibility and ARIA where appropriate
  • clean indentation and readable structure

Example Capstone Combination

A very strong final project could include:

  • a home page with semantic layout
  • a projects or activities page with <article> cards
  • a schedule page with a table
  • a join or contact page with a form
  • a gallery with figures and captions
  • a media section with audio or video

This combination shows that you can connect multiple HTML systems together in one site.

Review Checklist

  • Does every page have a unique <title>?
  • Does the document use the correct language?
  • Are semantic tags used where they make sense?
  • Do meaningful images have useful alt text?
  • Are labels connected to form controls?
  • Are tables structured with headers and captions?
  • Are links descriptive and safe?
  • Are ids unique?
  • Are attribute values valid and readable?
  • Does the content feel organized and understandable?

How to Explain Your Project

If you present your work to a teacher, teammate, or future employer, explain:

  • what the website is for
  • who the audience is
  • which pages it includes
  • which HTML features you used
  • how you handled accessibility and structure

This shows that you understand not only how to write tags, but also why you chose them.

Next Steps After HTML

Once you are comfortable with HTML, the usual next steps are:

  • CSS for layout and design
  • JavaScript for interactivity
  • accessibility testing
  • responsive design
  • browser developer tools

HTML is the foundation. Strong HTML makes every later web skill easier.

PreviousReturn to Syllabus