Why Bookmark Matters
The web development ecosystem moves fast, but the best tools tend to stay useful for years. Here's a curated list of genuinely valuable, free resources — organized by category — that belong in every developer's toolkit.
Documentation & Reference
- MDN Web Docs (developer.mozilla.org) — The gold standard reference for HTML, CSS, and JavaScript. Always accurate, always thorough.
- DevDocs.io — Aggregates documentation for dozens of languages and frameworks in one fast, searchable interface. Works offline too.
- Can I Use (caniuse.com) — Check browser compatibility for any CSS or JavaScript feature before shipping it.
Code Editors & Playgrounds
- CodePen — Browser-based HTML/CSS/JS playground. Great for prototyping and sharing snippets.
- StackBlitz — Full Node.js dev environment in the browser. Supports React, Vue, Svelte, and more.
- Playcode.io — Lightweight and fast JavaScript playground with live preview.
CSS Tools
- CSS Grid Generator (cssgrid-generator.netlify.app) — Visually build Grid layouts and copy the code.
- Flexbox Froggy (flexboxfroggy.com) — Learn Flexbox through a fun game — still one of the best ways to internalize it.
- Coolors.co — Generate, explore, and export color palettes in seconds.
- Uicolors.app — Generate Tailwind-compatible color scales from any hex color.
API Testing & HTTP Tools
- Hoppscotch (hoppscotch.io) — A fast, open-source, browser-based API client. A great free alternative to Postman.
- httpbin.org — A simple HTTP request and response testing service. Incredibly useful for debugging.
- JSONPlaceholder (jsonplaceholder.typicode.com) — Fake REST API for testing and prototyping. Returns realistic-looking JSON data.
Performance & Auditing
- PageSpeed Insights (pagespeed.web.dev) — Google's tool for analyzing page speed and Core Web Vitals.
- GTmetrix — Detailed performance reports with waterfall charts and recommendations.
- WebPageTest — Advanced performance testing from real browsers in multiple global locations.
Image & Asset Optimization
- Squoosh (squoosh.app) — Compress and convert images in the browser with before/after comparison.
- SVGOMG (jakearchibald.github.io/svgomg) — Optimize SVG files to reduce their size significantly.
- Undraw.co — Free, customizable SVG illustrations for any project.
Learning Platforms
| Platform | Best For | Free Tier |
|---|---|---|
| freeCodeCamp | Full curriculum, certifications | Fully free |
| The Odin Project | Structured full-stack path | Fully free |
| Scrimba | Interactive coding lessons | Generous free tier |
| JavaScript.info | Deep JS fundamentals | Fully free |
| CSS-Tricks | CSS techniques & almanac | Fully free |
Version Control & Collaboration
- GitHub — Essential for version control, open source contributions, and code storage.
- Conventional Commits (conventionalcommits.org) — A specification for writing structured, human-readable commit messages.
Keep Your Toolkit Lean
It's tempting to bookmark everything. The better approach: pick one tool per category that fits your workflow, learn it deeply, and only add new tools when you identify a genuine gap. A small, mastered toolkit beats a large, unused one every time.