A personal profile page

The problem

Write a single-page profile that introduces you, with your skills, projects and a way to contact you.

Requirements

• A complete document with doctype, lang, charset, viewport and a real title
• header, nav, main and footer landmarks
• A photo with suitable alt text, width and height
• A list of skills and a table of projects with a caption and header cells
• Links within the page, and at least one to another site
• A contact form with labelled fields, including one required email field

Technologies

• HTML
• Browser developer tools

Step by step

1. Sketch the regions of the page on paper, and write down what goes in each one.
2. Create the document frame, and check that the title makes sense in a browser tab.
3. Write the header and the nav, with links to the sections you plan to add.
4. Add a section for each topic with an h2, and give each one an id matching your nav.
5. Add the photo, the list of skills and the table of projects.
6. Build the contact form, connecting every label to its input.
7. Put your mouse away and press Tab through the whole page, fixing anything you cannot reach.

Expected result

One page that reads as a clear outline with no CSS at all, in which every link, image and form control works and can be understood without seeing the screen.

How it is evaluated

• The document is complete and valid
• Headings form an outline with one h1 and no skipped levels
• Every image has appropriate alt text, and every input a label
• Navigation links jump to the right sections
• The whole page can be used with a keyboard

Ways to improve it

• Add a details element for each project
• Add Open Graph tags and test the preview
• Style it after you have finished the CSS course