Build a Profile Page

Combine everything you've learned — tags, nesting, attributes, and CSS — to build a complete personal profile page from scratch.

Step 1 of 6

What makes a real webpage?

Every webpage you visit — your GitHub profile, a LinkedIn bio, an Instagram about page — is built from the same pieces you already know. Headings give structure. Paragraphs hold text. Links connect pages together. Images add visuals. CSS makes it all look polished. The difference between a bunch of separate exercises and a real webpage is that all these pieces work together inside one document. That's exactly what you're about to do.

Think of it this way: Think of it like building a house. You've already learned how to lay bricks (HTML tags), install windows (images and links), paint walls (CSS properties), and label rooms (classes and selectors). Now it's time to combine those skills and construct a whole house from the ground up.

Web Standard

Professional web pages follow a predictable structure: a container element wraps the content, headings establish hierarchy, semantic elements like <nav> group navigation links, and a <style> block (or external stylesheet) handles all visual presentation. This separation of structure and style is a core principle of web development.

Learn more on MDN

HTML<div>: Content Division element HTMLDocument and website structure

HTMLREAD ONLY

TAG VIEW

Start typing to see your tags visualized here...

PREVIEW