├── 2023 ├── Essentials.md ├── JavaScript.md ├── README.md └── Tasks │ └── TailwindCSS │ ├── Task1 │ ├── README.md │ └── index.html │ ├── Task2 │ ├── README.md │ ├── images │ │ ├── favicon-32x32.png │ │ ├── illustration-dashboard.png │ │ └── logo.svg │ └── index.html │ ├── Task3 │ ├── README.md │ ├── fonts │ │ ├── Inter-VariableFont_slnt,wght.ttf │ │ ├── README.txt │ │ └── static │ │ │ ├── Inter-Bold.ttf │ │ │ ├── Inter-ExtraBold.ttf │ │ │ └── Inter-Regular.ttf │ ├── images │ │ ├── favicon-32x32.png │ │ ├── icon-menu-close.svg │ │ ├── icon-menu.svg │ │ ├── image-gaming-growth.jpg │ │ ├── image-retro-pcs.jpg │ │ ├── image-top-laptops.jpg │ │ ├── image-web-3-desktop.jpg │ │ ├── image-web-3-mobile.jpg │ │ └── logo.svg │ └── index.html │ ├── Task4 │ ├── README.md │ ├── images │ │ ├── client-audiophile.svg │ │ ├── client-databiz.svg │ │ ├── client-maker.svg │ │ ├── client-meet.svg │ │ ├── favicon-32x32.png │ │ ├── icon-arrow-down.svg │ │ ├── icon-arrow-up.svg │ │ ├── icon-calendar.svg │ │ ├── icon-close-menu.svg │ │ ├── icon-menu.svg │ │ ├── icon-planning.svg │ │ ├── icon-reminders.svg │ │ ├── icon-todo.svg │ │ ├── image-hero-desktop.png │ │ ├── image-hero-mobile.png │ │ └── logo.svg │ └── index.html │ ├── Task5 │ ├── README.md │ ├── images │ │ ├── bg-pattern-quotation.svg │ │ ├── favicon-32x32.png │ │ ├── image-daniel.jpg │ │ ├── image-jeanette.jpg │ │ ├── image-jonathan.jpg │ │ ├── image-kira.jpg │ │ └── image-patrick.jpg │ └── index.html │ └── public │ ├── Task1 │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg │ ├── Task2 │ ├── desktop-design.jpg │ ├── desktop-hover-error-states.jpg │ ├── desktop-preview.jpg │ ├── mobile-design.jpg │ └── mobile-error-state.jpg │ ├── Task3 │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── mobile-design.jpg │ └── mobile-menu.jpg │ ├── Task4 │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── mobile-design.jpg │ ├── mobile-menu-collapsed.jpg │ └── mobile-menu-expanded.jpg │ └── Task5 │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── 2024 ├── README.md └── roadmap.svg ├── .gitignore └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | temp 2 | *.drawio 3 | .env -------------------------------------------------------------------------------- /2023/Essentials.md: -------------------------------------------------------------------------------- 1 | # **Web Development Essentials Roadmap** 2 | 3 | This roadmap is designed to provide university students with the essential knowledge and skills required for web development. The roadmap covers key topics such as how the internet works, version control, HTML, CSS, and Tailwind CSS. The content is divided into 8 weeks, making it suitable for a structured learning approach. By following this roadmap, university students will gain a solid foundation in web development and be ready to explore more advanced concepts and technologies. 4 | 5 | ## **Target Audience** 6 | 7 | - University students studying computer science, software engineering, or related fields. 8 | - Individuals seeking to acquire fundamental web development skills. 9 | 10 | ## **How the Internet Works (Week 1)** 11 | 12 | - Gain a fundamental understanding of how the internet functions and the technologies that power it. 13 | - Familiarize yourself with concepts such as IP addresses, domains, HTTP, and DNS. 14 | 15 | ## **Introduction to version control (Week 2)** 16 | 17 | ### **_Courses_** 18 | 19 | - [Big Data - Git and GitHub](https://youtu.be/Q6G-J54vgKc): A comprehensive video tutorial series covering the basics of Git and GitHub for beginners. 20 | - [Meta - Version Control](https://www.coursera.org/learn/introduction-to-version-control): A course that introduces the concept of version control and its importance in modern software development. 21 | 22 | ### **_Topics_** 23 | 24 | 1. version control basics 25 | 2. requirements 26 | 3. Git architecture 27 | 4. Git commands 28 | 5. Git branching 29 | 6. GitHub 30 | 31 | ## **HTML (Week 3)** 32 | 33 | ### **_Courses_** 34 | 35 | - [Elzero Web School - Learn HTML](https://youtu.be/qfPUMV9J5yw): A comprehensive video tutorial series covering the basics of HTML for beginners. 36 | 37 | ### **_Topics_** 38 | 39 | 1. HTML basics 40 | 2. HTML elements 41 | 3. HTML attributes 42 | 4. HTML headings 43 | 5. HTML paragraphs 44 | 6. HTML links 45 | 7. HTML images 46 | 8. HTML lists 47 | 9. HTML tables 48 | 10. HTML forms 49 | 50 | ## **CSS (Week 4)** 51 | 52 | ### **_Courses_** 53 | 54 | - [Elzero Web School - Learn CSS](https://youtu.be/qyVkLebgfzY): A complete video tutorial series covering the modern CSS for frontend developers. 55 | 56 | ### **_Topics_** 57 | 58 | 1. CSS basics 59 | 2. CSS selectors 60 | 3. CSS positioning 61 | 4. CSS layouts 62 | 5. CSS flexbox 63 | 6. CSS grid 64 | 7. CSS transforms 65 | 8. CSS transitions 66 | 9. CSS animations 67 | 68 | ## **Practical Templates (Week 5-6)** 69 | 70 | ### **_Toturials_** 71 | 72 | - [HTML And CSS Template 1](https://youtu.be/_-eh8cwGGwg) 73 | - [HTML And CSS Template 2](https://youtu.be/heuDmrEAgUA) 74 | - [HTML And CSS Template 3](https://youtu.be/vkc99WHcDTk) 75 | - [HTML And CSS Template 4](https://youtu.be/DflEcuzjsyA) 76 | 77 | ## **Tailwind CSS (Week 7)** 78 | 79 | ### **_Courses_** 80 | 81 | - [Tailwind CSS Tutorial by The Net Ninja](https://youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw): A playlist of video tutorials covering the fundamentals of Tailwind CSS. 82 | - [Arabic - Tailwind CSS by Tarmiz Academy](https://youtu.be/Pk3hhCJG2Dk) `Optional but GREAT`: A great video tutorial series covering the fundamentals of Tailwind CSS for Arabic speakers. 83 | 84 | ### **_Topics_** 85 | 86 | 1. Tailwind CSS basics 87 | 2. Tailwind CSS utilities 88 | 3. Tailwind CSS components 89 | 4. Tailwind CSS responsive design 90 | 5. Tailwind CSS plugins 91 | 92 | ## **Practical Templates (Week 8)** 93 | 94 | ### **_Templates_** 95 | 96 | 1. [Tailwind CSS Template 1](Tasks/TailwindCSS/Task1) 97 | 2. [Tailwind CSS Template 2](Tasks/TailwindCSS/Task2) 98 | 3. [Tailwind CSS Template 3](Tasks/TailwindCSS/Task3) 99 | 4. [Tailwind CSS Template 4](Tasks/TailwindCSS/Task4) 100 | 5. [Tailwind CSS Template 5](Tasks/TailwindCSS/Task5) 101 | 102 | ## **Additional Meteirals** 103 | 104 | - [Arabic - Bootstrap 5 by Tarmiz Academy](https://youtu.be/65EFKUpYk2A): A great video tutorial series covering the fundamentals of Bootstrap 5 for Arabic speakers. 105 | 106 | By completing this roadmap, you'll acquire a strong foundation in web development and be equipped with the necessary skills to start working with JavaScript. Remember to practice hands-on coding, work on projects, and continue learning beyond this roadmap to enhance your skills and stay up to date with the latest industry trends. 107 | 108 | Good luck on your journey to becoming a web developer! 109 | -------------------------------------------------------------------------------- /2023/JavaScript.md: -------------------------------------------------------------------------------- 1 | # **JavaScript Roadmap for Frontend Developers** 2 | 3 | This roadmap is designed to guide frontend developers in mastering JavaScript, starting from the basics and progressing to an advanced level. The suggested timeline is divided into 5 to 8-week intervals, allowing learners to cover the material systematically. The roadmap includes recommended courses, topics, articles, and practical projects to enhance learning. 4 | 5 | ## **Target Audience** 6 | 7 | - Frontend developers seeking to strengthen their JavaScript skills and deepen their understanding of frontend web development. 8 | - Individuals with basic programming knowledge looking to specialize in frontend technologies. 9 | 10 | ## **Prerequisites** 11 | 12 | - Familiarity with HTML and CSS. 13 | - Basic understanding of JavaScript syntax and concepts. 14 | 15 | ## **Beginner Level (Weeks 1-2)** 16 | 17 | ### **_Courses_** 18 | 19 | - [JavaScript Tutorial for Beginners by freeCodeCamp](https://www.youtube.com/watch?v=PkZNo7MFNFg): A comprehensive video tutorial series covering JavaScript fundamentals for beginners. 20 | 21 | ### **_Topics_** 22 | 23 | 1. Variables, data types, and operators 24 | 2. Control flow and loops 25 | 3. Functions and scope 26 | 4. Arrays and objects 27 | 5. DOM manipulation basics 28 | 6. Introduction to asynchronous programming with callbacks 29 | 30 | ### **_Articles_** 31 | 32 | - [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide): Comprehensive documentation and tutorials for JavaScript. 33 | 34 | ### **_Projects_** 35 | 36 | Requirements: 37 | 38 | - Create a simple web application that allows users to manage a todo list. 39 | - Users should be able to add tasks, mark tasks as completed, and delete tasks. 40 | - The application should have a visually appealing and intuitive user interface. 41 | 42 | Features: 43 | 44 | - Add new tasks: Users can enter a task and press a button to add it to the list. 45 | - Mark tasks as completed: Users can click on a task to mark it as completed. 46 | - Delete tasks: Users can remove tasks from the list. 47 | - Visual feedback: Completed tasks should be visually distinguished from active tasks. 48 | 49 | Tools: 50 | 51 | - HTML and CSS: Design and structure the user interface. 52 | - JavaScript: Implement the functionality for adding, completing, and deleting tasks. 53 | - DOM manipulation: Update the task list dynamically. 54 | - Event handling: Capture user interactions with the todo list. 55 | 56 | ## **Intermediate Level (Weeks 3-5)** 57 | 58 | ### **_Courses_** 59 | 60 | - [The Complete JavaScript Course 2022 by Jonas Schmedtmann](https://www.udemy.com/course/the-complete-javascript-course): Covers modern JavaScript features, ES6+ syntax, DOM manipulation, asynchronous programming, and more. 61 | - [Frontend Masters](https://frontendmasters.com): Provides a wide range of high-quality JavaScript courses taught by industry experts. 62 | 63 | ### **_Topics_** 64 | 65 | 1. ES6+ features (arrow functions, destructuring, modules, etc.) 66 | 2. Error handling and debugging 67 | 3. Higher-order functions and functional programming concepts 68 | 4. Promises and async/await 69 | 5. Manipulating the DOM with advanced techniques 70 | 6. Fetching data from APIs 71 | 72 | ### **_Project: Weather Application_** 73 | 74 | Requirements: 75 | 76 | - Develop a weather application that displays current weather information based on user input. 77 | - The application should fetch weather data from a weather API and present it in a user-friendly format. 78 | - Use modern JavaScript techniques and DOM manipulation to create a dynamic and responsive user interface. 79 | 80 | Features: 81 | 82 | - Input field: Users can enter a location (e.g., city name) to retrieve weather information. 83 | - Weather display: Present the current weather conditions, including temperature, humidity, and weather description. 84 | - Icon representation: Show weather icons corresponding to the current weather conditions. 85 | - Responsive design: Ensure the application looks good on different screen sizes. 86 | 87 | Tools: 88 | 89 | - HTML and CSS: Structure the application and create a visually appealing user interface. 90 | - JavaScript: Fetch weather data from an API, handle user input, and update the DOM dynamically. 91 | - Fetch API: Make HTTP requests to the weather API and retrieve weather data. 92 | - JSON parsing: Extract the necessary weather information from the API response. 93 | - Asynchronous programming: Handle asynchronous operations to retrieve and display the weather data. 94 | 95 | ## **Advanced Level (Weeks 6-8)** 96 | 97 | ### **_Courses_** 98 | 99 | - [Advanced JavaScript Concepts by Andrei Neagoie](https://www.udemy.com/course/advanced-javascript-concepts): Explores advanced topics, design patterns, clean code practices, and JavaScript frameworks. 100 | 101 | ### **_Topics_** 102 | 103 | 1. Closures and scope 104 | 2. Prototypes and inheritance 105 | 3. Event handling and event-driven architecture 106 | 4. Modules and module bundlers (Webpack, Rollup, etc.) 107 | 5. Testing frameworks (Jest, Mocha, etc.) 108 | 6. Performance optimization and profiling 109 | 7. Security best practices 110 | 111 | ### **_Project: To-Do List Application Enhancement_** 112 | 113 | Requirements: 114 | 115 | - Enhance the previous todo list application by implementing additional features and improving the user experience. 116 | - Apply advanced JavaScript concepts and best practices to optimize the codebase and add more functionality. 117 | 118 | Features: 119 | 120 | - Data persistence: Save the todo list data in local storage, so users can access their tasks even after closing and reopening the application. 121 | - Drag-and-drop functionality: Allow users to reorder tasks by dragging and dropping them within the list. 122 | - Task filters: Implement filters to display tasks based on their completion status (e.g., show only completed tasks, show only active tasks). 123 | - Animations: Add smooth transitions and animations when tasks are added, completed, or deleted. 124 | 125 | Tools: 126 | 127 | - HTML, CSS, and JavaScript: Build upon the previous todo list application's codebase and extend its functionality. 128 | - Local storage: Store and retrieve the todo list data in the browser's local storage. 129 | - Drag-and-drop libraries (e.g., Dragula, Sortable): Implement the drag-and-drop functionality. 130 | - JavaScript frameworks (e.g., React): Utilize a framework to simplify state management and enhance the application. 131 | 132 | ## **Final Project: Movie Recommendation Web Application** 133 | 134 | ### _Requirements:_ 135 | 136 | - Create a web application that recommends movies to users based on their preferences and search queries. 137 | - Utilize external APIs to retrieve movie data, such as movie titles, descriptions, ratings, and images. 138 | - Implement a user-friendly interface that allows users to search for movies, view movie details, and receive personalized recommendations. 139 | 140 | ### _Features:_ 141 | 142 | 1. Movie Search: 143 | - Users can enter search queries to find movies by title, genre, or actor. 144 | - Display search results with relevant movie information, including ratings and poster images. 145 | - Clicking on a movie should display detailed information, such as a synopsis and cast. 146 | 2. Movie Reviews and Ratings: 147 | - Enable users to leave reviews and ratings for movies they have watched. 148 | - Display average ratings and user reviews alongside movie details. 149 | 3. User Interaction: 150 | - Implement features for users to add movies to their watchlist or mark movies as watched. 151 | - Provide options for users to share movie recommendations with friends via social media. 152 | 4. Responsive Design: 153 | - Ensure the application is responsive and accessible across different devices and screen sizes. 154 | 155 | ### _Tools:_ 156 | 157 | - HTML, CSS, and JavaScript: Develop the frontend application using these core technologies. 158 | - Frameworks or libraries: Utilize frontend frameworks or libraries (e.g., React) for building the user interface and managing state. 159 | - Movie APIs: Integrate movie-related APIs, such as the IMDb API or The Movie Database (TMDb) API, to fetch movie data. 160 | - Authentication: Implement user authentication using frameworks like Firebase Authentication or Auth0 for personalized recommendations and user profiles. 161 | - Database: Utilize a database (e.g., Firebase Firestore, MongoDB) to store user information, movie ratings, and reviews. 162 | - UI libraries: Enhance the user interface with UI libraries like Material-UI or Tailwind. 163 | 164 | ### _Additional Suggestions:_ 165 | 166 | - Implement features like movie trailers, similar movie recommendations, or the ability to create and join movie discussion forums. 167 | - Apply advanced JavaScript concepts and best practices, such as modular code architecture, efficient data fetching, and error handling. 168 | - Consider incorporating additional technologies like Redux for state management, GraphQL for API queries, or Express.js for a backend API if desired. 169 | 170 | Remember to customize the project based on your preferences and goals, and feel free to add your own creative touches. The Movie Recommendation Web Application provides an opportunity to showcase your skills in frontend development, JavaScript, and integration with external APIs. Best of luck with your final project! 171 | -------------------------------------------------------------------------------- /2023/README.md: -------------------------------------------------------------------------------- 1 |

FRONT-END ROADMAP 2023

2 |

3 | 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. 4 |

5 | 6 | 7 |

CONTENTS

8 | 9 | - Timeline 10 | - Good To Know 11 | - Intro 12 | - Core Concepts 13 | - Intermediate 14 | - Advanced 15 | - Extra 16 | 17 |

Timeline

18 | 19 | | Phase | Effort | 20 | | ------------ | -------- | 21 | | Intro | 3 Hours | 22 | | Core | 60 Hours | 23 | | Intermediate | 30 Hours | 24 | | Advanced | 48 Hours | 25 | | Extra | 34 Hours | 26 | 27 |

Good To Know

28 | 29 | This roadmap assumes that You have already studied the following topics: 30 | 31 | - 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. 32 | - Fundamental of **Algorithms** and **Data Structures**, such as Big O Notation, Arrays, Linked Lists, Stacks, Queues, Sorting, and Searching. 33 | - Understanding of **Object-Oriented Programming** (OOP) concepts, such as classes, inheritance, and polymorphism. 34 | 35 | Here are some resources to learn these topics: 36 | 37 | - [FreeCodeCamp - Introduction to Programming and Computer Science](https://youtu.be/zOjov-2OZ0E) | English 38 | - [FreeCodeCamp - C++ Tutorial for Beginners](https://youtu.be/vLnPwxZdW4Y) | English 39 | - [Elzero Web School - Fundamentals Of Programming With C++](https://youtube.com/playlist?list=PLDoPjvoNmBAwy-rS6WKudwVeb_x63EzgS) | Arabic 40 | - [FreeCodeCamp - Algorithms and Data Structures](https://youtu.be/8hly31xKli0) | English 41 | - [Adel Nasim - Data Structures Full Course](https://youtube.com/playlist?list=PLCInYL3l2AajqOUW_2SwjWeMwf4vL4RSp) | Arabic 42 | - [Omar Ahmed - OOP - بالعربي](https://youtube.com/playlist?list=PLwWuxCLlF_ue7GPvoG_Ko1x43tZw5cz9v) | Arabic 43 | 44 |

Intro

45 | 46 | | Topic | Effort | Resources | 47 | | ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | 48 | | Internet | 30 minutes | [How the Internet Works](https://youtu.be/e4S8zfLdLgQ), [The Internet Explained](https://www.vox.com/2014/6/16/18076282/the-internet) | 49 | | Browsers | 1 hour | [How browsers work](https://web.dev/howbrowserswork/), [How Do Web Browsers Work?](https://youtu.be/WjDrMKZWCt0) | 50 | | Hosting | 30 minutes | [What Is Web Hosting?](https://youtu.be/htbY9-yggB0), [Different Types of Web Hosting](https://youtu.be/AXVZYzw8geg) | 51 | | Frontend vs Backend | 10 minutes | [Frontend web development](https://youtu.be/WG5ikvJ2TKA) | 52 | 53 |

Core

54 | 55 | - Introduction to Front-End Development 56 | - HTML5 57 | - CSS3 58 | - Tailwind CSS | Bootstrap 59 | - Version Control 60 | 61 |

Introduction

62 | 63 | By the end of the course, you will be able to: 64 | 65 | - Describe the front-end developer role. 66 | - Explain the core and underlying technologies that power the internet. 67 | - Use HTML to create a simple webpage. 68 | - Use CSS to control the appearance of a simple webpage. 69 | 70 | | Resource | Effort | 71 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | 72 | | [Meta - Introduction to Front-End Development](https://www.coursera.org/learn/introduction-to-front-end-development?specialization=meta-front-end-developer) | 10 hours | 73 | 74 |

HTML5

75 | 76 | | Resource | Effort | 77 | | -------------------------------------------------------------- | --------- | 78 | | [Elzero Web School - Learn HTML](https://youtu.be/qfPUMV9J5yw) | 4.5 hours | 79 | 80 |

CSS3

81 | 82 | | Resource | Effort | 83 | | ------------------------------------------------------------- | -------- | 84 | | [Elzero Web School - Learn CSS](https://youtu.be/qyVkLebgfzY) | 12 hours | 85 | 86 |

Now It's Time 87 | To Practise

88 | 89 | HTML And CSS Template 1 | 2 Hours 90 | 91 |
92 | HTML And CSS Template 2 | 4 Hours 93 |
94 | HTML And CSS Template 3 | 5 Hours 95 |
96 | HTML And CSS Template 4 | 7 Hours 97 | 98 |
99 | 100 |

Tailwind CSS

101 | 102 | #### **_Why Tailwind CSS over Bootstrap?_** 103 | 104 | - **Highly customizable** 105 | - **Smaller file sizes** 106 | - **Mobile-first approach** 107 | - **No pre-existing design language** 108 | 109 | | Resources | Effort | 110 | | ------------------------------------------------------------------------------------------------------------- | ----------- | 111 | | [Fireship - Tailwind in 100 Seconds](https://youtu.be/mr15Xzb1Ook) | 100 seconds | 112 | | [The Net Ninja - Tailwind CSS Tutorial](https://youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) | 2 hours | 113 | | [Arabic - Tailwind CSS](https://youtu.be/Pk3hhCJG2Dk) [Optional] | 2 hours | 114 | 115 |

Task list

116 | 117 | - [ ] [task 1](Tasks/TailwindCSS/Task1) 118 | - [ ] [task 2](Tasks/TailwindCSS/Task2) 119 | - [ ] [task 3](Tasks/TailwindCSS/Task3) 120 | - [ ] [task 4](Tasks/TailwindCSS/Task4) 121 | - [ ] [task 5](Tasks/TailwindCSS/Task5) 122 | 123 |

Bootstrap [Optional]

124 | 125 | | Resources | Effort | 126 | | ---------------------------------------------------------------------- | ------- | 127 | | [FreeCodeCamp - Bootstrap CSS Framework](https://youtu.be/-qfEOE4vtxE) | 3 hours | 128 | | [Arabic - Bootstrap 5](https://youtu.be/65EFKUpYk2A) | 2 hours | 129 | 130 | #### **Task list**: the same as in tailwind. 131 | 132 |
133 | 134 |

Version Control

135 | 136 | | Resources | Effort | 137 | | ---------------------------------------------------------------------------------------- | -------- | 138 | | [Big Data - Git and GitHub](https://youtu.be/Q6G-J54vgKc) | 6 hours | 139 | | [Meta - Version Control](https://www.coursera.org/learn/introduction-to-version-control) | 13 hours | 140 | 141 |

Intermediate

142 | 143 | - JavaScript Syntax 144 | - Practice on JavaScript Syntax 145 | - Build Projects 146 | - Advanced JS Concepts 147 | 148 |

JavaScript Syntax

149 | 150 | | Resources | Effort | 151 | | ------------------------------------------------------------------------------------------------ | -------- | 152 | | [Meta - Programming with JavaScript](https://www.coursera.org/learn/programming-with-javascript) | 20 hours | 153 | | [FreeCodeCamp - Learn JavaScript](https://youtu.be/PkZNo7MFNFg) [Optional] | 10 hours | 154 | 155 |

Practice on JavaScript

156 | 157 | 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. 158 | 159 | | Problem | Solution | 160 | | ------------------------------------------------------------------------------------------------------------------------------- | -------- | 161 | | [Two Sum](https://leetcode.com/problems/two-sum/) | | 162 | | [Reverse Integer](https://leetcode.com/problems/reverse-integer/) | | 163 | | [Palindrome Number](https://leetcode.com/problems/palindrome-number/) | | 164 | | [Remove Duplicates from Sorted Array](https://leetcode.com/problems/remove-duplicates-from-sorted-array/) | | 165 | | [Search Insert Position](https://leetcode.com/problems/search-insert-position/) | | 166 | | [Best Time to Buy and Sell Stock](https://leetcode.com/problems/best-time-to-buy-and-sell-stock/) | | 167 | | [Longest Common Prefix](https://leetcode.com/problems/longest-common-prefix/) | | 168 | | [Valid Parentheses](https://leetcode.com/problems/valid-parentheses/) | | 169 | | [Next Greater Element I](https://leetcode.com/problems/next-greater-element-i/description/) | | 170 | | [Backspace String Compare](https://leetcode.com/problems/backspace-string-compare/) | | 171 | | [Final Prices With a Special Discount in a Shop](https://leetcode.com/problems/final-prices-with-a-special-discount-in-a-shop/) | | 172 | 173 |

Projects

174 | 175 | 30 Day Vanilla JS Coding Challenge | 30 Days 176 | 177 | JavaScript API Projects | 5 Hours 178 | 179 |

Advanced JavaScript

180 | 181 | Advanced Javascript Concepts | 5 Hours 182 | 183 |

Advanced

184 | 185 |

Why React JS ?

186 |

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

187 | 188 |

Navigate throuth these links:

189 | 190 | - React JS 191 | - React Router 192 | - Practice 193 | - Material UI 194 | - Sass 195 | - Framer Motion 196 | - Redux Toolkit 197 | - Formik 198 | 199 |

React JS

200 | 201 | Full Modern React Tutorial | 3 Hours 202 | 203 | React Course - Beginner's Tutorial for React JavaScript Library [2022] | 12 Hours 204 | 205 |

React Router V.6

206 | 207 | React Router 6 – Tutorial for Beginners | 2 Hours 208 | 209 | Learn React Router v6 In 45 Minutes | 45 Minutes 210 | 211 |

15 Projects with React JS

212 | 213 | Code 15 React Projects - Complete Course | 9 Hours 214 | 215 |

Material UI

216 | 217 | React Material UI Tutorial | 6 Hours 218 | 219 |

Sass

220 | 221 | SASS Tutorial (Build Your Own CSS Library) | 3 Hours 222 | 223 |

Framer Motion

224 | 225 | Framer Motion (for React) Tutorial | 2 Hours 226 | 227 | Learn Framer Motion with React in Arabic 2023 | 1 Hour 228 | 229 |

Redux Toolkit

230 | 231 | Redux Toolkit Tutorial | 4 Hours 232 | 233 |

Formik

234 | 235 | React Formik Tutorial | 5 Hours 236 | 237 |

Extra

238 | 239 |

Navigate throuth these links:

240 | 241 | - TypeScript 242 | - Next JS 243 | - Firebase 244 | - Testing 245 | 246 |

TypeScript

247 | 248 | Learn TypeScript 2022 [Arabic] | 4 Hours 249 | 250 | TypeScript Tutorial | 3 Hours 251 | 252 | TypeScript Full Course for Beginners | Complete All-in-One Tutorial | 8 Hours 253 | 254 |

Next JS

255 | 256 | Next.js Tutorial for Beginners | 9 Hours 257 | 258 | NextJS Course For Beginners - Routes, Fetching, SSR, SSG... | 1 Hour 259 | 260 |

Firebase

261 | 262 | Firebase 9 Tutorial | 2 Hours 263 | 264 | Firebase React Course For Beginners - Learn Firebase V9+ in 2 Hours | 2 Hours 265 | 266 |

Testing

267 | 268 | React Testing Tutorial | 5 Hours 269 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task1/README.md: -------------------------------------------------------------------------------- 1 | # **Task1 - Tailwind** 2 | 3 | use the [starter code](/Tasks/TailwindCSS/Task1/index.html) to build this user interface: 4 | 5 | 6 | 7 | 8 | ## Layout 9 | 10 | The designs were created to the following widths: 11 | 12 | - Mobile: 375px 13 | - Desktop: 1440px 14 | 15 | ## Colors 16 | 17 | ### Primary 18 | 19 | - Cyan: hsl(179, 62%, 43%) 20 | - Bright Yellow: hsl(71, 73%, 54%) 21 | 22 | ### Neutral 23 | 24 | - Light Gray: hsl(204, 43%, 93%) 25 | - Grayish Blue: hsl(218, 22%, 67%) 26 | 27 | ## Typography 28 | 29 | ### Body Copy 30 | 31 | - Font size: 16px 32 | 33 | ### Font 34 | 35 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 36 | - Weights: 400, 700 -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task1 - Tailwind 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task2/README.md: -------------------------------------------------------------------------------- 1 | # **Task2 - Tailwind** 2 | 3 | use the [starter code](/Tasks/TailwindCSS/Task2/index.html) to build this user interface: 4 | 5 | 6 | 7 | 8 | ## Layout 9 | 10 | The designs were created to the following widths: 11 | 12 | - Mobile: 375px 13 | - Desktop: 1440px 14 | 15 | ## Colors 16 | 17 | ### Primary 18 | 19 | - Blue: hsl(223, 87%, 63%) 20 | 21 | ### Secondary 22 | 23 | - Pale Blue: hsl(223, 100%, 88%) 24 | - Light Red: hsl(354, 100%, 66%) 25 | 26 | ### Neutral 27 | 28 | - Gray: hsl(0, 0%, 59%) 29 | - Very Dark Blue: hsl(209, 33%, 12%) 30 | 31 | ## Typography 32 | 33 | ### Body Copy 34 | 35 | - Font size: 20px 36 | 37 | ### Fonts 38 | 39 | - Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) 40 | - Weights: 300, 600, 700 41 | 42 | ## Icons 43 | 44 | For the social icons, you can use a font icon library. Some suggestions can be found below: 45 | 46 | - [Font Awesome](https://fontawesome.com) 47 | - [IcoMoon](https://icomoon.io) 48 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task2/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task2/images/favicon-32x32.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task2/images/illustration-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task2/images/illustration-dashboard.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task2/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task2 - Tailwind 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/README.md: -------------------------------------------------------------------------------- 1 | # **Task3 - Tailwind** 2 | 3 | use the [starter code](/Tasks/TailwindCSS/Task3/index.html) to build this user interface: 4 | 5 | 6 | 7 | 8 | ## Layout 9 | 10 | The designs were created to the following widths: 11 | 12 | - Mobile: 375px 13 | - Desktop: 1440px 14 | 15 | ## Colors 16 | 17 | ### Primary 18 | 19 | - Soft orange: hsl(35, 77%, 62%) 20 | - Soft red: hsl(5, 85%, 63%) 21 | 22 | ### Neutral 23 | 24 | Off-white: hsl(36, 100%, 99%) 25 | Grayish blue: hsl(233, 8%, 79%) 26 | Dark grayish blue: hsl(236, 13%, 42%) 27 | Very dark blue: hsl(240, 100%, 5%) 28 | 29 | ## Typography 30 | 31 | ### Body Copy 32 | 33 | - Font size (paragraph): 15px 34 | 35 | ### Font 36 | 37 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 38 | - Weights: 400, 700, 800 -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/fonts/Inter-VariableFont_slnt,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/fonts/Inter-VariableFont_slnt,wght.ttf -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/fonts/README.txt: -------------------------------------------------------------------------------- 1 | Inter Variable Font 2 | =================== 3 | 4 | This download contains Inter as both a variable font and static fonts. 5 | 6 | Inter is a variable font with these axes: 7 | slnt 8 | wght 9 | 10 | This means all the styles are contained in a single file: 11 | Inter-VariableFont_slnt,wght.ttf 12 | 13 | If your app fully supports variable fonts, you can now pick intermediate styles 14 | that aren’t available as static fonts. Not all apps support variable fonts, and 15 | in those cases you can use the static font files for Inter: 16 | static/Inter-Regular.ttf 17 | static/Inter-Bold.ttf 18 | static/Inter-ExtraBold.ttf 19 | 20 | Get started 21 | ----------- 22 | 23 | 1. Install the font files you want to use 24 | 25 | 2. Use your app's font picker to view the font family and all the 26 | available styles 27 | 28 | Learn more about variable fonts 29 | ------------------------------- 30 | 31 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts 32 | https://variablefonts.typenetwork.com 33 | https://medium.com/variable-fonts 34 | 35 | In desktop apps 36 | 37 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc 38 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts 39 | 40 | Online 41 | 42 | https://developers.google.com/fonts/docs/getting_started 43 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide 44 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts 45 | 46 | Installing fonts 47 | 48 | MacOS: https://support.apple.com/en-us/HT201749 49 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux 50 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows 51 | 52 | Android Apps 53 | 54 | https://developers.google.com/fonts/docs/android 55 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts 56 | 57 | License 58 | ------- 59 | Please read the full license text (OFL.txt) to understand the permissions, 60 | restrictions and requirements for usage, redistribution, and modification. 61 | 62 | You can use them in your products & projects – print or digital, 63 | commercial or otherwise. 64 | 65 | This isn't legal advice, please consider consulting a lawyer and see the full 66 | license for all details. 67 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-Bold.ttf -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-ExtraBold.ttf -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/fonts/static/Inter-Regular.ttf -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/favicon-32x32.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/icon-menu-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/image-gaming-growth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/image-gaming-growth.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/image-retro-pcs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/image-retro-pcs.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/image-top-laptops.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/image-top-laptops.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/image-web-3-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/image-web-3-desktop.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/image-web-3-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task3/images/image-web-3-mobile.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task3 - Tailwind 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/README.md: -------------------------------------------------------------------------------- 1 | # **Task4 - Tailwind** 2 | 3 | use the [starter code](/Tasks/TailwindCSS/Task4/index.html) to build this user interface: 4 | 5 | 6 | 7 | 8 | ## Layout 9 | 10 | The designs were created to the following widths: 11 | 12 | - Mobile: 375px 13 | - Desktop: 1440px 14 | 15 | ## Colors 16 | 17 | ### Neutral 18 | 19 | - Almost White: hsl(0, 0%, 98%) 20 | - Medium Gray: hsl(0, 0%, 41%) 21 | - Almost Black: hsl(0, 0%, 8%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size (paragraph): 18px 28 | 29 | ### Font 30 | 31 | - Family: [Epilogue](https://fonts.google.com/specimen/Epilogue) 32 | - Weights: 500, 700 -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/client-audiophile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/client-databiz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/client-maker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/client-meet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task4/images/favicon-32x32.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-close-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-planning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-reminders.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/icon-todo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/image-hero-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task4/images/image-hero-desktop.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/image-hero-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task4/images/image-hero-mobile.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task4 - Tailwind 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/README.md: -------------------------------------------------------------------------------- 1 | # **Task5 - Tailwind** 2 | 3 | use the [starter code](/Tasks/TailwindCSS/Task5/index.html) to build this user interface: 4 | 5 | 6 | 7 | 8 | ## Layout 9 | 10 | The designs were created to the following widths: 11 | 12 | - Mobile: 375px 13 | - Desktop: 1440px 14 | 15 | ## Colors 16 | 17 | ### Primary 18 | 19 | Moderate violet: hsl(263, 55%, 52%) 20 | Very dark grayish blue: hsl(217, 19%, 35%) 21 | Very dark blackish blue: hsl(219, 29%, 14%) 22 | White: hsl(0, 0%, 100%) 23 | 24 | ### Neutral 25 | 26 | Light gray: hsl(0, 0%, 81%) 27 | Light grayish blue: hsl(210, 46%, 95%) 28 | 29 | Note for text colors: 30 | 31 | 1. "Verified Graduate" has the same color as the person's name with 50% opacity 32 | 2. Review paragraphs inside the quotations have the same color as well, but are at 70% opacity 33 | 34 | ## Typography 35 | 36 | ### Body Copy 37 | 38 | - Font size: 13px 39 | 40 | ### Font 41 | 42 | - Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed) 43 | - Weights: 500, 600 -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/favicon-32x32.png -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/image-daniel.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/image-jeanette.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/image-jonathan.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/image-kira.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/Task5/images/image-patrick.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/Task5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Task5 - Tailwind 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task1/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task1/desktop-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task1/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task1/desktop-preview.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task1/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task1/mobile-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task2/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task2/desktop-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task2/desktop-hover-error-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task2/desktop-hover-error-states.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task2/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task2/desktop-preview.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task2/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task2/mobile-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task2/mobile-error-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task2/mobile-error-state.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task3/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task3/active-states.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task3/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task3/desktop-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task3/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task3/desktop-preview.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task3/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task3/mobile-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task3/mobile-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task3/mobile-menu.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/active-states.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/desktop-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/desktop-preview.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/mobile-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/mobile-menu-collapsed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/mobile-menu-collapsed.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task4/mobile-menu-expanded.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task4/mobile-menu-expanded.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task5/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task5/desktop-design.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task5/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task5/desktop-preview.jpg -------------------------------------------------------------------------------- /2023/Tasks/TailwindCSS/public/Task5/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mu-selim/Frontend-Roadmap/9a0c2463041266f2a3abe3b3ceb3c3d535c08f83/2023/Tasks/TailwindCSS/public/Task5/mobile-design.jpg -------------------------------------------------------------------------------- /2024/README.md: -------------------------------------------------------------------------------- 1 | # **Front End Roadmap 2024** 2 | 3 | ![roadmap 2024](./roadmap.svg "roadmap 2024") 4 | 5 | ## Contents 6 | 7 | - [Programming Basics](#programming-basics) 8 | - [Introduction to Web Development](#introduction-to-web-development) 9 | - [Core Web Development](#core-web-development) 10 | - [Advanced Web Development](#advanced-web-development) 11 | 12 | **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](https://frontendmasters.com/) courses, you can get 6 months free using the [GitHub Student Developer Pack](https://education.github.com/pack). 13 | 14 | ## Programming Basics 15 | 16 | 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. 17 | 18 | - [Introduction to Programming](https://youtu.be/06h470AiBZ4?si=c1n3gizu-Mt-7Zmg) 19 | - [JavaScript OOP](https://youtube.com/playlist?list=PLDoPjvoNmBAzLyvrWPwMw6bbBlTwPxgLF&si=03GE0FBamCeX6HMg) 20 | - [The Last Algorithms Course You'll Need](https://frontendmasters.com/courses/algorithms/) 21 | - [A Practical Guide to Algorithms with JavaScript](https://frontendmasters.com/courses/practical-algorithms/) 22 | 23 | ## Introduction to Web Development 24 | 25 | 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. 26 | 27 | - [How the Web Works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) 28 | - [HTTP/HTTPS](https://developer.mozilla.org/en-US/docs/Web/HTTP) 29 | - [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS) 30 | - [Frontend vs Backend](https://youtu.be/WG5ikvJ2TKA?si=2Rb3ga_ph7d4z7xD) 31 | 32 | ## Core Web Development 33 | 34 | 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. 35 | 36 | ### _setup your environment_ 37 | 38 | - [Visual Studio Code Can Do That?](https://frontendmasters.com/courses/customize-vs-code/) 39 | 40 | ### _HTML_ 41 | 42 | - [Complete Intro to Web Development, v3](https://frontendmasters.com/courses/web-development-v3/) 43 | - [Why & When to Use Semantic HTML Elements over Divs](https://youtu.be/bOUhq46fd5g?si=Jz-Oa_TNmBxxOPq-) 44 | - [Why you shouldn't use a div for everything - Accessibility](https://youtu.be/YAqRQoN8ykI?si=Zoukk8hXMoc8PVyR) 45 | 46 | ### _CSS_ 47 | 48 | - [Getting Started with CSS](https://youtu.be/qyVkLebgfzY?si=uo3z-TfxxHcAluaF) 49 | - [HTML And CSS Template 1](https://youtube.com/playlist?list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF&si=-1IF_h3EvCvEihag) 50 | - [HTML And CSS Template 2](https://youtube.com/playlist?list=PLDoPjvoNmBAy1l-2A21ng3gxEyocruT0t&si=ahu72nckOT4dW-K2) 51 | - [HTML And CSS Template 3](https://youtube.com/playlist?list=PLDoPjvoNmBAxuCSp2_-9LurPqRVwketnc&si=jrWRC2gJDf54Gsds) 52 | - [HTML And CSS Template 4](https://youtube.com/playlist?list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh&si=fk5jd-mU9Yk-KwpU) 53 | 54 | ### _Version Control & Version Control Systems_ 55 | 56 | - [Git and GitHub](https://youtu.be/Q6G-J54vgKc?si=FvOQJOtuIKrB064X) 57 | 58 | ### _JavaScript_ 59 | 60 | - [JavaScript: From First Steps to Professional](https://frontendmasters.com/courses/javascript-first-steps/) 61 | - [JavaScript: The Hard Parts, v2](https://frontendmasters.com/courses/javascript-hard-parts-v2/) 62 | - [Vanilla JS: You Might Not Need a Framework](https://frontendmasters.com/learn/javascript/) 63 | - [The Hard Parts of Asynchronous JavaScript](https://frontendmasters.com/courses/javascript-new-hard-parts/) 64 | - [Deep JavaScript Foundations, v3](https://frontendmasters.com/courses/deep-javascript-v3/) 65 | - [Functional JavaScript First Steps](https://frontendmasters.com/courses/functional-first-steps/) 66 | - [The Hard Parts of Functional JavaScript](https://frontendmasters.com/courses/functional-js-fundamentals/) 67 | 68 | ### _Package Managers_ 69 | 70 | - [NPM Crash Course](https://youtu.be/jHDhaSSKmB0?si=3Z9Z9ZQzQ7m7z9Z9) 71 | - [What is NPM, and why do we need it?](https://youtu.be/P3aKRdUyr0s?si=qGSv46N9W31rshMs) 72 | - [PNPM](https://pnpm.io/) 73 | - [Yarn](https://yarnpkg.com/) 74 | 75 | ### _UI Frameworks_ 76 | 77 | - [Tailwind CSS](https://frontendmasters.com/courses/tailwind-css/) 78 | - [Shadcn UI](https://youtube.com/playlist?list=PL4cUxeGkcC9h1NXLUuiAQ7c4UtdEInqma&si=gVsJErApGHHBb51p): skip it for now, you can learn it with Next.js 79 | - [Radix UI](https://www.radix-ui.com/): skip it for now, you can learn it with React 80 | 81 | ## Advanced Web Development 82 | 83 | 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. 84 | 85 | ### _React_ 86 | 87 | #### _Udemy Path_ 88 | 89 | - [The Ultimate React Course 2024: React, Redux & More](https://www.udemy.com/course/the-ultimate-react-course/?couponCode=LEADERSALE24B) 90 | 91 | #### _Frontend Masters + Youtube Path_ 92 | 93 | - [Complete Intro to React, v8](https://frontendmasters.com/courses/complete-react-v8/) 94 | - [Intermediate React, v5](https://frontendmasters.com/courses/intermediate-react-v5/) 95 | - [Vite](https://frontendmasters.com/courses/vite/) 96 | - [React Router 6](https://youtu.be/nDGA3km5He4?si=MytquSoeu_lXnYXa) 97 | - [Zustand React State Management](https://youtu.be/fZPgBnL2x-Q?si=9LSpiZLopknCzPjp) 98 | - [Redux Fundamentals](https://frontendmasters.com/courses/redux-fundamentals/) Optional 99 | - [Advanced Redux with Redux Toolkit](https://frontendmasters.com/courses/advanced-redux/) Optional 100 | - [React Hook Form + Zod](https://youtu.be/7anLE_RoDwU?si=jdF0SnxzOJBe9MyG) 101 | - [React Axios API Requests](https://youtu.be/ZEKBDXGnD4s?si=tHfjrJerQ_DUUP7K) 102 | - [React Query](https://youtu.be/NOvx4LB6Hfk?si=NM3m4WA9QSH8K2C9) 103 | - [Client-Side GraphQL in React](https://frontendmasters.com/courses/client-graphql-react/) 104 | 105 | ### _TypeScript_ 106 | 107 | - [TypeScript 5+ Fundamentals, v4](https://frontendmasters.com/courses/typescript-v4/) 108 | - [Intermediate TypeScript, v2](https://frontendmasters.com/courses/intermediate-typescript-v2/) 109 | - [React and TypeScript, v2](https://frontendmasters.com/courses/react-typescript-v2/) 110 | 111 | ### _Next.js_ 112 | 113 | - [Introduction to Next.js 13+, v3](https://frontendmasters.com/courses/next-js-v3/) 114 | - [Next.js 14 & React - The Complete Guide](https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=LEADERSALE24B) 115 | 116 | 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](https://www.linkedin.com/in/selimjs/). 117 | -------------------------------------------------------------------------------- /2024/roadmap.svg: -------------------------------------------------------------------------------- 1 |
Front End Roadmap
Front End Roadmap
Programming Basics
Programming Basics
Introduction
Introduction
syntax, variables, conditions, loops, and finctions
syntax, variables, conditions, loops, and f...
object oriented programming
object oriented programming
basic algorithms & data structure
basic algorithms & data structure
how does the internet work?
how does the internet work?
browsers and how they work
browsers and how they work
web hosting
web hosting
HTTP/HTTPS & DNS
HTTP/HTTPS & DNS
Front End vs Back End
Front End vs Back End
HTML
HTML
fundametal tags
fundametal tags
SEO & meta tags
SEO & meta tags
forms & inputs
forms & inputs
sematic HTML
sematic HTML
accessibility (a11y)
accessibility (a11y)
CSS
CSS 2 |
basic CSS syntax
basic CSS syntax
positions & flex, grid layouts
positions & flex, grid layouts
CSS specificity
CSS specificity
selectors , values, units, box model, etc.
selectors , values, units, box model, etc.
responsive design
responsive design
Version Control System
Version Control System
Git
Git
Version Control System
Version Control System
GitHub
GitHub
GitLab
GitLab
JavaScript
JavaScript
variables, data types, expressions & operators
variables, data types, expressions & operators
"this" keyword, scopes & strict mode
"this" keyword, scopes & strict mode
asynchronous JavaScript
asynchronous JavaScript
control flow, loops, equality comparisons & functions
control flow, loops, equality comparisons & fu...
working with APIs (XHR, fetch)
working with APIs (XHR, fetch)
DOM manipulations & BOM
DOM manipulations & BOM
ECMAscript 6+
ECMAscript 6+
web storage APIs
web storage APIs
Packages Managers
Packages Managers
NPM
NPM
PNPM
PNPM
YARN
YARN
UI frameworks
UI frameworks
tailwind CSS
tailwind CSS
shadcn ui
shadcn ui
radix ui
radix ui
Build Tools
Build Tools
Module Bundlers
Module Bundlers
Formatters & Linters
Formatters & Linters
vite
vite
rollup
rollup
prettier
prettier
eslint
eslint
React
React
CLI tools
CLI tools
components
components
rendering
rendering
routing
routing
hooks
hooks
state management
state management
forms
forms
schema validation
schema validation
API calling
API calling
create vite
create vite
create react-app
create react-app
class components
class components
function components
function components
JSX
JSX
conditional rendering
conditional rendering
component life cycle
component life cycle
lists rendering
lists rendering
tankstack router
tankstack router
react router
react router
context API
context API
zustand
zustand
redux toolkit
redux toolkit
zod
zod
yup
yup
react-hook-form
react-hook-form
formik
formik




GraphQL
GraphQL...
apollo
apollo






REST
REST...
tankstack query
tankstack query
axios
axios
TypeScript
TypeScript
setup & configuration
setup & configuration
ts compiler options
ts compiler options
typescript types
typescript types
classes
classes
generics
generics
decorators
decorators
Next
Next
SPA vs SSR vs SSG
SPA vs SSR vs SSG
framework structure
framework structure
client & server components
client & server componen...
APIs & server actions
APIs & server actions
next auth v5
next auth v5
hydration
hydration
deployment
deployment
Continue
ContinueText is not SVG - cannot display -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Front End Roadmap** 2 | 3 | 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. 4 | 5 | ![roadmap 2024](/2024/roadmap.svg "roadmap 2024") 6 | 7 | ## **Roadmap Versions** 8 | 9 | - [_2024_](/2024/) 10 | - [_2023_](/2023/) 11 | 12 | ## **Contributing** 13 | 14 | If you have any suggestions or feedback, please feel free to submit a pull request or open an issue. Your contributions are always welcome! 15 | --------------------------------------------------------------------------------