📚 Developer Resources Roadmap (2025–2026)

A clean, modern, and curated full-stack learning library. Designed for real-world development, long-term growth, and modern stacks. Save as dev-roadmap/RESOURCES.md • Review monthly

---

✨ How to Use This Roadmap

This is not a link dump. It’s a system.

1. Learn → Build → Repeat Read docs, then immediately apply the concept.
2. Docs First, Videos Second Official docs teach correctness. Videos add intuition.
3. Small Projects Only Every section should produce something tangible.
4. Revisit Often Re-reading docs is a senior-level habit.
5. Track Progress Check off sections as you complete them.

---

🧭 Suggested Learning Timeline

Phase	Focus
Phase 1	HTML, CSS, Web Fundamentals
Phase 2	JavaScript (ES6+)
Phase 3	React + Modern Frontend
Phase 4	Next.js + Full-Stack Patterns
Phase 5	TypeScript Everywhere
Phase 6	Backend APIs + Databases
Phase 7	Auth, Security, DevOps
Ongoing	Projects, Refactoring, Scaling

---

🏷️ Legend

Icon	Meaning
⭐️	Core / Mandatory
📘	Recommended / Deep Dive
✅	Optional / Extra

---

🌐 Core Reference Websites

Icon	Resource	Why It Matters
⭐️	MDN Web Docs	The gold standard for web fundamentals
⭐️	DevDocs	Offline, fast, multi-language docs
📘	freeCodeCamp	Structured learning + practice
📘	Stack Overflow	Real-world problem solving
✅	DEV.to	Modern dev discussions
✅	Smashing Magazine	UI, UX, performance insights

---

🎨 Frontend Foundations

HTML & CSS

Icon	Resource	Notes
⭐️	MDN HTML	Semantic, accessible markup
⭐️	MDN CSS	Layout, responsiveness, modern CSS
📘	CSS-Tricks Almanac	Practical layout references
📘	HTML / CSS Cheat Sheets	Fast syntax recall
✅	Flexbox Froggy	Learn Flexbox visually
✅	Grid Garden	Learn CSS Grid visually

Tailwind CSS

Icon	Resource	Notes
⭐️	Tailwind Docs	Utility-first CSS done right
📘	Tailwind Play	Experiment instantly
📘	Tailwind Cheat Sheet	Productivity booster
✅	Headless UI	Accessible components
✅	shadcn/ui	Modern React + Tailwind components

---

⚙️ JavaScript (ES6+)

Icon	Resource	Notes
⭐️	JavaScript.info	Best structured JS guide
⭐️	MDN JavaScript	Language reference
📘	Eloquent JavaScript	Deep understanding
📘	You Don’t Know JS Yet	JS internals
✅	JS Visualizer	Understand execution & scope

---

🔷 TypeScript

Icon	Resource	Notes
⭐️	TypeScript Handbook	Official, must-read
⭐️	TypeScript Deep Dive	Practical mastery
📘	Type Challenges	Think in types
📘	Total TypeScript (Free Content)	Real-world patterns
✅	TS Playground	Instant experimentation

---

⚛️ React & Modern Frontend

Icon	Resource	Notes
⭐️	React Docs	Hooks, mental model
⭐️	React.dev Learn	Modern React patterns
📘	React Hooks Cheatsheet	Fast recall
📘	Epic React Patterns (Free)	Advanced composition
✅	React DevTools	Debugging superpower

---

▲ Next.js (Full-Stack React)

Icon	Resource	Notes
⭐️	Next.js Docs	App Router, Server Actions
⭐️	Next.js Learn	Guided tutorials
📘	Vercel Examples	Production patterns
📘	Web.dev (Rendering)	Performance & SSR
✅	Open Source Next.js Apps	Learn by reading code

---

🛠 Backend Development

Node.js

Icon	Resource	Notes
⭐️	Node.js Docs	Runtime fundamentals
⭐️	Node Best Practices	Security & performance
📘	NodeSchool	Interactive learning
✅	RunKit	Quick experiments

APIs & HTTP

Icon	Resource	Notes
⭐️	HTTP Semantics (MDN)	Proper API design
⭐️	Postman	API testing
📘	Hoppscotch	Lightweight alternative
📘	curl	CLI mastery

---

🗄 Databases & Data Layer

Icon	Resource	Notes
⭐️	PostgreSQL Docs	Production-grade SQL
⭐️	SQLBolt	Learn SQL fast
📘	Database Design Basics	Schema thinking
📘	Prisma Docs	Type-safe ORM
✅	Drizzle ORM	Lightweight alternative

---

🔐 Authentication & Security

Icon	Resource	Notes
⭐️	OWASP Top 10	Security fundamentals
⭐️	Auth.js Docs	Modern auth for Next.js
📘	JWT.io	Token-based auth
📘	WebAuthn Guide	Passwordless future
✅	OAuth 2.0 Simplified	Understand flows

---

🚀 DevOps, Deployment & Scaling

Icon	Resource	Notes
⭐️	Vercel Docs	Frontend deployment
⭐️	Railway Docs	Full-stack hosting
📘	Docker Docs	Containers explained
📘	Docker Curriculum	Learn by doing
📘	GitHub Actions	CI/CD automation
✅	12-Factor App	Cloud-native design

---

🤖 Discord Bots & Automation

Icon	Resource	Notes
⭐️	Discord Developer Docs	API fundamentals
⭐️	discord.js Guide	Best JS library
📘	Interactions & Slash Commands	Modern bot UX
✅	Redis Docs	Caching & rate limits

---

🦀 Rust (Optional but Powerful)

Icon	Resource	Notes
⭐️	The Rust Book	Core language
📘	Rust by Example	Learn by code
📘	Rustlings	Hands-on exercises
✅	Rust Playground	Quick tests

---

🧾 Cheat Sheets & Quick References

• OverAPI — aggregated cheat sheets
• Devhints — JS, React, HTTP, Regex
• Git Cheat Sheet — GitHub Education
• HTTP Status Codes — memorize meanings
• Regex Reference — essential skill

---

🎥 High-Quality Video Resources

Topic	Creator
HTML & CSS	Traversy Media
JavaScript	freeCodeCamp
React	freeCodeCamp
Next.js	Vercel & Traversy
Backend	Academind
Docker	TechWorld with Nana
Overviews	Fireship (100s series)

---

🧠 Study Rules (Read This Twice)

• Build more than you watch
• Refactor old projects regularly
• Push everything to GitHub
• Read docs even when you think you know it
• Consistency beats intensity

---

This roadmap favors depth, correctness, and modern practices. Master the fundamentals, then scale your complexity.