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.
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.
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.
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!
Want to contribute? Awesome! Please follow these guidelines:
- Add Trusted Resources: Make sure the resources are high-quality and relevant to front-end development.
- Use Appropriate Levels: Add resources to the Beginner, Intermediate, or Advanced sections based on their difficulty.
- Provide a Short Description: Include a one-line description of the resource to help users understand its focus.
- Format: Follow the formatting used in the file for consistency.
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. Approved changes will be added to the roadmap, and contributions that don’t quite fit may be politely declined or suggested for revision.
Together, we can make this roadmap a valuable resource for front-end developers everywhere!
Powered by Snapp! Front-End Engineers 💚
- Ultimate HTML & CSS
🙍🏻♂️ Instructor: Mosh
⏰ 3 Hours . 4 Sections . 50 Lessons
📝 Master the fundamentals of web development with HTML5 & CSS3
- Ultimate JavaScript: Fundamentals
🙍🏻♂️ Instructor: Mosh
⏰ 6 Hours . 7 Sections . 100 Lessons
📝 Master the fundamentals of programming in JavaScript.
- Ultimate JavaScript: Advanced Topics
🙍🏻♂️ Instructor: Mosh
⏰ 4 Hours . 6 Sections . 60 Lessons
📝 Level up your JavaScript skills and prepare for technical interviews.
-
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.
-
-
The Ultimate TypeScript Course
🙍🏻♂️ Instructor: Mosh
⏰ 5 Hours . 12 Sections . 120 Lessons
📝 Learn to make your JavaScript applications scale. -
TypeScript 5+ Fundamentals, v4
🙍🏻♂️ 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 TypeScript, v2
🙍🏻♂️ 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.
- 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 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.
-
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...
-
- 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.