A 7-day hands-on lab designed to help beginners learn the fundamentals of HTML through practice and a progressive final project.
The goal is not to memorize HTML tags, but to understand how web pages are structured and build them yourself.
By completing this lab, you will learn how to:
- Understand the structure of an HTML document
- Use common HTML elements and attributes
- Structure content using semantic HTML
- Create forms and collect user input
- Embed images, audio, video, and external content
- Apply basic accessibility practices
- Build a complete HTML page from scratch
- Validate and improve your HTML code
| Domain | Web |
| Level | 101 — Beginner |
| Topic | HTML Fundamentals |
| Type | Lab |
| Duration | 7 days |
| Prerequisites | Basic computer and code editor knowledge |
The lab is divided into seven progressive days.
Learn the basic structure of an HTML document and work with fundamental elements such as headings, paragraphs, links, images, and separators.
Learn how to organize content using lists, tables, and semantic HTML elements.
Learn how HTML forms work and practice using different input types, labels, buttons, and form attributes.
Work with HTML attributes and learn how to embed multimedia content such as images, audio, video, and external content.
Learn the fundamentals of accessible HTML and improve existing pages using appropriate attributes and semantic structure.
Combine the concepts learned throughout the week to create a complete HTML page such as a portfolio or online CV.
Review your work, validate your HTML, identify mistakes, and consolidate what you have learned.
This repository uses branches to separate each stage of the learning experience.
main
│
├── day-1
├── day-2
├── day-3
├── day-4
├── day-5
├── day-6
├── day-7
│
└── solution
The main branch contains the complete description of the lab and the learning path.
Each branch represents one day of the learning journey.
You should work through the branches in order.
Contains the completed version of the lab and final project.
💡 Try to complete each day yourself before looking at the solution.
Clone the repository:
git clone https://github.com/CodeNoJutsu-Lab/web101-html-fundamentals-lab.git
cd web101-html-fundamentals-labStart with the first day:
git checkout day-1Then progress through:
day-1 → day-2 → day-3 → day-4 → day-5 → day-6 → day-7
You can complete this lab with any modern code editor and browser.
Recommended:
- Editor: VS Code
- Browser: Brave, Chrome, Firefox, or any modern browser
- Validation: W3C HTML Validator
Learn. Practice. Build. Repeat.
Every lab is a technique.
Master it through repetition.