HTML, CSS and JavaScript
A tester says the Suggest button "doesn't work on my phone". Asha could forward that sentence to her assistant and hope. Or she could spend thirty seconds finding out whether the button is missing, badly drawn or broken, and ask for exactly the right fix. Every web page is built from three languages, and knowing which does what is enough to point.
The rule
HTML is what's there, CSS is how it looks, JavaScript is what it does.
One button, three layers:
<button id="suggest" class="primary">Suggest dinners</button>.primary { background: green; color: white; }
@media (max-width: 400px) { .primary { display: none; } }document.querySelector("#suggest").addEventListener("click", getSuggestions);- HTML puts the button on the page and gives it its words, "Suggest dinners".
- CSS decides its colours, and here also contains a rule that hides it on screens narrower than 400 pixels.
- JavaScript decides what happens on a click: run
getSuggestions.
You do not need to write these fluently to build with AI tools. You need to read them well enough to say which layer a problem lives in, because that tells the assistant where to look and what not to touch.
In a real project the three layers are not always in separate files. A React component, for example, mixes HTML-like markup with JavaScript, and its styles may sit right beside it. The jobs stay separate even when the files do not, so the question "is this about content, looks or behaviour?" still tells you which lines to point at.
The shortcut
Missing, looks wrong, or acts wrong? Missing or wrong words → HTML. Wrong colour, size or position → CSS. Nothing happens, or the wrong thing happens → JavaScript. When something is missing only on some screen sizes, suspect a CSS rule first.
Ask for the symptom
Asha asks the tester what they see. "There's no button at all."
Compare that with "fix the Suggest button". The assistant might rewrite the click handler, which was never broken, add a new bug there, and leave the hiding rule exactly where it was.
Drills
Answer fast — trust the rule.
The button's text reads "Sugest dinners". Which layer holds the typo?
Tapping the button does nothing at all. Which layer do you suspect first?
The dinner cards overlap each other on tablets. Which layer?
What does display: none in a CSS rule do to an element?
Remember
- HTML is what's there, CSS is how it looks, JavaScript is what it does.
- Missing or wrong words → HTML; wrong look → CSS; wrong behaviour → JavaScript.
- Trap: forwarding "it's broken" instead of naming the layer and the symptom.