Frontend
Lighter, background-reading module: how the browser renders, DOM/CSS, the JavaScript that matters, and app architecture (SPA/SSR/SSG).
- chapters
- 4
- objectives
- 13
- core
- 5
- est. time
- 1h 28m
- 01 5.1 How the browser works ★ core
The critical rendering path, reflow vs repaint (and why transform/opacity skip both), and why CSS is render-blocking while scripts are parser-blocking.
- 02 5.2 DOM, HTML & CSS
DOM manipulation, display:none vs visibility:hidden, HTML semantics, and CSS fundamentals (box model, flexbox, grid, specificity, positioning).
- 03 5.3 JavaScript that matters for the frontend ★ core
Closures, this-binding (and arrow-function lexical this), prototypes, hoisting, plus the browser event loop and event delegation.
- 04 5.4 Browser networking & app architecture
CORS and same-origin policy, SPA vs MPA vs SSR vs SSG, component architecture + virtual DOM, bundlers, and web-perf/a11y basics.
Section assessment
Harder, multi-concept questions drawn from across the module. Aim for 75%.
- 01medium
Which property pair lets the compositor skip BOTH layout and paint?
- 02medium
`defer` scripts execute after HTML parsing, in document order.
- 03medium
Higher CSS specificity is given to:
- 04medium
An arrow function's `this` is:
- 05medium
Attaching ONE listener to a parent instead of many to children is:
- 06medium
A closure lets an inner function access variables from its outer function after that outer function has returned.
- 07medium
Needs fast first paint, SEO, and per-request personalization. Best rendering approach?
- 08easy
Changing an element's geometry (size/position) triggers a:
- 09easy
display:none vs visibility:hidden — which still occupies layout space?
- 10easy
CORS exists to: