Module 10 of 10 · 4 lessons
HTML Projects for Beginners: Build 4 Complete Web Pages
Four complete pages that use everything you have learned.
Here the pieces finally meet. You stop learning one element at a time and build four complete web pages from top to bottom, the way you would at work. Each page draws on several earlier modules, and the checker tests it against a list of requirements.
The Personal Profile Page is the warm-up: a full skeleton, a photo with alt text, headings, lists and links. The Full Recipe Page adds semantic structure with an article, a figure, both kinds of list and a small table of prep and cook times. The Contact Page with Form is about a labeled, validated form inside a page with proper landmarks. The One-Page Portfolio is the biggest of the four. It has several sections, jump links for in-page navigation, project cards, a complete head and a little CSS.
A real page never tests one concept at a time. Projects make you plan the structure before you type, choose between elements that look alike, and track down bugs when several things go wrong at once. You also end up with something to show people. Each project is a page you can keep, change and publish. For more layouts to adapt later, the free minimalist HTML5 templates (opens in a new tab) at html5-templates.com are a good start for profiles and portfolios.
The checker names the requirement you are missing, and each hint is more specific than the last. Before you publish a finished page, run it through the W3C Markup Validation Service (opens in a new tab) one last time. For more practice afterwards, try the HTML challenges or build whatever you like in the playground. Finish the course and you can print a certificate. Plan about two hours for all four projects.
What you will learn
- Sketch the structure of a whole page before writing any markup
- Combine text, media, tables and forms in one valid document
- Give every page semantic landmarks and a clean heading outline
- Build a contact form with labels and browser validation
- Build a one-page portfolio with jump-link navigation and some styling
- Debug a bigger page using checker messages and the DOM tree
Lessons
- Personal Profile Page ProjectBuild a full personal profile page, starting from an empty skeleton.
- Full Recipe Page ProjectBuild a full recipe page with a photo, a table and two kinds of list.
- Contact Page with Form ProjectBuild an accessible contact page with a form the browser validates.
- One-Page Portfolio ProjectBuild a one-page portfolio with a menu that jumps to each section.
Frequently asked questions
What are good HTML projects for beginners?
Pick pages with an obvious purpose and real content: a personal profile, a recipe, a contact page with a form, a portfolio, a restaurant menu or a landing page for an event. All of them practice headings, lists, links and images, and the bigger ones add tables, forms and semantic layout. Choose a page you would actually use. You will care more about finishing it.
Can I build a website with only HTML?
Yes. A site made of plain HTML files is called a static website (opens in a new tab). It works in every browser and you can publish it on any static host. Without CSS it will look plain, and without JavaScript nothing will be interactive, but the content, links, images, tables and forms are all pure HTML. Most people learn CSS next, and you have already started on it in this course.
How long does it take to learn HTML?
A few days of regular practice covers the basics. This course has 61 lessons, about 10 to 11 hours in total, final projects included. By the end you can write complete, valid pages without looking things up every minute. Real fluency comes from building lots of pages, so keep going with the challenges and projects of your own.