HTML, CSS, and JavaScript: What Each One Does

Whatever tool built your app — React, Next.js, Lovable, Bolt, or Claude Code — what reaches the browser is always the same three things: HTML, CSS, and JavaScript. Frameworks are ways of producing them. Knowing what each one does helps you describe problems precisely, and read what your AI tool wrote.

The house analogy

HTML is the structure: walls, rooms, doors.
CSS is the decoration: paint, furniture, layout.
JavaScript is the electricity: things that do something when you flip a switch.

HTML: structure and content

HTML (HyperText Markup Language) describes what's on the page and what each piece is — a heading, a paragraph, a button, an image, a form.

<h1>Welcome to Plant Tracker</h1>
<p>Never forget to water your plants again.</p>
<img src="/fern.jpg" alt="A fern on a windowsill">
<button>Sign up</button>

Content is wrapped in tags like <h1>…</h1>. Tags can have attributes, like the image's src (where the file is) and alt (a description for screen readers and search engines).

HTML on its own looks plain — black text on white, like a document from 1995. That's fine; that's CSS's job.

Choosing the right tag matters more than it seems. A real <button> works with the keyboard and screen readers; a <div> styled to look like a button doesn't. (Web Accessibility Basics.)

CSS: how it looks

CSS (Cascading Style Sheets) controls appearance: colours, fonts, sizes, spacing, and layout.

h1 {
  font-size: 2rem;
  color: #1f5132;
}

button {
  background: #2e7d32;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

Each rule says which elements (the selector, like button) and what to change. CSS also handles layout — putting things side by side, in grids, or stacking them on small screens. (Responsive Design Basics.)

You'll often see CSS written differently in AI-built apps. Tailwind CSS, very common in generated code, puts styles directly on elements as short class names:

<button class="bg-green-700 text-white px-6 py-3 rounded-lg">Sign up</button>

Same result, different style of writing it.

JavaScript: what it does

JavaScript is a programming language that runs in the browser and makes the page interactive: responding to clicks, checking forms, loading data without a full reload, showing and hiding things.

const button = document.querySelector("button")

button.addEventListener("click", () => {
  alert("Thanks for signing up!")
})

JavaScript also talks to servers — fetching your data from an API and putting it on the page. (What Is an API?.) And through Node.js, it runs on servers too. (What Is Node.js?.)

JavaScript is not Java. The similar name is a 1990s marketing decision.

How they fit together

A browser loads a page in roughly this order:

Fetches the HTML and starts building the page.
Sees links to CSS files and applies the styles.
Sees links to JavaScript files, downloads, and runs them.
JavaScript may then fetch data and change the HTML on the fly.

In modern frameworks like React, much of the HTML is generated by JavaScript. (What Is React?.) You'll see files where the three are mixed together — that's normal. It all becomes plain HTML, CSS, and JavaScript by the time it reaches the browser.

Describing bugs using the three layers

Knowing which layer a problem lives in makes your requests to an AI tool far more precise:

Symptom	Likely layer
Something's missing or in the wrong order	HTML (or the code generating it)
Wrong colour, spacing, alignment; broken on mobile	CSS
Button does nothing; data doesn't load; error in the console	JavaScript

"The Save button's click handler never runs — there's a TypeError in the console" is a much better prompt than "Save is broken." Your browser's DevTools show all three layers. (Browser Developer Tools for Beginners.)

How much do you need to learn?

To build with AI tools, you don't need to write any of these from scratch. It helps a lot to:

Read basic HTML and recognise common tags.
Tweak a CSS value — a colour, a size — and see the effect.
Recognise JavaScript errors in the console and copy them.

That's a weekend of learning, and it makes you a much better director of your AI tool. (Should You Learn to Code If AI Can Write It?.)

EasySpawn gives Claude Code a persistent workspace with your whole project — HTML, CSS, JavaScript, and backend together — running on a real address you can inspect. See how it works or join the waitlist.