Skip to content

Personal Profile Page

Beginner~15 min

What you'll build

A standalone .html file that displays your name, a placeholder photo, a short bio paragraph, and a bulleted list of three skills you want to learn.

Goals

  • Write a valid HTML5 document from scratch with doctype, head, and body
  • Use semantic headings (h1, h2) to structure content
  • Add an image with the img element and alt text for accessibility
  • Create a bulleted list with ul and li elements

Prerequisites

  • Basic understanding of what HTML is and what tags do
  • A text editor or the EZ4Code playground

Steps

  2. 1

    Set up the document skeleton

    Create a file profile.html with the HTML5 doctype, an html element, a head containing a title and charset, and an empty body. This skeleton is the required shell of every HTML page.

    Code
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Profile</title>
  </head>
  <body>
  </body>
</html>

    Expected result

    Opening the file in a browser shows a blank page with the tab title "My Profile".

  4. 2

    Add your name and photo

    Inside the body, add an h1 with your name and an img tag pointing to a placeholder image. Always include an alt attribute so screen readers and broken-image states have a fallback.

    Code
    <h1>Alex Lee</h1>
<img src="https://placehold.co/200x200" alt="Photo of Alex Lee">

    Expected result

    The page now shows your name as a large heading and a 200×200 placeholder image.

  6. 3

    Write a short bio

    Below the photo, add an h2 heading "About me" followed by a p paragraph with two or three sentences describing who you are and what you want to learn.

    Code
    <h2>About me</h2>
<p>I am a new developer learning web basics. I enjoy solving small puzzles and want to build my first real website this month.</p>

    Expected result

    A sub-heading and a paragraph of bio text appear under the photo.

  8. 4

    List your skills

    Add an h2 "Skills I am learning" and a ul with three li items. Lists are the right element for any collection of parallel items.

    Code
    <h2>Skills I am learning</h2>
<ul>
  <li>HTML structure</li>
  <li>CSS colors and spacing</li>
  <li>JavaScript basics</li>
</ul>

    Expected result

    A bulleted list of three skills renders at the bottom of the page.

Try it yourself

What you learned

You wrote a complete, valid HTML5 document from scratch using semantic elements (h1, h2, p, ul, li, img) — the same structure every web page starts from.

Related Resources

Related Lessons

  • HTML

    The doctype, head, body skeleton used in this project.

  • HTML

    Headings, paragraphs, lists, and images covered here.

Related Practice

Related Tools

Related Cheatsheets

Related Reference

Related Errors

Related Glossary

Related Glossary

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

Related Errors

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

← Back to topic