Resources for Frontend Developers

Subscribe to my newsletter and never miss my upcoming articles

Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout the 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

ResourceDescription
W3C Markup ValidatorCheck the markup of Web documents
Meta TagsPreview, edit, and generate meta tags
Favicon GeneratorConvert any GIF, PNG, or JPG to ICO

CSS

ResourceDescription
W3C CSS ValidatorCSS Validation Service
Animate.cssJust-add-water CSS animations
animistaCSS animations on demand
CSSeffectsSnippetsA collection of CSS effects
SpinKitA collection of loading indicators animated with CSS
CSS MinifierOnline CSS minifier/compressor

JAVASCRIPT

ResourceDescription
JavaScript 30Build 30 things with vanilla JS in 30 days
CodewarsImprove your skills by training with others on real code challenges
ESLintFind and fix problems in your JavaScript code
PrettierOpinionated Code Formatter

ICONS

ResourceDescription
Font AwesomeThe web's most popular icon set and toolkit
FeatherSimply beautiful open-source icons
IoniconsBeautifully crafted open-source icons
Simple IconsFree SVG icons for popular brands
Material Design IconsDelightful, beautifully crafted symbols for common actions and items

COLORS

ResourceDescription
Material Design ColorsMaterial design colors
Flat UI ColorsA total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs
Color HuntA free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Color SpaceColor palettes generator and color gradient tool
uiGradientsBeautiful colored gradients
coolors.coColor pallettes generator

ILLUSTRATIONS

ResourceDescription
UndrawA constantly updated collection of beautiful SVG images
manypixelsRoyalty-free illustrations
IRA DesignBuild your own amazing illustrations
Free Illustrations by Lukasz AdamFree SVG images
BlobmakerOnline SVG blob maker
Get WavesCreate SVG waves for your next design

IMAGES

ResourceDescription
UnsplashThe internet’s source of freely useable images
PexelsThe best free stock photos & videos shared by talented creators
BurstFree stock photos for websites and commercial use
ISO RepublicThousands of Free High-Resolution CC0 Photos and Videos
PixabayStunning free images & royalty-free stock
StockSnap.ioBeautiful free stock photos
PhotopeaAdvanced online photo editor
Online Image CompressorCompress up to 20 images at a time
Bulk Resize PhotosThe fastest online photo size reducer

READINGS

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

ACCESSIBILITY

ResourceDescription
NV AccessScreen reader for Microsoft Windows
ChromeVox Chrome ExtensionScreen reader by Google
axe Chrome ExtensionAccessibility testing in Chrome Developer Tools

DEPLOYMENT

ResourceDescription
GitHub PagesFree web hosting service by GitHub
NetlifyDeploy your site in 30 seconds
VercelShip your site in seconds
SurgeSimple, single-command web publishing

OTHERS

ResourceDescription
web.devSee how well your website performs; uses Lighthouse
Shape DividerA tool to generate sleek dividers for your website
GTmetrixTool that analyzes your page's speed performance
Can I UseSupport tables for HTML, CSS, etc
CarbonCreate and share beautiful images of your source code
WappalyzerIdentify 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.

Thanks for reading πŸ’›

The Lolladorf King's photo

Hello Jatin, The link for CodeWars is not valid. Would you mind confiugring them to the original ?

Jatin Rao's photo

Thanks The Lolladorf King

I've updated the link with the correct one :)

Sai Laasya Vabilisetty's photo

Wow, bookmarking blog for future referenceπŸ’― Very helpful βœ”οΈ

Jatin Rao's photo

I'm glad it's helpful for you Sai Laasya Vabilisetty πŸ₯³

Olamide Adeleke's photo

I didn't see Coolors.co it is a free color pallete, gradient generation tool and it has a chrome extension too for ease of access

Jatin Rao's photo

Thanks Olamide Adeleke for pointing it out!

I've added coolors.co to the list πŸ’ͺπŸ’ͺ

Tabah Baridule's photo

This is interesting .. thanks for sharing

Jatin Rao's photo

You're welcome ;)

Rutik Wankhade's photo

Awesome list 😊

Subha Chanda's photo

Another great list of resources. Thanks! πŸ˜€

Jatin Rao's photo

I'm glad you liked it too Subha Chanda :))

Tapas Adhikary's photo

Great list Jatin! Thanks for taking time to gather things together and sharing..

Jatin Rao's photo

Glad you liked it Tapas Adhikary πŸ’š

Robin Bucciarelli's photo

Great list Jatin Rao, thank you!

Time to check out some resources I didn't know yet. :)