README.md

Frontend Developer Learning Roadmap

This document outlines a well-structured learning plan to build and strengthen your frontend development skills using HTML, CSS, JavaScript, React, and key web concepts.

---

🌐 HTML & CSS

1. Videos to Watch:

   • HTML & CSS Playlist (Watch First 6 Videos)
   • HTML Tutorial for Beginners: HTML Crash Course – Complete this entire project.
   • Learn CSS in 20 Minutes
   • HTML & CSS Playlist (Watch videos 8, 9, 10)

---

🔨 JavaScript (JS)

1. Tutorials:

   • JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour
   • JavaScript Shopping Cart Tutorial for Beginners – Complete this project.
   • Vanilla JS Machine Coding Challenges

2. Daily JS Concepts:

   • How to FETCH data from an API using JavaScript
   • Learn Fetch API In 6 Minutes
   • Async/Await in JavaScript | Tutorial in Hindi #59
   • Error Handling: try and catch | Tutorial in Hindi #60
   • Async Await vs. Promises - JavaScript Tutorial

---

⛺️ React

1. React Basics:

   • Introduction to React Js + Installation | Complete React Course in Hindi #1 – Watch till video #38.
   • Aim to watch at least 5 videos per day.

2. React Projects:

   • React JS Interview Questions – Job Board (GreatFrontEnd)
   • React JS Interview Questions – Grid Lights (GreatFrontEnd)
   • Frontend System Design – Toast Component (HLD, LLD)
   • React with Supabase Authentication
   • JWT Authentication Tutorial - Node.js

---

🧠 Web Concepts

1. JavaScript Cookies vs Local Storage vs Session Storage
2. Difference between cookies, session and tokens
3. What Is JWT and Why Should You Use JWT
4. DOM API - JavaScript Tutorial for beginners
5. JavaScript Event Listeners
6. Event Bubbling, Capturing aka Trickling in Javascript

---

🔧 Projects – Vanilla JS

1. Drag Elements:

   • Drag & Drop with Javascript in 4 minutes
   • Build Sortable Drag & Drop With Vanilla JS

---

🛠️ Tools

1. Chrome DevTools – DevTools Playlist
2. Network Tab - Inspect Network Activity

---

📚 Interview Preparation

1. React + Frontend Interview Questions – GreatFrontEnd Projects
2. Frontend System Design – Toast Component
3. NodeJS JWT Authentication – Tutorial
4. Sai Ram Somanaboina's LinkedIn Post

---

🌍 REST API Concepts (Daily)

• REST API Playlist

---

📺 YouTube Channels to Follow

• Roadside Coder

---

⚡️ Tip: Stay consistent. Watch at least one video every day from either JavaScript, React, or REST API sections.

---

Happy Learning! 🚀