All Roadmaps

Frontend Development

Learn modern frontend technologies from HTML/CSS basics to advanced React patterns and performance optimization.

57h total·5 sections·33 topics
Filter:
Sort:

Make this roadmap your plan

Sign in to save your routine, streaks, notes, and progress across devices.

0 of 33 topics completed(est. 57h remaining)
0%
1

Web Foundations

Core web technologies every frontend developer must know.

12h 30m0/6
0%

HTML5 Semantics & Accessibility

beginner1h 30m

Semantic elements, ARIA attributes, forms, media, SEO-friendly markup.

Subtopics (0/8)
Semantic HTML (header, nav, main, article, section, aside, footer)
Forms & Input Types (email, date, range, color, pattern)
Form Validation (required, pattern, custom validity)
ARIA Attributes (roles, states, properties)
Media Elements (video, audio, picture, source)
Meta Tags & SEO (Open Graph, Twitter Cards, canonical)
HTML Templates & Slots
Data Attributes & Microdata
MDN HTML GuideHTML5 Semantic Elements

CSS3 & Modern Layout

beginner2h 30m

JavaScript ES6+

beginner3h

TypeScript Essentials

intermediate2h

Browser APIs & DOM

beginner2h

Git & Version Control

beginner1h 30m

2

React Ecosystem

Master React and its surrounding ecosystem of tools and libraries.

14h0/8
0%

React Fundamentals

intermediate3h

Custom Hooks

intermediate1h 30m

State Management

intermediate2h

Routing & Navigation

intermediate1h

Forms & Validation

intermediate1h 30m

Testing React Apps

intermediate2h

React Design Patterns

advanced2h

Error Handling & Boundaries

intermediate1h

3

Styling & UI

Modern CSS frameworks, component libraries, and design system creation.

9h0/6
0%

Tailwind CSS

beginner1h 30m

Component Libraries

intermediate1h 30m

Animation & Motion

intermediate1h 30m

Design Systems & Tokens

advanced2h

Responsive & Adaptive Design

beginner1h 30m

CSS-in-JS & Preprocessors

intermediate1h

4

API Integration & Data Fetching

Connect to backends, manage server state, and handle real-time data.

8h 30m0/5
0%

REST API Consumption

beginner1h 30m

React Query / TanStack Query

intermediate2h

WebSockets & Real-Time

intermediate1h 30m

GraphQL Client-Side

advanced2h

Authentication in SPAs

intermediate1h 30m

5

Advanced Frontend

Performance, tooling, and production-grade practices.

13h0/8
0%

Performance Optimization

advanced2h

Build Tools & Bundlers

advanced1h 30m

PWA & Service Workers

advanced1h 30m

Accessibility (a11y)

intermediate1h 30m

Internationalization (i18n)

intermediate1h 30m

Security in Frontend

advanced1h 30m

Micro-Frontends & Module Federation

advanced2h

CI/CD & DevOps for Frontend

advanced1h 30m

Frontend Development | AlgoDrill