Frontend
Engineer.

F1 · Beginner · 45 min

The frontend starts with structure. Learn semantic HTML — the right element for the right job — because meaningful markup is what makes a page accessible, SEO-friendly, and easy to style. Divs everywhere is a smell; landmarks and headings are a map.

• Semantic elements
• Document structure
• Forms & inputs
• Metadata & SEO basics

Build itRebuild a blog article page using only semantic tags — header, nav, main, article, aside, footer — no generic divs. Does the outline read clearly?

✓ CheckpointExplain what a screen reader gets from a semantic element that it does not get from a styled div.

F2 · Beginner · 60 min

CSS is deceptively deep. Master the box model, the cascade and specificity, selectors, units (px/rem/em/%), and custom properties. Most "CSS is hard" pain is really specificity and the box model biting you — learn them once and the fog lifts.

• Box model
• Cascade & specificity
• Selectors
• Units & custom properties

Build itStyle a card component. Deliberately create a specificity conflict, then resolve it — and swap a hard-coded color for a CSS custom property.

✓ CheckpointExplain a specificity conflict you have actually hit, and why reaching for !important made the next one worse.

F3 · Beginner · 60 min

Layout is where CSS earns its keep. Flexbox handles one dimension (rows or columns); Grid handles two. Learn when to reach for each, plus responsive design with media queries and fluid units. This is the toolkit behind every modern page.

• Flexbox (1D)
• CSS Grid (2D)
• Responsive & media queries
• Fluid layouts

Build itBuild a responsive dashboard: a Grid page shell with Flexbox toolbars inside, collapsing to one column on mobile. Which layouts are Grid, which Flex?

✓ CheckpointSay when grid beats flexbox and when it is the wrong reach, in terms of one dimension versus two.

F4 · Intermediate · 90 min

JavaScript runs the web. Learn the core: types and coercion, functions and closures, the event loop and async (promises, async/await), array methods, and the ES modules that structure real apps. This is the language every framework is built on.

• Types & closures
• Event loop & async/await
• Array & object methods
• ES modules

Build itWrite a debounce function from scratch, then use it on a search input. Explain why the closure captures the timer across calls.

✓ CheckpointExplain what the event loop does with an await, and why a long synchronous loop freezes the page while a slow fetch does not.

F5 · Intermediate · 55 min

The DOM is the live tree the browser builds from your HTML, and JavaScript changes the page by mutating it. Learn selection, creation, event listeners, bubbling and delegation, and why touching the DOM in a loop is slow. Frameworks abstract this — but it is still underneath.

• DOM tree & selection
• Events & delegation
• Bubbling / capturing
• Reflow & repaint cost

Build itBuild a to-do list with vanilla DOM APIs. Use one delegated listener on the parent instead of one per item — why is that faster?

✓ CheckpointExplain why event delegation exists, and what it saves you on a list that grows to a thousand rows.

F6 · Intermediate · 55 min

A UI only works if everyone can use it. Learn keyboard navigation, focus management, ARIA (and when NOT to use it), color contrast, and screen-reader basics. Accessibility is not a checkbox at the end — it is a design constraint from the first line of markup.

• Keyboard & focus
• ARIA roles (sparingly)
• Contrast & color
• Screen-reader testing

Build itMake a custom dropdown fully keyboard-operable and screen-reader announced. What ARIA does it need — and what does semantic HTML give free?

✓ CheckpointNavigate a page you built using only the keyboard. If you get stuck, you found the bug the mouse was hiding.

T1 · Intermediate · 60 min

TypeScript adds a type system on top of JavaScript, catching a whole class of bugs before runtime and making large codebases navigable. Learn types vs interfaces, generics, unions and narrowing, and how types document intent. It is the default for serious frontend today.

• Types & interfaces
• Generics
• Unions & narrowing
• Typing props & APIs

Build itType a fetch wrapper that returns a typed result. Use a generic so the caller gets the right shape without casting.

✓ CheckpointExplain what narrowing is doing when TypeScript stops complaining after an if-check.

T2 · Intermediate · 75 min

React is the dominant way to build UIs: describe what the UI should look like for a given state, and React reconciles the DOM. Learn components, JSX, props, state, the render cycle, and hooks (useState/useEffect) plus their rules. This is the heart of modern frontend.

• Components & JSX
• Props & state
• Render cycle & reconciliation
• Hooks & their rules

Build itBuild a counter with useState and a data-loader with useEffect. Explain exactly what triggers a re-render — and what does not.

✓ CheckpointExplain why a component re-renders when its parent does, and what you would check before reaching for memoisation.

T3 · Advanced · 60 min

As apps grow, state gets tangled. Learn the ladder: local state, lifting state up, context for cross-cutting values, and when a store (Redux, Zustand, signals) earns its place. The skill is keeping state as local as possible and reaching for globals last.

• Local vs global state
• Context & prop drilling
• Stores (Redux/Zustand)
• Derived state

Build itA theme toggle needs to reach deep components. Solve it with context. When would you upgrade to a store instead?

✓ CheckpointPoint at a piece of state and justify why it is local rather than global. “It was easier” does not count.

T4 · Advanced · 60 min

UIs live on server data. Learn the request lifecycle in the browser (fetch, loading/error states, race conditions), then the modern answer: a data layer (React Query, SWR) that caches, dedupes, and revalidates. Server state is not UI state — treat it differently.

• fetch & async UI states
• Race conditions & abort
• Caching & revalidation
• Optimistic updates

Build itFetch a list, then let the user favorite an item with an optimistic update that rolls back on error. How do you avoid a stale response overwriting a newer one?

✓ CheckpointDescribe the race condition where an older request resolves after a newer one, and how abort fixes it.

T5 · Intermediate · 55 min

Two things every app needs. Client-side routing maps URLs to views without full reloads (and must handle deep links and history). Forms are deceptively hard: controlled inputs, validation, and accessible error handling. Get these right and the app feels solid.

• Client-side routing
• Nested routes & params
• Controlled inputs
• Validation & errors

Build itBuild a multi-step form with URL-driven steps, so refresh and back-button keep the user in place. Where does the form state live?

✓ CheckpointExplain the difference between a controlled and an uncontrolled input, and which one makes validation straightforward.

T6 · Advanced · 55 min

Untested UIs break silently. Learn the frontend test pyramid: unit tests for logic, component tests (Testing Library) that assert on what the user sees, and a few end-to-end flows (Playwright). Test behavior, not implementation — so tests survive refactors.

• Unit vs component vs e2e
• Testing Library
• Mocking network
• Testing behavior not internals

Build itWrite a component test for a login form: assert the error shows on bad input, without asserting on internal state. Why is that more robust?

✓ CheckpointExplain why testing what the user sees survives a refactor that testing internals does not.

P1 · Advanced · 55 min

Modern frontend ships through a build step. Learn what a bundler (Vite, esbuild, webpack) actually does — module resolution, transpiling, tree-shaking, code-splitting — and why dev servers use native ESM for speed. The build is where your source becomes something a browser can load fast.

• Bundling & module graph
• Tree-shaking
• Code-splitting
• Dev server & HMR

Build itA route is loaded by 5% of users. Code-split it so it is not in the main bundle. How do you measure the bytes you saved?

✓ CheckpointExplain what tree-shaking needs from your imports to work, and name an import style that silently defeats it.

P2 · Advanced · 65 min

Where does the HTML come from? Client-side rendering (ship JS, build in the browser), server-side rendering (HTML per request), static generation (HTML at build), and hydration that wires them up. Each trades off speed, SEO, and freshness — the defining architecture choice of a modern app.

• CSR vs SSR vs SSG
• Hydration
• Streaming & RSC
• SEO & first paint tradeoffs

Build itA marketing page and a logged-in dashboard have opposite needs. Pick a rendering strategy for each and justify it by SEO and freshness.

✓ CheckpointExplain what hydration is actually doing, and why a slow hydrate can feel worse than no SSR at all.

P3 · Advanced · 50 min

Progressive Web Apps make a site behave like a native app: installable, offline-capable, and resilient on flaky networks. Learn service workers (the programmable network proxy), caching strategies, and the manifest. Offline-first is a mindset, not just a feature.

• Service workers
• Caching strategies
• Web app manifest
• Offline-first UX

Build itCache an app shell so it loads offline, but keep API data fresh when online. Which caching strategy for each — cache-first or network-first?

✓ CheckpointExplain what a service worker lets you serve when the network is gone, and what it cannot help with.

P4 · Advanced · 65 min

Speed is a feature. Learn the Core Web Vitals (LCP, INP, CLS), the critical rendering path, lazy-loading, image optimization, and how to profile with the browser devtools. Perception matters as much as milliseconds — measure real user experience, not just lab scores.

• Core Web Vitals (LCP/INP/CLS)
• Critical rendering path
• Lazy-loading & images
• Profiling & measuring

Build itA page has a slow LCP and a layout shift. Diagnose both in devtools and fix them. Which metric does each fix move?

✓ CheckpointName which Core Web Vital your slowest page fails and what specifically causes it — LCP, INP and CLS have different culprits.

P5 · Advanced · 50 min

The browser is a hostile environment. Learn XSS (and why escaping and CSP matter), CSRF, secure token storage, CORS, and safe handling of user input. Frontend security is mostly about never trusting data — including data from your own API.

• XSS & escaping / CSP
• CSRF
• Token storage
• CORS & same-origin

Build itYou must render user-authored HTML. Show how you prevent XSS — and why innerHTML with raw input is a trap.

✓ CheckpointExplain why escaping output defends against XSS while validating input alone does not.

P6 · Advanced · 50 min

Shipping frontend well: static hosting and CDNs, cache-busting with content hashes, preview deploys per pull request, and a CI pipeline that lints, tests, and builds before anything goes live. The goal is boring, reversible releases — deploy on every merge without fear.

• CDN & static hosting
• Cache-busting
• Preview deploys
• CI: lint / test / build

Build itSet up a pipeline that gives every PR a preview URL and blocks merge on failing tests. How do content hashes let you cache assets forever?

✓ CheckpointExplain what cache-busting solves, and what breaks when a deploy ships an HTML file that references a purged asset.