contentintech
Learn
RoadmapsGet HiredJobsCheatsheets
Sign inSign up
1

Web Foundations

4 topics · 3–4 weeks

Structure and style static pages with confidence.

HTML semantics→

Elements, forms, accessibility landmarks.

CSS layout←

Box model, flexbox, grid, responsive design.

Modern CSS

Custom properties, container queries, clamp().

Dev tools

Inspect, debug, and profile in the browser.

2

JavaScript Deep Dive

5 topics · 4–6 weeks

Master the language that powers all interactivity.

Core JS→

Types, scope, closures, prototypes.

ES6+ features

Destructuring, modules, spread, optional chaining.

Async JS

Promises, async/await, fetch, event loop.

DOM & events

Manipulate the page, delegate events.

TypeScript→

Type safety at scale.

3

React

5 topics · 5–6 weeks

Build component-driven UIs with state.

Components & JSX→
Hooks←

useState, useEffect, custom hooks.

State management

Context, Zustand, or Redux Toolkit.

Data fetching

TanStack Query, server state vs UI state.

Routing

React Router or a meta-framework.

4

Tooling & Meta-Frameworks

4 topics · 3–4 weeks

Ship real apps with production tooling.

Vite / bundlers

Module bundling, HMR, code splitting.

Next.js←

SSR, routing, the modern React standard.

Tailwind CSS

Utility-first styling.

npm & package mgmt

Dependencies, scripts, monorepos.

5

Quality

4 topics · 3 weeks

Make it fast, accessible, and tested.

Testing→

Vitest, Testing Library, Playwright.

Performance

Core Web Vitals, lazy loading, memoization.

Accessibility

ARIA, keyboard nav, WCAG basics.

SEO fundamentalsOptional
6

Job Ready

4 topics · 2–4 weeks

Portfolio, deployment, and interview prep.

Deployment→

Vercel, Netlify, CI/CD.

Git workflows←
Portfolio projects

2–3 polished apps beat 10 tutorials.

System design (frontend)←
Roadmaps/Career
Beginner

Frontend Developer

The frontend path takes you from the three core web languages through a modern component framework, tooling, and the performance and accessibility skills that separate juniors from hireable engineers.

4–6 months · 6 stages · 26 topics

Download PDF

Stages

Click a topic to open its notes. Drag to pan, scroll to zoom; dashed topics are optional.

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.