← Build Your First Website
🌱 INTRO TO WEBSITES · LESSON 3

How Websites Are Built

BEGINNER · FREE

// three layers

Every website — from a personal blog to a billion-dollar app — is built from the same three layers. Understanding what each one does is the most important mental model in web development.

HTML — the structure. What's on the page. Headings, paragraphs, images, links, buttons. The skeleton.
CSS — the style. How it looks. Colors, fonts, spacing, layout, animation. The skin.
JavaScript — the behaviour. What it does. Clicks, forms, data, real-time updates. The brain.

// html — structure

HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language. You're labelling content, not writing logic. A heading is a heading. A paragraph is a paragraph. A link is a link.

HTML has been around since 1991. The current version is HTML5. It added video, audio, canvas, and dozens of semantic elements that make the web more accessible and meaningful.

// css — style

CSS stands for Cascading Style Sheets. It's what makes the web beautiful — or ugly. Without CSS, every website looks like a plain text document. With CSS, the same HTML can look completely different.

Modern CSS is extraordinarily powerful. Flexbox and Grid handle complex layouts. Custom properties (variables) enable design systems. Animations run at 60fps without JavaScript. The page you're reading right now is styled entirely with CSS.

// javascript — behaviour

JavaScript is the only programming language that runs natively in every browser. It makes pages interactive — responding to clicks, fetching data, updating content without reloading. It also runs on servers (Node.js), in mobile apps (React Native), and in desktop apps (Electron).

Every interactive thing you've ever done on the web — a dropdown menu, a live search, a chat message appearing — was JavaScript.

// beyond the basics

Frameworks — React, Vue, Svelte. Libraries that make building complex apps faster. Built on top of JS.

CMS — WordPress, Webflow, Squarespace. Content Management Systems. Let non-developers manage content without touching code.

No-code — Webflow, Framer, Bubble. Build real web apps without writing code. Powerful but limited.

Static site generators — Next.js, Astro, Hugo. Pre-build pages for speed and security. What most modern marketing sites use.

// try it

Go to w3schools.com and open their HTML introduction. Read the first page. Then click "Try it Yourself" on any example. You just ran HTML in a browser. That's the entire concept of web development — write code, see result. Everything else is detail.

← previous next lesson →
▶ Join Day Class · 1:00pm EST 🌙 Join Night Class · 6:00pm EST