{"id":13463829,"url":"https://github.com/FADL285/Front-End-Development-Roadmap","last_synced_at":"2025-03-25T09:31:09.360Z","repository":{"id":53518847,"uuid":"414966872","full_name":"FADL285/Front-End-Development-Roadmap","owner":"FADL285","description":"This is a curated roadmap to becoming a professional Front-end Developer that anyone could use to learn about the practice of front-end development.","archived":false,"fork":false,"pushed_at":"2024-10-17T11:16:31.000Z","size":859,"stargazers_count":127,"open_issues_count":0,"forks_count":34,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T16:21:45.623Z","etag":null,"topics":["computer-science","css","front-end-development","frontend","html","javascript","resources","roadmap","vue-roadmap"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FADL285.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-08T11:51:24.000Z","updated_at":"2024-10-17T11:16:35.000Z","dependencies_parsed_at":"2022-08-13T02:40:39.232Z","dependency_job_id":"09d6b404-27c2-4107-bc6f-aaa9162e6ab8","html_url":"https://github.com/FADL285/Front-End-Development-Roadmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FADL285%2FFront-End-Development-Roadmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FADL285%2FFront-End-Development-Roadmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FADL285%2FFront-End-Development-Roadmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FADL285%2FFront-End-Development-Roadmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FADL285","download_url":"https://codeload.github.com/FADL285/Front-End-Development-Roadmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245435101,"owners_count":20614828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computer-science","css","front-end-development","frontend","html","javascript","resources","roadmap","vue-roadmap"],"created_at":"2024-07-31T14:00:29.049Z","updated_at":"2025-03-25T09:31:07.616Z","avatar_url":"https://github.com/FADL285.png","language":null,"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/front-end-roadmap.gif\" alt=\"Front-End Development\" /\u003e\n  \u003cp\u003e\u003cstrong\u003eRoadmap to becoming a Front-End Developer in 2024.\u003c/strong\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003ch1 align=\"center\"\u003e:dart: Roadmap to boost your career\u003c/h1\u003e\n\nThis is a curated roadmap to becoming a professional Front-end Developer that anyone could use to learn about the practice of front-end development.\n\n---\n\n\u003ch3 align=\"center\"\u003eLink icons:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e📖 → Official Docs \u0026nbsp; | \u0026nbsp; 🎬 → Video \u0026nbsp;\u003c/p\u003e\n\u003cp align=\"center\"\u003e📄 → Article \u0026nbsp; | \u0026nbsp; 🎬📃🎬 → Course\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"100\" /\u003e → Personal Recommendation \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"100\" /\u003e → YT Arabic Playlist; \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e → English Playlist\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"3\"\u003e\u003cb\u003e🗺️ Content\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#introduction\"\u003e\u003cb\u003e1-Introduction\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#before-you-start\"\u003e\u003cb\u003e2-Before you start\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#front-end-development-techspec-overview\"\u003e\u003cb\u003e3-Front-end Development Tech/Spec Overview \u0026nbsp; \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" width=\"80\" /\u003e\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#required-for-any-path\"\u003e\u003cb\u003e4-Required for any path\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#basic-tools\"\u003e\u003cb\u003e5-Basic tools\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#level-one\"\u003e\u003cb\u003e6-Level One (HTML, CSS, JS)\u003c/b\u003e ✨\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#level-two\"\u003e\u003cb\u003e7-Level Two\u003c/b\u003e ✨\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#level-three\"\u003e\u003cb\u003e8-Level Three\u003c/b\u003e ✨\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#what-next\"\u003e\u003cb\u003e9-What Next?!\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \n  \u003cbr /\u003e\n  \n  \u003cdiv\u003e\n    \u003cimg src=\"https://badgen.net/badge/Note/%F0%9F%92%A1/orange\" alt=\"Important Note\" width=\"120\"/\u003e\n    \u003cp\u003e\n      \u003cstrong\u003e\n        Any sources included in this roadmap are personal recommendations. You can choose one or more sources if you wish, or you can search for other sources.\n      \u003c/strong\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n---\n\n# Introduction:\n\nFront-end development involves using HTML, CSS, and JavaScript to build a client-side application. The client-side of an online application is the visual part of a web application and also what a user interacts with when an application is opened: colours, fonts, buttons, navigations, animations, etc.\n\n[Introduction To Front End \u0026nbsp; 🎬](https://youtu.be/6meCVoEo18o) \u0026nbsp; \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" width=\"80\" /\u003e\n\nFront-end development includes the user interface of an application. Everything a user interacts with when a user visits a website such as a login or sign-up page, homepage, contact page falls under the front-end development term.\n\nA front-end developer is responsible for building and implementing the interface of a website or web application. They build client-side applications using web technologies such as HTML, CSS, and JavaScript.\n\nIn 2021 however, front-end development has gone beyond HTML, CSS, and JavaScript. There are a lot of web technologies you need to learn to be able to excel as a front-end developer this year.\n\n\u003e I will endeavor to cover all you need to get started with front-end development in 2023.\n\n# Before you start:\n\nFirst, you should read about [The Front-end Developer Profession \u0026nbsp; 📄 ](https://frontendmasters.com/guides/learning-roadmap/front-end-developer-profession/)\n\n## After this section, you should know:\n\n- Front-end Developer Role\n- Required Skills\n- Job Titles\n\n---\n\n# Front-end Development Tech/Spec Overview\n\n## In this section, you will learn about *Internet* and should know:\n\n- The World Wide Web (aka WWW)\n- Internet Fundamentals \u0026  How it Works\n- Hypertext Transfer Protocol (aka HTTP)\n- Uniform Resource Locators (aka URL)\n- Browsers and How The Web Works\n- DNS, Domain Name and Hosting\n\n\u003cbr /\u003e\n\n## Here are some resources:\n\n\u003e skip what you already familiar with :handshake:\n\n- [The Front-end Development Tech/Spec Overview \u0026nbsp; 📄](https://frontendmasters.com/guides/learning-roadmap/front-end-development-overview/)\n- [World Wide Web (WWW) Basic Mechanics \u0026nbsp; 📄](https://frontendmasters.com/guides/learning-roadmap/www-basic-mechanics/)\n- How does the Internet work?\n  - [How does the Internet work? \u0026nbsp; 📄](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)\n  - [The Internet Explained \u0026nbsp; 📄](https://www.vox.com/2014/6/16/18076282/the-internet) \n  - [How the Internet Works in 5 Minutes \u0026nbsp; 🎬 ](https://youtu.be/7_LPdttKXPc)\n  - [How Does the Internet Work? \u0026nbsp; 📄](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)\n  - [How The Web Works \u0026nbsp; 📄](https://academind.com/tutorials/how-the-web-works)\n- What is HTTP?\n  - [What is HTTP? \u0026nbsp; 📄](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/)\n  - [How HTTPS Works? \u0026nbsp; 📄](https://howhttps.works/)\n  - [An overview of HTTP \u0026nbsp; 📄](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)\n  - [HTTP Messages - MDN 📄](https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages)\n  - [HTTP Crash Course \u0026 Exploration 🎬](https://youtu.be/iYM2zFP3Zn0)\n  - [HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/)\n  - [HTTP \u0026 Web Sockets \u0026nbsp; 📄](https://frontendmasters.com/guides/learning-roadmap/http/)\n- How Browsers Work?\n  - [How Browsers Work \u0026nbsp; 📄](https://web.dev/howbrowserswork/)\n  - [What is a web browser? \u0026nbsp; 📄](https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/)\n  - [How Do Web Browsers Work? \u0026nbsp; 🎬](https://www.youtube.com/watch?v=WjDrMKZWCt0)\n  - [Role of Rendering Engine in Browsers \u0026nbsp; 📄](https://www.browserstack.com/guide/browser-rendering-engine)\n  - [How Browsers Work \u0026nbsp; 📄](https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/)\n- DNS and how it works?\n  - [What is DNS? \u0026nbsp; 📄](https://www.cloudflare.com/learning/dns/what-is-dns/)\n  - [What is DNS? \u0026nbsp; 📄](https://aws.amazon.com/route53/what-is-dns/)\n  - [Mess with DNS - DNS Playground \u0026nbsp; 🎮](https://messwithdns.net/)\n  - [DNS and How does it work? \u0026nbsp; 🎬](https://youtu.be/Wj0od2ag5sk)\n  - [DNS Records for Newbies - How To Manage Website Records \u0026nbsp; 🎬](https://youtu.be/YV5tkQYcvfg)\n- Domain Name\n  - [What is a domain name? \u0026nbsp; 📄](https://www.cloudflare.com/learning/dns/glossary/what-is-a-domain-name/)\n  - [What is a Domain Name? - MDN \u0026nbsp; 📄](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)\n  - [What is a Domain Name? - A Beginners Guide to How Domain Names Work! \u0026nbsp; 🎬](https://youtu.be/Y4cRx19nhJk)\n\n---\n\n# Required for any path:\n\nThere are some tools required for any path such as Basic Terminal Usage (Command line), Git - Version Control \u0026 Github.\n\n`Note:`\n\n\u003e **Learn these tools in parallel with the rest of the courses**.\n\n## Basic Terminal Usage (Command line)\n\nThe terminal is an interface used to execute text commands, and it gives you access to the underlying operating system. Basic terminal usage is a skill all developers need regardless of their specialization. Command line is very important so I strongly recommend you study more on how to use it.\n\n\u003e If you are on windows like me, I recommend using [git bash](https://git-scm.com/downloads).\n\n**Here are some resources to learn command line:**\n\n- [Learn Command Line \u0026nbsp; 🎬📃🎬 ](https://www.youtube.com/playlist?list=PLDoPjvoNmBAxzNO8ixW83Sf8FnLy_MkUT) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YT arabic playlist\" width=\"80\" /\u003e\n- [Command Line Crash Course - Freecodecamp \u0026nbsp; 🎬 ](https://youtu.be/yz7nYlnXLfE)\n- [Command line crash course \u0026nbsp; 📄 ](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)\n\n## Git - Version Control\n\nGit is a version control system that enables developers to track changes in their project. Git also helps developers collaborate as a team. Git is needed among developers, to ensure that there are no code conflicts between developers.\n\n## Github\n\nGitHub is a code hosting platform for software development. GitHub lets teams work together on projects and it is also used for version control. It can be used among teams to collaborate on a project. For example, a team of developers wants to build a web application and everyone is given a task that has to be updated daily while working on the project, in this case, Github helps them build a centralized repository where each team member can make updates or manage the code file or repository.\n\n\u003cbr /\u003e\n\n**Here are some resources to learn Git \u0026 GitHub:**\n\n- [Git Handbook - Github guides \u0026nbsp; 📄 ](https://guides.github.com/introduction/git-handbook/)\n- [Git Videos \u0026nbsp; 🎬📃🎬 ](https://git-scm.com/videos)\n- [Git Cheat Sheet repo 📄](https://github.com/FADL285/git-cheat-sheet)\n- [Git book - Git \u0026nbsp; 📄 ](https://git-scm.com/book/en/v2)\n- [Github Guides \u0026nbsp; 📄 ](https://guides.github.com/activities/hello-world/)\n- [Version Control with Git - Udacity \u0026nbsp; 🎬📃🎬 ](https://www.udacity.com/course/version-control-with-git--ud123)\n- [Introduction to Git and GitHub from Google \u0026nbsp; 🎬📃🎬 ](https://www.coursera.org/learn/introduction-git-github)\n- [An introduction to Git - Freecodecamp \u0026nbsp; 📄 ](https://www.freecodecamp.org/news/what-is-git-and-how-to-use-it-c341b049ae61/)\n- [Git \u0026 GitHub Arabic Tutorial \u0026nbsp; 🎬📃🎬](https://www.youtube.com/playlist?list=PLqPejUavRNTXejD5npdmFbe6NU6dTJLhW) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YT arabic playlist\" width=\"80\" /\u003e\n- [Learn Git and GitHub \u0026nbsp; 🎬📃🎬 ](https://www.youtube.com/playlist?list=PLDoPjvoNmBAw4eOj58MZPakHjaO3frVMF) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YT arabic playlist\" width=\"80\" /\u003e\n- [learn Git in Arabic \u0026nbsp; 🎬📃🎬](https://www.youtube.com/playlist?list=PLfDx4cQoUNOYVfQs_NFNyykcqkaJ_plmK) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YT arabic playlist\" width=\"80\" /\u003e\n- [Git Tutorial for Beginners: Learn Git in 1 Hour - Code with Mosh \u0026nbsp; 🎬 ](https://youtu.be/8JJ101D3knE)\n- [Git and GitHub for Beginners - Crash Course - Freecodecamp \u0026nbsp; 🎬 ](https://youtu.be/RGOj5yH7evk)\n\n---\n\n# Basic tools\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eBasic tools to get start.\u003c/p\u003e\n\n  \u003ctable\u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eText Editor :writing_hand:\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003eBrowser :globe_with_meridians:\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e:man_technologist: Terminal\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"https://code.visualstudio.com/\" target=\"_blank\"\u003e\u003cb\u003eVS Code :ballot_box_with_check:\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://www.google.com/chrome/\" target=\"_blank\"\u003e\u003cb\u003eGoogle Chrome :ballot_box_with_check:\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://git-scm.com/downloads\" target=\"_blank\"\u003e\u003cb\u003eGit Bash :ballot_box_with_check:\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"https://atom.io/\" target=\"_blank\"\u003e\u003cb\u003eAtom\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://www.microsoft.com/en-us/edge\" target=\"_blank\"\u003e\u003cb\u003eMicrosoft Edge\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://cmder.app/\" target=\"_blank\"\u003e\u003cb\u003eCmder\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"https://www.jetbrains.com/webstorm/\" target=\"_blank\"\u003e\u003cb\u003eWebStorm\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://www.mozilla.org/en-US/firefox/new/\" target=\"_blank\"\u003e\u003cb\u003eMozilla Firefox\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://hyper.is/\" target=\"_blank\"\u003e\u003cb\u003eHyper\u003c/b\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\n  [Code Editors resources 📄](https://frontendmasters.com/guides/learning-roadmap/code-editors/)\n\n\u003c/div\u003e\n\n---\n\n# Level One:\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"3\"\u003e\u003cb\u003e🗺️ Content\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#html\"\u003e\u003cb\u003e1- HTML\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#css\"\u003e\u003cb\u003e2- CSS\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#html--css---resources--practice\"\u003e\u003cb\u003e3- HTML \u0026 CSS - (resources \u0026 practice)\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"2\"\u003e\n          \u003ca href=\"#javascript\"\u003e\u003cb\u003e4- JavaScript\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#accessibility\"\u003e\u003cb\u003e5- Accessibility\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/html-css-js-diff.jpg\" alt=\"Difference Between HTML, CSS \u0026 JS\" /\u003e\n\u003c/p\u003e\n\n## HTML:\n\nHTML stands for Hypertext Markup Language. It is the markup language for building web pages, it is also the building block of the web. HTML is easy to learn and comprehend. With just HTML, you can build a basic website.\n\n**Here are some resources to learn HTML:**\n\n- [Learning resources and tools for HTML - Front-End Masters 📄](https://frontendmasters.com/guides/learning-roadmap/html/) ✨💫\n- [Learn HTML - Elzero Web School 📄](https://elzero.org/learn-html/) ✨💫\n  - [Learn HTML In Arabic 2021 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n  - [HTML Study Plan 📄](https://elzero.org/study/html-2021-study-plan/)\n  - [HTML Assignments 📄](https://elzero.org/category/assignments/html-assignments/)\n- [MDN - HTML 📄](https://developer.mozilla.org/en-US/docs/Learn/HTML)\n- [Learn HTML - web.dev 📄](https://web.dev/learn/html/) `recommended`\n- [Learn Forms - web.dev 📄](https://web.dev/learn/forms/) `recommended`\n- [HTML Full Course - Freecodecamp 🎬](https://youtu.be/pQN-pnXPaVg)\n- [HTML Crash Course For Absolute Beginners - Traversy Media 🎬](https://www.youtube.com/watch?v=UB1O30fR-EE)\n\n\u003e For writing maintainable and scalable HTML documents, check this repo [HTML Best Practices](https://github.com/hail2u/html-best-practices)\n\n---\n\n## CSS:\n\nCSS stands for Cascading Style Sheets. It is the technology to learn after HTML. It is used for styling our HTML. For example, we can use CSS to space our content, colours, fonts, etc.\n\n**Here are some resources to learn CSS:**\n\n- [Learn CSS - Elzero Web School 📄](https://elzero.org/learn-css/) ✨💫\n    - [Learn CSS In Arabic 2021 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n    - [CSS Study Plan 📄](https://elzero.org/study/css-2021-study-plan/)\n    - [CSS Assignments 📄](https://elzero.org/category/assignments/css-assignments/)\n- [MDN - CSS 📄](https://developer.mozilla.org/en-US/docs/Learn/CSS)\n- [Web.dev - Learn CSS 📄](https://web.dev/learn/css/) ```recommended```\n- [Web.dev - Learn Responsive Design 📄](https://web.dev/learn/design/) ```recommended```\n\n\u003e 💡 Take a look at this repository - [Awesome-CSS-Learning](https://github.com/FADL285/Awesome-CSS-Learning) - A tiny list limited to the best CSS Learning Resources.\n\n\u003cbr /\u003e\n\n**The basics of CSS you need to learn are:**\n\n- Basics, Box Model, Colors \u0026 Gridents, Units :arrow_right: [CSS Fundamentals 📄](https://frontendmasters.com/guides/learning-roadmap/css-fundamentals)\n- Flow, Positioning, Floats, Flex box, Grids :arrow_right: [CSS Layout 📄](https://frontendmasters.com/guides/learning-roadmap/css-layout/)\n- Responsive Design \u0026 Media Queries :arrow_right: [CSS Media Queries 📄](https://frontendmasters.com/guides/learning-roadmap/css-media-queries/)\n- Animations :arrow_right: [CSS Transitions, Transforms \u0026 Animation 📄](https://frontendmasters.com/guides/learning-roadmap/css-transitions-transforms-animations/)\n- Web Fonts, CSS Icons, Google Fonts :arrow_right: [CSS Fonts \u0026 Icons 📄](https://frontendmasters.com/guides/learning-roadmap/css-fonts-and-icons/)\n- CSS Variables \u0026 CSS Practices :arrow_right: [CSS Practices 📄](https://frontendmasters.com/guides/learning-roadmap/css-practices/)\n\n---\n\n## HTML \u0026 CSS - (Resources \u0026 Practice)\n\nIn this section, I will recommend some paid courses and YouTubevideos that explain and build websites using HTML and CSS.\nPlus some websites to practice what you've learned.\n\n**Here are some Paid Courses for HTML \u0026 CSS:** 🎬📃🎬 :dollar::dollar: \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n\n- [Build Responsive Real-World Websites with HTML and CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)\n- [Modern HTML \u0026 CSS From The Beginning (Including Sass)](https://www.udemy.com/course/modern-html-css-from-the-beginning/) :arrow_right: `exclude sass from it now`\n- [CSS - The Complete Guide 2021 (incl. Flexbox, Grid \u0026 Sass)](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/) :arrow_right: `exclude sass from it now`\n\n\u003cbr /\u003e\n\n**Here are some YouTubeVideos for building templates with HTML \u0026 CSS:** \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n\n- [Practical HTML \u0026 CSS - Elzero Web School 📄](https://elzero.org/practical-html-css/)\n    - [HTML And CSS Template 1 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n    - [HTML And CSS Template 2 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAy1l-2A21ng3gxEyocruT0t) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n    - [HTML And CSS Template 3 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAxuCSp2_-9LurPqRVwketnc) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Design Template Using ( HTML 5 - CSS 3 ) - Unique Coderz Academy 🎬📃🎬](https://www.youtube.com/playlist?list=PLtFbQRDJ11kFq3C3I7sKHjXbFru4rx8qs) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Design Responsive Template Using ( HTML - CSS - Media Query ) - Unique Coderz Academy 🎬📃🎬](https://www.youtube.com/playlist?list=PLtFbQRDJ11kG7W2TmVs4gr9FqmZ0Ui551) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)\n    - [Build a Responsive Website | HTML, CSS Grid, Flexbox \u0026 More 🎬](https://youtu.be/p0bGHP-PXD4)\n    - [Build a Modern Landing Page Website | HTML \u0026 CSS 🎬](https://youtu.be/X1dz0xRbSJc)\n    - [Build An HTML5 Website With A Responsive Layout 🎬](https://youtu.be/Wm6CUkswsNw)\n    - [Pluralsight Login Page Clone - HTML \u0026 CSS 🎬](https://youtu.be/wIx1O5Y5EB4)\n- [How To Make Website Using HTML \u0026 CSS | Full Responsive - Easy Tutorials 🎬📃🎬](https://youtu.be/oYRda7UtuhA)\n\n\u003cbr /\u003e\n\n- [ Frontend Masters Web Development Bootcamp ](https://frontendmasters.com/bootcamp/) -\u003e ```included JS```\n\n\u003cbr /\u003e\n\n**Some challenges for what you have learned, Try** 🦾🦾😃\n- [Flexbox Defense Game](http://www.flexboxdefense.com/)\n- [Frontend Mentor](https://www.frontendmentor.io/challenges?sort=difficulty|asc\u0026difficulties=1,2\u0026languages=HTML|CSS\u0026types=free)\n- [Codewell](https://www.codewell.cc/challenges)\n- [CSS Battle](https://cssbattle.dev/)\n- [100 Days CSS](https://100dayscss.com/)\n\n\u003cbr /\u003e\n\n\u003e After Learning HTML \u0026 CSS read this :arrow_right: [HTML Interview Questions 📄](https://www.interviewbit.com/html-interview-questions/) \u0026 [CSS Interview Questions 📄](https://www.interviewbit.com/css-interview-questions/)\n\n---\n\n## JavaScript:\n\nJavaScript is one of the most popular programming languages in the world. It is the language of the web. As a front-end developer, it is required you learn JavaScript. JavaScript enables us to create dynamic content. When you create your HTML structure and your style with your CSS, JavaScript makes the website dynamic and alive.\n\n\u003e 💡💡 Learning Javascript and practicing on it continues with you to the end of the path and will not end.\n\n**On this level, we will learn the basics of JavaScript**\n- [JavaScript Fundamentals](https://frontendmasters.com/guides/learning-roadmap/javascript-fundamentals/)\n- [DOM Manipulation \u0026 BOM](https://frontendmasters.com/guides/learning-roadmap/dom-bom-cssom/)\n- AJAX, Fetch API and JSON\n- [ES6+ \u0026 Modular JS](https://frontendmasters.com/guides/learning-roadmap/javascript-modules-scripts/)\n- [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)\n- [Object-oriented Programming (OOP)](https://frontendmasters.com/guides/learning-roadmap/js-oop/)\n- [Regular Expressions (Regex)](https://frontendmasters.com/guides/learning-roadmap/javascript-regular-expressions/) `general skill`\n- JavaScript Algorithms and Data Structures | Design Patterns\n\n\u003cbr /\u003e\n\n**Here are some resources to learn JavaScript:**\n\n- [MDN - JavaScript 📄](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/)\n- [Learn JavaScript - Elzero Web School 📄](https://elzero.org/learn-javascript/) ✨💫\n  - [Learn JavaScript In Arabic 2021 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [JavaScript Samurai كورس جافاسكربت من الصفر حتى الاحتراف 🎬📃🎬](https://www.youtube.com/playlist?list=PLL2zWZTDFZzgU2x6Kk6w0qx5piLgMODsm) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [JavaScript.INFO 📄](https://javascript.info/intro)\n- [Eloquent JavaScript 📕](https://eloquentjavascript.net/)\n- [Learn JavaScript - Freecodecamp 🎬](https://youtu.be/PkZNo7MFNFg)\n- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)\n    - [JavaScript Crash Course For Beginners 🎬](https://youtu.be/hdI2bqOjy3c)\n    - DOM Crash Course [Part #1 🎬](https://youtu.be/0ik6X4DJKCc) - [Part #2 🎬](https://youtu.be/mPd2aJXCZ2g) - [Part #3 🎬](https://youtu.be/wK2cBMcDTss)     - [Part #4 (Final Project) 🎬](https://youtu.be/i37KVt_IcXw)\n    - [Fetch API Introduction 🎬](https://youtu.be/Oive66jrwBs)\n    - [JSON Crash Course 🎬](https://youtu.be/wI1CWzNtE-M)\n    - [JavaScript OOP Crash Course (ES5 \u0026 ES6) 🎬](https://youtu.be/vDJpGenyHaA)\n- [JavaScript Tutorial for Beginners - Clever programmers 🎬](https://youtu.be/Qqx_wzMmFeA)\n- [JavaScript Tutorial for Beginners - Programming with Mosh 🎬](https://youtu.be/W6NZfCO5SIk)\n- [30 Days of JavaScript repo 📄](https://github.com/Asabeneh/30-Days-Of-JavaScript)\n\n\u003e 💡 Take a look at this repository - [Awesome-JavaScript-Learning](https://github.com/FADL285/Awesome-JavaScript-Learning) - A tiny list limited to the best JavaScript Learning Resources.\n\n\u003cbr /\u003e\n\n**Here are some resources to learn Regular Expressions (Regex):**\n\n- [Regular Expressions Demystified 🎬📃🎬](https://www.youtube.com/playlist?list=PL55RiY5tL51ryV3MhCbH8bLl7O_RZGUUE) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [Regular Expression tutorial - Arabic 🎬📃🎬](https://www.youtube.com/playlist?list=PLwCMLs3sjOY4aVMg7hgQGHyQBZnHgFjJk) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e `The implementation is not in JavaScript but explains the concept of Regex in a nice way`\n- [Regular Expressions (RegEx) Tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [Regular expressions - MDN 📄](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\n\n\u003cbr /\u003e\n\n**Here are some YouTubeVideos for practice on JavaScript.:**\n\n- [JavaScript Practice - Elzero Web School 📄](https://elzero.org/javascript-practice/)\n- [HTML | CSS | JavaScript | Projects - Shadow Coding 🎬📃🎬](https://www.youtube.com/playlist?list=PLS-MrzRLZtmflgWiToSs6jNwYaFK7FnWM) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Build 15 JavaScript Projects - Vanilla JavaScript Course - FreeCodeCamp 🎬](https://youtu.be/3PHXvlpOkf4)\n- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA)\n    - [Build 5 Projects With HTML, CSS \u0026 JavaScript 🎬](https://youtu.be/JkeyKeK3V24)\n    - [Build a Netflix Landing Page Clone with HTML, CSS \u0026 JS 🎬](https://youtu.be/P7t13SGytRk)\n- [Learn JavaScript by Building 7 Games - Full Course - FreeCodeCamp 🎬](https://youtu.be/lhNdUVh3qCc)\n- [Build A Weather App in HTML CSS \u0026 JavaScript | Weather App in JavaScript 🎬](https://youtu.be/c1r-NqYkFPc)\n- [Build A Music App With Javascript Tutorial 🎬](https://youtu.be/2VJlzeEVL8A)\n\n\u003cbr /\u003e\n\n**Here are some Paid Courses for JavaScript:** 🎬📃🎬 :dollar::dollar: \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n\n- [JavaScript - The Complete Guide 2021 (Beginner + Advanced) 🎬📃🎬](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/) ✨💫\n- [Modern JavaScript (Complete guide, from Novice to Ninja) 🎬📃🎬](https://www.udemy.com/course/modern-javascript-from-novice-to-ninja/)\n- [Modern JavaScript From The Beginning  🎬📃🎬](https://www.udemy.com/course/modern-javascript-from-the-beginning/)\n- [50 Projects In 50 Days - HTML, CSS \u0026 JavaScript  🎬📃🎬](https://www.udemy.com/course/50-projects-50-days/)\n\n\u003cbr /\u003e\n\n**Here are some resources to learn JavaScript Algorithms, Data Structures and Design Patterns:**\n\n- [JavaScript Algorithms and Data Structures - freeCodeCamp 📄](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)\n- [JavaScript Algorithms and Data Structures Masterclass 🎬📃🎬  💵💵](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)\n- [Master the Coding Interview: Data Structures + Algorithms 🎬📃🎬  💵💵](https://www.udemy.com/course/master-the-coding-interview-data-structures-algorithms/)\n- [Data Structure : JavaScript (leetcode problem-solving) - Shadow Coding 🎬📃🎬](https://www.youtube.com/playlist?list=PLS-MrzRLZtmdIHJ-Osvv_sJO1Msc4VM_7) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [JavaScript Algorithms and Data Structures 🎬📃🎬](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjPxNAKvZpdnsr41E0fCMMP) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [Learning JavaScript Design Patterns 📄](https://www.patterns.dev/posts/classic-design-patterns/)\n- [JavaScript Design Patterns – Explained with Examples 📄](https://www.freecodecamp.org/news/javascript-design-patterns-explained/)\n- [Design Patterns | javascript 🎬📃🎬](https://www.youtube.com/playlist?list=PLS-MrzRLZtmduTfp_bReagQKg7I-GVr-5) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n\n\u003cbr /\u003e\n\n\u003e After Learning JavaScript read this :arrow_right: [JavaScript Interview Questions 📄](https://github.com/FADL285/javascript-interview-questions) \u0026 [37 Essential JavaScript Interview Questions 📄](https://www.toptal.com/javascript/interview-questions)\n\n---\n\n## Accessibility:\n\nDigital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way.\n\n**Here are some resources to learn HTML:**\n\n- [Learn Accessibility - Web.dev 📄](https://web.dev/learn/accessibility/) ✨💫\n- [Learn Accessibility - MDN 📄](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n- [Web Accessibility - Udacity 🎬📃🎬](https://www.udacity.com/course/web-accessibility--ud891)\n- [Web Accessibility: Getting Started - pluralsight 🎬📃🎬](https://www.pluralsight.com/courses/web-accessibility-getting-started)\n\n---\n\n# Level Two:\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"4\"\u003e\u003cb\u003e🗺️ Content\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#Web-Developer-Tools\"\u003e\u003cb\u003e1- Web Developer Tools\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#Package-Managers\"\u003e\u003cb\u003e2- Package Managers\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#CSS-Architecture\"\u003e\u003cb\u003e3-CSS Architecture\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#CSS-Preprocessors\"\u003e\u003cb\u003e4-CSS Preprocessors\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#CSS-Frameworks\"\u003e\u003cb\u003e5- CSS Frameworks (CSS UI Toolkits)\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#JavaScript-Libraries\"\u003e\u003cb\u003e6-JavaScript Libraries\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## Web Developer Tools:\n\n**Learning Resources**:\n- [Introduction to Dev Tools, v3  🎬📃🎬  💵💵](https://frontendmasters.com/courses/dev-tools/)\n- [Chrome DevTools Docs 📄](https://developer.chrome.com/docs/devtools/)\n- [Google Chrome Developer Tools Crash Course 🎬](https://youtu.be/x4q86IjJFag)\n- [21+ Browser Dev Tools \u0026 Tips You Need To Know 🎬](https://youtu.be/TcTSqhpm80Y)\n\n---\n\n## Package Managers:\n\na package manager is a piece of software that lets you manage the dependencies (external code written by you or someone else) that your project needs to work correctly.\n\n**Learning Resources**:\n- [NPM 📖](https://docs.npmjs.com/)\n    - [NPM Crash Course 🎬](https://youtu.be/jHDhaSSKmB0)\n    - [How To Use [ NPM ] NodeJs Package Manager 🎬](https://youtu.be/OCIRRyBbz_w) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n\n- [Yarn 📖](https://classic.yarnpkg.com/en/docs)\n    - [Yarn Package Manager Crash Course 🎬](https://youtu.be/g9_6KmiBISk)\n    - [Yarn crash course in Arabic 🎬](https://youtu.be/1Sjhc09Q7f8) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n\n- [pnPm 📖](https://pnpm.io/)\n---\n\n## CSS Architecture:\n\n[BEM](http://getbem.com) methodology gives your CSS code a solid structure that remains simple, easy to understand and easy to modify\n\n**Learning Resources**:\n-  [BEM 📄](http://getbem.com/introduction/)\n-  [BEM Cheat Sheet 📄](https://9elements.com/bem-cheat-sheet/)\n-  [Organize your CSS code using BEM 🎬](https://youtu.be/QtX-fPHUSpM) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n-  [You Probably Need BEM CSS in Your Life (Tutorial) 🎬](https://youtu.be/er1JEDuPbZQ)\n\n---\n\n## CSS Preprocessors:\n\nCSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. CSS preprocessors make it easy to automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility.\n\n**Sass** is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes (sass/scss).\n\n**Learning Resources**:\n- [Sass Docs 📖](https://sass-lang.com/documentation)\n- [Sass Fundamentals 🎬📃🎬  💵💵](https://frontendmasters.com/courses/sass/)\n- [Learn Sass - Elzero Web School 📄](https://elzero.org/study/sass-2021-study-plan/) ✨💫\n  - [Learn SASS In Arabic 2021 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAzlpyFHOaB3b-eubmF0TAV2) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Sass Tutorial for Beginners - CSS With Superpowers 🎬](https://youtu.be/_a5j7KoflTs)\n- [Sass and BEM for beginners 🎬](https://youtu.be/jfMHA8SqUL4)\n- [Create Web Design With Sass 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAz9sluuyOWPifXvySgrGma8) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [SASS Tutorial (Build Your Own CSS Library) 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n\n---\n\n## CSS Frameworks:\n\n**Utility Toolkits**\n- [Tailwind CSS 📖](https://tailwindcss.com/)\n  - [Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos) \n  - [Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours 🎬](https://youtu.be/lCxcTsOHrjo)\n  - [Tailwind CSS Course🎬📃🎬](https://www.youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n  - [Tailwind CSS Tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n  - [Laracasts Tailwind](https://laracasts.com/topics/tailwind)\n\n**UI + Utility Toolkits**\n- [Bootstrap 📖](https://getbootstrap.com/)\n    - [Bootstrap 5 Tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PLnD96kXp-_pMJp3stPetkN76AJ2mmeah7) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n    - [Bootstrap 5 Design 01 Bondi 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAyvm7f--dc6XqkpfDcen_vQ) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n    - [Bootstrap 5 Tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n    - [Bootstrap 5 Crash Course | Website Build \u0026 Deploy 🎬](https://youtu.be/4sosXZsdy-s)    \n\n---\n\n## JavaScript Libraries:\n\nA JavaScript library is a library of pre-written JavaScript code that allows for easier development.\n\n\u003e 💡 Search about what you want, and you will find a library to do it. \n\n**Articles about recommended js libraries:**:\n- [10 Awesome JavaScript Libraries You Should Try Out in 2021 📄](https://www.freecodecamp.org/news/10-javascript-libraries-you-should-try/)\n- [39 of the best JavaScript libraries and frameworks to try in 2021 📄](https://getflywheel.com/layout/best-javascript-libraries-frameworks-2020/)\n\n---\n\n# Level Three:\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003cthead align=\"center\"\u003e\n      \u003ctr\u003e\n        \u003ctd colspan=\"3\"\u003e\u003cb\u003e🗺️ Content\u003c/b\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#Module-Bundlers\"\u003e\u003cb\u003e1-Module Bundlers\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd colspan=\"2\"\u003e\n          \u003ca href=\"#JavaScript-Frameworks\"\u003e\u003cb\u003e2-JavaScript Frameworks\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#Testing\"\u003e\u003cb\u003e3-Testing\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#TypeScript\"\u003e\u003cb\u003e4-TypeScript\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003ca href=\"#Progressive-Web-Apps\"\u003e\u003cb\u003e5-Progressive Web Apps (PWA)\u003c/b\u003e\u003c/a\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\n## Module Bundlers:\n\nA JavaScript module bundler compiles small pieces of code (aka modules) into something larger and more complex, such as a library or application.\n\n**Learning Resources**:\n\n- [Vite 📖](https://vitejs.dev/)\n    - [Learn Vite with Evan You 🎬](https://youtu.be/DkGV5F4XnfQ)\n- [Webpack 📖](https://webpack.js.org/)\n    - [Webpack 5 tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PLmZPx_9ZF_sB4orswXdpThGMX9ii2uP7Z) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n    - [How to use Webpack 🎬](https://youtu.be/M3c9R_xSF1o) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n\n---\n\n## JavaScript Frameworks:\n\n\u003e In this section, you will learn about **JavaScript Frameworks**, **JavaScript State Management** and **Server side rendering**.\n\n**JavaScript frameworks:**\n\nJavaScript frameworks are tools designed to speed up development and organize code used to build modern web apps. They exist to solve problems more directly rather than providing an open set of tools like most libraries do.  Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs require framework experience.\n\n**JavaScript State Management:**\n\nState Management helps in updating the UI in related places when there is a change in the application data due to action performed in the application like click, hover, etc. It also helps in making sure that state changes have been incorporated at corresponding places.\n\n**Server side rendering:**\n\nServer-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client's JavaScript bundle takes over which then allows the Vue.js app to hydrate.\n\n---\n\n**Top 3 Javascript Frameworks:**\n\n- [Vue](https://vuejs.org/)\n- [React](https://reactjs.org/)\n- [Angular](https://angular.io/)\n\n\n\u003e 💡 Before you start learning a framework I recommend watching this [tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PLtxOBbrOOPH6Os1EJifSE59Bd5WbL15pn). \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e and this [tutorial 🎬📃🎬](https://www.youtube.com/playlist?list=PLVvjrrRCBy2IDt1Hm8NAiRl_6_io8aS6b).\n\n\n**Learning Resources for Vue.js**:\n\n- [Vue Docs 📖](https://vuejs.org/)\n- [Vue School](https://vueschool.io/)\n- [Vue Mastery](https://www.vuemastery.com/)\n- [Vue Router 📖](https://router.vuejs.org/) -\u003e `Ecosystem: The official Router for Vue.js`\n- [Pinia Docs 📖](https://pinia.vuejs.org/) -\u003e `Ecosystem: The intuitive store for Vue.js`\n- [Vue - The Complete Guide (w/ Router, Vuex, Composition API) 🎬📃🎬  💵💵](https://www.udemy.com/course/vuejs-2-the-complete-guide/)\n- [Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest) 🎬📃🎬  💵💵](https://www.udemy.com/course/complete-vue-js-developer-zero-to-mastery-vuex/)\n- [Vue 3 Crash Course | Project From Scratch 🎬](https://youtu.be/KTFH4P8unUQ)\n- [The Ultimate Vue 3 Tutorial (100% Composition API) 🎬](https://youtu.be/I_xLMmNeLDY)\n- [Build with Ben: Vue 3 and TypeScript Working Session 🎬](https://youtu.be/p1eO5dZnp_Q)\n- [Vue JS 3 Tutorial for Beginners 🎬📃🎬](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgeQIfSDtEGVvvSEPDkL_1f) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [Vue.js 3 Tutorial - The Net Ninja 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [Vue.js Tutorial: Beginner to Front-End Developer 🎬](https://youtu.be/1GNsWa_EZdw)\n\n**Learning Resources For NuxtJS**:\n\nNuxtJS is a Server-Side Vue Framework, with some architectural opinions that can be useful to creating maintainable applications, even if you don’t use any of the Server Side Rendering features it provides.\n\n- [NuxtJS 📖](https://nuxtjs.org/)\n- [Nuxt.js 3 Fundamentals 🎬📃🎬 💵](https://vueschool.io/courses/nuxt-js-3-fundamentals)\n- [Mastering Nuxt 3 🎬📃🎬 💵](https://masteringnuxt.com/)\n- [Nuxt 3 Tutorial - The Net Ninja 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC) \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"100\" /\u003e\n- [The Nuxt 3 Crash Course 🎬](https://youtu.be/dZC4T4UiU1c)\n- [Nuxt 3 - Building a Complete Project 🎬](https://youtu.be/B6hmetsV3yI)\n- [Nuxt 3 full course build and deploy 🎬](https://youtu.be/5dQMQ1BwUyc)\n- [Learn Nuxt 3 — Full course for beginners 2023 🎬](https://youtu.be/ww94Jvi8JJo)\n\n---\n\n**Learning Resources for React.js**:\n\n- [React Docs 📖](https://react.dev/learn)\n  - [React for beginners](https://www.youtube.com/watch?v=1wZoGFF_oi4\u0026list=PLZlA0Gpn_vH_NT5zPVp18nGe_W9LqBDQK\u0026pp=iAQB) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  - [React for beginners](https://www.youtube.com/playlist?list=PLtFbQRDJ11kEjXWZmwkOV-vfXmrEEsuEW) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [React Hooks 📖](https://react.dev/reference/react)\n  - [React Hooks](https://www.youtube.com/playlist?list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  - [React Hooks](https://www.youtube.com/playlist?list=PLtxOBbrOOPH4ro6EXTNHrIvmoNaOcPAwe) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [React Router 📖](https://teachingbee.in/how-to-use-routing-in-react-js/)\n  - [React Router 6](https://www.youtube.com/watch?v=59IXY5IDrBA) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  - [React Router 6](https://www.youtube.com/watch?v=iK2jOarAoE0) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [What is state Management 📖](https://www.techtarget.com/searchapparchitecture/definition/state-management) -\u003e `Read about state management to know what you should learn 👇`\n  - [Redux Toolkit 📖](https://redux-toolkit.js.org/) \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n  - [Recoil 📖](https://recoiljs.org/)\n  - [MobX 📖](https://mobx.js.org/README.html)\n  - [Redux](https://www.youtube.com/watch?v=zrs7u6bdbUw) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  - [Redux Toolkit](https://www.youtube.com/playlist?list=PLejc1JbD4ZFREfrBoSl8tjAPZOY6HNqZv) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n- [Style in React 📖](https://www.robinwieruch.de/react-css-styling/)\n  - [Style Components 📖](https://styled-components.com/)\n  - [Css Modules 📖](https://github.com/css-modules/css-modules)\n  - [Style Components crach course](https://www.youtube.com/watch?v=02zO0hZmwnw) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  - [Material UI 📖](https://mui.com/)\n  - [Material UI crach course](https://www.youtube.com/watch?v=vyJU9efvUtQ) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n- [API Calls 📖](https://www.robinwieruch.de/react-hooks-fetch-data/)\n  -  Rest\n     - [Axios 📖](https://axios-http.com/docs/intro) \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n     - [SWR 📖](https://swr.vercel.app/)\n     - [React Query](https://www.youtube.com/watch?v=novnyCaa7To) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/En%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n  \n  -  GraphQL\n     - [Apollo 📖](https://www.apollographql.com/docs/) \u003cimg src=\"https://badgen.net/badge/Recommended/PR/blue\" alt=\"Personal Recommendation\" width=\"95\" /\u003e\n     - [GraphQL whit React - Apollo client](https://www.youtube.com/watch?v=YyUWW04HwKY) 🎬📃🎬 \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeEnglish Playlist\" width=\"80\" /\u003e\n     - [Relay 📖](https://relay.dev/)\n     - [URQL 📖](https://formidable.com/open-source/urql/docs/)\n\n---\n## Testing:\n\nLearn the difference between Unit, Integration, and Functional tests and learn how to write them.\n\n**Learning Resources For unit testing with Vitest**:\n- [Vitest Docs 📖](https://vitest.dev/)\n  - [Learn Vitest and Testing Library In 40 Minutes 🎬](https://youtu.be/FJRuG85tXV0)\n  - [Fast Unit Testing With Vitest 🎬](https://youtu.be/FDEf3iWEgFI)\n\n**Learning Resources For unit testing with Jest**:\n- [Jest Docs 📖](https://jestjs.io/)\n- [JavaScript Unit Testing With Jest 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAwSrfBPERTnCmWAbcMAwG9O) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e\n- [Jest Cheatsheet - Devhints 📄](https://devhints.io/jest)\n\n\u003e [JavaScript Unit Testing - The Practical Guide 🎬📃🎬💵💵](https://www.udemy.com/course/javascript-unit-testing-the-practical-guide/) - Learn how to write automated tests (unit \u0026 integration tests) with Vitest \u0026 Jest.  \n\n---\n\n## TypeScript:\nTypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.\n\n**Visit the following resources to learn more:**\n\n- [What Is TypeScript? 📄](https://thenewstack.io/what-is-typescript/)\n- [Official Website 📖](https://www.typescriptlang.org/)\n- [Learn TypeScript - Elzero Web School 📄](https://elzero.org/study/typescript-study-plan/) ✨💫\n  - [Learn TypeScript In Arabic 2022 🎬📃🎬](https://www.youtube.com/playlist?list=PLDoPjvoNmBAy532K9M_fjiAmrJ0gkCyLJ) \u003cimg src=\"https://img.shields.io/badge/Ar%20Playlist-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTubeArabic playlist\" width=\"80\" /\u003e \n- [TypeScript Course for Beginners - Learn TypeScript from Scratch! 🎬](https://youtu.be/BwuLxPH8IDs)\n- [Learn TypeScript – Full Tutorial 🎬](https://youtu.be/30LWjhZzg50)\n- [Understanding TypeScript 🎬📃🎬 💵💵](https://www.udemy.com/course/understanding-typescript/)\n\n---\n\n## Progressive Web Apps:\n\n- What is PWA? [Web.dev 📄](https://web.dev/what-are-pwas/)\n\n**Learning Resources:**\n\n- [Progressive Web Apps 📄](https://web.dev/progressive-web-apps/)\n- [Learn PWA - web.dev 📄](https://web.dev/learn/pwa/)\n- [PWA Tutorial for Beginners 🎬📃🎬](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gTxqJBcDmoi5Q2pzDusSL7)\n- [Progressive Web Apps (PWA) - The Complete Guide 🎬📃🎬  💵💵](https://www.udemy.com/course/progressive-web-app-pwa-the-complete-guide/)\n\n---\n\n# What Next:\n\nAlways Keep Learning, Practice more, and don't stop.\n\n---\n\n\u003cbr /\u003e\n\n\u003ch2  align=\"center\"\u003e📫 Reach me on\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\"href=\"https://github.com/FADL285\"\u003e\n    \u003cimg alt=\"Github\" src=\"https://img.shields.io/badge/GitHub-%2312100E.svg?\u0026style=for-the-badge\u0026logo=Github\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca target=\"_blank\"href=\"https://www.linkedin.com/in/FADL285\"\u003e\n    \u003cimg alt=\"LinkedIn\" src=\"https://img.shields.io/badge/linkedin-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca target=\"_blank\"href=\"https://twitter.com/FADL285\"\u003e\n    \u003cimg alt=\"Twitter\" src=\"https://img.shields.io/badge/twitter-%231DA1F2.svg?\u0026style=for-the-badge\u0026logo=twitter\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"mailto:Mohamed.Fadl.Farag@gmail.com\"\u003e\n    \u003cimg alt=\"Gmail\" src=\"https://img.shields.io/badge/gmail-%23D14836.svg?\u0026style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003c/p\u003e\n","funding_links":[],"categories":["Projects"],"sub_categories":["Roadmap"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFADL285%2FFront-End-Development-Roadmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFADL285%2FFront-End-Development-Roadmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFADL285%2FFront-End-Development-Roadmap/lists"}