Every website you have ever visited — from Google’s search page to your favorite news site — is built on the same two technologies: HTML and CSS. The good news? They are the easiest part of web development to learn, and you can build your first page today with nothing but a free text editor and your web browser.

📅 Want a study plan for this topic?

Get a free 7-day learning plan in your calendar — one small lesson every day.

What HTML and CSS Actually Do

Think of a website like a house:

  • HTML (HyperText Markup Language) is the structure — the walls, doors, and rooms. It defines what appears on the page: headings, paragraphs, images, and links.
  • CSS (Cascading Style Sheets) is the interior design — the paint colors, furniture, and layout. It controls how everything looks: colors, fonts, spacing, and positioning.

Browsers read these two languages and turn them into the pages you see. No special software, no servers, no frameworks — just these basics.

The Only Tools You Need

You don’t need to install anything expensive:

  1. A text editor — Notepad (Windows), TextEdit (Mac), or better, the free VS Code.
  2. A web browser — Chrome, Firefox, or Edge, which you already have.

That’s it. Everything else happens in these two tools.

Your First HTML Page

Open your text editor and type this exactly:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
  </body>
</html>

Save it as index.html, then double-click the file to open it in your browser. Congratulations — you just published a webpage on your own computer!

What each part does:

  • <h1> creates the biggest heading (use <h2> to <h6> for smaller ones).
  • <p> creates a paragraph of text.
  • <a> creates a clickable link — the href part tells it where to go.
  • Tags usually come in pairs: an opening tag like <p> and a closing tag like </p>.

Adding Style with CSS

Now let’s make it look good. CSS can live inside your HTML file. Update your page like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f4f8;
        color: #333;
        text-align: center;
        padding: 40px;
      }
      h1 {
        color: #2F8D46;
      }
      a {
        color: #1a73e8;
        text-decoration: none;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first webpage — now with style!</p>
    <a href="https://www.example.com">Visit Example</a>
  </body>
</html>

Refresh your browser and see the difference: a soft background, a green heading, and a styled link. The <style> block is CSS — each rule picks an element (body, h1, a) and changes how it looks.

5 Practical Tips for Beginners

  1. Type the code yourself. Copy-pasting teaches nothing; typing builds muscle memory.
  2. Break things on purpose. Change a color, delete a tag, refresh — seeing what breaks teaches you how it works.
  3. Use “Inspect” in your browser. Right-click any webpage and choose “Inspect” to see real HTML and CSS in the wild.
  4. One concept at a time. Master headings and paragraphs before touching layouts and menus.
  5. Build tiny projects. A personal profile page, a list of your favorite books, a simple recipe card — small wins keep you going.

What to Learn Next

Once you’re comfortable, the natural path is:

  • More CSS — layouts with Flexbox and Grid, responsive design for phones.
  • JavaScript — makes pages interactive (buttons, forms, animations).
  • A real project — rebuild your favorite site’s homepage from scratch as practice.

Let’s Build a Real Profile Card: The Box Model in Numbers

You already built a Hello World page above, so let’s build something that looks like a real piece of a website: a small profile card. One <div> holds a name, a line of text, and a link — and CSS turns it into a neat green box. Here is the complete file, and I checked it myself: every tag closes properly, nothing is missing.

<!DOCTYPE html>
<html>
<head><title>Ayesha Khan</title>
<style>
.card { width: 300px; padding: 20px; border: 2px solid #2F8D46; margin: 16px; background-color: #f0fdf4; }
.card h2 { color: #14532d; }
.card a { color: #1a73e8; }
</style>
</head>
<body>
<div class="card">
<h2>Ayesha Khan</h2>
<p>Computer Science student, University of Layyah</p>
<a href="https://thegeeksguru.com">My favourite site</a>
</div>
</body>
</html>

Now the part that trips up almost every beginner: how wide is this card on the screen, really? The CSS says width: 300px, but that is only the content in the middle. The browser adds the padding and the border on top of it. Here is the real maths, step by step:

content:        300 px
+ left padding:  20 px
+ right padding: 20 px
+ left border:    2 px
+ right border:   2 px
= total width:  344 px

So your "300px card" actually takes up 344 pixels on the screen — and if you count the margin as well (16 px on each side), it needs 376 pixels of space. This is the CSS box model, and once you see the numbers, a hundred confusing layout problems suddenly make sense. A card that will not fit next to another card is almost always wider than you thought, because of padding and borders you forgot to count.

Let’s prove it with a second card. Put two of these cards side by side with a 24-pixel gap between them. The space you need is 376 + 376 + 24 = 776 pixels. If your screen is narrower than that, the second card drops below the first — not because your code is broken, but because the maths says it cannot fit. In my opinion, this is the single most practical thing in this whole guide: before you blame CSS, add up the box. Content plus padding plus border plus margin. It takes ten seconds, and it answers the question almost every time.

Try it yourself: change the padding from 20px to 30px and work out the new total before you refresh. The answer is 300 + 30 + 30 + 2 + 2 = 364 pixels wide, or 396 with the margin. If your number matches what you see on the screen, you own the box model — and layouts will never feel random again.

Conclusion

HTML and CSS are the foundation of everything on the web, and today you proved you can use them. You built a page, styled it, and learned how the pieces fit together. Keep practicing with small projects, and in a few weeks you’ll look back amazed at how far you’ve come. Remember the motto: Learn, Practice, Build — you just did all three.

Keep learning

📅 Want a study plan for this topic?

Get a free 7-day learning plan in your calendar — one small lesson every day.

Related Articles

Never miss a new article

Subscribe to The Geeks Guru newsletter and get every new article in your inbox.