Frontend Developer

Frontend work is the part of an application people actually touch, so it gets judged on how it looks, how fast it feels and whether it works for everyone. This route starts with HTML and CSS, moves through JavaScript and TypeScript, and reaches React and Next.js last, because a framework is far easier to learn when the language underneath it is not also new. The closing stages cover the network and security facts frontend developers are expected to know, plus the interview topics that come with the role.

6 stages · 31 steps

1. 1

   The page itself

   Write a page by hand — structure in HTML, layout and styling in CSS — and know what the browser is doing when it loads one.

   • Language guideHTML & CSSStart here: everything later in this roadmap ends up as HTML the browser renders.
   • PlaygroundHTML & CSS playgroundEdit markup and styles side by side and watch the result change, before any build tooling exists.
   • Concept guideHTTP and HTTPSA page arrives over a request and a response; knowing their shape makes the network tab readable.
2. 2

   JavaScript, properly

   Read and write plain JavaScript — values, functions, arrays, objects — without reaching for a framework to do the thinking.

   • Language guideJavaScriptThe language every browser runs, and the one every frontend framework is written in.
   • LessonJavaScript Variables and Data TypesWhere const, let and the primitive types get settled, so later confusion has fewer places to hide.
   • LessonJavaScript FunctionsComponents, event handlers and callbacks are all functions first.
   • LessonJavaScript ArraysRendering a list in any framework is a transformation over an array.
   • LessonJavaScript ObjectsProps, state and JSON responses are all objects with named fields.
   • ExercisesJavaScript exercisesRead-then-run is not enough; the path adds one new idea per exercise and checks your own code.
   • PlaygroundJavaScript playgroundKeep this open while you read: guessing what an expression returns and then checking is the fastest way to learn.
3. 3

   TypeScript before a framework

   Add types to JavaScript you already understand, and read the type errors a React codebase will hand you.

   • LessonTypeScript: Checked, Then RunFirst the mental model: the checker runs before your code does, and then disappears.
   • LessonBasic TypesThe annotations you will write most often, and the inference that means you often need not write them.
   • LessonInterfaces and Object TypesThis is how component props and API payloads get described.
   • LessonUnion and Literal TypesA loading / loaded / failed state is a union, and modelling it as one removes whole bugs.
   • LessonType Narrowing and GuardsMost real TypeScript errors are about a value that might be undefined; narrowing is the fix.
   • ExercisesTypeScript exercisesType errors stop being intimidating once you have deliberately caused a few of them.
   • ReferenceTypeScript cheat sheetKeep it beside your editor once you are writing types daily.
4. 4

   Talking to a server

   Fetch and send data, understand where a session lives, and recognise the mistakes that turn a form into a vulnerability.

   • Concept guideREST APIsAlmost every frontend you write will consume one of these.
   • Concept guideJWT and OAuthComes after REST: sign-in is the first API call most apps make.
   • Developer toolJSON Formatter & ValidatorFor the moment a response does not look like the docs said it would.
   • Concept guideWebSocketsFor anything live — chat, presence, a moving dashboard — request and response is the wrong shape.
   • Concept guideCommon Web VulnerabilitiesCross-site scripting is a frontend problem, and interviewers ask about it.
5. 5

   Framework, tooling and shipping

   Understand what React and Next.js add on top of the language, and work the way a team does: branches, reviews, and a deploy you did not do by hand.

   • Concept guideReact and Next.jsRead this once the language is comfortable, then go to the frameworks' own tutorials.
   • Concept guideGit and GitHubBranching and pull requests are how frontend work actually gets reviewed.
   • ReferenceGit commands referenceThe commands you will look up repeatedly, with the dangerous ones flagged.
   • Concept guidePerformance and ScalabilityBundle size and render cost are the frontend end of the same measure-first discipline.
6. 6

   Interview preparation

   Answer frontend questions out loud, and write small amounts of correct code under observation.

   • Interview prepFrontend interview questionsStart with the round most specific to the role you are applying for.
   • Interview prepCoding & DSA interview questionsFrontend interviews still include an algorithm round more often than not.
   • Practice problemValid PalindromeString-cleaning plus two pointers: a fair sample of the easy end.
   • Practice problemTwo Number SumThe problem that teaches you to reach for a hash map instead of a second loop.
   • Interview prepBehavioral interview questionsPrepare these from your own work; they decide more outcomes than people expect.

All roadmaps · Projects · Interview prep