HTML, CSS and JavaScript: What Each One Does

In this guide: HTML, CSS and JavaScript explained simply: how browsers build pages, what each language does, real examples of each, and where to start learning.

Every website you visit is built from three core technologies: HTML, CSS, and JavaScript. Even if you use WordPress or a website builder, understanding what each one does helps you customize your site, communicate with developers, and fix small problems yourself.

Think of a website as a house:

• HTML is the structure — walls, rooms, doors.
• CSS is the style — paint, furniture, decoration.
• JavaScript is the behavior — lights that switch on, doors that open automatically.

How browsers build a page

When you visit a page, your browser:

1. Downloads the HTML file from the server.
2. Reads it and builds the Document Object Model (DOM) — a tree of all elements on the page.
3. Downloads CSS files and applies styles to the DOM.
4. Downloads and runs JavaScript, which can change content, respond to clicks, or load new data.
5. Paints the final result on your screen.

This is why too much CSS or JavaScript can slow a page down — the browser has more work to do before showing content. Learn more in Core Web Vitals Explained.

HTML basics

HTML (HyperText Markup Language) describes the content and structure of a page using tags.

<h1>Welcome to My Website</h1>
<p>We build fast, secure websites.</p>
<a href="/contact/">Contact us</a>
<img src="team.jpg" alt="Our team at work">

Key things to know:

• Headings (<h1> to <h6>) create structure. Use one <h1> per page for the main title.
• Paragraphs (<p>), links (<a>), images (<img>), and lists (<ul>, <ol>) are the basics.
• Semantic tags like <header>, <nav>, <main>, <article>, and <footer> describe meaning, which helps accessibility and SEO.
• Alt text on images describes them for screen readers and search engines.

CSS basics

CSS (Cascading Style Sheets) controls how HTML looks: colors, fonts, spacing, layouts, and responsiveness.

h1 {
  color: #0B0F14;
  font-size: 2.5rem;
}
.button {
  background: #F5B83D;
  padding: 12px 24px;
  border-radius: 8px;
}

Key concepts:

• Selectors target elements (h1), classes (.button), or IDs (#header).
• The box model: every element has content, padding, border, and margin.
• Flexbox and Grid create modern layouts.
• Media queries adapt designs to different screen sizes (responsive design).
• The cascade: when rules conflict, more specific or later rules win.

In WordPress, you can add small CSS tweaks in Appearance → Customize → Additional CSS (classic themes) or in the Site Editor’s styles (block themes). For bigger changes, use a child theme.

JavaScript basics

JavaScript makes pages interactive. It can respond to user actions, update content without reloading, validate forms, and communicate with servers.

document.querySelector('.button').addEventListener('click', () => {
  alert('Thanks for clicking!');
});

What JavaScript powers:

• Menus that open and close
• Image sliders and galleries
• Form validation
• Live search and filters
• Analytics tracking
• Entire web applications (with frameworks like React, Vue, or Svelte)

JavaScript is powerful, but heavy scripts are a major cause of slow websites. Load only what you need and defer non-essential scripts. See speed terms explained.

Where to start learning

A practical learning path:

1. HTML — one to two weeks: build a simple personal page.
2. CSS — two to four weeks: style your page, learn Flexbox, Grid, and responsive design.
3. JavaScript — ongoing: start with variables, functions, events, and DOM manipulation.
4. Git — track your code; see Git for Beginners.
5. Build projects: a landing page, a portfolio, a to-do app.

Free resources: MDN Web Docs, freeCodeCamp, and many quality YouTube tutorials. Use your browser’s DevTools (right-click → Inspect) to see how any website is built.

Our Web Developer Roadmap for 2026 outlines what to learn next.

Further reading: MDN Web Docs learning area

Key Takeaways: HTML, CSS and JavaScript

• HTML = structure, CSS = style, JavaScript = behavior.
• Browsers download, parse, style, and run these files to show a page.
• Use semantic HTML and alt text for accessibility and SEO.
• Keep CSS and JavaScript lean for faster websites.
• Learn by building small projects and inspecting real websites.