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.
| Phase | Effort |
|---|---|
| Intro | 3 Hours |
| Core | 60 Hours |
| Intermediate | 30 Hours |
| Advanced | 48 Hours |
| Extra | 34 Hours |
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
- Abdelrahman Gamal - CS50 course | Arabic
- FreeCodeCamp - Algorithms and Data Structures | English
- Adel Nasim - Data Structures Full Course | Arabic
- Omar Ahmed - OOP - بالعربي | Arabic
| 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
- HTML5
- CSS3
- Tailwind CSS | Bootstrap
- Version Control
- PWA Course
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 | Effort |
|---|---|
| Meta - Introduction to Front-End Development | 10 hours |
| Resource | Effort |
|---|---|
| Elzero Web School - Learn HTML | 4.5 hours |
| Resource | Effort |
|---|---|
| Elzero Web School - Learn CSS | 12 hours |
| Resource | Effort |
|---|---|
| The Complete HTML & CSS Course and Projects | 9.5 hours |
HTML And CSS Template 1 | 2 Hours
HTML And CSS Template 2 | 4 Hours
HTML And CSS Template 3 | 5 Hours
HTML And CSS Template 4 | 7 Hours
- Highly customizable
- Smaller file sizes
- Mobile-first approach
- No pre-existing design language
| Resources | Effort |
|---|---|
| Fireship - Tailwind in 100 Seconds | 100 seconds |
| The Net Ninja - Tailwind CSS Tutorial | 2 hours |
| Arabic - Tailwind CSS [Optional] | 2 hours |
| Resources | Effort |
|---|---|
| FreeCodeCamp - Bootstrap CSS Framework | 3 hours |
| Arabic - Bootstrap 5 | 2 hours |
| Resources | Effort |
|---|---|
| Big Data - Git and GitHub | 6 hours |
| Meta - Version Control | 13 hours |
| Resources | Effort |
|---|---|
| Elzero Web School - Learn JavaScript in Arabic | 19 hours |
| Meta - Programming with JavaScript | 20 hours |
| FreeCodeCamp - Learn JavaScript [Optional] | 10 hours |
| javascriptما وراء ال - Learn JavaScript [Optional] | 2 hours |
Practice, practice, and practice. You can't learn JavaScript without practicing it. Here we will solve several problems in leetcode to practice our JavaScript skills.
30 Day Vanilla JS Coding Challenge | 30 Days
JavaScript API Projects | 5 Hours
Advanced Javascript Concepts | 5 Hours
A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.
| Resources | Effort |
|---|---|
| Progressive Web App - Learn PWA in Arabic | 3 hours |
React is a popular choice for building user interfaces because of its declarative approach, component-based architecture, large and active community, flexibility, and performance.
Full Modern React Tutorial | 3 Hours
React Course - Beginner's Tutorial for React JavaScript Library [2022] | 12 Hours
React Router 6 – Tutorial for Beginners | 2 Hours
Learn React Router v6 In 45 Minutes | 45 Minutes
Code 15 React Projects - Complete Course | 9 Hours
React Material UI Tutorial | 6 Hours
SASS Tutorial (Build Your Own CSS Library) | 3 Hours
Framer Motion (for React) Tutorial | 2 Hours
Learn Framer Motion with React in Arabic 2023 | 1 Hour
Redux Toolkit Tutorial | 4 Hours
React Formik Tutorial | 5 Hours
Learn TypeScript 2022 [Arabic] | 4 Hours
TypeScript Tutorial | 3 Hours
TypeScript Full Course for Beginners | Complete All-in-One Tutorial | 8 Hours
Next.js Tutorial for Beginners | 9 Hours
NextJS Course For Beginners - Routes, Fetching, SSR, SSG... | 1 Hour
Firebase 9 Tutorial | 2 Hours
Firebase React Course For Beginners - Learn Firebase V9+ in 2 Hours | 2 Hours
React Testing Tutorial | 5 Hours