Frontend Fundamentals
The web browser knows how to render exactly three languages: HTML for structure, CSS for presentation, and JavaScript for behavior. Together they form the frontend stack.
HTML: Structure
HTML is a tree of nested elements wrapped in tags. A page has a <head> (metadata, title, links to stylesheets) and a <body> (the visible content). Common building blocks include <h1> through <h6> for headings, <p> for paragraphs, <ul> and <li> for lists, <a> for links, and <img> for images. Semantic tags like <header>, <nav>, <main>, and <footer> describe the role of a section to browsers, search engines, and screen readers.
CSS: The Box Model
Every element on the page is a box. The CSS box model has four nested layers:
- Content — the text or image itself
- Padding — space inside the border
- Border — the visible edge
- Margin — space outside the border, separating this box from its neighbors
CSS rules target elements with selectors (p, .class, #id) and apply declarations (color: red; font-size: 16px;). Modern layout uses flexbox for one-dimensional rows or columns, and grid for two-dimensional layouts.
JavaScript and the DOM
The browser parses HTML into the DOM (Document Object Model), a live tree of objects that JavaScript can read and modify. document.querySelector(".btn") finds an element; element.textContent = "Hello" changes its text; element.addEventListener("click", handler) runs code when the user clicks. Most modern frontend code is JavaScript that reacts to events and updates the DOM in response.
Frameworks
Libraries like React, Vue, and Svelte abstract DOM updates so you describe what the UI should look like for a given state, and the framework figures out how to update the DOM efficiently. Underneath, they all still produce HTML, CSS, and JavaScript.
Try It Yourself
- Style the product list with CSS so each item has padding and a border
- Add a button that, when clicked, hides the list (use
style.display = "none") - Convert the list into a CSS grid with two columns