CAT---Frontend-Roadmap Tailwind Templates

Cat Frontend Roadmap

Frontend Roadmap

#bootstrap #css #git #github #html #javascript #material-ui #nextjs #npm #react
Download

Ihab Mahmoud

CAT Frontend Roadmap: Developer Learning Path

A skilled developer is always curious.

This guide provides a structured path to mastering web development fundamentals, core concepts, and more advanced frameworks.


1. Basics

A. Introduction

Front-end development involves creating the visual and interactive components of websites or applications, including layout, styling, and interactive > elements. As businesses move online, front-end development has become an increasingly valuable skill.



Git & GitHub

GitHub is a web-based platform for version control and collaboration. It allows developers to work together, manage code changes, and track the history of their projects.

Git - Version Control

Git is a version control system that enables collaboration, versioning, and rollback in source code projects.


Resources to Learn Git & GitHub


Suggested Accounts to Create

  • LinkedIn - Professional networking
  • GitHub - Code repositories and collaboration
  • LeetCode - Coding practice and problem-solving

Tools



B. HTML

HTML stands for Hypertext Markup Language and is the standard language for creating web pages. It is used to structure content and provide meaning to web elements like text, images, and multimedia. With HTML, developers can create accessible, responsive, and visually appealing websites.

HTML employs a series of tags to define a web page's structure and layout. For instance, the <html> tag marks the beginning and end of an HTML document, while the <head> and <body> tags define the document's structure.


📺 HTML Playlist

Learn HTML In Arabic 2021 - Elzero Web School

Videos Assignments Assignments Links
1 ⇒ 5 4 assignments تكليفات الدروس من الدرس 01 إلى 05
6 ⇒ 10 7 assignments تكليفات الدروس من الدرس 6 إلى 10
11 ⇒ 14 4 assignments تكليفات الدروس من الدرس 11 إلى 14
15 ⇒ 18 3 assignments تكليفات الدروس من الدرس 15 إلى 18
19 ⇒ 23 4 assignments تكليفات الدروس من الدرس 19 إلى 23
24 ⇒ 27 2 assignments تكليفات الدروس من الدرس 24 إلى 27
28 ⇒ 30 3 assignments تكليفات الدروس من الدرس 28 إلى 30
31 ⇒ 34 4 assignments تكليفات الدروس من الدرس 31 إلى 34
35 ⇒ 37 2 assignments تكليفات الدروس من الدرس 35 إلى 37

📚 HTML Resources



C. CSS

CSS stands for Cascading Style Sheets and is a fundamental technology used for web design. It is used to define the style, layout, and formatting of HTML documents. With CSS, developers can separate the presentation of a web page from the content, which makes it easier to design and maintain websites. CSS is used to control the layout of multiple web pages all at once, making it a powerful tool for web designers.


📺 CSS Playlist

Learn CSS In Arabic 2021 Elzero Web School

Week 1

Videos Assignments Assignments Links
lessons from 01 to 04 6 assignments تكليفات من 01 الى 04
lessons from 05 to 08 4 assignments تكليفات من 05 الى 08
lessons from 09 to 12 2 assignments تكليفات من 09 الى 12
lessons from 13 to 16 2 assignments تكليفات من 13 الى 16
lessons from 17 to 21 4 assignments تكليفات من 17 الى 21
lessons from 22 to 26 3 assignments تكليفات من 22 الى 26
lessons from 27 to 29 2 assignments تكليفات من 27 الى 29
lessons from 30 to 33 4 assignments تكليفات من 30 الى 33
lessons from 34 to 37 4 assignments تكليفات من 34 الى 37
lessons from 38 to 41 3 assignments تكليفات من 38 الى 41
lessons from 42 to 45 3 assignments تكليفات من 42 الى 45
lessons from 46 to 53 6 assignments تكليفات من 46 الى 53

Week 2

Videos Assignments Assignments Links
lessons from 54 to 56 2 assignments تكليفات من 54 الى 56
lessons from 57 to 64 6 assignments تكليفات من 57 الى 64
lessons from 65 to 67 3 assignments تكليفات من 65 الى 67

Week 3

Videos Assignments Assignments Links
lessons from 68 to 73 5 assignments تكليفات من 68 الى 73
lessons from 74 to 77 4 assignments تكليفات من 74 الى 77
lessons from 78 to 82 8 assignments تكليفات من 78 الى 82
lessons from 83 to 85 3 assignments تكليفات من 83 الى 85
lessons from 86 to 88 2 assignments تكليفات من 86 الى 88

📚 CSS Resources



D. HTML & CSS Practice

Learn to build and style web pages using HTML and CSS. Practice creating layouts, adding styles, and making your designs responsive and user-friendly.


📺 Tutorials

Elzero Web Schools [ Arabic ]


Traversy Media [ ENGLISH ]


📚 Challenge Yourself


📚 Interview Questions


📚 Interview Questions Videos



E. Basic Level Tasks

Basic Tasks



2. Intermediate

A.Bootstrap

Bootstrap is a popular open-source CSS framework that provides pre-designed web elements and components for developers to use in their web projects. It was originally developed by Twitter and is now maintained by a community of developers. Bootstrap is designed to make it easy for developers to create responsive and mobile-first websites quickly and efficiently. It includes a wide range of pre-built CSS classes, JavaScript plugins, and other tools that can be used to create attractive and functional web interfaces without having to write much custom code.


Resources

Bootstrap documentation


Tutorials



B. JavaScript

JavaScript is a high-level programming language used to create interactive and dynamic websites. It is a scripting language that is used to create and control dynamic web content, such as animations and interactive forms. JavaScript is an essential component of modern web development and is supported by all major web browsers. It is often used in conjunction with HTML and CSS to create dynamic and responsive websites and web applications.


📺 JavaScript Playlist

Learn JavaScript 2021 In Arabic Elzero Web School

Week 1

Videos Topic Assignments Links
From 1 To 9 Introduction • Assignments For Lessons 1 To 9
From 10 To 17 Data Types • Assignments For Lessons 10 To 17
From 18 To 22 Data Types • Assignments For Lessons 18 To 22
From 23 To 26 Number & String • Assignments For Lessons 23 To 26
From 27 To 30 Number & String • Assignments For Lessons 27 To 30

Week 2

Videos Topic Assignments Links
From 31 To 32 Conditions • Assignments For Lessons 31 To 32
From 33 To 37 Conditions • Assignments For Lessons 33 To 37
From 38 To 39 Conditions • Assignments For Lessons 38 To 39
From 40 To 47 Array • Assignments For Lessons 40 To 47
From 48 To 53 Loop • Assignments For Lessons 48 To 53
From 54 To 56 Loop • Assignments For Lessons 54 To 56

Week 3

Videos Topic Assignments Links
From 57 To 63 Functions • Assignments For Lessons 57 To 63
From 64 To 70 Functions • Assignments For Lessons 64 To 70

Week 4

Videos Topic Assignments Links
From 71 To 78 Higher Order Functions • Assignments For Lessons 71 To 78
From 79 To 85 Object • Assignments For Lessons 79 To 85

Week 5

Videos Topic Assignments Links
From 86 To 93 DOM • Assignments For Lessons 86 To 93
From 94 To 101 DOM • Assignments For Lessons 94 To 101

Extra resource:

Week 6

Videos Topic Assignments Links
From 102 To 110 BOM • Assignments For Lessons 102 To 110
From 111 To 114 BOM • Assignments For Lessons 111 To 114

Week 7

Videos Topic Assignments Links
From 115 To 122 Destructuring • Assignments For Lessons 115 To 122

Week 8

Videos Topic Assignments Links
From 123 To 133 Map And Set • Assignments For Lessons 123 To 133

Week 9

Videos Topic Assignments Links
From 134 To 146 Regular Expression • Assignments For Lessons 134 To 146

Week 10

Videos Topic Assignments Links
From 147 To 158 OOP • Assignments For Lessons 147 To 158

Extra resource:

Week 11

Videos Topic Assignments Links
From 159 To 168 Date • Assignments For Lessons 159 To 168

Week 12

Videos Topic Assignments Links
From 169 To 178 AJAX + JSON • Assignments For Lessons 169 To 178
From 179 To 188 Promise, Async, Await • Assignments For Lessons 179 To 188

English [paid] [jonas schmedtmann]


Resources


Youtube Channels


Interview Questions



C. HTML CSS JavaScript Practice


Resources


D. SASS


What is SASS?

  • Sass stands for Syntactically Awesome Stylesheet
  • Sass is an extension to CSS
  • Sass is a CSS pre-processor
  • Sass is completely compatible with all versions of CSS
  • Sass reduces the repetition of CSS and therefore saves time
  • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006

Why to use SASS?

  • Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
  • Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff

How Does Sass Work?

  • A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.
  • This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Resources



E. Problem-Solving

JSchallenger

freecodecamp

Neet Code [problem-solving roadmap]

Leet Code



F. NPM & Webpack

What is NPM?

npm is the world's largest software registry. Open-source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

Tutorial

What is Webpack?

Webpack is a static module bundler for modern JavaScript applications. It is an open-source tool that runs on top of NodeJS. Webpack takes modules with dependencies and generates one or more bundles that represent those modules. Webpack creates a dependency graph that maps every module your project needs and how they relate to each other.

Tutorial



E. Intermediate Level Tasks

Intermediate Tasks



3. Advanced Level

A. What before React js

  • HTML
  • CSS
  • JavaScript Fundamentals
    • Syntax
    • Variables
    • Arrays / Objects
    • Events
    • Functions
    • Loops
    • Conditions
  • High Order Array Methods
    • forEach
    • map
    • filter
    • reduce
    • sort
  • Arrow Function
    • Lexical “this keyword” How does it work?
  • Es6 Modules
    • import/export
  • Promises
    • Async/Await
    • Fetch API
  • Destructuring
  • Classes
  • Spread Operator
  • npm
  • Webpack & Babel
    • basic understanding and how they work


B. React js

Documentation


Arabic Tutorials


English Tutorials



C. React Practice

Beginner


Beginner to Intermediate


Advanced


Youtube Channels



D. Redux

Redux Toolkit is a powerful library that simplifies state management in Redux applications. It provides tools for writing cleaner and more efficient Redux code by offering features like a simplified store setup, built-in reducers, actions, and middleware. It also helps reduce boilerplate and improves developer productivity, making it easier to manage global state in React apps.

Documentation


Arabic Tutorials


English Tutorials



E. Tailwind CSS

Tutorials


Practice



F. TypeScript

What is TypeScript?

  • TypeScript is a syntactic superset of JavaScript which adds static typing.
    • "Syntactic Superset" means that it shares the same base syntax as JavaScript but adds something to it.
  • This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.

Why should I use TypeScript?

  • JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.
  • In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation or guess based on the implementation.
  • TypeScript allows specifying the types of data being passed around within the code and has the ability to report errors when the types don't match.
  • For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.

Resources



G. React + TypeScript

Projects



I. React Extra libraries



UI Libraries


Data Fetching


Form Validation



I. Next JS

Next.js is a React framework that enables server-side rendering (SSR) and static site generation (SSG) for building fast, optimized web applications. It offers features like file-based routing, API routes, automatic code splitting, and easy deployment, making it a popular choice for building scalable, SEO-friendly websites with excellent performance.

Documentation


Arabic Tutorials


English Tutorials



Credit

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes