Frontend Technologies
HTML, CSS, and JavaScript — the building blocks of the web
Introduction
Every website and web app you have ever visited is built on the same three core technologies: HTML, CSS, and JavaScript. These three languages work together to create everything you see and interact with in a browser.
HTML gives a page its structure. CSS makes it look good. JavaScript makes it interactive. You might use a framework like React or Vue on top of them, but underneath, it is always HTML, CSS, and JavaScript doing the real work.
In this chapter, you will learn what each language does, how they fit together, and why they are the foundation of the modern web.
How It Works
When you visit a webpage, your browser downloads HTML, CSS, and JavaScript files. The HTML provides the structure (headings, paragraphs, images, links). The CSS provides the styling (colours, fonts, layout, animations). The JavaScript adds behaviour (click handlers, form validation, fetching data, dynamic updates).
House Analogy
HTML is the house frame — walls, rooms, doors, windows. CSS is the paint, furniture, and decorations — the colours, textures, and layout. JavaScript is the electricity and plumbing — the stuff that makes things happen when you flip a switch or turn a tap.
The Three Languages
Each language plays a distinct role. Here is what each one does:
HTML — Structure
HyperText Markup Language defines the skeleton of a page: headings, paragraphs, images, links, and forms. It uses tags like <h1>, <p>, and <img>.
CSS — Style
Cascading Style Sheets controls colours, fonts, spacing, and layout. It makes a page look beautiful. A single CSS rule can change the colour of every heading across an entire website.
JavaScript — Behaviour
JavaScript adds interactivity: button clicks, form submissions, animations, and real-time updates. It can fetch data from servers and rewrite parts of a page without reloading.
Deeper Dive
The browser reads HTML first, then applies CSS, then runs JavaScript. This is called rendering. The DOM (Document Object Model) is the browser's internal representation of the page. JavaScript can access and modify the DOM to change what the user sees.
Modern frontend development often uses frameworks like React, Vue, or Angular. These frameworks are built on top of JavaScript and help developers build complex apps more efficiently. But they all compile down to HTML, CSS, and JavaScript in the end.
Responsive design is the practice of making pages look good on any device — phone, tablet, or desktop. It is achieved with CSS techniques like flexible grids, media queries, and relative units.
Key Insight
You cannot build a modern web frontend without all three languages. HTML without CSS looks like a document from 1992. CSS without HTML has nothing to style. JavaScript without HTML and CSS would have no interface to talk to.
Advanced
At a deeper level, frontend technologies involves rules and patterns that engineers use worldwide. HTML follows standards so different brands and devices can still work together. That is why your phone, school laptop, and game console can all connect to the same network or use the same apps.
CSS does not happen in a straight line. Systems often use backup paths, error checking, and retries so information arrives correctly. When something fails, smart JavaScript helps the system recover instead of shutting down completely.
Scientists and engineers keep improving these systems every year — making them faster, safer, and more energy-efficient. The ideas you learn in this chapter are the same building blocks used in real data centers, robots, apps, and websites around the world.
Vocabulary Table
| Term | Definition |
|---|---|
| HTML | HyperText Markup Language — the standard language for creating the structure of web pages |
| CSS | Cascading Style Sheets — a language that controls the visual appearance of HTML elements |
| JavaScript | A programming language that adds interactivity, logic, and dynamic behaviour to web pages |
| DOM | Document Object Model — the browser's tree-like representation of a web page's structure |
| Browser | A software application (Chrome, Firefox, Safari) that retrieves and displays web pages |
| Responsive Design | A design approach that makes web pages adapt to different screen sizes and devices |
Fun Facts
HTML was invented by Tim Berners-Lee in 1991 while working at CERN. He created it to share scientific documents.
CSS was first proposed in 1994 by Håkon Wium Lie. Before CSS, web pages were styled with HTML attributes like <font> and <center>.
JavaScript was created in just 10 days by Brendan Eich in 1995. It is now one of the most popular programming languages in the world.
The first ever website (http://info.cern.ch) is still online. It was made with just HTML — no CSS, no JavaScript.
There are over 1.8 billion websites on the internet today, and every single one of them uses HTML.
Interactive Diagram
Launch the interactive diagram to see this in action.
Open Interactive DiagramThe interactive diagram for this chapter demonstrates Frontend Technologies. It shows HTML for structure, CSS for styling, and JavaScript for interactivity working together on a webpage.
What to explore:
- toggle HTML, CSS, and JS layers on/off; watch the page change with each layer; see how they combine
- frontend development uses three core technologies — HTML for content structure, CSS for visual styling, and JavaScript for interactivity
Knowledge Check
1. Which language defines the structure and content of a web page?
Answer: HTML
2. In the house analogy, what does CSS represent?
Answer: The paint, furniture, and decorations
3. What does DOM stand for?
Answer: Document Object Model