JavaScript and the Frontend
A visitor taps "Vegetarian only" and the non-vegetarian dishes vanish. Which language did that? The button is HTML, the vanishing is CSS, and noticing the tap is JavaScript. Frontend development is the craft of making those three work together in the browser.
The rule
HTML is the noun, CSS the adjective, JavaScript the verb.
- HTML names the things on the page: a heading, a button, a dish.
- CSS describes them: green, large, hidden, in two columns.
- JavaScript makes things happen: it reacts to clicks, key presses, timers and data arriving from a server, and changes the page in response.
The cleanest way for JavaScript to change how something looks is to switch a class and let CSS own the look:
.dish.is-hidden {
display: none;
}button.addEventListener("click", () => {
omelette.classList.toggle("is-hidden");
});JavaScript decides when; CSS decides what it looks like. Change the design later and the script does not need to be touched.
Frontend development is all the work that runs on the visitor's device: writing these three languages, making pages usable with a keyboard and a screen reader, keeping them fast, and making them fit any screen. Its partner, backend development, runs on servers: storing orders, checking passwords, sending data to the page.
The shortcut
Split every feature into structure, look, behaviour and hand each part to its own language.
Structure (HTML)
Add a
buttonfor the filter, and mark each dish's type, for example with a class such asvegornon-veg.
The trap is letting JavaScript write styles directly, one property at a time. It works, but the design is now scattered through scripts, and the next person has to search two languages to change a colour.
Drills
Answer fast — trust the rule.
Which layer notices that a visitor pressed the "Order" button?
For a dark mode switch, which split keeps each layer to its own job?
Where does frontend code run?
Which job belongs to backend rather than frontend development?
Remember
- HTML is the noun, CSS the adjective, JavaScript the verb.
- Split each feature into structure, look and behaviour.
- Let JavaScript switch classes; let CSS own every look.