Useful Resources

This is a collection of useful resources for front-end developers gathered from around the web and my bookmarks!

Jump to the section

• Cheatsheets
• API
• Learning
• React Components & Libraries
• Design
• Templates
• CSS Frameworks
• Color Palette
• Icons
• Fonts
• Logo Generators
• Gradient Generators
• Patterns
• Dividers
• CSS Animations
• CSS Animations
• Github
• Dynamic Deployment
• Create Data
• Converters
• Responsive Design
• Image Optimization
• Image & Video Stocks
• Image & Video Editing
• Learning JavaScript
• Shadows
• Animations & Effects

Cheatsheets

HTML Cheatsheets

• HTML & HTML5 Cheatsheet

CSS/SASS Cheatsheets

• Sass Cheatsheet
• Flexbox Cheatsheet
• Grid Layout Cheatsheet
• Media Queries Cheatsheet
• CSS-in-JS Cheatsheet

JavaScript Cheatsheets

• JavaScript Cheatsheet
• ES6 Cheat Sheet

React Cheatsheets

• React Cheatsheet

Git Cheatsheets

• Git Cheatsheet
• Command Line Cheatsheet

Web Accessibility Cheatsheets

• WAI-ARIA 1.2 Cheat Sheet

Backend Cheatsheets

• HTTP Status Codes Cheatsheet

Performance Cheatsheets

• Web Performance Cheat Sheet

jQuery Cheatsheets

• jQuery Cheatsheet

Webpack Cheatsheets

• Webpack Cheatsheet
• Webpack 5 Node Polyfills Upgrade Cheatsheet

Testing Cheatsheets

• Front-End Testing Cheatsheet

Web Development Roadmap Cheatsheets

• Web Development Roadmap Cheatsheet

SEO Cheatsheets

• SEO Cheatsheet

GraphQL Cheatsheets

• GraphQL Cheatsheet

Jest Cheatsheets

• Jest Cheatsheet

CSS Selectors Cheatsheets

• CSS Selectors Cheatsheet

Front-End Interview Questions Cheatsheets

• Front-End Interview Questions Cheatsheet

NPM Cheatsheets

• NPM Cheatsheet

HTTP/2 Cheatsheets

• HTTP/2 Cheatsheet

JSON Cheatsheets

• JSON Cheatsheet

CSS Flexbox and Grid Cheatsheets

• CSS Flexbox and Grid Cheatsheet

Gatsby.js Cheatsheet

• gatsbyjs.com/docs/cheat-sheet/

Node.js Cheatsheet

• devhints.io/nodejs

Build Tools and Frameworks:

• Gulp.js Cheatsheet

API

• Dummy JSON

Learning

Courses

• freeCodeCamp
• Codecademy
• Sololearn
• Atlassian
• Lambda School

Practice

• Chingu
• FrontendMentor
• CodeCombat

YouTube

• Lydia Hallie
• Traversy
• freeCodeCamp
• Mosh

Further reading

• Patterns
• JS Visualizer
• Operator Lookup
• JS for React
• React with TypeScript
• JS Algorithms
• React course (video)
• JavaScript in Georgian
• Algorithms in Georgian

Interactive learning

• Learn Git
• Algorithm Visualizer

React Components & Libraries

• Visx
• Prime React
• React Router
• Material UI
• Ant Design
• Headless UI
• Chakra UI
• Blueprint
• Fluent 2
• React Bootstrap
• React Spring

---

Design

• Freebiesbug
• SaaS Landing Page
• Pixeden
• 365psd
• Dribbble
• Free Design Resources

---

Templates

• htmltemplates.co
• Theme Wagon
• TemplateMo
• Free CSS
• StartBootstrap
• HTML Design
• HTML5xCSS3
• Cssauthor
• Component library

---

CSS Frameworks

• Bootstrap
• Bulma
• Foundation
• Semantic UI
• Pure CSS
• Materialize
• UI Kit
• Tailwind
• A collection of the best front end frameworks

---

Color Palette

• Color Mixer
• Color Hexa
• Colors Inspo
• My Color Space
• Palettte
• Coolors
• Sip App
• Color Mind
• CSSGradient
• Color Box
• ColorZilla

---

Gradient Generators

• CSS Gradient
• cssgradient.io
• Colorzilla
• Colorable

---

Icons and Illustrations

• Flaticon
• IconFinder
• Icons on OnlineWebFonts
• IconMoon
• Boxicons
• Blush
• Open Peeps
• Smash Illustrations
• Open Doodles
• Avataaars Generator
• Icon Store
• CSS Icons
• Tilda Icons
• Ikonate
• Eva Icons
• Animated Icons
• More Animated Icons
• Avataaars Generator
• Tilda Icons
• CSS Icons

---

Fonts

• Google Fonts
• Font Storage
• OnlineWebFonts
• FreeFonts
• Behance
• Habr
• Freebies Bug
• BeFonts
• Font Joy
• Font Squirrel
• Fonts Arena
• Word Mark
• Type Scale

---

Logo Generators

• FreeLogoDesign
• RenderForest
• LogoMakr

---

Patterns

• Hero Patterns
• SVG Backgrounds
• CSS Background Patterns
• SVG Patterns from Philip Rogers
• Paaatterns
• coolbackgrounds.io
• Patternify
• Plain Pattern
• Patternico
• Bansal
• Get Waves
• Blob Maker
• Rad Lines

---

Dividers

• Wave Border Generator
• Shape divider
• Haikei
• CSS Separator

---

Animations & Effects

• Codepen
• 77 CSS Animation Examples
• 24 Creative and Unique CSS Animation Examples to Inspire Your Own
• 50+ CSS Animation Examples
• Animista
• Draggable
• Block Revealers
• Icons Transition

---

Shadows

• Shadows Brumm
• Box Shadow
• CSS Generator
• CSS Matic
• HTML CSS JS
• HTML CSS Freebies
• Neumorphism
• Josh Comeau
• CSS# Studio
• CSS Portal
• Webcode

---

Image & Video Stocks

• Pexels
• Unsplash
• Pixabay
• FreePik
• Coverr
• MixKIt
• Icons8
• Generated photos

---

Image & Video Editing

• Unscreen
• RemoveBG

---

GitHub

• Github Pages

---

Dynamic Deployment

• Netlify
• Vercel
• Firebase

---

Create Data

• Mockaroo

---

Converters

• Convert CSS to JS Object, JSX props, etc.

---

Responsive Design

• Check responsiveness on different devices

---

Image Optimization

• Squoosh
• TinyPNG

---