HTML & CSS From Zero

How the Web Actually Works

Every time you visit a website, here's what happens in about 200 milliseconds:

You type a URL (like learnvault.com) into your browser
Your browser asks a DNS server "what's the IP address for this domain?" (DNS is like a phone book for the internet)
The DNS server responds with an IP address (like 192.168.1.1)
Your browser sends an HTTP request to that IP address: "Give me the page at this URL"
The web server at that address responds with HTML, CSS, and JavaScript files
Your browser reads those files and renders the page you see

The three languages of the web:

HTML (HyperText Markup Language): The structure. What things are — headings, paragraphs, images, links, buttons. HTML is the skeleton.
CSS (Cascading Style Sheets): The appearance. How things look — colors, fonts, spacing, layout, animations. CSS is the skin and clothing.
JavaScript: The behavior. What things do — respond to clicks, fetch new data, validate forms, animate elements. JavaScript is the muscles.

Every website you've ever visited — Google, Netflix, Wikipedia, your bank — is built with these three languages. Some sites add frameworks and tools on top, but underneath it's always HTML + CSS + JavaScript.

You don't need to install anything to start. Open any text editor (even Notepad), write HTML, save it as .html, and open it in your browser. That's it. No special software, no accounts, no configuration.

Your First HTML Page

Let's build a real web page. Open a text editor and type this exactly:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World</h1>
    <p>I just wrote my first web page.</p>
</body>
</html>

Save it as index.html and open it in your browser. You should see a heading and a paragraph.

What each part means:

<!DOCTYPE html> — Tells the browser "this is an HTML5 document"
<html> — The root element. Everything goes inside this.
<head> — Metadata about the page (title, linked files, SEO info). Not visible on the page itself.
<title> — The text shown in the browser tab
<body> — Everything visible on the page goes here
<h1> — A top-level heading (h1 through h6, biggest to smallest)
<p> — A paragraph of text

HTML elements are building blocks. Each one is a tag: <tagname>content</tagname>. The opening tag, the content, and the closing tag (with the /) form one element.

Essential tags to know:

<h1> through <h6> — Headings
<p> — Paragraph
<a href="url"> — Link
<img src="url" alt="description"> — Image (no closing tag)
<ul> and <li> — Unordered list (bullet points)
<div> — A generic container (used heavily for layout)
<span> — A generic inline container (for styling parts of text)

With just these tags, you can build a simple but functional web page. Everything else is refinement.

Making It Look Good with CSS

HTML without CSS looks like a Word document from 1998. CSS transforms structure into design.

Adding CSS to your page:

Inside the <head> of your HTML, add a <style> tag:

<head>
    <title>My First Page</title>
    <style>
        body {
            font-family: Georgia, serif;
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            background: #1a1a2e;
            color: #e0e0e0;
        }
        h1 {
            color: #f59e0b;
            font-size: 2.5rem;
        }
        p {
            line-height: 1.7;
            font-size: 1.1rem;
        }
    </style>
</head>

How CSS works:

Every CSS rule has a selector (what to style) and declarations (how to style it):

selector {
    property: value;
    property: value;
}

The most important CSS properties:

color — Text color
background — Background color (or image, or gradient)
font-family — The typeface
font-size — Text size (use rem for scalability)
margin — Space outside an element
padding — Space inside an element
border — A line around an element
display — How the element behaves (block, flex, grid)
width / max-width — Element width

The Box Model:

Every HTML element is a box with four layers:

Content — The actual text/image
Padding — Space between content and border
Border — A line around the padding
Margin — Space between the border and neighboring elements

Understanding the box model is the single most important CSS concept. Every layout issue you'll ever encounter comes down to how boxes interact with each other.

Responsive Design in 15 Minutes

A responsive website looks good on phones, tablets, and desktops. Here's the minimum you need:

Step 1: The viewport meta tag

Add this to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, mobile browsers render your page as if it's a desktop screen, then shrink it. With it, the page width matches the device width.

Step 2: Use relative units

rem instead of px for font sizes (1rem = the base font size, usually 16px)
% or max-width for containers instead of fixed widths
vw/vh for viewport-relative sizing when needed

Step 3: Media queries

/* Default styles (mobile first) */
.container {
    padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
    }
}

Step 4: Flexbox for layouts

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.card {
    flex: 1 1 300px; /* Grow, shrink, minimum 300px */
}

This creates a grid that automatically adjusts from multi-column to single-column as the screen shrinks.

The mobile-first mindset:

Design for the smallest screen first, then add complexity for larger screens. Mobile constraints force clarity — if your design works on a 375px-wide phone, it'll definitely work on a 1440px desktop.