Awesome
Introduction
This is a collection of resources for Frontend development.
Most of the resources are free but we also included paid resources.
Resources labelled with 💵 indicate that the resource is a paid resource.
If you're just starting, you DON'T need to use every resource on this list. It is practically impossible. Use this as a reference. It is not a guide.
Contributing
We Invite as many contributions as possible.
If you know of a resource that would be a great addition to this list, feel free to make a contribution.
Be sure to read How To Contribute
Table of Contents
- How The Internet Works
- HTML
- CSS
- JavaScript
- Git
- React
- Vue
- Browser Extensions
- Icons
- Fonts and Typography
- Illustrations
- Optimization
- Color Inspiration
- Images and Videos
- Hosting Sites
- Design Inspiration
- Portfolio Inspiration
- Youtube Channels
- Podcasts
- Blogs
- Interview Prep
- Newsletters
- Contributing
How the Internet Works
Documentation
Articles
- 📜How does the Internet Work? — HowStuffWorks
- 📜How the Internet Works — Medium
- 📜How Does the Internet Work? — Stanford
Videos
- 🎥What is the Internet KhanAcademy
- 🎥The Internet: Crash Course Computer Science
- 🎥Computer Networks: Crash Course Computer Science
- 🎥The World Wide Web: Crash Course Computer Science
HTML
Documentation
Cheat Sheets
Articles
Books
- 📒HTML Notes for Pros
- 📒Design and Build Websites 💵
- 📒Head First HTML with CSS 💵
- 📒HTML5 Pocket Reference 💵
Courses
- 📝HTML & CSS The Odin Project
- 📝Introduction to HTML Scrimba
- 📝Introduction to Basic HTML & HTML5 FreeCodeCamp
- 📝HTML5 and CSS Fundemantals EDX
- 📝Learn HTML CodeCademy 💵
- 📝Introduction to HTML and CSS Team Treehouse 💵
- 📝Learn HTML in Detail
Websites
- 🌐HTML5 Doctor - A great reference for HTML Elements
- 🌐HTML-5-TUTORIAL - A Great Website for everything HTML
- 🌐HTML5 Up - Responsive HTML5 and CSS3 site templates
- 🌐HTML Validator - Check if your HTML markup is valid and contains no errors.
- 🌐Templated - A collection of 845 free CSS & HTML5 site templates.
CSS
Documentation
Cheat Sheets
Books
- 📒CSS Secrets 💵
- 📒The CSS Pocket Guide 💵
- 📒CSS: The Definitive Guide: Third Edition 💵
- 📒Tiny CSS Projects 💵
- 📒CSS Notes for Professionals
Courses
- 📝Introduction to CSS - Scrimba
- 📝Introduction to Basic CSS - FreeCodeCamp
- 📝Learn CSS - CodeCademy💵
- 📝CSS Basics - Team Treehouse 💵
Frameworks and Libraries
- 🌐Base
- 🌐Bulma
- 🌐Bootstrap
- 🌐Animate.css
- 🌐Dead Simple Grid
- 🌐Foundation
- 🌐Materialize CSS
- 🌐Milligram
- 🌐Mustard UI
- 🌐Picnic CSS
- 🌐Pure
- 🌐Semantic UI
- 🌐Spectre
- 🌐Skeleton
- 🌐Tachyons
- 🌐Tailwind CSS
- 🌐Tent CSS
- 🌐UI Kit
Practice your CSS Skills
Style Guides
Websites
- 🌐7 Days, 7 Websites - Build 7 websites in 7 days
- 🌐Can I use - Up-to-date browser support tables for front-end technologies
- 🌐Clippy - A tool to help use the new clip-path property
- 🌐CSSBattle - Learn CSS through a fun code-golfing game
- 🌐CSS Easing functions - A collection of easing functions used in CSS transitions and animations.
- 🌐CSS Diner - Learn CSS Selectors through a game
- 🌐CSS for People Who Hate CSS
- 🌐CSS Grid Garden - Learn CSS Grid through a game
- 🌐CSS Layout - A collection of popular layouts and patterns made with CSS
- 🌐CSS reference by Codrops - Excellent guide on how to write better, cleaner and more reusable CSS code.
- 🌐CSS-tricks - A blog site for everything CSS
- 🌐Cubic Berzier Function Generator
- 🌐Flexbox Froggy - Learn CSS Flexbox through a game
- 🌐Responsinator - Check the responsiveness of a site across different devices.
- 🌐Responsive Grid System - Quick flexible and easy fluid grid for easy responsive web design.
- 🌐Beautiful CSS box-shadow examples - A curated collection of 90+ free beautiful box-shadow, click to copy.
- 🌐Beautiful CSS buttons examples - A curated collection of 80+ free beautiful buttons, click to copy.
JavaScript
Documentation
Reference & Cheat Sheets
Courses
- 📝Learn JavaScript - CodeCademy
- 📝Programming the Web with JavaScript - EDX
- 📝JavaScript Algorithms and Data Structures - FreeCodeCamp
- 📝JavaScript Tutorial - GeekforGeeks
- 📝JavaScript30 - Wes Bos
- 📝The Complete JavaScript Course - Udemy💵
- 📝Learn Javascript From Scratch - Scaler
Books
- 📒Eloquent JavaScript
- 📒You Don't Know JavaScript
- 📒JavaScript Notes for Pros
- 📒JavaScript For Cats
- 📒Learning JavaScript Design Patterns
- 📒Secrets of the JavaScript Ninja
- 📒Speaking JavaScript
- 📒JavaScripts The Good Parts💵
- 📒JavaScrit and JQuery💵
Challenge Websites
- 🌐AtCoder
- 🌐CodeChef
- 🌐Coderbyte
- 🌐Coderbyte
- 🌐Codewars
- 🌐CodinGame
- 🌐CodeForces
- 🌐DevProjects - Free real-world JavaScript projects
- 🌐Exercism
- 🌐HackerEarth
- 🌐Hackerrank
- 🌐Leetcode
- 🌐Pramp
- 🌐Project Euler
- 🌐SPOJ
- 🌐TopCoder
Snippets and cheatsheets
- 📜A ridiculous collection of cheatsheets
- 📜Favorite JavaScript utilities in single line of code
- 📜Modern JavaScript Cheatsheet
- 📜Short JavaScript code snippets for all your development needs
Style Guides
Visual Studio Code Extensions
- 🌐Babel JavaScript - Syntax highlighting for today's JavaScript
- 🌐Bracket Pair Colorizer 2 - Match brackets with same color
- 🌐Debugger for Chrome - Debugging tool
- 🌐ESLint - Code Linter
- 🌐Intellisense - Code completion and Information
- 🌐Live Server - Live Web Page Reload.
- 🌐NPM - npm support for VsCode
- 🌐Path Intellisense - Auto-complete path files
- 🌐Prettier - Code Formatting.
- 🌐Paste JSON as Code - Copy JSON paste as JavaScript or Typescript
- 🌐Quokka.js - Prototyping playground that displays the results of an operation inside your IDE
- 🌐REST Client - REST Client for Visual Studio Code
- 🌐Settings Sync - Synchronise your editor settings using Github.
- 🌐Snippets - Snippets for JavaScript ES6 syntax and TypeScript.
Websites
Articles
- 📜70 JavaScript Interview Questions
- 📜10 JavaScript concepts you need to know for interviews
- 📜10 Interview QuestionsEvery JavaScript Developer Should Know
- 📜A Study Plan To Cure JavaScript Fatigue
- 📜How to Manage JavaScript Fatigue
Git
Courses
- 📝A Guide to Git & Version Control
- 📝Git Cheat Sheet
- 📝Learn Git
- 📝Version Control (Git)
- 📝Version Control with Git
- 📝Getting Started with Git 💵
Books
Tools
React
Documentation
Cheat Sheets
Courses
- 📝The Beginner's Guide to React - Egghead
- 📝Introduction to React - freeCodeCamp
- 📝Introduction to React - FullStackOpen
- 📝React Getting Started - Pluralsight
- 📝Learn React - Scrimba
- 📝React for Beginners - Wes Bos
- 📝Epic React - Kent C. Dodds💵
Books
- 📒Build Your Own React
- 📒Pure React
- 📒React Explained
- 📒Under the hood ReactJS
- 📒Fullstack React 💵
- 📒React from Zero 💵
- 📒Road to React 💵
- 📒Build a Frontend Web Framework (From Scratch) 💵
Project Ideas
Podcasts
Blog Sites
Youtube Channels
React Tooling
State Management
UI Frameworks & Libraries
- 🌐Grommet
- 🌐Material UI
- 🌐Material Kit React
- 🌐Onsen UI
- 🌐Reactstrap
- 🌐React Bootstrap
- 🌐React Toolbox (Material Design)
- 🌐Rebass
- 🌐Semantic UI React
- 🌐Chakra UI
Unit Testing
Create React App
CSS in JS
Remote Data Fetching
- 🌐Axios
- 🌐React Query
- 🌐swr
Server Side Rendering
Experts on Twitter
- 📱Andrew Clark
- 📱Brian Vaughn
- 📱Dan Abramov
- 📱Kent C. Dodds
- 📱Luna Ruan
- 📱Rachel Nabors
- 📱Rick Hanlon
- 📱Sebastian Markbåge
- 📱Seth Webster
Conferences
Community
Vue
Documentation
Courses
- 📝Learn Vue.js - Full Course for Beginners - freeCodeCamp
- 📝Advanced Vue.js Features from the Ground Up - Frontend Masters
- 📝Learn Vue 2: Step By Step - Laracasts
- 📝Getting Started with Vue.js - Scotch
- 📝Learn Vue by Building and Deploying a CRUD App - Testdriven
- 📝Become a Ninja with Vue 3 - Vue-Exercises Ninja Squad
- 📝Intro to Vue 2 - Vuemastery
- 📝Learn Vue - VueSchool💵
- 📝Premium Beginner to Advanced Vue Course - Vuemastery💵
Project Ideas
Books
- 📒Fullstack Vue 💵
- 📒Full-Stack Web Development with Vue.js and Node 💵
- 📒Large Scale Apps with Vue 3 and TypeScript 💵
- 📒Mastering Vue.js 💵
- 📒The Vue Handbook 💵
- 📒The Mastery Of Vue.js 2 💵
- 📒Testing Vue.js components with Jest 💵
- 📒Vue.js: Understanding its Tools and Ecosystem 💵
- 📒Vue.js 2 Design Patterns and Best Practices 💵
- 📒Vue: Build & Deploy 💵
- 📒Vue.js: Up and Running 💵
- 📒Vue.js in Action 💵
Podcasts
- 🎤Cynical Developer Episode 99
- 🎤Enjoy the Vue
- 🎤JavaScript Jabber Episode 276
- 🎤Software Engineering Daily
- 🎤Syntax Episode 130
- 🎤Vue News Podcast
- 🎤Views on Vue
Youtube Channels
Tools
- 🌐Bit
- 🌐Bootstrap Vue
- 🌐Nuxt.js
- 🌐Onseen UI
- 🌐Quansar Framework
- 🌐Vue Dev Server
- 🌐Vuex
- 🌐Vue Router
- 🌐Vue Dev Tools
- 🌐Vue CLI
- 🌐Vuetify
Blogs
Community
Conferences
Browser extensions
Icons
- 🌐BoxIcons
- 🌐CSS.gg
- 🌐Font Awesome
- 🌐Flaticon
- 🌐Freepik
- 🌐Fontastic
- 🌐Heroicons
- 🌐Iconfactory
- 🌐Icons8
- 🌐Icontre
- 🌐Iconjar
- 🌐IconFinder
- 🌐Iconshock
- 🌐Iconmonstr
- 🌐Ionicons
- 🌐Icomoon
- 🌐Material Icons
- 🌐Pngtree
- 🌐Swift Icons
- 🌐UXWing
Fonts and Typography
- 🌐1001Fonts
- 🌐Abstract Fonts
- 🌐Befonts
- 🌐DaFont
- 🌐Google Fonts
- 🌐FFonts
- 🌐FonstSpace
- 🌐FontsArena
- 🌐Fontsquirrel
- 🌐Free Script Fonts
- 🌐FontSpace
- 🌐MyFonts
- 🌐PinSpiry Fonts
- 🌐TypeTester
- 🌐Typo Guide
- 🌐Unblast
Illustrations
Optimization
- 🌐CSS Validator
- 🌐Google Analytics
- 🌐Nibbler
- 🌐Namecheap
- 🌐Optimizilla
- 🌐PageSpeed Insights
- 🌐Sizzy
- 🌐Usability Checklist
- 🌐Who Is
- 🌐Woorank
Color Inspiration
- 🌐0to255
- 🌐Branition Colors
- 🌐Coolors
- 🌐Color Hex
- 🌐Color Hunt
- 🌐Flat UI Colors
- 🌐LOL Color Palettes
- 🌐Material Palette
- 🌐myColor Space
- 🌐Paletton
- 🌐UIGradients
Images and Videos
- 🌐Burst
- 🌐Coverr
- 🌐Canva
- 🌐Free Images
- 🌐Flickr
- 🌐Gratisography
- 🌐ISO Republic
- 🌐Life of Pix
- 🌐Pexels
- 🌐Pixabay
- 🌐Reshot
- 🌐Subtle Patterns
- 🌐Startup Stock Photos
- 🌐The Stocks
- 🌐Unsplash
Hosting Sites
Design Inspiration
- 🌐Awwwards
- 🌐Behance
- 🌐Call To idea
- 🌐Design Inspiration
- 🌐Dribble
- 🌐From Up North
- 🌐Land Book
- 🌐Media Queries
- 🌐One Page Love
- 🌐Site Inspire
- 🌐Site Inspire
- 🌐Template Monster
- 🌐UI Movement
- 🌐Webdesign Inspiration
Portfolio Inspiration
- 🌐Aral Tasher
- 🌐Brittany Chiang
- 🌐Fidalgo Pedro
- 🌐Jack Jeznach
- 🌐Julia Johnson
- 🌐Matt Farley
- 🌐Nathan Simpson
- 🌐Developer Portfolios - Github Repo
Youtube Channels
- 🎥Academind
- 🎥Andy Sterkowitz
- 🎥Ben Awad
- 🎥Coding Phase
- 🎥Clever Programmer
- 🎥Clement Mihailescu
- 🎥Dev Ed
- 🎥freeCodeCamp
- 🎥Keep On Coding
- 🎥Programming With Mosh
- 🎥Leon Noel
- 🎥The Net Ninja
- 🎥Traversy Media
- 🎥Web Dev Simplified
Podcasts
- 🎤codeNewbies
- 🎤Commit Your Code
- 🎤Codepen Radio
- 🎤DevDiscuss
- 🎤freeCodeCamp
- 🎤Frontend Happy Hour
- 🎤Fullstack Radio
- 🎤JavaScript Jabber
- 🎤Ladybug Podcast
- 🎤Modern Web
- 🎤Syntax
- 🎤The Changelog
Blogs
- ✍Codrops
- ✍CSS-Tricks
- ✍Dev.to
- ✍Echo.Js
- ✍freeCodeCamp
- ✍Front End Front
- ✍Frontend Focus
- ✍Hacker News
- ✍Hackernoon
- ✍Hashnode
- ✍Medium
- ✍Stackoverflow
- ✍SitePoint
- ✍Smashing Magazine
- ✍Scotch
- ✍Web Designer Depot
Interview Prep
Resume Templates
- 🌐Canva
- 🌐Creddle
- 🌐Harvard Office Of Career Services
- 🌐MyPerfectResume
- 🌐ResumeWorded
- 🌐Resume.io
- 🌐Resume Maker
Resume Editing
Job Sites
- 🌐Angel List
- 🌐Arc.dev - Remote Developer Jobs
- 🌐Find Remote Jobs
- 🌐Github Jobs
- 🌐JavaScript Job
- 🌐JustRemote
- 🌐Jobspresso
- 🌐JSRemotely
- 🌐Jr Dev Jobs
- 🌐Mashable Job Board
- 🌐Outsourcely
- 🌐Powertofly Jobs
- 🌐Producthunt Jobs
- 🌐React Jobs Board
- 🌐Remoters
- 🌐Remote Hub
- 🌐Remote Hunt
- 🌐Remoteco
- 🌐Stackoverflow Jobs
- 🌐Startupers
- 🌐TheRemoteWork
- 🌐We Work Remotely
- 🌐Women Who Code
- 🌐Working Nomads
- 🌐YC Startup Jobs
- 🌐Circular
- 🌐Honeypot
Freelance Jobs Sites
Mock Interviews
Project Pair Programming
Open Source
YouTube Series
Articles
- 📜5 things you need to know in a programming interview
- 📜Finding your first remote job - Joshua W. Cameau
- 📜How to Write a Developer Résumé Hiring Managers Will Actually Read
- 📜How to Get a Software Engineer Job at Google and Other Top Tech Companies
- 📜How to Break Into the Tech Industry—a Guide to Job Hunting and Tech Interviews
- 📜How To Get A Programming Job Without A Degree
- 📜How to Get a Remote Developer Job and Become a Digital Nomad
- 📜How To Get Your First Web Developer Job: The Ultimate Guide for Junior Developers
- 📜Resources that help me land a job at FANG
- 📜Tips to get a job as a Developer
- 📜The 30-minute guide to rocking your next coding interview
- 📜Want to Know How to Get a Remote Job? I Asked 30 Remote Companies - This is What They Said
- 📜Why I studied full-time for 8 months for a Google interview
Newsletters
- 🌐CSS-Tricks
- 🌐CSS Weekly
- 🌐FrontEnd Focus
- 🌐JavaScript Weekly
- 🌐Responsive Design Weekly
- 🌐Smashing News Letter
Contributing
You're very welcome to contribute to this list.
Be sure to read How to Contribute before making your contribution.
Contributors ✨
Thanks goes to these wonderful people
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://codingknite.com/"><img src="https://avatars.githubusercontent.com/u/70036189?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joel P. Mugalu</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=codingknite" title="Documentation">📖</a> <a href="#content-codingknite" title="Content">🖋</a> <a href="#maintenance-codingknite" title="Maintenance">🚧</a></td> <td align="center"><a href="https://github.com/ChinmayMhatre"><img src="https://avatars.githubusercontent.com/u/51131670?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chinmay Mhatre</b></sub></a><br /><a href="#content-ChinmayMhatre" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=ChinmayMhatre" title="Documentation">📖</a></td> <td align="center"><a href="https://twitter.com/nghuuphuoc"><img src="https://avatars.githubusercontent.com/u/57786711?v=4?s=100" width="100px;" alt=""/><br /><sub><b>phuoc-ng</b></sub></a><br /><a href="#content-phuoc-ng" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=phuoc-ng" title="Documentation">📖</a></td> <td align="center"><a href="https://divjoy.com/"><img src="https://avatars.githubusercontent.com/u/1481077?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gabe Ragland</b></sub></a><br /><a href="#content-gragland" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=gragland" title="Documentation">📖</a></td> <td align="center"><a href="https://www.imranbmohamed.com/"><img src="https://avatars.githubusercontent.com/u/71926855?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Imran Mohamed</b></sub></a><br /><a href="#content-i786m" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=i786m" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/AlexNodex"><img src="https://avatars.githubusercontent.com/u/17162626?v=4?s=100" width="100px;" alt=""/><br /><sub><b>AlexNodex</b></sub></a><br /><a href="#content-AlexNodex" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=AlexNodex" title="Documentation">📖</a></td> <td align="center"><a href="https://arun.app/"><img src="https://avatars.githubusercontent.com/u/22396000?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Arun</b></sub></a><br /><a href="#content-h7y" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=h7y" title="Documentation">📖</a></td> </tr> <tr> <td align="center"><a href="https://binyam.in/"><img src="https://avatars.githubusercontent.com/u/39805353?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Binyamin Aron Green</b></sub></a><br /><a href="#content-binyamin" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=binyamin" title="Documentation">📖</a></td> <td align="center"><a href="https://cssbattle.dev/"><img src="https://avatars.githubusercontent.com/u/379918?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kushagra Gour</b></sub></a><br /><a href="#content-chinchang" title="Content">🖋</a> <a href="https://github.com/codingknite/frontend-development/commits?author=chinchang" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/nathsimpson"><img src="https://avatars.githubusercontent.com/u/12689383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nathan Simpson</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=nathsimpson" title="Documentation">📖</a></td> <td align="center"><a href="https://mintbean.io/"><img src="https://avatars.githubusercontent.com/u/4856944?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Monarch Wadia</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=monarchwadia" title="Documentation">📖</a></td> <td align="center"><a href="https://medium.com/@qjli"><img src="https://avatars.githubusercontent.com/u/75322?v=4?s=100" width="100px;" alt=""/><br /><sub><b>QJ Li</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=qjnz" title="Documentation">📖</a></td> <td align="center"><a href="https://sayemon10.github.io/"><img src="https://avatars.githubusercontent.com/u/35277447?v=4?s=100" width="100px;" alt=""/><br /><sub><b>S. M. Abdul Aziz</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=sayemon10" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/xerosic"><img src="https://avatars.githubusercontent.com/u/42121005?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xerosic</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=xerosic" title="Documentation">📖</a></td> </tr> <tr> <td align="center"><a href="https://zoranjambor.com/"><img src="https://avatars.githubusercontent.com/u/515906?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zoran Jambor</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=ZoranJambor" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/jenniferfu0811"><img src="https://avatars.githubusercontent.com/u/25816882?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jenniferfu0811</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=jenniferfu0811" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/devjhex"><img src="https://avatars.githubusercontent.com/u/124887722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonah Ssegawa</b></sub></a><br /><a href="https://github.com/codingknite/frontend-development/commits?author=devjhex" title="Documentation">📖</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->