Skip to content
BoKSA

Front-End Fundamentals

Front-End Fundamentals

Use this page to revise the core vocabulary of front-end development: HTML, CSS, and JavaScript first, then the component-based frameworks built on top of them.

Semantic HTML

Semantic tags (nav, main, article, section, header, footer) describe the meaning of a piece of content, not just its appearance — unlike a generic div. This matters for accessibility (screen readers rely on it) and for search engines, and it's the reason "semantic HTML vs. generic divs" comes up as a distinct topic rather than just a style preference.

CSS layout

  • The box model (content, padding, border, margin) determines the size and spacing of every element.
  • Flexbox lays out items along a single axis (row or column); grid lays out items in two dimensions (rows and columns at once).
  • Media queries and breakpoints apply different CSS depending on screen size, which is how a layout becomes responsive.

Modern JavaScript

  • let/const vs. var — let/const are block-scoped and prevent the accidental redeclaration bugs var allows.
  • Arrow functions and template literals are more concise syntax for functions and string interpolation.
  • Destructuring pulls values out of arrays/objects into named variables in one step.
  • DOM selection and event handling — finding elements in the page and reacting to what a user does (click, input, submit).

Talking to an API

  • fetch and promises (.then, async/await) are how JavaScript makes an HTTP request and works with the result once it arrives, asynchronously.
  • JSON is the data format almost every API uses; JSON.stringify/JSON.parse convert between a JavaScript object and its JSON text representation.
  • HTTP status codes you should recognise on sight: 200 (OK), 301 (redirect), 400 (bad request), 401 (unauthorized), 404 (not found), 500 (server error).
  • Basic error handling — try/catch and checking response.ok or the status code before assuming a request succeeded.

Client-side storage

localStorage persists data with no expiry until explicitly cleared; sessionStorage clears when the tab closes; cookies are sent to the server with every request and can carry an expiry date — which is also why they're the traditional home for session identifiers.

Component-based frameworks

  • A component-based architecture builds a UI as a tree of components, each responsible for one piece of the page.
  • A single-page application (SPA) loads one HTML page and updates the DOM in place, instead of requesting a new page per navigation.
  • Props pass data down from a parent component to a child; state is data a component manages itself. Data flows one way: down through props, with events flowing back up.
  • Routing (e.g. React Router, Vue Router) maps a URL to the component that should be shown, within an SPA.

Starting Points

  • Freeman, E., & Robson, E. (2012). Head First HTML and CSS (2nd ed.). O'Reilly.
  • Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly.
  • Banks, A., & Porcello, E. (2017). Learning React. O'Reilly.
  • React documentation — "Quick Start", "Describing the UI", "Adding Interactivity" (react.dev); Vue.js documentation — "Essentials", "Components Basics" (vuejs.org/guide).
  • Core web technologies
  • Component architecture & framework basics

Key Points

  • You can explain why semantic HTML is preferred over generic divs.
  • You can explain the CSS box model and the difference between flexbox and grid.
  • You can explain what a media query/breakpoint does.
  • You can explain the difference between let/const and var, and what destructuring does.
  • You can explain how fetch and promises (.then, async/await) work together, and what JSON is used for.
  • You can recognise and explain common HTTP status codes (200, 301, 400, 401, 404, 500).
  • You can explain the difference between localStorage, sessionStorage, and cookies.
  • You can explain what a component-based architecture and an SPA are.
  • You can explain the difference between props and state, and how routing works in a component framework.