HTML HTML First Project: About, Portfolio, and Contact Pages

A three-page portfolio is a good first real website. Home introduces you, Portfolio shows what you made, and Contact tells people how to reach you. You do not need to learn everything at once. Follow the example, see what changes, and then try a small change of your own.

What You Need to Know

Keep filenames and navigation labels consistent across all three pages. Shared CSS is optional until the HTML and links work correctly.

Start small. Save your files in one folder and change one thing at a time. If the page does not look right, check the file you actually opened before changing the code again.

Example: See It in Action

This is a file layout or an editor shortcut rather than a piece of HTML to paste directly into a webpage. Follow its structure in your editor.

project/
    index.html
    portfolio.html
    contact.html
    images/
        first-project.jpg

Let’s Understand the Example

Follow the example from top to bottom. The indentation shows which information belongs together. Each line has a job, even when the browser does not draw it as something visible.

Save the example first, then open the right file in a browser. If you change the source, refresh the browser to compare before and after.

What Should You See?

This example may change the document’s behavior or metadata rather than draw something obvious. Use your browser’s developer tools to inspect the actual elements and attributes.

Save a copy of your working file before experimenting. Change just one thing, test it in the browser, and compare the result to the original.

Try It Yourself

Build the folders, add one h1 per page, and connect them with navigation links.
Save your changes, open or refresh the page, and compare the result with the original example.
Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

Creating all three files but forgetting to link back to the homepage.
If a result does not change, check that the file was saved and that the browser is showing the right path.

Key Takeaways

A three-page portfolio is a good first real website.
Focus on what the browser does with the markup, not just how the example looks.
Keep filenames and navigation labels consistent across all three pages. Shared CSS is optional until the HTML and links work correctly.