Project: Semantic Portfolio Landing Page

This capstone is where the course becomes real. You are not just practicing tags anymore. You are designing a page structure that could actually ship.

Project Goal

Build a professional one-page portfolio or agency-style landing page using only strong HTML structure and production-ready content planning.

The page should feel:

semantic
accessible
SEO-friendly
easy to style later with CSS
realistic enough for a real-world portfolio

Lesson Path

Previous lesson: HTML in React, Angular, and Next.js
In this lesson: You combine everything from the course into one final project.
Next lesson: HTML Mastery Checklist

1. Required Sections

Your project must include:

<header> with logo or name
<nav> with accessible links
<main> for primary content
hero section with one clear h1
about or skills section
projects or services section
contact form
<footer> with external/social links

2. Quality Standards

To pass this capstone, make sure your page includes:

one logical heading hierarchy
semantic sections and landmarks
descriptive links and buttons
accessible form labels
meaningful image alt text
mobile-friendly structure
SEO basics in the document head

3. Suggested File Plan

Draft the content sections first.
Build the semantic skeleton.
Add navigation anchors.
Add a contact form with proper labels.
Review accessibility and SEO before styling.

4. Suggested Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jane Doe | Frontend Developer</title>
  <meta name="description" content="Portfolio of Jane Doe, a frontend developer building accessible web experiences." />
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>
  <section id="hero">...</section>
  <section id="skills">...</section>
  <section id="projects">...</section>
  <section id="contact">...</section>
</main>
<footer>...</footer>
</body>
</html>

5. Review Checklist

Before calling the project done, ask:

Does the page have only one h1?
Can I navigate it by keyboard only?
Are all form fields labeled correctly?
Are sections meaningful and easy to scan?
Would this structure still make sense in React, Angular, or Next.js?
Would a search engine understand the main purpose of the page?

Practice Exercise

Portfolio Landing Page Capstone

Build a semantic personal landing page for a developer, freelancer, or agency using everything you learned in this course.

Build Steps

Write a strong hero section with one clear h1 and a concise positioning statement.
Add meaningful skills or services content using semantic sections.
Create a projects or case studies section with at least one article block.
Add a contact form with properly connected labels and input fields.
Review the page for heading hierarchy, landmark usage, and clear navigation.

Review Checklist

Uses semantic HTML structure from header to footer.
Includes SEO basics in the document head.
Supports keyboard-friendly navigation and readable content structure.
Feels like a realistic portfolio or landing page, not placeholder markup.

Hint: Start with clean structure and content clarity first. Styling is easier after the markup is correct.

Try it yourselfLive previewReset anytime

HTML PLAYGROUND

⏳ Loading editor…

Exercise Preview

Real browser rendering

Finish the task first, then compare your structure with the reference answer.