Front-end Code
The code that runs in the browser: HTML, CSS, JavaScript, React and the tools around them.
Automated testing
Automated tests are code that checks other code: unit tests check small functions, and end-to-end tests drive a real browser through whole user flows.
Bundler
A bundler combines a project's many source files and dependencies into optimised files the browser can load efficiently; Vite, webpack and Turbopack are common ones.
Code review
Code review is having someone other than the author read a change before it merges, to catch bugs, security issues and unclear code.
Code splitting
Code splitting breaks a site's JavaScript into smaller chunks so each page downloads only the code it needs, loading the rest on demand.
Component
A component is a self-contained, reusable piece of interface, like a button, card or navigation bar, with its own structure, style and behaviour.
Container queries
Container queries style an element based on the size of its own container rather than the whole screen, so components adapt wherever they are placed.
CSS Grid
CSS Grid is a two-dimensional layout system that places elements into rows and columns at once, making complex page layouts possible with a few lines of CSS.
CSS variables
CSS variables store reusable values, such as colours, spacing or fonts, in one place so a whole site can be themed or changed consistently.
DOM
The DOM is the browser's live, tree-shaped model of a web page; JavaScript reads and changes the DOM to update what visitors see.
Flexbox
Flexbox is a one-dimensional CSS layout system for arranging items in a row or column, with easy alignment, spacing and wrapping.
Git
Git is a version control system that records every change to a project's code, so teams can work in parallel, review changes and roll back mistakes.
GitHub
GitHub is a platform that hosts Git repositories online and adds collaboration tools like pull requests, issues and automated workflows.
Hydration
Hydration is the step where JavaScript attaches to server-rendered HTML in the browser, turning a static-looking page into an interactive one.
Incremental static regeneration
Incremental static regeneration serves pre-built static pages but rebuilds individual pages in the background on a schedule or on demand, so content stays fresh without full redeploys.
Islands architecture
Islands architecture renders a page as static HTML and hydrates only the few interactive parts, the islands, instead of the whole page.
JSX
JSX is a syntax that lets developers write HTML-like markup inside JavaScript, used by React to describe what a component renders.
Lazy loading
Lazy loading delays downloading images, video, scripts or components until they are about to be needed, usually when they scroll into view.
Linting
Linting is automatically checking code for errors, risky patterns and style problems before it runs, using a tool like ESLint.
Media query
A media query is a CSS rule that applies styles only when conditions are met, such as a screen width, dark mode preference or reduced-motion setting.
npm
npm is the package manager and registry for JavaScript, where developers install shared libraries (packages) into their projects.
Props and state
In component frameworks, props are the inputs a component receives from its parent, and state is the data a component manages itself that changes over time.
Pull request
A pull request proposes merging one branch of code into another, where teammates review the changes and automated checks run before anything goes live.
React
React is a JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
React Hooks
Hooks are React functions, like useState and useEffect, that let components hold state and run side effects such as fetching data or subscribing to events.
Sass
Sass is a CSS preprocessor that adds variables, nesting and functions, compiling down to plain CSS; many of its features now exist in CSS itself.
Semantic HTML
Semantic HTML uses elements for their meaning, such as header, nav, main, article, button and h1 to h6, instead of generic divs, so machines understand the page.
Server-side rendering
Server-side rendering builds a page's HTML on the server for each request, so the visitor and search engines receive readable content immediately.
Single-page application
A single-page application loads one page and then rewrites it with JavaScript as the visitor navigates, instead of loading a new page from the server each time.
Static site generation
Static site generation builds every page's HTML ahead of time, at deploy, so pages are served instantly from a CDN without any work per request.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework where small single-purpose classes like p-4 and text-lg are composed directly in HTML to style components.
TypeScript
TypeScript is JavaScript with types: it checks code before it runs, catching mistakes like passing the wrong data to a function, then compiles to plain JavaScript.