Open navigation menu
← All Learning Paths

Frontend Developer

A comprehensive learning path for aspiring frontend developers covering HTML, CSS, JavaScript, frameworks, and modern tooling to build responsive and interactive web applications.

rolebeginner12 nodes120h total
  1. 1

    HTML Fundamentals

    Master semantic HTML structure and accessibility best practices

    Completion criteria: Build a complete accessible HTML page using semantic elements

    Next step: Proceed to CSS fundamentals for styling

    ⏱ 6h

  2. 2

    CSS and Layout Techniques

    Learn CSS box model, flexbox, grid, and responsive design

    Prerequisites: fe-01

    Completion criteria: Create a responsive landing page with flexbox and grid layouts

    Next step: Move to JavaScript basics for interactivity

    ⏱ 10h

  3. 3

    JavaScript Basics

    Understand variables, functions, control flow, and DOM manipulation

    Prerequisites: fe-02

    Completion criteria: Build an interactive todo list with vanilla JavaScript

    Next step: Advance to JavaScript ES6+ features

    ⏱ 12h

  4. 4

    JavaScript ES6+ and Asynchronous Programming

    Master modern JS features, promises, async/await, and fetch API

    Prerequisites: fe-03

    Completion criteria: Build a weather app consuming a public API with async/await

    Next step: Learn a frontend framework like React

    ⏱ 10h

  5. 5

    React Fundamentals

    Learn components, props, state, and hooks in React

    Prerequisites: fe-04

    Completion criteria: Build a component-based dashboard with state management

    Next step: Explore React routing and advanced patterns

    ⏱ 14h

  6. 6

    React Routing and State Management

    Master React Router, context, and state management libraries

    Prerequisites: fe-05

    Completion criteria: Build a multi-page SPA with routing and global state

    Next step: Learn styling approaches for React

    ⏱ 12h

  7. 7

    CSS-in-JS and Component Styling

    Understand styled-components, Tailwind CSS, and design systems

    Prerequisites: fe-06

    Completion criteria: Refactor an app using Tailwind CSS utility classes

    Next step: Study testing for frontend code

    ⏱ 8h

  8. 8

    Frontend Testing

    Learn Jest, React Testing Library, and end-to-end testing with Cypress

    Prerequisites: fe-07

    Completion criteria: Write unit and E2E tests for a React application

    Next step: Learn build tools and bundlers

    ⏱ 10h

  9. 9

    Build Tools and Bundlers

    Understand Webpack, Vite, and modern build pipelines

    Prerequisites: fe-08

    Completion criteria: Configure a Vite project with custom build optimizations

    Next step: Study performance optimization techniques

    ⏱ 8h

  10. 10

    Web Performance Optimization

    Learn lazy loading, code splitting, and Core Web Vitals

    Prerequisites: fe-09

    Completion criteria: Optimize an app to achieve Lighthouse score above 90

    Next step: Explore deployment and CI/CD for frontend

    ⏱ 8h

  11. 11

    Deployment and CI/CD

    Deploy frontend apps to Vercel/Netlify with CI/CD pipelines

    Prerequisites: fe-10

    Completion criteria: Set up automated deployment pipeline for a React app

    Next step: Review and build a capstone project

    ⏱ 6h

  12. 12

    Capstone Frontend Project

    Build a complete production-ready frontend application from scratch

    Prerequisites: fe-11

    Completion criteria: Deliver a deployed, tested, and optimized web application

    Next step: Continue learning advanced topics and contribute to open source

    ⏱ 16h