HTML: the structure of every web pageCreate account
Lesson 8 of 8

Project: your about me page

You've learned a lot of HTML in this course. Headings, text, links, images, lists, tables, forms, semantic structure and accessibility. Now it's time to put all of it together into the first real version of your personal website.

It won't be pretty yet. There's no CSS, so it'll look like a plain document from the early days of the web. That's exactly how it should look right now. In the next course, you'll make it look great.

What you'll build

An "about me" page in your my-website/index.html. Here's the structure to aim for:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your name</title>
  </head>
  <body>
    <header>
      <h1>Your name</h1>
      <nav><!-- links to each section --></nav>
    </header>

    <main>
      <section id="about"><!-- who you are --></section>
      <section id="learning"><!-- what you're learning --></section>
      <section id="contact"><!-- your contact form --></section>
    </main>

    <footer><!-- your name and the year --></footer>
  </body>
</html>

If you've done the practice tasks along the way, you're probably most of the way there already.

Requirements

Your page should have:

  1. The full page structure with a title and the right lang
  2. A header with your name in an h1 and a nav that links to each section
  3. A main with at least three section elements, each with its own h2
  4. At least one image with a good alt text
  5. At least one list
  6. At least one link to another website
  7. A contact form with labels for every field, an email field and a submit button
  8. A footer

Check your work

Before you hand it in, go through this list:

  • Open the page with Go Live and click every link in your menu
  • Move through the whole page with only the Tab key
  • Run a Lighthouse accessibility audit and fix what you can
  • Save, and let Prettier tidy up your code
AssignmentAI-graded assignment

Hand in your about me page. Paste the full contents of your index.html file, then answer in a sentence or two:

  1. Which part of the page are you most happy with?
  2. What was the hardest part, and how did you solve it?

Your page is complete when it has all eight requirements from this lesson: the full page structure with a title and the right lang, a header with an h1 and a nav, a main with at least three sections that each have an h2, an image with a meaningful alt text, a list, a link to another website, a contact form where every field has a connected label and a footer. If something is missing or could be improved, the feedback will point to the exact lesson to look at.

Resources:

  • Forgot the page structure? Type ! and press Tab in an empty HTML file.
  • Labels not connecting? The label's for must match the input's id. See "Forms: letting people talk back".
  • Menu links not jumping? Each href="#about" needs a section with id="about". See "Semantic HTML".

Upload your solution

Log in to submit this assignment.