FRONT-END ROADMAP

Are you looking to navigate the ever-evolving world of frontend development? Whether you're a beginner or an experienced developer, understanding the key technologies, tools, and concepts that are essential for success is crucial. This comprehensive roadmap provides you with a clear direction for your learning journey and covers the core aspects of frontend development.

Timeline

Phase	Effort
Intro	3 Hours
Core	60 Hours
Intermediate	30 Hours
Advanced	48 Hours
Extra	34 Hours

Good To Know

This roadmap assumes that you have already studied the following topics:

At least one programming language, such as JavaScript, C++, or Java, and a basic understanding of the concepts of programming, such as variables, loops, and functions.
Fundamental of Algorithms and Data Structures, such as Big O Notation, Arrays, Linked Lists, Stacks, Queues, Sorting, and Searching.
Understanding of Object-Oriented Programming (OOP) concepts, such as classes, inheritance, and polymorphism.

Here are some resources to learn these topics:

FreeCodeCamp - Introduction to Programming and Computer Science | English
FreeCodeCamp - C++ Tutorial for Beginners | English
Elzero Web School - Fundamentals Of Programming With C++ | Arabic
FreeCodeCamp - Algorithms and Data Structures | English
Adel Nasim - Data Structures Full Course | Arabic
Omar Ahmed - OOP - بالعربي | Arabic

Intro

Topic	Effort	Resources
Internet	30 minutes	How the Internet Works, The Internet Explained
Browsers	1 hour	How browsers work, How Do Web Browsers Work?
Hosting	30 minutes	What Is Web Hosting?, Different Types of Web Hosting
Frontend vs Backend	10 minutes	Frontend web development

Introduction to Front End Development

By the end of the course, you will be able to:

Describe the front-end developer role.
Explain the core and underlying technologies that power the internet.
Use HTML to create a simple webpage.
Use CSS to control the appearance of a simple webpage.

Resource:

Meta - Introduction to Front-End Development | 10 hours

HTML5

Resource:

Elzero Web School - Learn HTML | 4.5 hours

CSS3

Resource:

Elzero Web School - Learn CSS | 12 hours

Now It's Time To Practice

Tailwind CSS

Why Tailwind CSS over Bootstrap?

Highly customizable
Smaller file sizes
Mobile-first approach
No pre-existing design language

Resources:

Fireship - Tailwind in 100 Seconds | 100 seconds
The Net Ninja - Tailwind CSS Tutorial | 2 hours
Arabic - Practical Guide [Optional (Learn javascript first for better understanding)] | 4.5 hours
Arabic - Tailwind CSS [Optional] | 2 hours

Task list:

Bootstrap [Optional]

Resources:

FreeCodeCamp - Bootstrap CSS Framework | 3 hours
Arabic - Bootstrap 5 | 2 hours

Task list: the same as in Tailwind.

Version Control

Resources:

Big Data - Git and GitHub | 6 hours
Meta - Version Control | 13 hours

Intermediate

JavaScript Syntax
Practice on JavaScript Syntax
Build Projects
Advanced JS Concepts

JavaScript Syntax

Resources:

Meta - Programming with JavaScript | 20 hours
Elzero Web School - Learn JavaScript in Arabic | 18 hours
FreeCodeCamp - Learn JavaScript [Optional] | 10 hours

Practice on JavaScript

Practice, practice, and practice. You can't learn JavaScript without practicing it. Here we will solve several problems on leetcode to practice our JavaScript skills.

Problem	Solution
Two Sum
Reverse Integer
Palindrome Number
Remove Duplicates from Sorted Array
Search Insert Position
Best Time to Buy and Sell Stock
Longest Common Prefix
Valid Parentheses
Next Greater Element I
Backspace String Compare
Final Prices With a Special Discount in a Shop

Build Projects

30 Day Vanilla JS Coding Challenge | 30 Days
JavaScript API Projects | 5 Hours

Advanced JavaScript

Advanced Javascript Concepts | 5 Hours

Advanced

Why React JS ?

React is a popular choice for building user interfaces because of its declarative approach, component-based architecture, large and active community, flexibility, and performance.