HTML, CSS and JavaScript
Frontend development is building the part of a website that runs in the visitor's browser. Every frontend, from a one-page portfolio to a huge web app, rests on the same three languages. Knowing which one owns which job saves you from fighting the wrong tool.
The rule
HTML is the noun, CSS the adjective, JavaScript the verb.
- HTML says what things are: a heading, a list, a button, an image. It gives the page structure and meaning.
- CSS (Cascading Style Sheets) says what things look like: colours, fonts, spacing, layout.
- JavaScript says what things do: respond to a click, fetch new data, update the page without reloading.
Here is one button seen through all three layers:
<button id="like">Like</button>#like { background: crimson; color: white; }document.querySelector("#like").addEventListener("click", () => {
alert("Thanks!");
});The HTML alone gives a working, plain button. CSS paints it. JavaScript makes clicking it do something. Remove the CSS and JavaScript and the button still exists and still means "button". Remove the HTML and the other two have nothing to act on.
That is why HTML comes first. It is the foundation, and a page with good HTML stays usable even if styles fail to load or scripts are blocked.
The shortcut
For any change you want to make, ask: is it about meaning, looks or action? Meaning goes in HTML, looks in CSS, action in JavaScript.
"Add a contact email to the footer"
New content that did not exist before. That is meaning, so it is HTML.
A common mistake is doing a layer's job in the wrong place, such as using JavaScript to insert text that should simply be written in the HTML, or picking HTML elements for their default look. The meaning / looks / action test catches both.
One more habit worth building early: when you look at any website, try to picture it with the CSS and JavaScript stripped away. What is left is a document of headings, paragraphs, lists, links and forms. If that plain document makes sense on its own, the HTML was written well, and the other two layers have a solid base to build on.
Drills
Answer fast — trust the rule.
Which language decides that a heading should be dark blue?
You need a new "Opening hours" section on a page. Where does that content go?
A menu should open when the user taps an icon. Which layer makes it open?
A site's stylesheet and scripts fail to load. What can the visitor still use?
Remember
- HTML = what things are, CSS = what they look like, JavaScript = what they do.
- Shortcut: sort every change into meaning, looks or action.
- Trap: using one layer to do another's job, such as choosing HTML tags for their looks.