To celebrate all the amazing free resources that people throughout the world have created, I am paying homage to this good work by creating an infallible list of the online tools built for frontend developers 2021 edition! This list encompasses the tool you just have to get your hands on! Below lists the 50 best tools for developers who want to put their best work forward!
🎨 CSS, Design, Accessibility and Images
- a11y Project - Accessibility checklsit
- Colour Palettes - Good to get HEX colours and inspiration.
- Colors Wall -Get inspiration for colour parings
- CSS Arrow Please - Generator for nice looking CSS arrows
- CSS Spinners - Copy and paste these snippets to get nice spinners working on your site
- CSS Transforms - CSS transform builder
- Dummy Image - Create placeholder images for your site
- DuoTone - Add contrasting colors onto images
- Glass Morphism - Create frosted glass aesthetic panels
- Patternizer - Create CSS patterns
- Unminify - Unminify Javascript
- Wheel - Color picker
Who Can Use - Browser compatibility list
🔬 Research & Inspiration
Dribble - Project inspiration ideas
- NPM Trends - See which packages are trending
- Octoverse - State of the tech nation
- StackOverflow Trends - Find latest tech trends by StackOverflow usage
- Star History - Find how many times something has been starred over time. Useful to see if something is trending or not.
State Of JS - Find out what frameworks are trending
🎮 Learning Through Games
CSS Diner - Learn CSS
- Flexbox Defense - Learn Flexbox
- Flexbox Froggy - Learn Flexbox
- Flexbox Adventure - Learn Flexbox
GridGarden - Learn CSS Grid
📝 Developer Docs
- MDN Web
- Should I Prefix
🐱💻 Source Control
GIT Explorer - Find the correct GIT command that you need without digging through the web.
Learn GIT Branching - Learn GIT through a game
🛎️ Utilities
2020 Ipsum - Lorum Ipsum generator
- CDN JS - Lsit of CDN links to popular JS libraries
- CodePen - CSS, HTML, JavaScript scratch-pad
- DeLorean Ipsum Text Generator - Lorum Ipsum generator
- JSON Formatter - Format JSON nicely
- JSON Generator - JSON generator from code
- JSON Placeholder - Fake API for testing and prototyping
- Mocki.io - Mock an API
- Page Speed Insights - Page Optimsation tool
- Regexr - Validate Regexs
- SVGOMG - SVG editor
💼 Career Tips (UK)
- Contractor Calculator
- IT Jobs Watch - Find out the average salary
- Salary Data & Career Research Cente
- StackOverFlow Job Calcaultor
- UK Tax Calculator
🌐 Icons
🔒 Security & Networking
- Have I Been Pwned - Check your email privacy
- Many Tool - Ping, DNS Look-up, etc..
- MX Toolbox - Ping, DNS Look-up, etc..
- OWASP Top 10 - Security checklist
- What is My IP? - Find your current IP
Hope you found something interesting on the list. Bookmark it so you can reference it easily! Happy Coding 🤘
