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.
Together, we can make this roadmap a valuable resource for front-end developers everywhere!
Powered by Snapp! Front-End Engineers π
- HTML & CSS
- Javascript
- TypeScript
- React
- Vue
- Version Control and Collaboration
- Testing
- NextJs
- Web Performance
- Ultimate HTML & CSS
ππ»ββοΈ Instructor: Mosh
β° 3 Hours . 4 Sections . 50 Lessons
π Master the fundamentals of web development with HTML5 & CSS3
-
-
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
-
-
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)
- 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
ππ»ββοΈ 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 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.
- 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...
-
- React Performance
ππ»ββοΈ Instructor: Steve Kinney
β° 4 hours, 30 minute
π React Performance
-
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..
- 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.
- 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 Javascript
ππ»ββοΈ Kent C. Dodds
β° 8 modules full of dense testing knowledge
π Learn the smart, efficient way to test any JavaScript application.
- 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 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.
- 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 Fundamentals
ππ»ββοΈ Instructor: Todd Gardner
β° 6 Hours
π Speed up your websites and web apps by mastering the latest performance metrics and web optimization techniques.