Build a Wiki-Style Portfolio | HTML Tutorial

1

Create the file and write the DOCTYPE ›

Create a new file called index.html and type the page skeleton.

Every HTML page must start with these exact lines. Open VS Code, create a new file, save it as index.html, then type this:

Type this — line by line

Line 1 → <!DOCTYPE html> — tells the browser this is HTML

Line 2 → <html> — opens the whole page

Line 3 → <head> — opens the invisible settings section

Line 4 → <title>Your Name — Portfolio</title> — shown on the browser tab

Line 5 → </head> — closes settings

Line 6 → <body> — opens the visible page

Line 7 → leave blank — all your content goes here

Line 8 → </body> — closes the visible section

Line 9 → </html> — closes the whole page

Make it yours

On line 4, replace Your Name with your actual name. For example if your name is Sarah, write: <title>Sarah — Portfolio</title>

💡 Good habit — save your file as .html not .txt. Open it in Chrome after every step to see your changes live.

<!DOCTYPE html>
<html>
  <head>
    <title>Sarah — Portfolio</title>
  </head>
  <body>

  </body>
</html>

Want to learn more? Read our Introduction to HTML article ›

2

Add your name as the page title — h1 ›

Add a heading 1 and write your own name as the text.

Inside <body>, on the blank line, add your h1. This is the biggest heading on the page — on a portfolio it is your name, big and bold at the very top.

Type this inside <body>

→ <h1>Your Name</h1>

Make it yours

Replace Your Name with your actual full name. For example: <h1>Sarah Johnson</h1>

Save and open in Chrome. You should see your name appear as a large bold heading.

💡 Good habit — only ever use h1 once per page. It is your main title — like your name on a business card.

<body>
  <h1>Sarah Johnson</h1>
</body>

Want to learn more? Read our Headings article ›

3

Add all section headings — h2 ›

After the h1, add 6 section headings using h2 — one for each section of your portfolio.

These are the main sections every portfolio needs. Type each one on its own line after your h1:

Type each of these after your h1

→ <h2>About me</h2>

→ <h2>My skills</h2>

→ <h2>My projects</h2>

→ <h2>Work experience</h2>

→ <h2>Education</h2>

→ <h2>Contact me</h2>

Save and refresh Chrome. You should now see 6 headings appear below your name on the page.

💡 Good habit — write all your h2 headings first as a skeleton outline, then go back and fill content underneath each one.

<h1>Sarah Johnson</h1>
<h2>About me</h2>
<h2>My skills</h2>
<h2>My projects</h2>
<h2>Work experience</h2>
<h2>Education</h2>
<h2>Contact me</h2>

Want to learn more? Read our Headings article ›

4

Wrap in sections and add sub-headings — section and h3 ›

Wrap each h2 in a <section> tag. Then inside Work experience, add h3 sub-headings for each job.

A <section> wraps each group of related content together. Find your Work experience h2 and wrap it like this, then add h3 for each job role you have had:

Replace your Work experience h2 with this

→ <section>

→ <h2>Work experience</h2>

→ <h3>Job Title — Company Name (Year–Year)</h3>

→ </section>

Make it yours

Replace the h3 text with your real job titles and companies. For example: <h3>Frontend Developer — Acme Studio (2022–2024)</h3>

If you have not worked yet, write: <h3>Freelance Projects (2023–present)</h3>

Do the same for all other h2 sections — wrap each in <section></section>.

💡 Good habit — always close your <section> tag. Every opening tag needs a matching closing tag or the page layout will break.

<section>
  <h2>Work experience</h2>
  <h3>Frontend Developer — Acme Studio (2022–2024)</h3>
  <h3>Web Design Intern — BlueCo (2021–2022)</h3>
</section>

Want to learn more? Read our Semantic HTML article ›

5

Write about yourself — p paragraphs ›

Go to the About me section and add two paragraphs using p tags — introduce yourself in your own words.

Body text always goes inside <p> tags. After your <h2>About me</h2>, type two paragraphs. You can copy the example below to get started, then edit it to be about you:

Type this structure after <h2>About me</h2>

→ <p>Your first paragraph here.</p>

→ <p>Your second paragraph here.</p>

Make it yours — write about yourself

Para 1 — who you are:

<p>Hi, I'm Sarah — a web developer based in London with a passion for building clean, fast, and accessible websites.</p>

Para 2 — what you do or love: <p>I love turning ideas into real products. When I'm not coding I enjoy photography and hiking.</p>

Replace Sarah with your name, London with your city, and change the interests to your own.

💡 Good habit — never leave raw text floating in <body> without a tag. Always wrap all text in <p></p>.

<section>
  <h2>About me</h2>
  <p>Hi, I'm Sarah — a web developer based in London
  with a passion for building clean, accessible websites.</p>
  <p>I love turning ideas into real products. When I'm
  not coding I enjoy photography and hiking.</p>
</section>

Want to learn more? Read our HTML Tags article ›

6

Add your photo — img ›

Add your profile photo using an img tag inside the About me section.

The img tag is self-closing — no closing tag needed. It needs src (the file name) and alt (a text description of the image). Type this inside your About me section:

Type this inside your About me section

→ <img src="photo.jpg" alt="A photo of Sarah Johnson" width="200">

Make it yours

Save a photo of yourself in the same folder as index.html. Name it photo.jpg.

Change the alt text to describe your photo — for example: alt="A photo of me smiling in a park"

Change the width number to make the photo bigger or smaller — for example width="300" for bigger.

💡 Good habit — always write the alt text. It shows as text if the image is missing, and screen readers read it aloud to blind users.

<section>
  <h2>About me</h2>
  <img src="photo.jpg"
       alt="A photo of Sarah Johnson"
       width="200">
  <p>Hi, I'm Sarah...</p>
</section>

Want to learn more? Read our Images article ›

7

List your skills — ul bullets and ol numbered ›

In the My skills section add a bullet list of your skills. In the My projects section add a numbered list of your top projects.

Use <ul> for bullets and <ol> for numbered. Each item goes in <li>. Type the skills list first:

Type this in your My skills section

→ <ul>

→ <li>HTML & CSS</li>

→ <li>JavaScript</li>

→ <li>React</li>

→ <li>Figma</li>

→ </ul>

Make it yours

Replace the skill names with your real skills. Add or remove <li> lines as needed.

Now type the projects list:

Type this in your My projects section

→ <ol>

→ <li>Project name — one sentence about what it does</li>

→ </ol>

Make it yours

Replace each item with a real project you have made. If you have no projects yet write: <li>Coming soon — currently learning HTML</li>

💡 Good habit — use ul when order does not matter (skills). Use ol when order matters (top projects ranked by importance).

<section>
  <h2>My skills</h2>
  <ul>
    <li>HTML & CSS</li>
    <li>JavaScript</li>
    <li>React</li>
    <li>Figma</li>
  </ul>
</section>

<section>
  <h2>My projects</h2>
  <ol>
    <li>Portfolio website — my personal site built with HTML and CSS</li>
    <li>Weather app — shows live weather using a public API</li>
    <li>To-do list — a simple task manager built in JavaScript</li>
  </ol>
</section>

Want to learn more? Read our Lists article ›

8

Add a table — your education details ›

In the Education section, create a table showing your school, degree, and years.

A table uses <table> to start, <tr> for each row, <th> for column headers, and <td> for data cells. Type this in your Education section:

Type this in your Education section

→ <table>

→ <tr><th>School</th><th>Qualification</th><th>Years</th></tr>

→ <tr><td>University Name</td><td>BSc Computer Science</td><td>2019–2022</td></tr>

→ <tr><td>School Name</td><td>A-levels</td><td>2017–2019</td></tr>

→ </table>

Make it yours

Replace each <td> value with your real school name, qualification, and years. Add more <tr> rows if you have more qualifications.

💡 Good habit — use <th> for the header row so the browser makes it bold automatically and screen readers know those are column titles.

<section>
  <h2>Education</h2>
  <table>
    <tr>
      <th>School</th>
      <th>Qualification</th>
      <th>Years</th>
    </tr>
    <tr>
      <td>University of London</td>
      <td>BSc Computer Science</td>
      <td>2019–2022</td>
    </tr>
    <tr>
      <td>City College</td>
      <td>A-levels</td>
      <td>2017–2019</td>
    </tr>
  </table>
</section>

Want to learn more? Read our Tables article ›

9

Add links to your work — a href ›

In the My projects section, turn each project name into a clickable link to the live project or GitHub repo.

A link uses <a> with an href for the URL. Adding target="_blank" opens it in a new tab. Replace your plain <li> text with a link like this:

Replace plain text items with linked items like this

→

<li><a href="https://github.com/yourname/project" target="_blank">Weather App — shows live weather using a public API</a></li>

Make it yours

Replace the href URL with the real link to your project on GitHub. If it is not online yet use href="#" as a placeholder.

💡 Good habit — never write "click here" as link text. Always describe what the link is — screen readers read link text out loud to blind users.

<section>
  <h2>My projects</h2>
  <ol>
    <li>
      <a href="https://github.com/sarah/weather-app" target="_blank">
        Weather app — shows live weather using a public API
      </a>
    </li>
    <li>
      <a href="https://github.com/sarah/todo" target="_blank">
        To-do list — a task manager built in JavaScript
      </a>
    </li>
  </ol>
</section>

Want to learn more? Read our Links article ›

10

Add a navigation bar at the top — header and nav ›

At the very top of <body>, before everything else, add a header with your name and a nav bar with links to each section.

The <header> goes first inside <body>. Inside it, put your name in a <strong> tag and a <nav> with links. Type this as the very first thing inside <body>:

Type this as the first thing inside <body> — before your h1

→ <header>

→ <strong>Your Name</strong>

→ <nav>

→ <a href="#about">About</a>

→ <a href="#skills">Skills</a>

→ <a href="#projects">Projects</a>

→ <a href="#contact">Contact</a>

→ </nav>

→ </header>

Make it yours

Replace Your Name in the <strong> tag with your real name — for example: <strong>Sarah Johnson</strong>

To make anchor links work, add id="about" to your About me section: <section id="about">

💡 Good habit — <header> always goes at the top of the page. <nav> goes inside it and holds your navigation links.

<header>
  <strong>Sarah Johnson</strong>
  <nav>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

Want to learn more? Read our Semantic HTML article ›

11

Add radio buttons — choose a theme ›

Add a fieldset with 3 radio buttons letting visitors pick a colour theme for your portfolio — Light, Dark, or Auto.

Radio buttons let users pick one option from a group. They all share the same name so only one can be selected at a time. Type this inside your header or just below it:

Type this inside your header or below it

→ <fieldset>

→ <legend>Theme</legend>

→ <input type="radio" name="theme" id="light" checked>

→ <label for="light">Light</label>

→ <input type="radio" name="theme" id="dark">

→ <label for="dark">Dark</label>

→ <input type="radio" name="theme" id="auto">

→ <label for="auto">Auto</label>

→ </fieldset>

Save and refresh. You should see a box with 3 radio buttons. Try clicking each one — only one can be selected at a time.

💡 Good habit — every radio button needs a matching <label for="..."> with the same id. This makes the label text clickable too, not just the small circle.

<fieldset>
  <legend>Theme</legend>
  <input type="radio" name="theme" id="light" checked>
  <label for="light">Light</label>
  <input type="radio" name="theme" id="dark">
  <label for="dark">Dark</label>
  <input type="radio" name="theme" id="auto">
  <label for="auto">Auto</label>
</fieldset>

Want to learn more? Read our Fieldset and Legend article ›

12

Add a contact form with validation — form ›

In the Contact me section, add a form with 4 fields and a submit button. Add validation so the browser checks the inputs — no JavaScript needed.

A <form> holds all the input fields. Each field needs a <label> above it. Adding required means the field cannot be empty. Adding type="email" makes the browser check for an @ symbol automatically. Type all of this in your Contact me section:

Type this inside your Contact me section

→ <form>

→ <label for="name">Your name</label>

→ <input type="text" id="name" name="name" required minlength="2" placeholder="Your full name">

→ <label for="email">Your email</label>

→ <input type="email" id="email" name="email" required placeholder="you@example.com">

→ <label for="reason">Reason for contact</label>

→ <select id="reason" name="reason">

→ <option>Job opportunity</option>

→ <option>Freelance project</option>

→ <option>Just saying hi</option>

→ </select>

→ <label for="msg">Your message</label>

→ <textarea id="msg" name="message" required minlength="10" placeholder="Write your message here..."></textarea>

→ <button type="submit">Send message</button>

→ </form>

Save and refresh. Try clicking Send message with empty fields — the browser shows an error automatically. Try a bad email like "hello" — it asks for an @ symbol.

Make it yours

Change the <option> values in the dropdown to whatever reasons make sense for you.

Change the placeholder text to sound like you — for example: placeholder="Tell me about your project..."

💡 Good habit — use type="email" not type="text" for email fields. The browser validates the format automatically and on mobile shows the @ key on the keyboard.

<section id="contact">
  <h2>Contact me</h2>
  <form>
    <label for="name">Your name</label>
    <input type="text" id="name" name="name"
           required minlength="2"
           placeholder="Your full name">

    <label for="email">Your email</label>
    <input type="email" id="email" name="email"
           required placeholder="you@example.com">

    <label for="reason">Reason for contact</label>
    <select id="reason" name="reason">
      <option>Job opportunity</option>
      <option>Freelance project</option>
      <option>Just saying hi</option>
    </select>

    <label for="msg">Your message</label>
    <textarea id="msg" name="message"
              required minlength="10"
              placeholder="Write your message here..."></textarea>

    <button type="submit">Send message</button>
  </form>
</section>

Want to learn more? Read our Forms article ›

Build Your Own Portfolio Page in HTML