2024

Front End Roadmap 2024

Contents

• Programming Basics
• Introduction to Web Development
• Core Web Development
• Advanced Web Development

note: not all the resources are free, some of them are paid, but you can find them on the internet for free. For Frontend Masters courses, you can get 6 months free using the GitHub Student Developer Pack.

Programming Basics

In this section, it is recommended to learn the basics of programming. I chose a mix of languages and tools that will help you to understand the core concepts of programming.

• Introduction to Programming
• JavaScript OOP
• The Last Algorithms Course You'll Need
• A Practical Guide to Algorithms with JavaScript

Introduction to Web Development

This section is dedicated to the basics of web development. You will learn how the web works, browsers, protocols, and the basics of web development.

• How the Web Works
• HTTP/HTTPS
• DNS
• Frontend vs Backend

Core Web Development

In this section, you will learn the basics of web development. You will learn how to create a website using HTML, CSS, and JavaScript, also you will learn how to use the command line, version control, and text editors.

setup your environment

• Visual Studio Code Can Do That?

HTML

• Complete Intro to Web Development, v3
• Why & When to Use Semantic HTML Elements over Divs
• Why you shouldn't use a div for everything - Accessibility

CSS

• Getting Started with CSS
• HTML And CSS Template 1
• HTML And CSS Template 2
• HTML And CSS Template 3
• HTML And CSS Template 4

Version Control & Version Control Systems

• Git and GitHub

JavaScript

• JavaScript: From First Steps to Professional
• JavaScript: The Hard Parts, v2
• Vanilla JS: You Might Not Need a Framework
• The Hard Parts of Asynchronous JavaScript
• Deep JavaScript Foundations, v3
• Functional JavaScript First Steps
• The Hard Parts of Functional JavaScript

Package Managers

• NPM Crash Course
• What is NPM, and why do we need it?
• PNPM
• Yarn

UI Frameworks

• Tailwind CSS
• Shadcn UI: skip it for now, you can learn it with Next.js
• Radix UI: skip it for now, you can learn it with React

Advanced Web Development

In this section, you will learn the advanced topics of web development. You will learn how to create a web application using React, Next.js, and other tools.

React

Udemy Path

• The Ultimate React Course 2024: React, Redux & More

Frontend Masters + Youtube Path

• Complete Intro to React, v8
• Intermediate React, v5
• Vite
• React Router 6
• Zustand React State Management
• Redux Fundamentals Optional
• Advanced Redux with Redux Toolkit Optional
• React Hook Form + Zod
• React Axios API Requests
• React Query
• Client-Side GraphQL in React

TypeScript

• TypeScript 5+ Fundamentals, v4
• Intermediate TypeScript, v2
• React and TypeScript, v2

Next.js

• Introduction to Next.js 13+, v3
• Next.js 14 & React - The Complete Guide

In this roadmap, I tried to include the most important topics that you need to learn to become a front-end developer from my point of view. Don't stop learning, keep practicing, and build projects. If you have any questions, feel free to ask me on LinkedIn.