Project 1: Building a Semantic Personal Resume Page
The best way to solidify your foundational HTML knowledge is to build something from scratch. In this practical project, you will build a clean, semantic online resume page displaying your contact information, career objective, work history, and key skills.
1. Project Specifications
Your resume page must satisfy the following technical requirements:
- Semantic Containers: Use
<header>,<main>,<section>, and<footer>to divide the layout. - Nesting and Headers: Maintain a clear header hierarchy (
<h1>for your name,<h2>for section titles). - Lists: Use unordered lists (
<ul>) to show key skills and bullet points of responsibilities. - Tables: Use a clean table (
<table>) to present your education timeline.
2. Completed HTML Code Structure
Create an index.html file in your local workspace, paste this code inside, and open it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sarah Jenkins - Senior Web Developer Resume</title>
</head>
<body>
<!-- Header Section: Contact Details & Job Title -->
<header>
<h1>Sarah Jenkins</h1>
<p><strong>Senior Web Developer</strong> | San Francisco, CA</p>
<p>
Email: <a href="mailto:sarah@example.com">sarah@example.com</a> |
GitHub: <a href="https://github.com" target="_blank">github.com/sarah</a>
</p>
</header>
<hr>
<!-- Main Content: Objective, Work History, Education, Skills -->
<main>
<!-- Section 1: Objective -->
<section>
<h2>Professional Summary</h2>
<p>
Results-driven web developer with over 5 years of experience designing and optimizing modern, high-performance web applications. Expert in semantic markup, clean styling, and front-end architectures.
</p>
</section>
<!-- Section 2: Core Skills -->
<section>
<h2>Technical Skills</h2>
<ul>
<li><strong>Languages</strong>: HTML5, CSS3, JavaScript (ES6+), TypeScript</li>
<li><strong>Frameworks</strong>: Next.js, React, Astro</li>
<li><strong>Tools</strong>: Git, Docker, Chrome DevTools</li>
</ul>
</section>
<!-- Section 3: Work Experience -->
<section>
<h2>Work Experience</h2>
<h3>Lead Front-End Engineer - TechCorp</h3>
<p><em>June 2023 - Present</em></p>
<ul>
<li>Redesigned company homepage into a modern Next.js app, boosting mobile conversion rates by 25%.</li>
<li>Wrote accessible semantic HTML layouts matching WCAG standards.</li>
<li>Mentored junior developers on Git workflows and coding standards.</li>
</ul>
<h3>Junior Web Developer - WebStart</h3>
<p><em>January 2021 - May 2023</em></p>
<ul>
<li>Maintained responsive static landing pages for 15+ corporate clients.</li>
<li>Optimized meta tags and header structures, resulting in a 15% increase in SEO search visibility.</li>
</ul>
</section>
<!-- Section 4: Education -->
<section>
<h2>Education History</h2>
<table border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Graduation Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.S. in Computer Science</td>
<td>University of California, Berkeley</td>
<td>2020</td>
</tr>
</tbody>
</table>
</section>
</main>
<hr>
<!-- Footer Section: Social Links & Copyright -->
<footer>
<p>© 2026 Sarah Jenkins. Built entirely with semantic HTML5.</p>
</footer>
</body>
</html>3. Review and Reflect
- Hover over the email link and click it. Does it launch your email client?
- Inspect the page using Chrome DevTools (
F12). Can you identify the different layout boxes (<header>,<main>,<section>) in the Elements panel?
Published on