DEV Community

loading...
Cover image for Resources for Frontend Developers

Resources for Frontend Developers

jatinrao profile image Jatin Rao ・Updated on ・4 min read

Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some great free and up-to-date resources!


HTML

Resource Description
W3C Markup Validator Check the markup of Web documents
Meta Tags Preview, edit, and generate meta tags
Favicon Generator Convert any GIF, PNG, or JPG to ICO

CSS

Resource Description
W3C CSS Validator CSS Validation Service
Animate.css Just-add-water CSS animations
animista CSS animations on demand
CSSeffectsSnippets A collection of CSS effects
SpinKit A collection of loading indicators animated with CSS
CSS Minifier Online CSS minifier/compressor

JAVASCRIPT

Resource Description
JavaScript 30 Build 30 things with vanilla JS in 30 days
Codewars Improve your skills by training with others on real code challenges
ESLint Find and fix problems in your JavaScript code
Prettier Opinionated Code Formatter

ICONS

Resource Description
Font Awesome The web's most popular icon set and toolkit
Feather Simply beautiful open-source icons
Ionicons Beautifully crafted open-source icons
Simple Icons Free SVG icons for popular brands
Material Design Icons Delightful, beautifully crafted symbols for common actions and items
Tabler Icons 558 Fully customizable free SVG icons

COLORS

Resource Description
Material Design Colors Material design colors
Flat UI Colors 2 A total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs
Color Hunt A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Color Space Color palettes generator and color gradient tool
uiGradients Beautiful colored gradients
Colors and Fonts Color and Typography Tools
Coolors Color schemes Generator

ILLUSTRATIONS

Resource Description
Undraw A constantly updated collection of beautiful SVG images
manypixels Royalty-free illustrations
IRA Design Build your own amazing illustrations
Free Illustrations by Lukasz Adam Free SVG images
Blobmaker Online SVG blob maker
Get Waves Create SVG waves for your next design

IMAGES

Resource Description
Unsplash The internet’s source of freely useable images
Pexels The best free stock photos & videos shared by talented creators
Burst Free stock photos for websites and commercial use
ISO Republic Thousands of Free High-Resolution CC0 Photos and Videos
Pixabay Stunning free images & royalty-free stock
StockSnap.io Beautiful free stock photos
Photopea Advanced online photo editor
Online Image Compressor Compress up to 20 images at a time
Bulk Resize Photos The fastest online photo size reducer

READINGS

Resource Description
Front-end Developer Handbook 2019 A guide that everyone can use to learn about the practice of front-end development
HackerRank 2020 Developer Skills Report Insights based on 116,648 developers
Stack Overflow Developer Survey 2020 Insights based on nearly 65,000 developers
HTML & CSS A nicer way to learn about HTML & CSS
Refactoring UI Make your ideas look awesome, without relying on a designer
airbnb JavaScript Style Guide A mostly reasonable approach to JavaScript
JavaScript & jQuery A nicer way to learn JavaScript & jQuery
You Don't Know JS A book series on JavaScript
Eloquent JavaScript A modern introduction to programming
Learning JavaScript Design Patterns A JavaScript and jQuery's developer guide
Web Content Accessibility Guidelines (WCAG) 2.1 Covers a wide range of recommendations for making Web content more accessible

ACCESSIBILITY

Resource Description
NV Access Screen reader for Microsoft Windows
ChromeVox Chrome Extension Screen reader by Google
axe Chrome Extension Accessibility testing in Chrome Developer Tools

DEPLOYMENT

Resource Description
GitHub Pages Free web hosting service by GitHub
Netlify Deploy your site in 30 seconds
Vercel Ship your site in seconds
Surge Simple, single-command web publishing
Heroku Build, run, and operate applications in the cloud

OTHERS

Resource Description
web.dev See how well your website performs; uses Lighthouse
Shape Divider A tool to generate sleek dividers for your website
GTmetrix Tool that analyzes your page's speed performance
Can I Use Support tables for HTML, CSS, etc
Carbon Create and share beautiful images of your source code
Wappalyzer Identify technologies on websites

Conclusion

I hope all of these resources can help you build better websites and apps as they have helped me! If you have another favorite resource, please write them up in the comments below.

I was inspired by this post by @denicmarko to put some of my favorite resources 😁

Thanks for reading πŸ’›


Edit

I've created an Github Repository listing out all the resources above. Now, You can contribute more awesome resources to the list πŸ¦„

Discussion (36)

Collapse
michaelandreuzza profile image
michael-andreuzza • Edited

What a stunning list.
I would love to add.
For colors & typography.

Free 100% icons.

Deployment.

Collapse
jatinrao profile image
Jatin Rao Author

Thanks Mike!

I've added these resources to the list & I'm in love with Colors & Fonts Site as It's Awesome 🀩

Collapse
weakish profile image
Jang Rush

Hi, I’d like to translate this wonderful list to Chinese. The translated text will be published on nextfe.com. Can you give me the permission?

Collapse
jatinrao profile image
Jatin Rao Author

Yeah! That'll be great Jang. Just don't forget to give some credits to the original blog post

Let me know, when you publish it πŸ˜‰

Collapse
weakish profile image
Jang Rush • Edited

Published the Chinese translation last weekend nextfe.com/frontend-resources/ There is a backlink to jatinrao.dev/resources-for-fronten... at the beginning of the translated text.

Collapse
tarun_geek profile image
Tarun Nagpal

Awesome πŸ‘

Collapse
jatinrao profile image
Jatin Rao Author

Thanks πŸ’š

Collapse
ilphryn profile image
Collapse
jatinrao profile image
Jatin Rao Author

you're welcome :)

Collapse
victormagarlamov profile image
Victor Magarlamov

Thanks a lot, Jatin!

Collapse
jatinrao profile image
Jatin Rao Author

You're welcome Victor πŸ’›

Collapse
andrewbaisden profile image
Andrew Baisden

Awesome you know what you should make this a GitHub so that other people can contribute and add more resources to the list.

Collapse
jatinrao profile image
Jatin Rao Author

Thanks Andrew for such an awesome idea. I've created a Github Repository for the same πŸ˜‰

You can contribute & add more awesome resources to the list πŸ™

Collapse
harshvats2000 profile image
HARSH VATS • Edited

That's just awesome. Thank you Jatin! Also codewars is redirecting to "codewars", so plz correct that typo.

Collapse
jatinrao profile image
Jatin Rao Author • Edited

I'm glad you liked it @harshvats2000 :)

I've updated the link for codewars πŸ™

Collapse
ivannovic profile image
Ivan Arcos

Thanks, @jatin

Collapse
lincarters profile image
Lin Carters

Thank you for taking the time to make this. From what I have looked at so far they seem great.

Collapse
jatinrao profile image
Jatin Rao Author • Edited

I'm so glad you liked it @lincarters πŸ¦„

Collapse
dimplejha profile image
jassica

thank u this is going to be very helpful!

Collapse
jatinrao profile image
Jatin Rao Author

Yeah! I hope, it's gonna be helpful for other's too @dimplejha :)

Collapse
tugayevci profile image
Tugay Cem Evci

Thank you!

Btw broken link: codewas.com/
This should be codewars.com/

Collapse
jatinrao profile image
Jatin Rao Author

Thanks Tugay! I've updated the link with the correct one πŸ’œ

Collapse
livetvchannels profile image
Collapse
teacherbuknoy profile image
Francis Rubio

Thank you for this! I wanted to add evernote.design/ which is a more exhaustivelist like this.

Collapse
jatinrao profile image
Jatin Rao Author

It's an awesome resource! Thanks a lot @teacherbuknoy πŸ™

Collapse
avechai profile image
Ark Chaikov

Thank you!

Collapse
jatinrao profile image
Jatin Rao Author

You're welcome πŸ˜‰

Collapse
reobin profile image
Robin Gagnon

coolors.co has been a huge help for me when trying to build a color palette for an app

Collapse
jatinrao profile image
Jatin Rao Author

Thanks a lot for reminding me to include such an awesome resource to generate color palettes 🎨

Collapse
zaswant1 profile image
zaswant1

Well bro

Collapse
reobin profile image
Robin Gagnon

Cool list! Btw, Favicon Generator link is broken

Collapse
jatinrao profile image
Jatin Rao Author

Thanks Rpbin! I've updated the link with the correct url :)

Collapse
juliabekesh profile image
Julia

To my mind these are very useful resources for frontend developers. Thank you for sharing.

Collapse
uzairjan profile image
Uzair Khan

Thank You

Collapse
jatinrao profile image
Jatin Rao Author

Glad you liked it πŸ™

Collapse
venkateshaj profile image
venkatesh-aj

Hi there, I've created a color palette website called colorsui.com. It's a free color tool.

Forem Open with the Forem app