This comprehensive roadmap guides aspiring Front-End Developers through a structured learning journey.

1. Fundamentals

• [x] Tools & Environment Setup (VSCode, Browser DevTools, Prettier, etc…)
• [x] Beginner Questions (What is frontend? HTML vs CSS vs JS? Roadmap basics)

<aside> 💡

Core Languages

• [x] Learn HTML deeply (Forms, Tables, Semantic Tags, Accessibility Basics)
• [x] Learn CSS (Selectors, Flexbox, Grid, Positioning)
• [x] 4 small projects with HTML + CSS (Elzero Web School)
• [x] Learn JavaScript (ES6+) (DOM, Events, Fetch API, Async/Await, Modules)
• [x] Practical JavaScript Apps (To-do app, Calculator, Weather App, Quiz App, playlist)
• [x] Full Website with Vanilla JavaScript only (ex videos, code github) </aside>

2. Responsive Design (With Frameworks)

The difference between bootstrap and tailwind ⇒ https://www.youtube.com/watch?v=iV3Wvr0djkQ&t=156s

• Option 1: Bootstrap CSS (Tarmeez Academy, Abdo Gamal, Courses4Arab, Elzero)
• Option 2: Tailwind CSS (Tarmeez Academy, Documentation)

Advanced Libraries:

• Headless UI (https://headlessui.com/)
• Material UI (https://mui.com/material-ui/)
• Chakra UI (https://chakra-ui.com/)

3. JavaScript Framework (React.js)

• [x] React Basics (Components, Props, State, Hooks, Routing, Context API)
• [x] React Advanced (Performance, Code Splitting, Custom Hooks, Error Boundaries)

Source Videos ⇒ (Tareez Academy, CodeZone, Nageeb Darwish)

• [x] Work on some projects like (ecommerce app)

4. Advanced Frontend Engineer

• [x] TypeScript (Elzero, SimpleArabCode)
• [x] Synchronous vs Aynchronous
• [x] Component Lifecycle
• [x] Mastering-Api by building a Full Stack Project (Todo App Using Strapi)
• [x] Performance and Optimization
• [x] Redux Toolkit for state management (You will learn it while studying the react playlists)