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.
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
- 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 does the Internet Work? — HowStuffWorks
- 📜How the Internet Works — Medium
- 📜How Does the Internet Work? — Stanford
- 🎥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 Notes for Pros
- 📒Design and Build Websites 💵
- 📒Head First HTML with CSS 💵
- 📒HTML5 Pocket Reference 💵
- 📝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 💵
- 🌐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.
- 📝Introduction to CSS - Scrimba
- 📝Introduction to Basic CSS - FreeCodeCamp
- 📝Learn CSS - CodeCademy💵
- 📝CSS Basics - Team Treehouse 💵
- 🌐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
- 🌐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.
- 📝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💵
- 📒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💵
- 🌐AtCoder
- 🌐CodeChef
- 🌐Coderbyte
- 🌐Coderbyte
- 🌐Codewars
- 🌐CodinGame
- 🌐CodeForces
- 🌐DevProjects - Free real-world JavaScript projects
- 🌐Exercism
- 🌐HackerEarth
- 🌐Hackerrank
- 🌐Leetcode
- 🌐Pramp
- 🌐Project Euler
- 🌐SPOJ
- 🌐TopCoder
- 📜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
- 🌐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.
- 📜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
- 📝A Guide to Git & Version Control
- 📝Git Cheat Sheet
- 📝Learn Git
- 📝Version Control (Git)
- 📝Version Control with Git
- 📝Getting Started with Git 💵
- 📝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💵
- 📒Build Your Own React
- 📒Pure React
- 📒React Explained
- 📒Under the hood ReactJS
- 📒Fullstack React 💵
- 📒React from Zero 💵
- 📒Road to React 💵
- 🌐Grommet
- 🌐Material UI
- 🌐Material Kit React
- 🌐Onsen UI
- 🌐Reactstrap
- 🌐React Bootstrap
- 🌐React Toolbox (Material Design)
- 🌐Rebass
- 🌐Semantic UI React
- 🌐Chakra UI
- 🌐Axios
- 🌐React Query
- 🌐swr
- 📱Andrew Clark
- 📱Brian Vaughn
- 📱Dan Abramov
- 📱Kent C. Dodds
- 📱Luna Ruan
- 📱Rachel Nabors
- 📱Rick Hanlon
- 📱Sebastian Markbåge
- 📱Seth Webster
- 📝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💵
- 📒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 💵
- 🎤Cynical Developer Episode 99
- 🎤Enjoy the Vue
- 🎤JavaScript Jabber Episode 276
- 🎤Software Engineering Daily
- 🎤Syntax Episode 130
- 🎤Vue News Podcast
- 🎤Views on Vue
- 🌐Bit
- 🌐Bootstrap Vue
- 🌐Nuxt.js
- 🌐Onseen UI
- 🌐Quansar Framework
- 🌐Vue Dev Server
- 🌐Vuex
- 🌐Vue Router
- 🌐Vue Dev Tools
- 🌐Vue CLI
- 🌐Vuetify
- 🌐BoxIcons
- 🌐CSS.gg
- 🌐Font Awesome
- 🌐Flaticon
- 🌐Freepik
- 🌐Fontastic
- 🌐Heroicons
- 🌐Iconfactory
- 🌐Icons8
- 🌐Icontre
- 🌐Iconjar
- 🌐IconFinder
- 🌐Iconshock
- 🌐Iconmonstr
- 🌐Ionicons
- 🌐Icomoon
- 🌐Material Icons
- 🌐Pngtree
- 🌐Swift Icons
- 🌐UXWing
- 🌐1001Fonts
- 🌐Abstract Fonts
- 🌐Befonts
- 🌐DaFont
- 🌐Google Fonts
- 🌐FFonts
- 🌐FonstSpace
- 🌐FontsArena
- 🌐Fontsquirrel
- 🌐Free Script Fonts
- 🌐FontSpace
- 🌐MyFonts
- 🌐PinSpiry Fonts
- 🌐TypeTester
- 🌐Typo Guide
- 🌐Unblast
- 🌐CSS Validator
- 🌐Google Analytics
- 🌐Nibbler
- 🌐Namecheap
- 🌐Optimizilla
- 🌐PageSpeed Insights
- 🌐Sizzy
- 🌐Usability Checklist
- 🌐Who Is
- 🌐Woorank
- 🌐0to255
- 🌐Coolors
- 🌐Color Hex
- 🌐Color Hunt
- 🌐Flat UI Colors
- 🌐LOL Color Palettes
- 🌐Material Palette
- 🌐myColor Space
- 🌐Paletton
- 🌐UIGradients
- 🌐Burst
- 🌐Coverr
- 🌐Canva
- 🌐Free Images
- 🌐Flickr
- 🌐Gratisography
- 🌐ISO Republic
- 🌐Life of Pix
- 🌐Pexels
- 🌐Pixabay
- 🌐Reshot
- 🌐Subtle Patterns
- 🌐Startup Stock Photos
- 🌐The Stocks
- 🌐Unsplash
- 🌐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
- 🌐Aral Tasher
- 🌐Brittany Chiang
- 🌐Fidalgo Pedro
- 🌐Jack Jeznach
- 🌐Julia Johnson
- 🌐Matt Farley
- 🌐Nathan Simpson
- 🌐Developer Portfolios - Github Repo
- 🎥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
- 🎤codeNewbies
- 🎤Commit Your Code
- 🎤Codepen Radio
- 🎤DevDiscuss
- 🎤freeCodeCamp
- 🎤Frontend Happy Hour
- 🎤Fullstack Radio
- 🎤JavaScript Jabber
- 🎤Ladybug Podcast
- 🎤Modern Web
- 🎤Syntax
- 🎤The Changelog
- ✍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
- 🌐Canva
- 🌐Creddle
- 🌐Harvard Office Of Career Services
- 🌐MyPerfectResume
- 🌐ResumeWorded
- 🌐Resume.io
- 🌐Resume Maker
- 🌐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
- 📜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
- 🌐CSS-Tricks
- 🌐CSS Weekly
- 🌐FrontEnd Focus
- 🌐JavaScript Weekly
- 🌐Responsive Design Weekly
- 🌐Smashing News Letter
You're very welcome to contribute to this list.
Be sure to read How to Contribute before making your contribution.
Thanks goes to these wonderful people
