# Frontend developer roadmap 2026

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

## 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.

## 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.

## 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.

## 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.

## 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.

## 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.

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

https://www.egotechworld.com/recourses/frontend-roadmap-2026.php