Useful Resources

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

Jump to the section

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

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
• Algorithm Visualizer
• JS for React
• React with TypeScript
• JS Algorithms
• React course (video)
• JavaScript in Georgian
• Algorithms in Georgian

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
• 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

---

Static Deployment

• 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

---