How the Web Works: HTML, CSS & JavaScript

HTML: The Skeleton

HTML (HyperText Markup Language) uses tags to define content. Tags like <h1>, <p>, and <button> tell the browser what each piece of content IS. Toggle CSS and JS off to see the raw HTML.

All three layers active. Toggle CSS or JS off to see what each contributes.

CSS: The Skin

CSS (Cascading Style Sheets) controls appearance. The same HTML can look completely different with different CSS. Click each theme to see the same content restyled.

JavaScript: The Brain

JavaScript adds interactivity. Click the button in the preview to see JS respond. Without JS, websites are static documents. With JS, they become applications.

Click the button in the preview to trigger JavaScript.

document.querySelector("button").addEventListener("click", function() { ... });

This is how JS listens for clicks. When the button is clicked, the function runs. Every interactive website uses event listeners like this.

The Web Stack

Every website, from a simple blog to a complex app, is built from these three layers.

View Source

Right-click any webpage and choose "View Page Source" or press F12. You will see the raw HTML, linked CSS files, and JavaScript that builds the page.

Separation of Concerns

HTML, CSS, and JS are separate on purpose. You can change the design (CSS) without touching the content (HTML) or logic (JS). This makes websites maintainable.

Frameworks Build on Top

React, Vue, and Angular are JavaScript frameworks. Bootstrap and Tailwind are CSS frameworks. They speed up development but everything compiles to HTML, CSS, and JS.

Fun Fact

The first website ever created (info.cern.ch) went live on December 20, 1990. It was pure HTML with no CSS and no JavaScript. Both were invented later: CSS in 1996, JS in 1995. The web worked for 5 years on HTML alone.

Web Developer!

You've seen how HTML structures content, CSS styles it, and JavaScript makes it interactive. Every website you visit, from simple blogs to complex apps, is built from these three languages working together.

Code Edits

Time Exploring

HTML = Structure

HTML defines what is on the page: headings, paragraphs, images, links, buttons. It is the skeleton. Without CSS, it is plain but functional.

CSS = Style

CSS controls how things look: colors, fonts, spacing, layout. Change the CSS and the same HTML looks completely different.

JavaScript = Behavior

JS makes things happen: click handlers, animations, form validation, data loading. It is the only programming language browsers understand natively.

They Work Together

HTML provides the elements. CSS makes them beautiful. JS makes them interactive. Remove any one and the web breaks.

Ready to Create?

Put your new knowledge into practice!

More Discoveries