HTML, CSS, and JavaScript

Nearly every modern webpage is built on three foundational web technologies: HTMLConcept · lights on your mapHTMLThe language that gives a page structure and meaning, saying what each thing is: a heading, a paragraph, a button. The first of the frontend’s three materials, before CSS styles it and JavaScript makes it act., CSSConcept · lights on your mapCSSThe language that controls presentation and layout, deciding how things look: colour, spacing, type, position. The second of the frontend’s three materials, applied over HTML’s structure., and JavaScriptConcept · lights on your mapJavaScriptThe language that adds behavior, governing what things do when you interact with them. The third of the frontend’s three materials, and the only one that runs as instructions rather than description..

That division of work is worth remembering: HTML provides structure and meaning. CSS controls presentation. JavaScript adds behavior.

A common shorthand is: structure → style → behavior

These technologies work together inside the browser to create the frontend experience.

HTML: structure and meaning

HTML stands for HyperText Markup Language.

HTML describes the content and structure of a webpage, telling the browser which parts of the page are headings, paragraphs, links, forms, images, buttons, lists, and other elements.

Consider this example: <button id="pay">Pay now</button>

This HTML tells the browser:

• Create a button.
• Give it the identifier pay.
• Display the words “Pay now.”

HTML does more than make something appear on the page. It also communicates what that thing is.

A button is more than text inside a rectangle. It has meaning and expected behavior, and browsers, screen readers, search engines, and other tools can recognize that it is intended to be interactive.

This is why engineers sometimes describe HTML as semantic. Well-structured HTML explains the role of the content, not only its visual position.

CSS: presentation and layout

CSS stands for Cascading Style Sheets.

CSS controls how HTML elements are presented.

It can determine:

• Colors
• Fonts
• Spacing
• Sizes
• Borders
• Layout
• Alignment
• Animations
• How a page adapts to different screen sizes

Consider this CSS:

The HTML establishes that the element is a button, and the CSS determines how that button looks.

CSS also handles much more than decoration, controlling page layouts, mobile responsiveness, visibility, and the way elements adjust when the screen changes size.

A CSS change can sometimes be small, but it is not automatically simple or risk-free. Changing one shared style can affect many pages, screen sizes, and accessibility needs.

JavaScript: behavior

JavaScript is the programming language that controls much of a webpage’s interactive behavior, and it can respond when a user clicks, types, scrolls, submits a form, or receives new information from a server.

Consider this simplified JavaScript: pay.addEventListener("click", () => sendOrder());

You can read this approximately as: when the Pay button is clicked, run the sendOrder function.

The code is connecting an event (the user clicking the button) to a function containing instructions, which should look familiar from Module 3. A function is being called when a particular condition in the user interface occurs.

JavaScript can also:

• Check form values
• Update content without reloading the page
• Show or hide elements
• Calculate temporary values
• Send requests to a backend
• Process responses
• Store information locally
• Create complex interactive experiences

Not every interaction requires JavaScript. HTML and CSS provide some built-in behavior of their own, but JavaScript is the main language used for more advanced application logic inside the browser.

Seeing the three together

Here is the button again, with all three materials describing it:

Three different responsibilities, one experience.

What happens when the button is clicked?

Suppose sendOrder() sends the user’s coffee order to the backend.

The flow might be:

1. HTML creates the Pay button.
2. CSS determines how the button appears.
3. JavaScript detects the click.
4. JavaScript gathers the order data.
5. The frontend sends an HTTP request to the backend.
6. The backend processes the order.
7. The frontend receives the response.
8. JavaScript updates the page with a confirmation or error.
9. HTML and CSS determine how that result is presented.

This connects the frontend technologies directly to the request-and-response model from Module 4.

How these terms appear in team conversations

You may hear engineers and designers describe a piece of work according to which of the three layers needs to change.

“This is primarily a CSS change.” This generally means the visual presentation or layout needs to change.

“We need to update the markup.” Markup commonly refers to the HTML structure.

“This needs JavaScript behavior.” This means the browser needs new logic or interaction.

These descriptions can provide an early clue about the kind of work involved, but they do not automatically reveal the effort or risk.

A small-looking CSS change may affect many pages. A JavaScript change may involve only one line. An HTML change may require accessibility testing.

The actual effort depends on how widely the code is used and how the product is built.

Connecting this to UI and UX

In Module 1, you learned that the user interfaceConcept · lights on your mapuser interfaceRe-encounter from Module 1: the part of a product users see and interact with. For a web application, it is built from HTML structure, CSS presentation, and JavaScript behavior, running in the browser., or UI, is the part of a product users see and interact with.

For a web application, HTML, CSS, and JavaScript create much of that interface inside the browser, with each owning one layer:

• HTML provides the content and interactive elements.
• CSS controls their presentation and layout.
• JavaScript controls much of their changing behavior.

The browser also displays images, video, fonts, and information received from the backend, and together these pieces form the visible and interactive frontend.

The user experienceConcept · lights on your mapuser experienceRe-encounter from Module 1: the broader journey, covering whether it is easy to understand, responds quickly, explains errors clearly, works across devices, and lets users succeed. Depends on how the whole product is designed, not merely where the code runs., or UX, is broader than the technologies used to build the interface.

UX includes:

• Whether the journey is easy to understand
• Whether the product responds quickly
• Whether errors are explained clearly
• Whether the experience works across devices
• Whether the product is accessible
• Whether users can complete their goal successfully

Client-side JavaScript can make an interaction feel immediate, and network requests can introduce delays, but good UX depends on how the entire product journey is designed, not merely where the code runs.

What are frontend components?

Large applications contain repeated interface patterns such as buttons, navigation bars, product cards, forms, and notification messages, and frontend teams often organize these pieces as reusable components.

A component is a self-contained piece of the interface with its own structure, presentation, and behavior.

For example, a reusable order button might contain:

• HTML-like structure
• CSS styling
• JavaScript behavior
• Rules governing the information it receives

The team can use the same component in several places rather than rebuilding it each time, which is the same component idea introduced in Module 1: one defined part of a larger system.

Where does React fit?

React is a JavaScript library used to build user interfaces from reusable components.

Instead of manually updating individual pieces of a page whenever data changes, engineers describe what the interface should look like for the current state, and React helps update the appropriate parts of the page.

For example, a cart component might display: 2 items

When the cart’s state changes, React can update the visible count to: 3 items without rebuilding the entire page from the beginning.

React does not replace HTML, CSS, or JavaScript.

It uses JavaScript to organize interface logic and ultimately produces or updates the HTML elements displayed by the browser, while CSS or other styling approaches still control presentation.

React is officially described as a library. In practice it is often used inside a broader framework such as Next.js, which adds more structure for building complete web applications.

A useful way to place it on the map is: HTML, CSS, and JavaScript are the foundational materials. React helps teams organize interactive interfaces built with those materials.

The mental model to remember

HTML defines the structure and meaning of a webpage.

CSS controls its visual presentation and layout.

JavaScript adds behavior and application logic inside the browser.

A frontend component is a reusable piece of the interface.

React is a JavaScript library that helps teams build interfaces from components and update them as data changes.

These technologies work together on the client side, while requests and responses connect the frontend to the backend.

You should now be able to look at a web feature and distinguish its structure, appearance, and behavior.