Module 16: Validation, Debugging, and Practical Projects
Project 1: Build a Semantic Profile Page
Create a small personal profile page with landmarks, headings, contact details, and useful links.
Build a one-page profile for a fictional developer. Keep the first version focused on structure; the goal is to practice choosing elements, not to create a finished visual design.
Your page should include a site header, primary navigation, one main region, a profile article, a skills list, a short project list, contact information, and a footer. Use a heading hierarchy that describes the content. Use a list for skills rather than separating each skill with commas inside a paragraph.
A sensible outline could be:
header
site name
nav
main
article
h1: Developer profile
section: About
section: Skills
section: Projects
section: Contact
footer
Add one profile image with appropriate alternative text, or an empty alternative if it is purely decorative. Make email and external project links real anchors. Check that all navigation links point somewhere meaningful.
Before styling, confirm the page has a meaningful title and lang attribute, one main content region, logical headings, list markup, descriptive links, and understandable content with CSS disabled. Then add CSS in a separate file. Do not change a semantic element just to get a different default style.