Front-end Resources

A collection of useful tools and websites for front-end web developers.

Validators

• https://validator.w3.org/ - W3C Markup Validator
• https://jigsaw.w3.org/css-validator/ - W3C CSS Validator

Color Tools

• https://coolors.co/app - Color Palette Generator
• https://flatuicolors.com/ - Flat UI Colors
• https://webgradients.com/
• http://www.uigradients.com/

Free Icons

• https://icomoon.io/
• https://lineicons.com/

Offline SVG Sprite Sheet Generator

• https://github.com/thomasjbradley/spritebot

Open-Source Illustrations

• https://undraw.co/illustrations

Online Image Manipulation Tools

• https://imageresize.org/
• https://imagecompressor.com/ - Compress up to 20 images at a time

Online Favicon Generator

• https://www.favicon-generator.org/

Responsive Testing Tools

• https://sizzy.co/
• http://quirktools.com/screenfly/

Screen Reader

• https://www.nvaccess.org/ - Free screen reader for Microsoft Windows

Prototyping Tool

• https://www.adobe.com/products/xd.html - Free software from Adobe

Online CSS Tools

• https://autoprefixer.github.io/
• https://cssminifier.com/

JavaScript Coding Challenges

• https://javascript30.com/
• https://www.codewars.com/

Online Cheatsheets

• https://devhints.io/

Offline Documentations

• https://zealdocs.org/

Performance Testing

• https://web.dev/
• https://gtmetrix.com/

Google Analytics

• https://analytics.google.com/analytics/web/

Deployment

• https://pages.github.com/
• https://www.netlify.com/
• https://surge.sh/

Domain Name Registration

• https://domains.google/
• https://www.namecheap.com/

Chrome Extensions

• ColorPick Eyedropper - Color Picker
• JSON Viewer - JSON Beautifier
• axe - Accessibility Testing
• ChromeVox - Screen Reader by Google

Free Courses

• https://classroom.udacity.com/courses/ud891 - Web Accessibility by Google
• https://www.edx.org/course/cs50s-introduction-to-computer-science - CS50's Introduction to Computer Science by Harvard
• https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript - CS50's Web Programming with Python and Javascript

YouTube Channels

• https://www.youtube.com/user/ChromeDevelopers - Google Chrome Developers
• https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA - W3C Web Accessibility Initiative
• https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA - Brad Traversy
• https://www.youtube.com/channel/UCrqAGUPPMOdo0jfQ6grikZw - Colt Steele
• https://www.youtube.com/user/13rOzProductions - Ian Schoonover
• https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w - Academind
• https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg - Net Ninja
• https://www.youtube.com/user/programmingwithmosh - Programming with Mosh
• https://www.youtube.com/user/hellomayuko - mayuko

Podcasts

• https://podcast.freecodecamp.org/ - The freeCodeCamp Podcast
• https://www.codenewbie.org/podcast - CodeNewbie Podcast

Subreddits

• https://www.reddit.com/r/Frontend/
• https://www.reddit.com/r/webdev/

GitHub Repositories

• https://github.com/kamranahmedse/developer-roadmap - Developer Roadmap
• https://github.com/LisaDziuba/Awesome-Design-Tools - Awesome Design Tools
• https://github.com/h5bp/Front-end-Developer-Interview-Questions - Front-end Developer Interview Questions
• https://github.com/thedaviddias/Front-End-Checklist - Front-end Checklist
• https://github.com/thedaviddias/Front-End-Performance-Checklist - Front-end Performance Checklist
• https://github.com/30-seconds/30-seconds-of-css - CSS Snippets

Other Resources

• https://frontendmasters.com/books/front-end-handbook/2019/ - Front-end Handbook 2019
• https://research.hackerrank.com/developer-skills/2019 - HackerRank 2019 Developer Skills Report
• https://www.w3.org/TR/WCAG21/ - Web Content Accessibility Guidelines (WCAG) 2.1
• https://carbon.now.sh/ - Create and share beautiful images of your source code