Explore the Web Stack

HTML, CSS, and JavaScript

Every website you've ever used — from a simple blog to Instagram to Spotify — is built with the same three core technologies. No matter how complex the site is, no matter what tools were used to create it, what actually runs in your browser is always the same trio: HTML, CSS, and JavaScript. Let's review what each of them is responsible for.

HTML (HyperText Markup Language) defines the structure and content of a page. It tells the browser what things are — this is a heading, this is a paragraph, this is an image, this is a link. Think of it as the skeleton of a webpage. HTML has been around since the early 1990s and it's still the foundation of everything on the web.

CSS (Cascading Style Sheets) defines how things look. Colors, spacing, typography, layout, animations — that's all CSS. If HTML is the skeleton, CSS is the skin. It's a completely separate language from HTML, and it's where the visual design lives.

JavaScript is what makes things interactive. When you click a button and a menu opens, when data loads from a server, when a value changes and the interface updates — that's JavaScript. It's the brain of the webpage, handling behavior and logic.

These three work together, and they're worth understanding because this is also what AI generates when you ask it to build a UI. Whether you use Cursor, v0, or any other tool, the output is always HTML, CSS, and JavaScript. Understanding these building blocks is what lets you judge and direct that output.

Frameworks and libraries

Now, if every website is just these three technologies, why do you keep hearing names like React, Next.js, Astro, and Tailwind? These are modern tools — frameworks and libraries — that build on top of the fundamentals to make development faster and more organized.

Before moving forward, let's do a quick reminder of what libraries and frameworks are.

A library is a focused tool for a specific task. It's like a plugin — you pick it up when you need it. For example, a library for animations, or a library for handling dates.

A framework is more comprehensive. It provides structure, conventions, and a way to organize your entire project. Frameworks like Astro (which you'll use in this part), React (the most popular frontend library), and Next.js (a framework built on React that you'll use in Part 3) all give you powerful tools for building web applications. Tailwind is a CSS framework that provides pre-made utility classes for styling — you'll learn about it in the CSS exercise.

The important thing to understand is that all of these tools compile down to standard HTML, CSS, and JavaScript. Browsers don't understand React or Astro directly. The framework takes what you write and transforms it into the three languages browsers do understand. This means when you learn the fundamentals, you're learning something that applies everywhere — any framework, any tool, any AI. They all produce the same building blocks.