Build Your First Personal Profile Page with HTMLNew
• Updated 5/26/2026 • HTMLBeginnerWeb DevelopmentMarkup
Challenge Goal
Build a simple personal profile webpage using only HTML. This beginner coding challenge will help you practice the basic structure of an HTML5 document, including headings, paragraphs, lists, and links.
What You Will Build
You will create a file named profile.html. The page should introduce you with your full name, a short bio, a list of hobbies, and a link to a website you like.
Concept Overview
HTML, or HyperText Markup Language, is used to structure content on the web. It tells the browser what each piece of content means, such as a heading, paragraph, list item, or link.
In this challenge, you will practice using these common HTML elements:
<!DOCTYPE html>to declare an HTML5 document.<html>as the root element of the page.<head>for page information that is not directly shown on the page.<title>to set the browser tab title.<body>for visible page content.<h1>for the main page heading.<p>for paragraphs.<ul>and<li>for unordered lists.<a>for links.
Example Output
Your finished page should look like a simple profile page when opened in a browser:
- Your name appears as the main heading.
- A short bio appears below your name.
- Three hobbies are displayed as a bullet list.
- A paragraph includes a clickable link with the text
My favorite site.
Example HTML
<!DOCTYPE html>
<html>
<head>
<title>Jane Doe</title>
</head>
<body>
<h1>Jane Doe</h1>
<p>I am a beginner web developer learning HTML. I enjoy building simple webpages and improving my coding skills.</p>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ul>
<p>Visit <a href="https://example.com">My favorite site</a>.</p>
</body>
</html>Coding Challenge
Create an HTML file named profile.html that follows the requirements below.
Requirements
- Start the file with the correct
<!DOCTYPE html>declaration. - Create a complete HTML document using
<html>,<head>, and<body>. - Inside the
<head>, add a<title>element that contains your full name. - Inside the
<body>, add an<h1>element that contains your full name. - Add one
<p>element with a short bio of 2 to 3 sentences. - Add one unordered list using
<ul>. - The unordered list must contain exactly three hobbies.
- Each hobby must be placed inside its own
<li>element. - Add a final paragraph that contains a link using the
<a>element. - The link text must be exactly
My favorite site.
Input
There is no program input for this challenge. You will write a static HTML file.
Output
The output is a valid profile.html file that can be opened in a browser.
Expected Structure
<!DOCTYPE html>
<html>
<head>
<title>Your Full Name</title>
</head>
<body>
<h1>Your Full Name</h1>
<p>Your short bio goes here.</p>
<ul>
<li>First hobby</li>
<li>Second hobby</li>
<li>Third hobby</li>
</ul>
<p>Visit <a href="https://example.com">My favorite site</a>.</p>
</body>
</html>Constraints
- Use only HTML5.
- Do not use CSS.
- Do not use JavaScript.
- Do not use external libraries or frameworks.
- The file name must be exactly
profile.html. - The hobbies list must contain exactly three
<li>elements.
Hints
- HTML elements usually have an opening tag and a closing tag, such as
<p>and</p>. - The
<title>text appears in the browser tab, not directly on the page. - The
<h1>element should be used for the most important heading on the page. - Use the
hrefattribute inside the<a>tag to set the link destination. - Indent your HTML to make it easier to read.
Starter Code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Solution Walkthrough
- Begin with
<!DOCTYPE html>so the browser knows the page uses HTML5. - Add the root
<html>element. - Create a
<head>section and place the<title>element inside it. - Create a
<body>section for the content that visitors will see. - Add an
<h1>with your full name. - Add a paragraph using
<p>to describe yourself in 2 to 3 sentences. - Add a
<ul>element for your hobbies. - Inside the list, add exactly three
<li>elements. - Add a final paragraph with an
<a>link. - Close all HTML elements properly.
Final Solution
<!DOCTYPE html>
<html>
<head>
<title>John Smith</title>
</head>
<body>
<h1>John Smith</h1>
<p>I am a beginner web developer learning HTML. I enjoy creating simple webpages and practicing new coding skills.</p>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
</ul>
<p>Visit <a href="https://example.com">My favorite site</a>.</p>
</body>
</html>Stretch Goals
- Add a
<meta name="description" content="A short personal profile page.">tag inside the<head>. - Add an
<img>element for a profile picture. - Add an ordered list using
<ol>for your top three goals. - Use semantic HTML elements such as
<header>,<main>,<section>, and<footer>. - Add a second link to another website or social profile.
What You Learned
After completing this HTML challenge, you should understand how to create a basic HTML5 document, add visible content to a webpage, organize information with lists, and create clickable links.
