Roadmaps / FREE RESOURCE

Frontend developer roadmap 2026

A 12-week, project-first learning plan for students building their first accessible web portfolio.

2026 edition · By EgoTECH · No login required

← All roadmaps

Suggested pace, not a deadline: allow roughly 5–7 hours per week and repeat difficult milestones. Read, build, review, then move on.

Your milestone progress0 / 6

Saved in this browser when storage is available.

1

Weeks 1–2 · HTML and the browser

Understand URLs, requests, semantic HTML, forms, labels and browser developer tools. A page is a document before it is an application.

Build: Build a campus club page with headings, an event list and a labeled RSVP form.

Review: Navigate every control with a keyboard; verify that headings describe the page structure.

I completed the task and can explain my work.

2

Weeks 3–4 · Responsive CSS

Learn the box model, flexbox, grid and responsive breakpoints. Use Bootstrap utilities only after understanding what they change.

Build: Make your club page work at 360px and 1440px. Add empty and long-text states.

Review: No horizontal scrolling; readable text at 200% zoom; visible keyboard focus.

I completed the task and can explain my work.

3

Weeks 5–6 · JavaScript fundamentals

Practice arrays, objects, functions, events and DOM updates. Keep application data separate from rendered elements.

Build: Add event search and category filters. Display a useful no-results message.

Review: Try empty input, mixed case, repeated clicks and strings containing angle brackets.

I completed the task and can explain my work.

4

Weeks 7–8 · APIs and failures

Use fetch, async/await and response status checks. Loading, error and empty states are part of the feature.

Build: Load events from a JSON file; show a retry action if loading fails.

Review: Test offline mode and malformed data without leaving the interface stuck on Loading.

I completed the task and can explain my work.

5

Weeks 9–10 · Components and tests

Learn React components, props and state after JavaScript. Add TypeScript when you can explain the data being modeled.

Build: Rebuild one feature as small components. Test filtering behavior and keyboard interaction.

Review: Explain why each state variable exists and avoid duplicating derived state.

I completed the task and can explain my work.

6

Weeks 11–12 · Ship and explain

Use Git branches and pull requests. Check accessibility, performance and deployment configuration before release.

Build: Publish a student event finder with a README, screenshots and a short demonstration.

Review: A stranger can run the project using only the README. Explain one tradeoff and one known limitation.

I completed the task and can explain my work.

Your portfolio outcome

Student event finder: search, filters, accessible detail pages, loading states, test evidence and a documented deployment.

Download roadmap checklist

Continue with official documentation

My next action

Notes save on this device. Avoid entering passwords or sensitive information.

Keep exploring

Roadmaps

PHP backend roadmap 2026

Build a dependable CRUD API, understand security boundaries, and document a small backend portfolio project.

Open resource

Roadmaps

Software QA roadmap 2026

Learn testing through a checkout feature: test design, useful bug reports, API checks and browser automation.

Open resource

Roadmaps

Data analyst roadmap 2026

Turn a small dataset into a defensible decision using spreadsheets, SQL, Python and clear reporting.

Open resource