frontend-development

Frontend dev resource collection

A curated list of resources for learning and improving Frontend development skills

A curated list of resources for Frontend development

GitHub
2k stars
70 watching
220 forks
last commit: 9 months ago
Linked from 1 awesome list

awesome-listawesome-listscss3frontendfrontend-developmentlistlistsresourcesweb-development

How the Internet Works / Documentation
How does the Internet work? — MDN 📜

How the Internet Works / Articles
How does the Internet Work? — HowStuffWorks 📜
How the Internet Works — Medium 📜
How Does the Internet Work? — Stanford 📜

How the Internet Works / 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
Structuring the web with HTML MDN 📜
HTML Reference 📜

HTML / Cheat Sheets
OverAPI 📜
HTML Cheat Sheet 📜
HTML Entity Refernce 📜

HTML / Articles
A simple guide to HTML elements 📜

HTML / Books
HTML Notes for Pros 📒
Design and Build Websites 💵 📒
Head First HTML with CSS 💵 📒
HTML5 Pocket Reference 💵 📒

HTML / 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 📝

HTML / 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
Learn to style HTML using CSS - MDN 📜

CSS / Cheat Sheets
OverAPI CSS Cheat Sheet 📜
Extensive CSS Reference 📜
Getting to Know CSS 📜

CSS / Books
CSS Secrets 💵 📒
The CSS Pocket Guide 💵 📒
CSS: The Definitive Guide: Third Edition 💵 📒
Tiny CSS Projects 💵 📒
CSS Notes for Professionals 📒

CSS / Courses
Introduction to CSS - Scrimba 📝
Introduction to Basic CSS - FreeCodeCamp 📝
Learn CSS - CodeCademy💵 📝
CSS Basics - Team Treehouse 💵 📝

CSS / Frameworks and Libraries
Base 🌐
Bulma 🌐
Bootstrap 🌐
Animate.css 🌐
Dead Simple Grid 750 over 8 years ago 🌐
Foundation 🌐
Materialize CSS 🌐
Milligram 🌐
Mustard UI 🌐
Picnic CSS 🌐
Pure 🌐
Semantic UI 🌐
Spectre 🌐
Skeleton 🌐
Tachyons 🌐
Tailwind CSS 🌐
Tent CSS 🌐
UI Kit 🌐

CSS / Practice your CSS Skills
Codepen 🌐
CodeSandbox 🌐
CSS Deck 🌐
Dablet 🌐
JS Bin 🌐
JSFiddle 🌐
Liveweave 🌐
Plunker 🌐
StackBlitz 🌐

CSS / Style Guides
AirBnb Style Guide - CSS 6,948 6 months ago 📜
CSS Guidelines 📜
Google Style Guide - HTML & CSS 📜
Trello CSS Guide

CSS / 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
JavaScript — Dynamic client-side scripting - MDN 📜

JavaScript / Reference & Cheat Sheets
JavaScript Reference - MDN 📜
JavaScript Cheat Sheet - OverAPI 📜

JavaScript / 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 📝

JavaScript / Books
Eloquent JavaScript 📒
You Don't Know JavaScript 179,778 3 months ago 📒
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💵 📒

JavaScript / Challenge Websites
AtCoder 🌐
CodeChef 🌐
Coderbyte 🌐
Coderbyte 🌐
Codewars 🌐
CodinGame 🌐
CodeForces 🌐
DevProjects - Free real-world JavaScript projects 🌐
Exercism 🌐
HackerEarth 🌐
Hackerrank 🌐
Leetcode 🌐
Pramp 🌐
Project Euler 🌐
SPOJ 🌐
TopCoder 🌐

JavaScript / Snippets and cheatsheets
A ridiculous collection of cheatsheets 📜
Favorite JavaScript utilities in single line of code 📜
Modern JavaScript Cheatsheet 25,392 about 1 month ago 📜
Short JavaScript code snippets for all your development needs 121,836 about 19 hours ago 📜

JavaScript / Style Guides
Airbnb JavaScript Style Guide 145,313 about 2 months ago 📜
Google JavaScript Style Guide 📜
Standardjs 📜

JavaScript / 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. 🌐

JavaScript / Websites
HTML DOM 🌐
this vs that 🌐

JavaScript / 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 💵 📝

Git / Books
Pro Git 📒
Git Notes for Professionals 📒

Git / Tools
Bitbucket 🌐
Github 🌐
Git Extensions for Windows 7,788 6 days ago 🌐
Sourcetree 🌐

React / Documentation
React Official Docs 📜

React / Cheat Sheets
React Cheatsheet 📜

React / 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💵 📝

React / 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) 💵 📒

React / Project Ideas
Devprojects 🌐
DevChallenges 🌐

React / Podcasts
React Round Up 🎤
The React Podcast 🎤

React / Blog Sites
Official React Blog 🌐
Kent C. Dodds' Blog 🌐
useHooks Blog 🌐

React / Youtube Channels
Coding Addict 🎥
Codevolution 🎥
freeCodeCamp 🎥
The Net Ninja 🎥
Traversy Media 🎥

React / React Tooling
ESLint 🌐
Lodash 🌐
npm 🌐
React Sight 🌐
React Router 53,130 3 days ago 🌐
React Developer Tools 🌐
Storybook 🌐

React / State Management
Mobx 🌐
Recoil 19,610 6 days ago 🌐
Redux 60,912 6 days ago 🌐

React / UI Frameworks & Libraries
Grommet 🌐
Material UI 🌐
Material Kit React 1,193 5 months ago 🌐
Onsen UI 🌐
Reactstrap 🌐
React Bootstrap 🌐
React Toolbox (Material Design) 🌐
Rebass 🌐
Semantic UI React 🌐
Chakra UI 🌐

React / Unit Testing
Enzyme 19,955 3 months ago 🌐
Jest 🌐
React Testing Library 🌐
Cypress 🌐

React / Create React App
Create React App 102,771 3 months ago 🌐
React Boilerplate 29,482 over 1 year ago 🌐
Divjoy 🌐 💵

React / CSS in JS
Styled Components 🌐
Emotion (css in js) 🌐

React / Remote Data Fetching
Axios 🌐
React Query 🌐
swr 🌐

React / Server Side Rendering
Gatsby 🌐
Next.js 🌐

React / Experts on Twitter
Andrew Clark 📱
Brian Vaughn 📱
Dan Abramov 📱
Kent C. Dodds 📱
Luna Ruan 📱
Rachel Nabors 📱
Rick Hanlon 📱
Sebastian Markbåge 📱
Seth Webster 📱

React / Conferences
ReactNext 🌐
React Rally 🌐
ReactFest 🌐
React Europe 🌐

React / Community
React Forum 🌐
Reactiflux 🌐
Reddit 🌐
React Spectrum 🌐

Vue / Documentation
Getting started with Vue - MDN 📜
Vue Cheatsheet 📜
Vue Cookbook 📜
Vue Docs 📜

Vue / 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💵 📝

Vue / Project Ideas
Free Vue Projects and Community - DevProjects 🌐

Vue / 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 💵 📒

Vue / Podcasts
Cynical Developer Episode 99 🎤
Enjoy the Vue 🎤
JavaScript Jabber Episode 276 🎤
Software Engineering Daily 🎤
Syntax Episode 130 🎤
Vue News Podcast 🎤
Views on Vue 🎤

Vue / Youtube Channels
freeCodeCamp 🎥
Traversy Media 🎥
Vue NYC 🎥
VueConf EU 🎥

Vue / Tools
Bit 17,893 5 days ago 🌐
Bootstrap Vue 🌐
Nuxt.js 🌐
Onseen UI 🌐
Quansar Framework 🌐
Vue Dev Server 21 over 7 years ago 🌐
Vuex 🌐
Vue Router 🌐
Vue Dev Tools 24,683 2 months ago 🌐
Vue CLI 29,759 4 months ago 🌐
Vuetify 🌐

Vue / Blogs
Aligator.io 🌐
CSS-Tricks - Vue 🌐
The Vue Point 🌐
Vue.js Developers 🌐

Vue / Community
Reddit 🌐
Vuejs Forum 🌐
Vue Land 🌐

Vue / Conferences
Vue Conf 🌐
Vue Conf US 🌐
Vue.js London 🌐
Vue.js Amsterdam 🌐

Browser extensions
CSS Spider 🌐
Check Browsers Support 💵 🌐
CSS Inspector 💵 🌐
CSS Scan 💵 🌐

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
Blob maker 🌐
Blush 🌐
Draw Kit 🌐
IRA Design 🌐
Interfacer 🌐
Icons 8 🌐
Manypixels 🌐
Undraw 🌐

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
Amazon Web Services 🌐
Digital Ocean 🌐
Firebase 🌐
Github 🌐
Netlify 🌐
Render 🌐
Vercel 🌐

Design Inspiration
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 🌐

Portfolio Inspiration
Aral Tasher 🌐
Brittany Chiang 🌐
Fidalgo Pedro 🌐
Jack Jeznach 🌐
Julia Johnson 🌐
Matt Farley 🌐
Nathan Simpson 🌐
Developer Portfolios - Github Repo 7,470 6 days ago 🌐

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 🌐

Interview Prep / Resume Editing
Grammarly 🌐
JobScan 🌐
SkillSyncer 🌐
Top Resume 🌐

Interview Prep / 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 🌐

Interview Prep / Freelance Jobs Sites
Codementor 🌐
Freelancer 🌐
FlexJobs 🌐
FreelancerMap 🌐
Gun.io 🌐
Guru 🌐
People Per Hour 🌐
Upwork 🌐

Interview Prep / Mock Interviews
Interviewing.io 🌐
Pramp 🌐

Interview Prep / Project Pair Programming
Chingu 🌐

Interview Prep / Open Source
Github Explore 🌐
First Contributions 🌐
Good First Issue 🌐
Good First Issues 🌐
Open Source Fridays 🌐

Interview Prep / YouTube Series
Get A Job Using LinkedIn - Danny Thompson 🎥

Interview Prep / 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 🌐

Contributors ✨
Joel P. Mugalu
Chinmay Mhatre
phuoc-ng
Gabe Ragland
Imran Mohamed
AlexNodex
Arun
Binyamin Aron Green
Kushagra Gour
Nathan Simpson
Monarch Wadia
QJ Li
S. M. Abdul Aziz
xerosic
Zoran Jambor
jenniferfu0811
Jonah Ssegawa

Backlinks from these awesome lists:

More related projects: