Suggest list of free resources, including websites, books, and tutorials, to help you become a frontend developer in 2025

Here’s a curated list of free resources, including websites, books, and tutorials, to help you become a frontend developer in 2025:

---

Github Link:

• https://github.com/dypsilon/frontend-dev-bookmarks
• https://github.com/web-padawan/awesome-web-components
• https://github.com/thedaviddias/Front-End-Checklist
• https://github.com/kamranahmedse/developer-roadmap
• https://github.com/trendmicro-frontend/awesome

1. Core Foundations

HTML & CSS

• Websites:

  • MDN Web Docs - HTML
  • MDN Web Docs - CSS
  • freeCodeCamp - Responsive Web Design

• Tutorials:

  • HTML & CSS Crash Course (Traversy Media)
  • Kevin Powell’s YouTube Channel (CSS Tips)

• Books:

  • HTML & CSS: Design and Build Websites by Jon Duckett (Available in some libraries or online PDF)

---

JavaScript (ES6+)

• Websites:

  • JavaScript.info
  • Eloquent JavaScript (Free online book)
  • freeCodeCamp - JavaScript Algorithms and Data Structures
  • Programming with Mosh
  • Vanilla Javascript

• Tutorials:

  • JavaScript Full Course (freeCodeCamp)
  • Traversy Media - JavaScript Crash Course

• Books:

  • You Don’t Know JS (YDKJS) series by Kyle Simpson (Free on GitHub: Link)

---

2. CSS Mastery

• Websites:

  • CSS Tricks
  • Learn CSS (Web.dev)

• Tutorials:

  • CSS Grid and Flexbox (Traversy Media)
  • Free CSS Flexbox and Grid Games

---

3. Frontend Frameworks and Libraries

React.js

• Websites:

  • React Official Documentation
  • freeCodeCamp - Front End Development Libraries

• Tutorials:

  • React Crash Course (Traversy Media)
  • The Net Ninja - React Tutorials

• Books:

  • Fullstack React (Older editions available online for free or in libraries)

---

4. TypeScript

• Websites:

  • TypeScript Documentation
  • freeCodeCamp - TypeScript Handbook

• Tutorials:

  • TypeScript Crash Course (Traversy Media)
  • TekTutorialsHub-Logo

---

5. Modern Frontend Frameworks

Next.js

• Websites:

  • Next.js Official Documentation
  • Learn Next.js (Vercel)

• Tutorials:

  • Next.js Crash Course (Traversy Media)

---

6. Performance & Testing

• Websites:

  • Google Web Dev Guides (Performance)
  • Jest Documentation

• Tutorials:

  • Cypress End-to-End Testing

---

7. UI/UX Design

• Websites:

  • DesignCourse YouTube Channel
  • Figma for Beginners

• Books:

  • Don’t Make Me Think by Steve Krug

---

8. Bonus Resources

• Newsletters and Blogs:

  • Smashing Magazine
  • Frontend Focus

• Open Source Contribution:

  • First Timers Guide to Open Source

• Projects for Practice:

  • Frontend Mentor
  • freeCodeCamp Projects

• Communities:

  • Dev.to
  • Reddit - WebDev

---