For designers who want to understand the web
A visual guide to HTML, CSS, JavaScript, JSON, and how the frontend talks to the backend — no coding experience needed.
Start exploring ↓Every website is made of the same parts, just like every house. Once you see the analogy, it all clicks.
As a designer, you already think in structure — headers, sections, cards, buttons. HTML is just the language that tells the browser what those things are.
HTML uses tags — labels that tell the browser "this is a heading", "this is an image", "this is a button". The browser then knows how to display it.
<h1> is your "Heading" layer. <button> is your "CTA Button" layer. <img> is your "Hero Image" layer. Same idea — just in a language the browser understands.
<h1>Welcome to my shop</h1>
<p>Free shipping on orders over $50</p>
<button>Shop now</button>
<img src="hero.jpg" alt="Summer collection">Free shipping on orders over $50
← does nothing yet (needs JS)<img> marks where the image goes — the browser loads it from the src file
CSS connects visual rules to HTML elements. Instead of styling each element one by one, you write rules once — and they apply everywhere, automatically.
There are three places you can put CSS. One is much better than the others. Your developer will love you for knowing this.
<h1 style="color:coral; font-size:32px">
Summer Sale
</h1>
<h1 style="color:coral; font-size:32px">
New Arrivals
</h1>
<h1 style="color:coral; font-size:32px">
About Us
</h1>Now imagine the client changes their mind and wants the headings to be teal instead of coral.
You have to find and update every single heading individually. If you have 50 pages with 10 headings each... that's 500 edits.
This is also why developers quietly sigh when they see inline styles.
<!-- At the top of this one page -->
<style>
h1 {
color: coral;
font-size: 32px;
}
</style>
<h1>Summer Sale</h1>
<h1>New Arrivals</h1>
<h1>About Us</h1>Now all 3 headings on this page update with one change. Progress!
But if your site has 50 pages, each with its own <style> block, you're back to making 50 edits — one per page.
Also: mixing your structure (HTML) and your style rules (CSS) in one file makes both harder to read and maintain.
<!-- One line, in every HTML file -->
<link rel="stylesheet" href="style.css">
<h1>Summer Sale</h1>
<h1>New Arrivals</h1>
<h1>About Us</h1>h1 {
color: coral;
font-size: 32px;
}style.css is one file loaded by every page. Change the heading color once → every heading, on every page, updates instantly.
Try it right now:
Click a color → all three update at once, because they share one CSS rule
HTML is the structure. CSS is the look. JavaScript adds the "when I click this, that happens." It's the difference between a static mockup and a product people actually use.
.js file, linked at the bottom of your HTML. Same reason: one file, one change, everywhere updated.
This page is using JavaScript right now. The button below would do nothing without it.
cartCount++
cartBtn.textContent = `In cart (${cartCount}) 🛒`
output.textContent = `✅ Added! You have ${cartCount} item(s)`Every product card, news article, or user profile you design — that content doesn't get written into HTML manually. It lives in a database, travels as JSON, and JavaScript turns it into the cards you designed.
{
"name": "Linen Tote Bag",
"price": 42,
"image": "linen-tote.jpg",
"inStock": true,
"colors": [
"Sand",
"Sage",
"Cream"
]
}Structured text. Like a tiny spreadsheet, in a format every language can read.
Every website has two sides. You live and work in the front-of-house. There's a whole kitchen behind the scenes that makes the experience possible.
What the customer experiences
What runs the operation
The frontend can't access the database directly. JavaScript sends a request to the backend (like a waiter taking an order to the kitchen), and the backend sends back a response (the dish comes out).
A database stores all the content your designs will display — products, users, orders, blog posts. SQL is the language you use to ask for data from it.
A database table has rows and columns, just like a spreadsheet. Each row is one item (one product, one user). Each column is one property (name, price, image).
| id | name | price | in_stock |
|---|---|---|---|
| 1 | Linen Tote Bag | 42 | true |
| 2 | Canvas Tote | 38 | true |
| 3 | Leather Clutch | 95 | false |
When your product page needs to show only in-stock items, the backend runs a SQL query like this:
SELECT name, price
FROM products
WHERE in_stock = true
ORDER BY price ASCThe backend runs that query, gets back rows, converts them to JSON, and sends them to your JavaScript — which fills your product card template.
Now that you know the pieces, here's how to translate dev-speak into designer-speak.