Frontend Basics
The frontend is everything the user sees and touches — the buttons, text, and screens they interact with. It runs right there in the browser (or inside the app), on the user’s own device.
Three Pieces Work Together
Almost every web frontend is built from the same three languages, each with its own job.
- HTML — the structure and content: the headings, paragraphs, images, and buttons themselves.
- CSS — the layout and style: colours, spacing, fonts, and where things sit on the page.
- JavaScript — the behaviour and interactivity: what happens when you click, type, or scroll.
Show, Capture, Send
The frontend renders the data it gets from the backend, captures what the user types or clicks, and sends requests back to fetch or save data.
Components & State
Modern interfaces are assembled from reusable components — a button, a card, a search box — each holding its own state, the current data shown on screen.
Good Enough to Ship
You can get surprisingly far with plain HTML, CSS, and JavaScript, and a coding agent can scaffold most of it for you. Knowing the three pieces lets you review what it produces and fix what is off.
Build It
How to implement: open any web page, open the browser dev tools, and find the HTML for one element and the CSS rule that styles it.
- Weekly AI Tasks tracker — the week view, task cards, and filters are all frontend components holding UI state.
- Personal brand site — it is almost entirely frontend; clean, semantic HTML plus CSS is the whole craft here.
What you learned
The frontend is HTML, CSS, and JavaScript running in the browser. It shows data, captures input, and sends requests — but the backend holds the source of truth. Modern UIs are components with state.