Your First Page

You have learned what the web is, what a browser does, and what HTML, CSS, and JavaScript each do. Now it is time to build something real — your first proper web page, written entirely by you.

This is not a throwaway exercise. The page you build here uses exactly the same HTML and CSS you would find on any professional website. The only difference is that real sites have more of it.

What you are building

A simple personal introduction card: your name as a heading, a short sentence about yourself, and a link. Then you will style it to make it look the way you want.

The HTML

Start with the structure. An <h1> for your name, a <p> for a description, and an <a> for a link.

<h1>Maya Chen</h1>
<p>UI designer based in Bangkok. I love design systems and clean type.</p>
<a href="https://dribbble.com">See my work</a>

Notice there is no design here yet — just content and meaning. The <h1> signals “this is the most important heading.” The <p> signals “this is a paragraph.” The <a> signals “this is a link.” HTML is communicating what things are, not how they look.

The CSS

Now add the design layer. CSS targets each element by name and applies visual properties to it.

h1 { color: #7C3AED; font-size: 2rem; }
p  { color: #374151; }
a  { color: #7C3AED; }

Every CSS rule follows the pattern: selector (which element to style) + property (what to change) + value (what to change it to). That is the entire CSS syntax.

Build it yourself

The editor below has a starter version. Make it yours — change the name, the description, the colors, the font size. There is no wrong answer. Every time you save a change in a real project, this is what you are doing.

<div class="profile">
  <h1>Maya Chen</h1>
  <p class="bio">UI designer based in Bangkok.\nI love design systems and clean type.</p>
  <a class="link" href="https://dribbble.com">See my work &rarr;</a>
</div>

Try these changes one at a time to build your confidence:

Replace Maya Chen with your own name.
Change #7C3AED (purple) to #0EA5E9 (blue) in both the HTML and CSS.
Change border-radius: 20px to border-radius: 4px to make the card square-cornered.
Change text-align: center to text-align: left.

Each change is isolated and reversible — exactly like working with properties in Figma.

Common mistakes designers run into

Forgetting <!DOCTYPE html>, which makes the browser render in the wrong mode
Forgetting the viewport meta tag, which makes mobile show a shrunken, unusable layout
Getting a filename’s case wrong (Index.html vs index.html), which breaks on a case-sensitive server

The developer’s perspective

👨‍💻 What developers actually see

Designers see “one file that opens,” but developers have to remember the boilerplate every page needs (meta charset, viewport, a title for both SEO and the browser tab).

💡 Real-world example

Static site generators and frameworks like Astro and Next.js scaffold this boilerplate into every page’s layout automatically, so a developer can’t forget it by accident. (Astro: Project structure)