📚 JavaScript + React Learning Plan
Day 1 – Basics
- ⏰ 8PM–9:30PM
- ✅ Learn: Variables, Data Types,
console.log()
- 🛠 Project: Console Diary (use
alert
and prompt
)
Day 2 – Conditions & Loops
- ✅ if/else, loops
- 🛠 Project: Build a mini quiz game
Day 3 – Functions
- ✅ Learn
function
, parameters, return
- 🛠 Project: Tip calculator
Day 4 – Arrays & Objects
- ✅ Arrays, object creation, looping
- 🛠 Project: Task list manager
Day 5 – DOM & Events
- ✅ Learn:
getElementById()
, click events
- 🛠 Project: Theme switcher or calculator
Day 6 – Forms + Input Handling
- ✅ Handle forms with JS
- 🛠 Project: Contact form with live error check
Day 7 – Final JS Project
- 🛠 Build: Personal expense tracker (store in localStorage)
- ✅ Review & organize JS files
⚛️ React Week (Day 8 - 14)
Day 8 – Setup & JSX
- ✅ Install Node + Create React App
- 🛠 Project: Personal info card using JSX
Day 9 – Props & Reusable Components
- ✅ Learn: Props, component structure
- 🛠 Project: Product card grid (use dummy data)
Day 10 – useState
- ✅ Learn:
useState
for dynamic content
- 🛠 Project: Counter, light/dark mode toggle
Day 11 – Lists + Conditional Rendering
- ✅ Learn: map(), ternary operations
- 🛠 Project: FAQ Accordion
Day 12 – Forms + Events
- ✅ Controlled inputs, submit events
- 🛠 Project: Signup Form with real-time validation
Day 13 & 14 – Final Project
- 🛠 Project: Build full app (Weather app, Portfolio, Expense Tracker)
- 📦 Deploy on Vercel or Netlify
🔐 Cybersecurity – Daily Learning (1 hr)
- ✅ Learn Linux commands and terminal basics
- ✅ Practice with TryHackMe (start with Pre Security path)
- ✅ Learn Networking, OWASP Top 10
- 🛠 Create: Simple login form with validation + hashing (practice security concepts)
💼 Freelance & Money Accounts to Register
📜 Smart Scripts to Learn
- ✅ Contact Form Validator (JS)
- ✅ Image Gallery with Filters
- ✅ Currency Converter using API
- ✅ Password Generator
- ✅ Login form with localStorage
- ✅ React Weather App using OpenWeatherMap API
- ✅ Cyber script: Hash checker with SHA-256 (in JS)