On this page

Project Requirements
Step-by-Step Build
Step 1: Create the File
Step 2: Document Structure
Step 3: Skip Navigation Link
Step 4: Header and Navigation
Step 5: Main Content and About Section
Step 6: Skills Section
Step 7: Projects Section
Step 8: Experience Section (Table)
Step 9: Contact Section (Form)
Step 10: Footer
Step 11: Add Basic CSS
Validating Your HTML
Publishing with GitHub Pages
Extension Ideas
Submission Checklist
Key Takeaways

Project: Personal Portfolio Page

Checking access...

This project brings together everything you learned in the HTML module. You’ll build a personal portfolio page — a single-page website that showcases your skills, projects, and contact information.

Project Requirements

Your portfolio page must include:

Step-by-Step Build

Step 1: Create the File

Create a new folder called portfolio and add an index.html file:

mkdir portfolio
cd portfolio
touch index.html

Open the folder in VS Code and start Live Server.

Step 2: Document Structure

Start with the complete HTML document structure:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="Portfolio of [Your Name] — web developer">
7
  <title>[Your Name] | Portfolio</title>
8
</head>
9
<body>
10
  <!-- Content will go here -->
11
</body>
12
</html>

Add this as the first element inside <body>:

1
<a href="#main-content" class="skip-link">Skip to main content</a>

Add minimal styling in a <style> block in <head>:

1
<style>
2
  .skip-link {
3
    position: absolute;
4
    top: -40px;
5
    left: 0;
6
    background: #000;
7
    color: #fff;
8
    padding: 8px 16px;
9
    z-index: 100;
10
  }
11
  .skip-link:focus {
12
    top: 0;
13
  }
14
</style>

Step 4: Header and Navigation

1
<header>
2
  <h1>[Your Name]</h1>
3
  <p>Web Developer &amp; Designer</p>
4
  <nav aria-label="Main navigation">
5
    <ul>
6
      <li><a href="#about">About</a></li>
7
      <li><a href="#skills">Skills</a></li>
8
      <li><a href="#projects">Projects</a></li>
9
      <li><a href="#experience">Experience</a></li>
10
      <li><a href="#contact">Contact</a></li>
11
    </ul>
12
  </nav>
13
</header>

Step 5: Main Content and About Section

1
<main id="main-content">
2
  <section id="about">
3
    <h2>About Me</h2>
4
    <img src="https://placehold.co/200x200" alt="Portrait photo of [Your Name]" width="200" height="200">
5
    <p>Hello! I'm [Your Name], a web developer passionate about building accessible, user-friendly websites. I specialize in HTML, CSS, and JavaScript, and I'm constantly learning new technologies.</p>
6
    <p>When I'm not coding, you'll find me [your hobby]. I believe in writing clean code that works for everyone.</p>
7
  </section>

Step 6: Skills Section

1
  <section id="skills">
2
    <h2>Skills</h2>
3

4
    <h3>Frontend</h3>
5
    <ul>
6
      <li>HTML5</li>
7
      <li>CSS3</li>
8
      <li>JavaScript</li>
9
      <li>React (learning)</li>
10
    </ul>
11

12
    <h3>Tools &amp; Workflow</h3>
13
    <ul>
14
      <li>VS Code</li>
15
      <li>Git &amp; GitHub</li>
16
      <li>Chrome DevTools</li>
17
      <li>Figma</li>
18
    </ul>
19
  </section>

Step 7: Projects Section

1
  <section id="projects">
2
    <h2>Projects</h2>
3

4
    <figure>
5
      <img src="https://placehold.co/400x250/eee/333?text=Project+1" alt="Screenshot of a personal portfolio website" width="400" height="250">
6
      <figcaption>
7
        <h3>Personal Portfolio</h3>
8
        <p>A responsive personal portfolio built with semantic HTML and CSS.</p>
9
      </figcaption>
10
    </figure>
11

12
    <figure>
13
      <img src="https://placehold.co/400x250/eee/333?text=Project+2" alt="Screenshot of a survey form" width="400" height="250">
14
      <figcaption>
15
        <h3>Survey Form</h3>
16
        <p>A validated HTML form with multiple input types and accessibility features.</p>
17
      </figcaption>
18
    </figure>
19
  </section>

Step 8: Experience Section (Table)

1
  <section id="experience">
2
    <h2>Experience &amp; Education</h2>
3

4
    <table>
5
      <caption>Professional timeline</caption>
6
      <thead>
7
        <tr>
8
          <th scope="col">Year</th>
9
          <th scope="col">Role</th>
10
          <th scope="col">Organization</th>
11
        </tr>
12
      </thead>
13
      <tbody>
14
        <tr>
15
          <td>2026</td>
16
          <td>Full Stack Student</td>
17
          <td>Skillber Academy</td>
18
        </tr>
19
        <tr>
20
          <td>2025</td>
21
          <td>Junior Web Developer</td>
22
          <td>Freelance</td>
23
        </tr>
24
        <tr>
25
          <td>2024</td>
26
          <td>Web Development Certificate</td>
27
          <td>Online Course</td>
28
        </tr>
29
      </tbody>
30
    </table>
31
  </section>

Step 9: Contact Section (Form)

1
  <section id="contact">
2
    <h2>Contact Me</h2>
3

4
    <form action="#" method="post">
5
      <div>
6
        <label for="name">Name:</label>
7
        <input type="text" id="name" name="name" required placeholder="Your name">
8
      </div>
9

10
      <div>
11
        <label for="email">Email:</label>
12
        <input type="email" id="email" name="email" required placeholder="you@example.com">
13
      </div>
14

15
      <div>
16
        <label for="subject">Subject:</label>
17
        <select id="subject" name="subject" required>
18
          <option value="">-- Select a subject --</option>
19
          <option value="project">Project Inquiry</option>
20
          <option value="collaboration">Collaboration</option>
21
          <option value="feedback">Feedback</option>
22
        </select>
23
      </div>
24

25
      <div>
26
        <label for="message">Message:</label>
27
        <textarea id="message" name="message" rows="5" required placeholder="Your message..." maxlength="1000"></textarea>
28
      </div>
29

30
      <button type="submit">Send Message</button>
31
    </form>
32
  </section>
33
</main>

1
<footer>
2
  <p>&copy; 2026 [Your Name]. All rights reserved.</p>
3
  <nav aria-label="Social links">
4
    <ul>
5
      <li><a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">GitHub</a></li>
6
      <li><a href="https://linkedin.com/in/yourusername" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
7
      <li><a href="mailto:your.email@example.com">Email</a></li>
8
    </ul>
9
  </nav>
10
</footer>

Step 11: Add Basic CSS

Create a style.css file and link it in your <head>:

1
<link rel="stylesheet" href="style.css">

/* Reset defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  padding: 40px 0;
  border-bottom: 2px solid #eee;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

nav a {
  text-decoration: none;
  color: #0066cc;
  padding: 8px 16px;
  border-radius: 4px;
}

nav a:hover {
  background: #f0f7ff;
}

section {
  padding: 40px 0;
  border-bottom: 1px solid #eee;
}

h2 {
  margin-bottom: 20px;
  color: #222;
}

img {
  border-radius: 8px;
  margin-bottom: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background: #f4f4f4;
}

form div {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background: #0066cc;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0052a3;
}

footer {
  text-align: center;
  padding: 20px 0;
  color: #666;
}

Validating Your HTML

Always validate your HTML — it catches errors and ensures standards compliance:

Go to validator.w3.org
Select “Validate by Direct Input”
Copy and paste your entire HTML
Click “Check”
Fix any errors or warnings

Common validation fixes:

Unclosed tags (e.g., missing </li>)
Incorrectly nested elements
Duplicate id attributes
Missing alt on images

Publishing with GitHub Pages

Publish your portfolio for free:

Create a GitHub account at github.com
Create a new repository named yourusername.github.io
Push your portfolio files:

git init
git add .
git commit -m "Initial portfolio"
git remote add origin https://github.com/yourusername/yourusername.github.io.git
git push -u origin main

Go to Settings > Pages — your site is live at https://yourusername.github.io

Extension Ideas

Once the basic portfolio is complete, try adding:

A responsive navigation (hamburger menu for mobile)
Dark mode toggle
Animated skill bars
A project carousel
Testimonials section with <blockquote>
Embedded Google Map showing your location

Submission Checklist

Before considering this project complete:

Key Takeaways

A complete HTML page combines all the elements you’ve learned into a cohesive whole
Semantic structure makes pages accessible, maintainable, and SEO-friendly
Forms connect users to you — proper validation ensures quality submissions
W3C validation catches structural errors before they reach users
GitHub Pages provides free hosting for static sites — publish your work
This portfolio is your first project — you’ll improve it with CSS and JavaScript in the coming modules