Awesome Free Developer Resources

Table Of Contents:

• Accessibility
• Design
  • Design Inspiration
• Design Tools
• Wireframe & Mockups
• Templates
• Fonts
• Colors
  • Color Palettes
  • Gradients
• Image Resources
• Photos
• Icons
• Illustrations
• Patterns
• Image Compression
• Background Remover
• CSS
• CSS Frameworks
• CSS Tools
• CSS Animation
• Generators
• Code Optimization
• Converters
• Validation & Compatibility
• In-Browser Coding
• APIs
• Developer Tools
• Chrome Extensions
• Domain Name Search Engine
• Hosting
• Database
• Authentication
• Responsiveness
• Site Analyzers
• Project Management
• Speed Test
• Documentation
• RoadMaps
• YouTube Channels
• General Web Dev
• Design & Front-End
• Career & Advice
• DevOps
• Mobile
• Blockchain
• Back End
• Books / Courses
• Newsletters
• Podcasts
• Blogs
• Practise

Accessibility

• Accessibility Cheat-sheet
• Accessible Brand Colors
• Colour Contrast Checker

Design

Design Inspiration

• Awwwards
• Behance
• Dribbble
• Onepagelove
• Webframe

Design Tools

• Adobe XD
• Figma

Wireframe & Mockups

• AppMockUp
• MockuPhone
• moqups
• Wireframe.cc

Templates

• Wix
• Squarespace
• HTML5 Up
• Start Bootstrap
• Templated.co
• Free HTML5
• Colorlib
• Zero Theme
• Styleshout
• HTML5xCSS3
• Admin UI Themes
• Ecommerce Themes
• Onepagelove
• Mashup Templates
• Cruip
• Themeselection

Fonts

• Google Fonts
• Font Flipper
• FontSpark
• ColorAndFonts
• FontPair

Colors

Color Palettes

• Stylify Me - Get Color Palette from Websites
• https://color.hailpixel.com/
• https://paletton.com/
• https://color.adobe.com/create/color-wheel
• https://flatuicolors.com/
• https://www.0to255.com/
• https://coolors.co/
• https://www.colorsandfonts.com/
• https://mycolor.space/
• https://colors.lol/
• http://colormind.io/

Gradients

• https://uigradients.com
• https://cssgradient.io/
• https://gradient-designer.csspost.com/

Image Resources

Photos

• Pixabay
• Pexels
• Unsplash
• freepik
• Unsplash Source API
• Placeholder Images
• Placeholder Image Generator

Icons

• Iconfinder
• flaticon
• Font Awesome
• Heroicons
• Bootstrap Icons
• Simple Icons
• Material Icons
• Feather

Illustrations

• LottieFiles
• unDraw Illustrations
• 404 Illustrations
• smash illustrations
• Control Illustrations
• DrawKit
• Open Doodles
• freellustrations
• manypixels Illustrations
• Mixkit Illustrations
• Delesign Illustrations

Patterns

• patternico (image)
• Subtle Patterns (image)
• Hero Patterns (CSS)
• pattern.css (CSS)
• Patternify (CSS)
• Patternizer (CSS)

Image Compression

• tinypng
• tinyjpg
• jpegio
• Squoosh
• svgomg
• Compressor

Background Remover

• removebg

CSS

• BEM Cheat Sheet

CSS Frameworks

• tailwindcss
• Bootstrap
• Bulma
• Zurb Foundation
• Materialize
• Bootswatch
• tailwindcomponents
• Tailblocks - Ready-to-use Tailwind CSS blocks
• tailwindUI - Tailwind UI Components
• Tailwind Cheat-Sheet

CSS Tools

• flexbox
• CSS GRID
• cssmastery
• CSS Button Generator
• Box Shadows
• Flexplorer
• CSS Grid Generator
• CSS Specificity calculator
• Specificity calculator
• CSS clip-path Maker
• Custom Shape Dividers
• Fancy-Border-Radius
• Houdini.how
• Neumorphism.io
• Glassmorphism.com
• 3D Book
• 98.css
• Enjoy CSS - Online CSS Code Generator
• CSS Arrow Please
• Image Effects with CSS

CSS Animation

• csseffects
• Keyframes
• animista
• cubic-bezier
• Easings

Generators

• mockaroo - Data Generator
• JSON Generator - Data Generator
• Favicon Generator
• Free Favicon Maker
• SHA256 Hash Generator
• Online UUID Generator
• Meta Tags
• carbon - Code Image
• codeimg - Code Image
• htmldom

Code Optimization

• Minify - JavaScript & CSS minifier
• Code Beautify - Validate, Minify, & Beautify
• Alchemize - Minify & pretty-print
• Diffr - Online Text Diffing Tool
• Diffchecker - Online Diff Tool
• EStimator - Modern JavaScript savings calculator

Converters

• Babel - Modern JavaScript Compiler
• Sassmeister - SCSS to CSS
• HTML to Jade/Pug
• Base64 Converter

Validation & Compatibility

• Can I Use - Browser Compatibility Lookup
• ECMAScript Compatibility Table
• W3C HTML Validation Service
• HTML Validator & Linter
• W3C CSS Validation Service
• CSS Validator
• JSLint - JavaScript Code Quality Tool
• embold - Code analysis

In-Browser Coding

• CodePen
• JSFiddle
• Liveweave
• repl.it
• JS Bin
• CodeSandbox

APIs

• PrestoAPI - API Builder
• JSON Placeholder
• OpenWeather
• The Star Wars API
• They Said So Quotes API
• Public API List

Developer Tools

• Visual Studio Code
• Postman - API & REST Client
• Insomnia - API & REST Client
• StackEdit - In-browser Markdown editor
• KeyCode - JavaScript Event KeyCodes
• Screen size map
• snippet generator
• Front-End Checklist
• BundlePhobia - Cost of adding an npm package
• iHateRegex - Regex Cheat Sheet
• RegExr - Learn, Build, & Test RegEx
• regular expressions 101 - Build, Debug, & Share regex
• kite - AI Coding Assistant
• Wappalyzer - Identify Technologies on websites
• HTML Entity Lookup
• Pastebin - Snippet Manager
• HTTP Status Codes
• GitHub
• Clockify - Time Tracking
• Grammarly
• Stack Overflow
• Google
• Chrome Developer Tools
• Bootstrap 5 Cheat Sheet

Chrome Extensions

• React Developer Tools
• JSON Viewer
• WhatFont
• Fonts Ninja
• CSS Peeper
• CSSViewer
• Dimensions
• Page Ruler
• Wireframe
• ColorZilla
• Wappalyzer

Domain Name Search Engine

• namecheap
• NameMesh - Domain Name Generator

Hosting

• Netlify
• Heroku
• Vercel
• Surge

Database

• HarperDB
• MongoDB
• Fauna
• Firebase

Authentication

• Auth0
• Firebase Authentication

Responsiveness

• Responsinator - Device Testing
• What's My Browser Size

Site Analyzers

• Measure
• Lighthouse Metrics

Project Management

• Notion
• Trello
• Coggle

Speed Test

• keycdn - Speed & Performance Testing
• Pingdom Website Speed Test

Documentation

• MDN Web Docs
• w3schools
• React
• Vue.js
• Angular
• Tailwind CSS
• Bootstrap
• DevDocs
• DevHints
• Svelte
• Sass

RoadMaps

• Web Developer Roadmap 2021
• All you NEED to Become a Web Developer
• The Simplest Web Developer Path for 2021
• Roadmap
• Frontend Learning Path in 2021

YouTube Channels

General Web Dev

• Ahmad Awais
• Ben Awad
• Better Dev
• Claudio Bernasconi
• CodeDamn
• Coder Coder
• CoderOne
• codeSTACKr
• Codevolution
• Code with Ania Kubów
• Coding Garden
• Coding Addict
• Codú Community
• Colby Fayock
• Dave Gray
• dcode
• Dennis Ivy
• Dev Ed
• Faraday Academy
• Florin Pop
• Fireship
• freeCodeCamp.org
• Harry Wolff
• James Perkins
• James Q Quick
• JavaScript Mastery
• Leigh Halliday
• Maksim Ivanov
• Programming with Mosh
• Program With Erik
• Tech With Tim
• The Net Ninja
• thenewboston
• Traversy Media
• Web Dev Simplified
• Weibenfalk

Design & Front-End

• Adrian Twarog
• DesignCourse
• Franks Laboratory
• Jesse Showalter
• Kevin Powell
• Online Tutorials

Career & Advice

• Akshay Saini
• Ali Spittel
• Andy Sterkowitz
• Chau Codes
• Chris Hawkes
• Chris Sean
• Clément Mihailescu
• CodeStories
• CodingPhase
• Dorian Develops
• DThompsonDev
• Developer Habits
• Eddie Jaoude
• Emma Bostian
• Filip
• ForrestKnight
• Francesco Ciulla
• Joshua Fluke
• Kalle Hallden
• Nick White
• Praveen Kumar Purushothaman
• Randall Kanna
• RealToughCandy

DevOps

• DevOps Directive
• DanGitschooldude
• TechWorld with Nana

Mobile

• Flutter Explained
• Robert Brunhage
• Tadas Petra
• William Candillon

Blockchain

• EatTheBlocks

Back End

• Caleb Curry
• CodeBeauty
• Python Engineer

Books / Courses

• Functional-Light JavaScript
• Eloquent JavaScript 3rd Edition
• You Don't Know JS
• JavaScript 30 - Wes Bos
• CSS GRID - Wes Bos
• freeCodeCamp.org
• Sitepoint

Newsletters

• JavaScript Weekly
• Frontend Focus
• React Status
• Bytesized
• Flexbox Adventure

Podcasts

• JS Party
• Ladybug
• Syntax.fm
• Full Stack Radio
• ShopTalk Show
• The Changelog
• JavaScript Jabber
• Self-Taught or Not
• Front End Happy Hour

Blogs

• Codepen
• codeSTACKr
• CSS-Tricks
• DEV.to
• Flavio Copes
• freeCodeCamp
• Github Blog
• LogRocket
• React Blog
• Scotch.io
• Smashing Magazine
• Tania Rascia
• Edidiong Asikpo
• Bolaji Ayodeji
• Catalin Pit

Practise

• 30 Day Vanilla JS Coding Challenge
• Clean-code in JS