Skip to content

A streamlined, community-driven roadmap for front-end developers at any level, featuring curated resources organized by skill level to support clear and effective learning.

Notifications You must be signed in to change notification settings

abolfazl930/frontend-roadmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

44 Commits
Β 
Β 
Β 
Β 

Repository files navigation

Front-End Engineer Learning Roadmap

Welcome to the Front-End Engineer Learning Roadmap! πŸŽ‰

This roadmap is a structured, community-driven guide for front-end developers at any stageβ€”whether you're a beginner learning the basics, an intermediate developer honing your skills, or an advanced engineer looking to specialize.

What Makes This Roadmap Unique?

Unlike other roadmaps, this one combines:

  • Clear, Simple Structure: All resources are organized into one easy-to-read file.
  • Curated, High-Quality Resources: Each topic includes trusted resources to help you learn effectively without the clutter.
  • Collaborative, Open-Source Approach: This roadmap is community-driven, so it stays current and reflects what works best for real front-end developers.
  • Limit on Courses per Level: For each topic and skill level, we recommend 3 to 5 high-quality courses. This ensures that users have enough options to choose from without feeling overwhelmed. Each course should bring unique value or perspective to the topic, covering essential concepts without redundancy. By keeping this limit, we can focus on quality over quantity and maintain a clear, streamlined learning path for all users.

How It Works

We’ve organized each major front-end topicβ€”such as HTML/CSS, JavaScript, React, and moreβ€”into three skill levels:

  • Beginner: For those just starting out with foundational concepts.
  • Intermediate: For developers ready to deepen their knowledge and refine their skills.
  • Deep & Advanced: For front-end engineers who want to master complex topics and specialized areas.

Within each level, you’ll find carefully selected courses, tutorials, and projects, so you know exactly where to start and how to level up.

Get Involved!

This roadmap is open for contributions, so feel free to share your favorite resources or suggest improvements. Together, we’re creating a comprehensive, go-to resource for front-end developers everywhere!

Contribution Guidelines

Want to contribute? Awesome! Please follow these guidelines:

  1. Add Trusted Resources: Make sure the resources are high-quality and relevant to front-end development.
  2. Use Appropriate Levels: Add resources to the Beginner, Intermediate, or Advanced sections based on their difficulty.
  3. Provide a Short Description: Include a one-line description of the resource to help users understand its focus.
  4. Format: Follow the formatting used in the file for consistency.

Review Process

All contributions are reviewed to ensure they align with the roadmap's standards and quality goals. After you submit a change, the team will review it and provide feedback or suggestions if needed.

Together, we can make this roadmap a valuable resource for front-end developers everywhere!

Powered by Snapp! Front-End Engineers πŸ’š


Table of Contents


HTML & CSS

Beginner

  • Ultimate HTML & CSS
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 3 Hours . 4 Sections . 50 Lessons
    πŸ“ Master the fundamentals of web development with HTML5 & CSS3

Intermediate

  • Ultimate HTML & CSS

    • Part A
      πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
      ⏰ 3 Hours . 4 Sections . 50 Lessons
      πŸ“ Master advanced HTML5 & CSS3 concepts behind fast, beautiful and mobile-friendly websites

    • Part B
      πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
      ⏰ 6 Hours . 1 Sections . 50 Lessons
      πŸ“ Learn to convert Photoshop design mockups into real websites

Deep & Advanced

  • Accessibility
    πŸ™πŸ»β€β™‚οΈ Instructor: Jon Kuperman
    ⏰ 4 Hours
    πŸ“ Website Accessibility

  • Enterprise Accessibility
    πŸ™πŸ»β€β™‚οΈ Instructor: Marcy Sutton Todd
    ⏰ 5 Hours
    πŸ“ Proficient in UI accessibility, ARIA, focus management, testing, screen reader optimization, semantic HTML, and understanding JavaScript's impact on accessibility.

  • SEO
    πŸ™πŸ»β€β™‚οΈ Instructor: Mike North
    ⏰ 4 Hours
    πŸ“ Modern Search Engine Optimization (SEO)


Javascript

Beginner

  • Ultimate JavaScript: Fundamentals
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 6 Hours . 7 Sections . 100 Lessons
    πŸ“ Master the fundamentals of programming in JavaScript.

Intermediate

  • Ultimate JavaScript: Advanced Topics
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 4 Hours . 6 Sections . 60 Lessons
    πŸ“ Level up your JavaScript skills and prepare for technical interviews.

Deep & Advanced

  • JavaScript: The Hard Parts series
    πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance

    • JavaScript The Hard Parts,V2
      πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance
      ⏰ 6 hours, 41 minutes
      πŸ“ Go under the hood of some of the most important aspects of JavaScript! You'll learn what you need to know to become a sought-after, versatile, problem-solving developer. Combining mental models of JavaScript's inner workings and hands-on programming challenges, this course will give you a solid understanding of callbacks and higher-order functions, closure, asynchronous JavaScript, and object-oriented JavaScript! This course is for developers with a basic to intermediate knowledge of JavaScript who wants to deepen their understanding of the fundamentals to the next level.

    • The Hard Parts of Asynchronous JavaScript
      πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance
      ⏰ 4 hours, 46 minutes
      πŸ“ In this course, you will develop an intuitive understanding of the new features of JavaScript in ES6+: iterators, generators, promises, and async/await. You'll understand how promises are implemented under-the-hood to truly help fix the challenge of inversion of control in asynchronous code design. Plus, use iterators and generators to master asynchronous control flow. Go under the hood and solve complex async challenges by using the call stack, event loop, callback queue, micro-task queue and browser APIs so that you can navigate complex asynchronous problems, easily!

    • The Hard Parts of UI Development
      πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance
      ⏰ 9 hours, 19 minutes
      πŸ“ Keeping what the user sees in sync with the app's data can be tricky, particularly in browsers and big apps. UI tools like React, Angular, and Vue help, but they can be hard to use if you don't know what problems they solve. Develop an under-the-hood knowledge of UI dev by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch! You'll learn how JavaScript interacts with browser features like the DOM and HTML parser. By the end, you'll have a complete mental model of UI dev that you can apply to any framework!

    • The Hard Parts of Object Oriented JavaScript
      πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance
      ⏰ 4 hours, 30 minute
      πŸ“ Learn the fundamentals of Object Oriented Programming in JavaScript for organizing and scaling your code. You'll learn JavaScript’s prototypal design and how it works to enable the new ES6 classes under the hood. Understanding prototypes and classes in JavaScript is crucial for working with most modern frameworks and for those coming from traditional OOP languages.

    • The Hard Parts of Functional JavaScript
      πŸ™πŸ»β€β™‚οΈ Instructor: Will Sentance
      ⏰ 4 hours, 54 minutes
      πŸ“ Explore the increasingly popular paradigm of functional programming in JavaScript! You’ll learn how to wield and manipulate functions to develop more readable, maintainable and manageable codebases. You’ll go under the hood of powerful techniques like: Higher Order Functions, Function Composition, Pure Functions, and Immutability of State.


TypeScript

Beginner

  • The Ultimate TypeScript Course
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 5 Hours . 12 Sections . 120 Lessons
    πŸ“ Learn to make your JavaScript applications scale.

  • TypeScript 5+ Fundamentals, v4
    πŸ™πŸ»β€β™‚οΈ Instructor: Mike North
    ⏰ 5 Hours . 9 Sections . 34 Lessons
    πŸ“ Learn all the key Typescript features such as variable typing, function signatures, union and intersection types, type aliases, and generics. Use effective strategies for transitioning your codebase to TypeScript for more robust and scalable applications.

Intermediate

  • Intermediate TypeScript, v2
    πŸ™πŸ»β€β™‚οΈ Instructor: Mike North
    ⏰ 5 Hours . 9 Sections . 33 Lessons
    πŸ“ Dive deeper into TypeScript's powerful features, including handling of extreme types, nullish values, ES modules, and advanced generics. Learn about namespaces, classes, top and bottom types, and practical use of conditional and mapped types. Gain proficiency in integrating non-TypeScript files and mastering utility types for more expressive and safe TypeScript coding.

Intermediate to Advanced

  • Total TypeScript
    πŸ™πŸ»β€β™‚οΈ Instructor: Matt Pocock
    ⏰ 33 Sections . More than 200 exercises
    πŸ“ A collection of professional, exercise-driven, in-depth, self-paced TypeScript workshops for you to achieve TypeScript wizardry.

React

Beginner

  • React 18 for Beginners
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 8 Hours . 8 Sections . 140 Lessons
    πŸ“ A step-by-step guide to building web apps with React 18+ and TypeScript.

Beginner to Advanced

  • Epic React - React19
    πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
    πŸ“ A collection of exercise-driven, in-depth React workshops.

    • React Fundamentals
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ Learn everything you need to be effective with the fundamental building blocks of React applications.

    • React Hooks
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ learn how to use hooks to manage state, synchronize side-effects, generate unique ids, and more.

    • Advanced React APIs
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ Advanced React APIs covers many of the React APIs that you might not see on a day-to-day basis but you will need these in your toolbelt for certain scenarios that pop up.

    • React Suspense
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ Suspense is key to managing async operations declaratively in React.

    • Advanced React Patterns
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ Make your code better than ever by learning the strengths and weaknesses of several advanced patterns.

    • React Performance
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ we will diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

    • React Server Components
      πŸ™πŸ»β€β™‚οΈ Instructor: Kent C. Dodds
      πŸ“ React server components (RSCs) are experimental and only used by a few frameworks...

Deep & Advanced

  • React Performance
    πŸ™πŸ»β€β™‚οΈ Instructor: Steve Kinney
    ⏰ 4 hours, 30 minute
    πŸ“ React Performance

Vue

Beginner

  • Vue.js 3 Fundamentals with the Composition API
    πŸ™πŸ»β€β™‚οΈ Instructor: Daniel Kelly
    ⏰ 1 Hour
    πŸ“ Learn the fundamental concepts and get up and running with Vue.js 3.

  • Vue 3 Fundamentals
    πŸ™πŸ»β€β™‚οΈ Instructor: Ben Hong
    ⏰ 7 Hours
    πŸ“ Get hands-on experience building with flexible components using directives, props, lifecycle hooks, and slots..

Intermediate

  • TypeScript and Vue 3
    πŸ™πŸ»β€β™‚οΈ Instructor: Ben Hong
    ⏰ 3 Hours
    πŸ“ Learn the essential skills you need to leverage what makes TypeScript great in your Vue apps.

Version Control and Collaboration

Beginner to Advanced

  • The Ultimate Git Course
    πŸ™πŸ»β€β™‚οΈ Instructor: Mosh
    ⏰ 6 Hours . 6 Sections . 120 Lessons
    πŸ“ Everything you need to know to use Git & GitHub to work effectively as a team.

Testing

Beginner to Advanced

  • Testing Javascript
    πŸ™πŸ»β€β™‚οΈ Kent C. Dodds
    ⏰ 8 modules full of dense testing knowledge
    πŸ“ Learn the smart, efficient way to test any JavaScript application.

NextJs

Beginner

  • Introduction to Next.js
    πŸ™πŸ»β€β™‚οΈ Instructor: Scott Moss
    ⏰ 4.5 Hours
    πŸ“ Learn how to work with Next.js, a framework recommended by the React team.

Intermediate

  • Intermediate Next.js
    πŸ™πŸ»β€β™‚οΈ Instructor: Scott Moss
    ⏰ 3.5 Hours
    πŸ“ Level up your Next.js skills to build production-ready applications. Dive into advanced concepts like server actions, route slots, and data fetching strategies.

Advanced

  • Build an AI-Powered Next.js App
    πŸ™πŸ»β€β™‚οΈ Instructor: Scott Moss
    ⏰ 7.5 Hours
    πŸ“ Create a full-stack AI-powered Journal app from scratch in Next.js.

Web Performance

Intermediate to Advanced

  • Web Performance Fundamentals
    πŸ™πŸ»β€β™‚οΈ Instructor: Todd Gardner
    ⏰ 6 Hours
    πŸ“ Speed up your websites and web apps by mastering the latest performance metrics and web optimization techniques.

About

A streamlined, community-driven roadmap for front-end developers at any level, featuring curated resources organized by skill level to support clear and effective learning.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published