Day 10: Final Project
What You'll Learn Today
- Build a portfolio site using everything you've learned
- Multi-page site structure
- Practical HTML techniques
Project Overview
Put your 10 days of HTML knowledge to work by building a personal portfolio site.
Site Structure
flowchart TB
subgraph Site["Portfolio Site"]
Home["index.html<br>Home"]
About["about.html<br>About Me"]
Works["works.html<br>Portfolio"]
Contact["contact.html<br>Contact"]
end
Home --> About
Home --> Works
Home --> Contact
About --> Home
Works --> Home
Contact --> Home
style Home fill:#3b82f6,color:#fff
style About fill:#8b5cf6,color:#fff
style Works fill:#22c55e,color:#fff
style Contact fill:#f59e0b,color:#fff
Directory Structure
portfolio/
├── index.html
├── about.html
├── works.html
├── contact.html
└── images/
├── profile.jpg
├── work1.jpg
├── work2.jpg
└── work3.jpg
Page 1: Home (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe | Web Developer</title>
<meta name="description" content="John Doe's portfolio site. Web development projects and technical skills.">
<meta property="og:title" content="John Doe | Web Developer">
<meta property="og:description" content="Web development projects and skills">
<meta property="og:type" content="website">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="works.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>John Doe</h1>
<p>Web Developer & Designer</p>
<p>Creating user-focused web experiences.</p>
<a href="works.html">View my work →</a>
</section>
<section id="skills">
<h2>Skills</h2>
<table>
<thead>
<tr>
<th scope="col">Technology</th>
<th scope="col">Level</th>
<th scope="col">Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML / CSS</td>
<td>Advanced</td>
<td>3 years</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Intermediate</td>
<td>2 years</td>
</tr>
<tr>
<td>React</td>
<td>Beginner</td>
<td>1 year</td>
</tr>
</tbody>
</table>
</section>
<section id="recent-works">
<h2>Recent Work</h2>
<article>
<h3>Corporate Site Redesign</h3>
<p>A corporate website rebuilt with semantic HTML and responsive design.</p>
<a href="works.html#work1">View details</a>
</article>
<article>
<h3>Blog Platform</h3>
<p>An accessibility-focused blog site.</p>
<a href="works.html#work2">View details</a>
</article>
</section>
</main>
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
</footer>
</body>
</html>
Page 2: About (about.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | John Doe</title>
<meta name="description" content="John Doe's profile—background, skills, and certifications.">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="works.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>About Me</h1>
<section>
<h2>Profile</h2>
<figure>
<img src="images/profile.jpg" alt="John Doe profile photo"
width="200" height="200" loading="lazy">
<figcaption>John Doe</figcaption>
</figure>
<p>I'm a web developer based in Tokyo, focused on creating
<strong>user-centered</strong> web experiences.</p>
</section>
<section>
<h2>Timeline</h2>
<dl>
<dt><time datetime="2023-04">April 2023</time></dt>
<dd>Started learning web development</dd>
<dt><time datetime="2024-01">January 2024</time></dt>
<dd>Began freelancing</dd>
<dt><time datetime="2025-06">June 2025</time></dt>
<dd>Joined a web development agency</dd>
</dl>
</section>
<section>
<h2>Hobbies</h2>
<p>Outside of coding, I enjoy <em>reading</em> and <em>photography</em>.</p>
</section>
<details>
<summary>Tools I Use</summary>
<ul>
<li>Editor: Visual Studio Code</li>
<li>Design: Figma</li>
<li>Version Control: Git / GitHub</li>
<li>Browser: Google Chrome</li>
</ul>
</details>
</main>
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
Page 3: Portfolio (works.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | John Doe</title>
<meta name="description" content="John Doe's web development portfolio—corporate sites, web apps, and more.">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="works.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Portfolio</h1>
<p>A selection of websites and applications I've built.</p>
<section>
<article id="work1">
<h2>Corporate Site Redesign</h2>
<figure>
<img src="images/work1.jpg" alt="Corporate website screenshot"
width="600" height="400" loading="lazy">
<figcaption>Acme Corp corporate website</figcaption>
</figure>
<h3>Overview</h3>
<p>Full redesign using HTML5 and CSS3 with semantic markup
and significantly improved accessibility.</p>
<h3>Technologies</h3>
<ul>
<li>HTML5</li>
<li>CSS3 (Flexbox / Grid)</li>
<li>Responsive Design</li>
</ul>
<h3>Results</h3>
<table>
<tr>
<th scope="row">Lighthouse Score</th>
<td>95+ across all categories</td>
</tr>
<tr>
<th scope="row">Page Load</th>
<td>2.1s → 0.8s</td>
</tr>
</table>
</article>
<hr>
<article id="work2">
<h2>Blog Platform</h2>
<figure>
<img src="images/work2.jpg" alt="Blog website screenshot"
width="600" height="400" loading="lazy">
<figcaption>Personal blog site</figcaption>
</figure>
<h3>Overview</h3>
<p>An accessibility-focused blog targeting WCAG 2.1 AA compliance.</p>
<h3>Technologies</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</article>
<hr>
<article id="work3">
<h2>Recipe Sharing Site</h2>
<figure>
<img src="images/work3.jpg" alt="Recipe website screenshot"
width="600" height="400" loading="lazy">
<figcaption>Recipe sharing platform</figcaption>
</figure>
<h3>Overview</h3>
<p>A recipe site using JSON-LD structured data for rich snippets
in Google search results.</p>
<h3>Technologies</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Structured Data (Schema.org)</li>
</ul>
</article>
</section>
</main>
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
Page 4: Contact (contact.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | John Doe</title>
<meta name="description" content="Get in touch with John Doe for project inquiries and questions.">
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="works.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contact</h1>
<p>Have a project in mind or a question? Feel free to reach out.</p>
<form action="/contact" method="post">
<fieldset>
<legend>Your Information</legend>
<p>
<label for="c-name">Name <strong>*</strong></label><br>
<input type="text" id="c-name" name="name"
required autocomplete="name">
</p>
<p>
<label for="c-email">Email <strong>*</strong></label><br>
<input type="email" id="c-email" name="email"
required autocomplete="email">
</p>
<p>
<label for="c-company">Company</label><br>
<input type="text" id="c-company" name="company"
autocomplete="organization">
</p>
</fieldset>
<fieldset>
<legend>Your Message</legend>
<p>
<label for="c-type">Type <strong>*</strong></label><br>
<select id="c-type" name="type" required>
<option value="">Please select</option>
<option value="work">Project Inquiry</option>
<option value="question">Technical Question</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</p>
<p>
<label for="c-budget">Budget</label><br>
<input type="text" id="c-budget" name="budget" list="budget-options">
<datalist id="budget-options">
<option value="Under $1,000">
<option value="$1,000–$5,000">
<option value="$5,000–$10,000">
<option value="$10,000+">
</datalist>
</p>
<p>
<label for="c-deadline">Desired Deadline</label><br>
<input type="date" id="c-deadline" name="deadline"
min="2026-02-01">
</p>
<p>
<label for="c-message">Message <strong>*</strong></label><br>
<textarea id="c-message" name="message"
rows="8" cols="60"
required minlength="10" maxlength="2000"
placeholder="Tell me about your project (10–2000 characters)"></textarea>
</p>
</fieldset>
<p>
<label>
<input type="checkbox" name="agree" required>
I agree to the <a href="/privacy">Privacy Policy</a>
</label>
</p>
<p>
<button type="submit">Send Message</button>
<button type="reset">Reset</button>
</p>
</form>
<hr>
<section>
<h2>Other Ways to Reach Me</h2>
<ul>
<li>Email: <a href="mailto:john@example.com">john@example.com</a></li>
<li>GitHub: <a href="https://github.com/johndoe" target="_blank" rel="noopener noreferrer">@johndoe</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
Review: What You Learned in 10 Days
flowchart TB
subgraph Journey["Your 10-Day Learning Journey"]
D1["Day 1<br>HTML Intro"]
D2["Day 2<br>Text"]
D3["Day 3<br>Links"]
D4["Day 4<br>Media"]
D5["Day 5<br>Lists & Tables"]
D6["Day 6<br>Form Basics"]
D7["Day 7<br>Advanced Forms"]
D8["Day 8<br>Semantics"]
D9["Day 9<br>Best Practices"]
D10["Day 10<br>Final Project"]
end
D1 --> D2 --> D3 --> D4 --> D5
D5 --> D6 --> D7 --> D8 --> D9 --> D10
style D1 fill:#3b82f6,color:#fff
style D2 fill:#3b82f6,color:#fff
style D3 fill:#8b5cf6,color:#fff
style D4 fill:#8b5cf6,color:#fff
style D5 fill:#22c55e,color:#fff
style D6 fill:#22c55e,color:#fff
style D7 fill:#f59e0b,color:#fff
style D8 fill:#f59e0b,color:#fff
style D9 fill:#ef4444,color:#fff
style D10 fill:#ef4444,color:#fff
| Day | Topic | Key Elements |
|---|---|---|
| 1 | HTML Intro | <!DOCTYPE>, <html>, <head>, <body> |
| 2 | Text | <h1>–<h6>, <p>, <strong>, <em> |
| 3 | Links | <a>, href, absolute/relative paths |
| 4 | Media | <img>, <video>, <audio>, <picture> |
| 5 | Lists & Tables | <ul>, <ol>, <dl>, <table> |
| 6 | Form Basics | <form>, <input>, <label>, <select> |
| 7 | Advanced Forms | Validation, <datalist>, <progress> |
| 8 | Semantics | <header>, <main>, <article>, <nav> |
| 9 | Best Practices | SEO, OGP, performance optimization |
| 10 | Final Project | Portfolio site |
What's Next
1. CSS (Visual Design)
Apply design to your HTML structure.
2. JavaScript (Dynamic Features)
Add interactive functionality to your pages.
3. Responsive Design
Make your sites look great on all devices.
4. Web Accessibility
Build sites that are usable by everyone.
Summary
Key Takeaways
- HTML defines structure and meaning
- Mastering semantic elements is the key to leveling up
- Always consider accessibility
- Develop a habit of writing valid HTML
- HTML is the foundation—it shines when combined with CSS and JavaScript
Exercises
Exercise 1: Basic
Build your own portfolio site based on this chapter's examples.
Exercise 2: Intermediate
Add these pages to your portfolio:
- Blog page (3+
<article>elements) - FAQ page (using
<details>) - Sitemap page
Challenge
Create a portfolio site that passes the W3C Validator with zero errors, meeting this checklist:
- Proper
<title>and<meta description>on all pages - OGP tags configured
-
alton every image - Semantic elements used correctly
- All form inputs have
<label> -
target="_blank"usesrel="noopener noreferrer"
References
Congratulations! You've completed the 10-day HTML course. The skills you've built here form a solid foundation for your web development journey. Next up: learn CSS to bring beautiful designs to your web pages!