HTML Practice: Build a Personal Profile Page

Ready to build something with HTML? In this exercise you will create a profile with a real h1, photo alternative text, biography, skills list, and two internal section links. This is practice, so the goal is to understand your choices rather than just copy a finished design.

You can use a plain text editor and any current browser. Create a separate project folder and save your page as index.html unless the task calls for several pages. You do not need to finish every improvement on the first try. A small valid page is a better starting point than a complicated page that nobody can use.

What you will build

• Organize the content into a clear page title and sections related to the assignment
• Implement the feature described in the brief: create a profile with a real h1, photo alternative text, biography, skills list, and two internal section links
• The document has one main h1 and descriptive section headings
• The internal links use fragment identifiers pointing to unique section IDs

Step 1: Plan the page

Before writing code, list the content your visitor needs to understand or complete the task. Mark the page title, navigation, major sections, and interactive parts. If the visitor should fill in a form, decide which fields are truly necessary. If the visitor needs to compare data, identify your row and column headings first.

Step 2: Start with working HTML

The following starter example focuses on the central HTML technique used in this project. Type it into a file, run it in your browser, and then expand it to meet the requirements above. The starter is not presented as the entire finished assignment.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meet Alex - Learning Club</title>
</head>
<body>
    <header>
        <h1>Hi, I am Alex!</h1>
        <nav aria-label="Page sections">
            <a href="#about">About</a>
            <a href="#interests">Interests</a>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>About me</h2>
            <p>I enjoy solving puzzles and learning how websites work.</p>
        </section>
        <section id="interests">
            <h2>Things I like</h2>
            <ul>
                <li>Coding</li>
                <li>Drawing</li>
            </ul>
        </section>
    </main>
</body>
</html>

Step 3: Understand what the example does

• The document has one main h1 and descriptive section headings.
• The internal links use fragment identifiers pointing to unique section IDs.
• List items describe actual hobbies or interests, not visual decoration.

All file names and text are teaching examples. Replace placeholders with real files and meaningful project content.

Step 4: Finish the project

1. Replace the example words and sample data with your own original content that fits the assignment.
2. Add every section and control described in the project goals. Keep a clear heading order and meaningful labels.
3. Save your work, open it in a browser, and check actual behavior with both mouse and keyboard.
4. Check that linked files, images, form destinations, and IDs really exist; fix any broken paths or duplicate identifiers.
5. If JavaScript, a web server, or another asset is necessary, add it explicitly or explain what remains a demonstration.

How to check your finished work

• The page clearly communicates its topic without relying on decorative styling.
• Headings are in a logical order, and important information remains readable at 200% zoom.
• Links and buttons work with the keyboard and have understandable labels.
• Images and media have appropriate accessible text alternatives; tabular data has proper header associations.
• The project-specific requirement is met: Create a profile with a real h1, photo alternative text, biography, skills list, and two internal section links
• Any HTML validator warnings or browser console problems have been reviewed and fixed.

Common Beginner Mistakes

• Avoid using br tags to create paragraphs or headings to style ordinary text.
• Skipping testing because the page looks correct at one window size.
• Using placeholder data or missing resources in a project presented as complete.

Key Takeaways

• The goal is to create a profile with a real h1, photo alternative text, biography, skills list, and two internal section links.
• The document has one main h1 and descriptive section headings.
• A successful project is understandable, valid, accessible, and tested—not merely visually attractive.