Module 10: Final Projects · Lesson 1 of 4
How to Make a Personal Profile Page in HTML
All lessons in Module 10
- Personal Profile Page
- Full Recipe Page
- Contact Page with Form
- One-Page Portfolio
Goal: Build a full personal profile page, starting from an empty skeleton.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
This page is about you (or about a character you make up). You already know every piece from earlier modules. The hard part is putting them together with no template. Build it yourself first. Afterwards, browse free minimalist HTML5 templates (opens in a new tab) to compare how other people lay out a profile page.
Plan before you type, the way an architect sketches rooms:
- The head gets a title, viewport, description and some CSS.
- The header holds your photo and your name in the only
<h1>. - Main has one section per topic, each opening with an
<h2>. - The footer carries the small print.
Build one region at a time and keep checking the preview and the Outline tab. You want h1 first, then h2 sections inside landmarks, as in the lesson on heading order. Press Check whenever you like for a progress report. The messages list what is still missing.
The short version
- Plan the regions first (head, header, main, footer), then fill them in one at a time.
- Put your name in the
<title>and in the only<h1>, so people and search engines know whose page it is. - Give the photo
widthandheightattributes and the browser saves its space before it loads. - If something really is a list, like skills or hobbies, mark it up as a list.
Example
<header>
<img src="avatar.svg" alt="Portrait of Jordan smiling" width="120" height="120">
<h1>Jordan Blake</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>...</p>
</section>
</main>
<footer>
<p>© 2026 Jordan Blake</p>
</footer>Your task
Time to build your profile page. It needs all of these:
- A non-empty
<title>, a viewport tag and a description meta tag. - Some CSS: a
<style>element or a link tostyle.css. - A
<header>with the page's only<h1>(your name) and the imageavatar.svgwith alt text. - A
<main>with at least two<section>s with<h2>headings, one called About Me. - A list of at least 3 hobbies or skills inside main.
- A link to your favorite website (full https:// URL) that opens in a new tab.
- An email link using
mailto:. - A
<footer>that includes the year.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p>Stargazing<br>Making pancakes<br>Building web pages</p>Right
<ul>
<li>Stargazing</li>
<li>Making pancakes</li>
<li>Building web pages</li>
</ul>Line breaks merely look like a list, while a real list is announced as "list, 3 items" and can be styled as a group.
Wrong
<img src="avatar.svg" alt="Portrait of Jordan smiling">Right
<img src="avatar.svg" alt="Portrait of Jordan smiling" width="120" height="120">With no size the browser can't save space for the image, so the text jumps down when it arrives.
Go deeper
A profile page earns its keep once it is online. It is a static web page (opens in a new tab), so free static hosts such as GitHub Pages, Netlify or Cloudflare Pages can publish your folder of HTML and CSS files in minutes. Call the main page index.html. Servers show that file when someone visits the folder's address.
When people search for your name, search engines read the title, description and <h1> to understand the page. Make them say who you are and what you do, for example Jordan Blake - Student Web Designer in Leeds. Add the Open Graph tags from Module 7 and links you share in chats will show your photo and name.
About privacy: spam bots harvest any email address they find in a mailto: link. Plenty of people use a separate address for their website, or switch to a contact form later.
Older tutorials add rel="noopener" to every target="_blank" link for security. Modern browsers apply that protection on their own, as the HTML standard's noopener link type (opens in a new tab) describes. Keeping it does no harm.
Finally, show your page to a friend for five seconds and ask who you are and what you do. If they can't say, sharpen your first heading and sentence.
Frequently asked questions
How do I make a simple personal website with HTML?
Start with one file named index.html. Give it a complete head (charset, viewport, a title with your name, a description). Below that comes a <header> with your photo and name, a <main> with a few sections such as About Me and Projects, and a <footer>. Add a little CSS for fonts and spacing. Once it works on your computer, upload it to a free static host and it is online.
What should I put on a personal profile page?
Not much. Your name and a photo, a sentence or two on who you are and what you do, a short list of skills or interests, a few links to your work or profiles, and a way to reach you. Leave out private details like your home address, phone number or date of birth. An email link or a contact form is enough.
Should links open in a new tab?
Only occasionally. Links inside your own site should open in the same tab. For a link to another site, like the favorite website in this project, target="_blank" is a common choice, so visitors keep your page open. Surprise tabs confuse people, screen reader users above all, since they may not notice the switch. Say so in the link text: MDN Web Docs (opens in new tab).