Skip to content

Mohamed20a/Frontend-Roadmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

CONTENTS

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:

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

Core

Introduction

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

HTML5

Resource Effort
Elzero Web School - Learn HTML 4.5 hours

CSS3

Resource Effort
Elzero Web School - Learn CSS 12 hours

HTML & CSS Course and Projects

Resource Effort
The Complete HTML & CSS Course and Projects 9.5 hours

Now It's Time To Practise

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

Tailwind CSS

Why Tailwind CSS over Bootstrap?

  • 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

Bootstrap [Optional]

Resources Effort
FreeCodeCamp - Bootstrap CSS Framework 3 hours
Arabic - Bootstrap 5 2 hours

Task list: the same as in tailwind.


Version Control

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

Intermediate

JavaScript Syntax

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 on JavaScript

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.

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

Projects

30 Day Vanilla JS Coding Challenge | 30 Days

JavaScript API Projects | 5 Hours

Advanced JavaScript

Advanced Javascript Concepts | 5 Hours


What's PWA ?

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.

PWA Syntax

Resources Effort
Progressive Web App - Learn PWA in Arabic 3 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.

Navigate throuth these links:

React JS

Full Modern React Tutorial | 3 Hours

React Course - Beginner's Tutorial for React JavaScript Library [2022] | 12 Hours

React Router V.6

React Router 6 – Tutorial for Beginners | 2 Hours

Learn React Router v6 In 45 Minutes | 45 Minutes

15 Projects with React JS

Code 15 React Projects - Complete Course | 9 Hours

Material UI

React Material UI Tutorial | 6 Hours

Sass

SASS Tutorial (Build Your Own CSS Library) | 3 Hours

Framer Motion

Framer Motion (for React) Tutorial | 2 Hours

Learn Framer Motion with React in Arabic 2023 | 1 Hour

Redux Toolkit

Redux Toolkit Tutorial | 4 Hours

Formik

React Formik Tutorial | 5 Hours

Extra

Navigate throuth these links:

TypeScript

Learn TypeScript 2022 [Arabic] | 4 Hours

TypeScript Tutorial | 3 Hours

TypeScript Full Course for Beginners | Complete All-in-One Tutorial | 8 Hours

Next JS

Next.js Tutorial for Beginners | 9 Hours

NextJS Course For Beginners - Routes, Fetching, SSR, SSG... | 1 Hour

Firebase

Firebase 9 Tutorial | 2 Hours

Firebase React Course For Beginners - Learn Firebase V9+ in 2 Hours | 2 Hours

Testing

React Testing Tutorial | 5 Hours