dev tools
Here are the best websites and platforms for web developers — whether you want to learn, find components, get inspiration, debug, or stay up-to-date.
⭐ Best Websites for Web Coders (by category)
Section titled “⭐ Best Websites for Web Coders (by category)”📘 Learn & Improve Skills
Section titled “📘 Learn & Improve Skills”1. MDN Web Docs
Section titled “1. MDN Web Docs”The bible of web development. https://developer.mozilla.org ✔ HTML, CSS, JS ✔ Clear examples ✔ Always updated
2. W3Schools
Section titled “2. W3Schools”Beginner-friendly tutorials. https://w3schools.com
3. FreeCodeCamp
Section titled “3. FreeCodeCamp”Full free complete courses with certifications. https://freecodecamp.org
4. Frontend Masters / Udemy
Section titled “4. Frontend Masters / Udemy”Paid but excellent courses.
🧩 UI Components & Code Snippets
Section titled “🧩 UI Components & Code Snippets”5. Tailwind UI + Shadcn
Section titled “5. Tailwind UI + Shadcn”Great components, production-ready.
6. Flowbite
Section titled “6. Flowbite”Tailwind-based components (free + paid).
7. UIverse
Section titled “7. UIverse”Copy-paste CSS buttons, loaders, cards. https://uiverse.io
8. CodePen
Section titled “8. CodePen”Live code examples, inspiration. https://codepen.io
9. CSS-Tricks
Section titled “9. CSS-Tricks”Articles, snippets, tricks for CSS. https://css-tricks.com
🛠 Tools for Developers
Section titled “🛠 Tools for Developers”10. StackOverflow
Section titled “10. StackOverflow”Ask questions, search solutions.
11. Can I Use
Section titled “11. Can I Use”Compatibility table for CSS/JS features. Essential. https://caniuse.com
12. DevDocs
Section titled “12. DevDocs”Documentation viewer with offline mode. https://devdocs.io
13. GitHub
Section titled “13. GitHub”Code hosting, templates, starter kits.
🎨 Design Resources (Icons, Images, Illustrations)
Section titled “🎨 Design Resources (Icons, Images, Illustrations)”14. Iconify
Section titled “14. Iconify”Best universal icon platform. https://icon-sets.iconify.design
15. Heroicons / Tabler Icons / Lucide
Section titled “15. Heroicons / Tabler Icons / Lucide”Modern icons for web.
16. Freepik
Section titled “16. Freepik”Free images, icons, vectors. https://freepik.com
17. Undraw
Section titled “17. Undraw”Free illustrations (SVG). https://undraw.co
18. Pexels / Unsplash
Section titled “18. Pexels / Unsplash”Free high-quality photos.
🧪 Testing & Performance
Section titled “🧪 Testing & Performance”19. Lighthouse (Chrome)
Section titled “19. Lighthouse (Chrome)”Audit performance, accessibility, SEO.
20. GTMetrix
Section titled “20. GTMetrix”Performance tests.
21. WebPageTest
Section titled “21. WebPageTest”Advanced web performance analysis.
📰 News & Trends
Section titled “📰 News & Trends”22. Hacker News
Section titled “22. Hacker News”Dev-oriented news. https://news.ycombinator.com
23. Smashing Magazine
Section titled “23. Smashing Magazine”Articles for web dev & design.
24. Reddit /r/webdev /r/frontend
Section titled “24. Reddit /r/webdev /r/frontend”Community discussions.
🎁 Bonus: Astro / Svelte / Next.js ecosystem
Section titled “🎁 Bonus: Astro / Svelte / Next.js ecosystem”(You use Astro → here are the best resources)
- astro.build/integrations
- starlight.astro.build
- awesome-astro (list of resources)
Svelte
Section titled “Svelte”- sveltesociety.dev
- svelteui.org (UI components)
React / Tailwind
Section titled “React / Tailwind”- shadcn/ui
- Tailwind components (tailwindcomponents.com)
If you want, tell me what type of web coding you focus on (Astro? Svelte? React? UI? Backend?) and I’ll give you a custom list just for you.