Fundamentals of Frontend Technology

Why this matters

Three languages build every page you have ever opened, and they do not overlap. Being able to say which one is responsible for a given thing is the difference between fixing a layout problem in five minutes and changing random code until it looks right.

The idea

Their roles are independent, and a page uses all three together.

Semantic HTML means choosing tags for what a part means, not how it looks: <header> at the top, <nav> for navigation, <main> for the body, <footer> at the bottom. It buys two things. Accessibility: a screen reader can announce the structure, so someone who cannot see the page can still navigate it. And SEO: search engines read the page more correctly and rank it more appropriately.

Responsive design means one page whose layout adapts to the screen it is on, phone, tablet or desktop, rather than a separate mobile site. Since most traffic now arrives from phones, mobile-first, designing for the small screen first and expanding upward, has become the normal starting point.

A framework supplies common functions and components ready-made, so nobody writes everything from scratch:

Picture it

flowchart TD
  H["HTML: heading, list of books, search input"] --> P[The page]
  C["CSS: colours, spacing, columns, fonts"] --> P
  J["JavaScript: filter the list as the user types"] --> P
  P --> R{Screen size?}
  R -- phone --> M[One column, mobile-first]
  R -- desktop --> W[Multi-column, same HTML]

Worked example

A library page lists books, looks tidy, and filters as you type. Which language does what?

HTML provides the parts that exist: a heading, a search input, and the list with an entry per book. Turn off CSS and JavaScript entirely and this is still there, plain but complete and readable. That is the test for whether something belongs in HTML.

CSS decides how it looks: the list in columns on a wide screen and one column on a phone, the spacing, the fonts. None of it changes what the page contains, which is why a CSS change can never break the meaning of the page.

JavaScript does the one thing neither of the others can: it reacts. As you type, it hides entries that do not match. It is changing what is shown, not what exists.

If the list were built only by JavaScript, a screen reader or a search engine arriving before the script runs would find an empty page. That is the practical reason structure belongs in HTML and behaviour on top of it.

Your turn

Try the practice questions for this lesson. Sort statements about the three languages into true and false, match each role to its technology, and identify what semantic HTML is for.

Take it further

A student club wants a page listing its events, styled in the club's colours, with a button showing how many people have signed up.

1. Observe first. Open a page you use often and note two things that change when you click or type. Then say which of HTML, CSS or JavaScript handles the event list, the colours and layout, and the live sign-up counter.
2. Make it reach everyone. Name one change that would make the page easier to read on a phone, and one semantic-HTML choice that would help a screen reader.
3. Decide. Recommend how to build it and give two reasons for keeping the three roles separate.

Use the test from the worked example: switch CSS and JavaScript off, and whatever still needs to be there belongs in HTML.

Recap

• HTML is structure, CSS is appearance, JavaScript is behaviour, and the roles do not overlap.
• Semantic HTML improves accessibility and SEO by saying what each part means.
• Responsive design adapts one page to every screen; mobile-first starts from the smallest.
• A framework such as React, Vue or Next.js supplies ready-made parts.