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
- πOverAPI
- πHTML Cheat Sheet
- πHTML Entity Refernce
- π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 π΅
- πLearn HTML in Detail
- π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 Secrets π΅
- πThe CSS Pocket Guide π΅
- πCSS: The Definitive Guide: Third Edition π΅
- πTiny CSS Projects π΅
- πCSS Notes for Professionals
- π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
- πCodepen
- πCodeSandbox
- πCSS Deck
- πDablet
- πJS Bin
- πJSFiddle
- πLiveweave
- πPlunker
- πStackBlitz
- πAirBnb Style Guide - CSS
- πCSS Guidelines
- πGoogle Style Guide - HTML & CSS
- Trello CSS Guide
- π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π΅
- πLearn Javascript From Scratch - Scaler
- π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.
- πHTML DOM
- πthis vs that
- π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 π΅
- πPro Git
- πGit Notes for Professionals
- πBitbucket
- πGithub
- πGit Extensions for Windows
- πSourcetree
- πReact Cheatsheet
- π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 π΅
- πBuild a Frontend Web Framework (From Scratch) π΅
- πDevprojects
- πDevChallenges
- π€React Round Up
- π€The React Podcast
- πOfficial React Blog
- πKent C. Dodds' Blog
- πuseHooks Blog
- π₯Coding Addict
- π₯Codevolution
- π₯freeCodeCamp
- π₯The Net Ninja
- π₯Traversy Media
- πESLint
- πLodash
- πnpm
- πReact Sight
- πReact Router
- πReact Developer Tools
- πStorybook
- πGrommet
- πMaterial UI
- πMaterial Kit React
- πOnsen UI
- πReactstrap
- πReact Bootstrap
- πReact Toolbox (Material Design)
- πRebass
- πSemantic UI React
- πChakra UI
- πEnzyme
- πJest
- πReact Testing Library
- πCypress
- πCreate React App
- πReact Boilerplate
- πDivjoy π΅
- πStyled Components
- πEmotion (css in js)
- πAxios
- πReact Query
- πswr
- π±Andrew Clark
- π±Brian Vaughn
- π±Dan Abramov
- π±Kent C. Dodds
- π±Luna Ruan
- π±Rachel Nabors
- π±Rick Hanlon
- π±Sebastian MarkbΓ₯ge
- π±Seth Webster
- πReactNext
- πReact Rally
- πReactFest
- πReact Europe
- πReact Forum
- πReactiflux
- πReddit
- πReact Spectrum
- πGetting started with Vue - MDN
- πVue Cheatsheet
- πVue Cookbook
- πVue Docs
- π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
- π₯freeCodeCamp
- π₯Traversy Media
- π₯Vue NYC
- π₯VueConf EU
- πBit
- πBootstrap Vue
- πNuxt.js
- πOnseen UI
- πQuansar Framework
- πVue Dev Server
- πVuex
- πVue Router
- πVue Dev Tools
- πVue CLI
- πVuetify
- πAligator.io
- πCSS-Tricks - Vue
- πThe Vue Point
- πVue.js Developers
- πReddit
- πVuejs Forum
- πVue Land
- πVue Conf
- πVue Conf US
- πVue.js London
- πVue.js Amsterdam
- πCSS Spider
- πCheck Browsers Support π΅
- πCSS Inspector π΅
- πCSS Scan π΅
- π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
- πBlob maker
- πBlush
- πDraw Kit
- πIRA Design
- πInterfacer
- πIcons 8
- πManypixels
- πUndraw
- πCSS Validator
- πGoogle Analytics
- πNibbler
- πNamecheap
- πOptimizilla
- πPageSpeed Insights
- πSizzy
- πUsability Checklist
- πWho Is
- πWoorank
- π0to255
- πBranition Colors
- π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
- πAmazon Web Services
- πDigital Ocean
- πFirebase
- πGithub
- πNetlify
- πRender
- πVercel
- πAwwwards
- πBehance
- πCall To idea
- πDesign Inspiration
- πDribble
- πFrom Up North
- πLand Book
- πMedia Queries
- πOne Page Love
- πPinterest
- π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
- πGrammarly
- πJobScan
- πSkillSyncer
- πTop Resume
- π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
- πCodementor
- πFreelancer
- πFlexJobs
- πFreelancerMap
- πGun.io
- πGuru
- πPeople Per Hour
- πUpwork
- πInterviewing.io
- πPramp
- πChingu
- πGithub Explore
- πFirst Contributions
- πGood First Issue
- πGood First Issues
- πOpen Source Fridays
- π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
Joel P. Mugalu
π π π§
Chinmay Mhatre
π π
phuoc-ng
π π
Gabe Ragland
π π
Imran Mohamed
π π
AlexNodex
π π
Arun
π π