📘 HTML MINI PROJECT — SEMANTIC PAGE STRUCTURE
In this lesson, we start a practical mini project to consolidate the HTML and CSS concepts covered so far.
You will build the page structure using semantic HTML elements and prepare the project for styling in the next lesson.
🎯 IN THIS VIDEO
Plan and build a simple page layout (header, main content, footer)
Use semantic HTML elements instead of generic divs
Create a navigation area with multiple buttons
Build structured main content with headings, paragraph text, and action button
Add class names to support different button styles
Link an external stylesheet (index.css) for styling
Use Emmet to speed up HTML structure creation
Preview the unstyled HTML ready for CSS in the next lesson
🚀 HOW TO USE THIS COURSE
This mini project is a checkpoint to reinforce clean HTML structure before deeper styling work.
Follow along exactly, then continue to the next lesson where we apply the CSS design.
👉 Course Website:
www.richardbraycourses.co.uk
👉 Course Repositories:
www.github.com/RichardBrayCourses
👉 Full course playlist:
https://youtube.com/playlist?list=PLNlOxdq7xu14b5ewH4IJC9tMinkgZBuVR&si=Pg8pEDR5UUbQstz6
📂 SECTION REPOSITORY
Section 2 repository:
https://github.com/RichardBrayCourses/frontend02-html-css
💡 NOTE
Semantic HTML improves readability, maintainability, and accessibility compared with using generic containers everywhere.
