Frontend Web Developer roadmap

Build the pages and interfaces people use in the browser, with HTML, CSS, JavaScript and React.

What employers usually expect

Skill	Level	How to prove it
HTML and accessibility	Must have	Write semantic markup, label forms properly and make pages usable with a keyboard.
CSS layout and responsive design	Must have	Use Flexbox and Grid, and show your pages working on phone and desktop.
JavaScript fundamentals	Must have	Understand scope, closures, async code, fetch and the DOM, not just copy snippets.
React (or a similar framework)	Must have	Build an app with components, state, hooks and routing.
Git and GitHub	Must have	Commit often, use branches, and keep a tidy public repository.
Calling APIs	Must have	Fetch data, show loading and error states, and handle empty results.
Browser dev tools and performance	Strong plus	Debug with the dev tools and improve a page's load time.
TypeScript	Strong plus	Add types to one of your React projects.

Where college often leaves a gap

Web subjects can stop at static pages, tables for layout or older libraries, with little on responsive design or modern JavaScript.
Version control, deployment and working with APIs are often not part of the syllabus.
Students rarely get feedback on accessibility or performance, which employers increasingly check.

Courses differ between colleges. Use this as a checklist against your own syllabus, not as a judgement of it.

12-week plan

Assumes about 10 hours a week. Move the checkpoints if you have exams.

Weeks 1 to 4

HTML, CSS and JavaScript fundamentals

Build three small pages by hand: a profile, a landing page and a form.
Learn Flexbox and Grid, then make each page work on a phone.
Study JavaScript basics: variables, functions, arrays, objects, scope and the DOM.

Done when: You can build a responsive page from a design without copying a template.

Weeks 5 to 8

Async JavaScript, APIs, Git and React basics

Learn promises, async/await and fetch, and build an app that calls a public API.
Use Git and GitHub for every project from now on.
Learn React: components, props, state, useState and useEffect.

Done when: You can fetch data from an API and display it in a React component, with loading and error states.

Weeks 9 to 12

Projects, quality and resume

Finish three projects and put them online on a free host.
Run Lighthouse on each, fix the biggest accessibility and performance issues, and note the scores.
Add live links and short descriptions to your resume and GitHub profile.

Done when: Three live links on your resume that open quickly and work on a phone.

Three projects that prove it

1. Responsive landing page

Design and build a landing page for an invented product or a real local business, using only your own HTML and CSS.

Show on your resume: Screenshots on phone and desktop, and the live link.

2. API-driven app

A weather, movie or job-search app using a free public API, with search, loading and error states.

Show on your resume: What the API returns, how you handle failure, and the live link.

3. React app with routing and state

An expense tracker or study planner with several pages, saved data and a clean layout.

Show on your resume: Component structure, one tricky bug you fixed, and Lighthouse scores.

Change the dataset, the idea or the features so the project is yours. Interviewers can tell a copied tutorial in two questions.

What interviewers often ask

JavaScript: closures, the event loop, var versus let and const, promises versus async/await, == versus ===.
CSS: the box model, Flexbox versus Grid, specificity, and how you make a layout responsive.
React: props versus state, how useEffect works, why lists need keys.
Accessibility: what makes a page usable for a screen-reader user.
A live task: build a small component, such as a counter or a filterable list.

Common mistakes

Cloning a template with no changes and presenting it as your own design.
Never testing on a phone.
Projects that exist only on your laptop, with no live link.

Good places to start learning

MDN Web Docs · javascript.info · freeCodeCamp · The official React documentation (react.dev). Check that each is still free and current before you begin.

Other roadmaps

Data Analyst · Backend Developer · Software Tester / QA Engineer · DevOps Engineer · Machine Learning Engineer

Also see how to read a job description and the interview prep kit.