frontend-development

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

1. How The Internet Works
2. HTML
3. CSS
4. JavaScript
5. Git
6. React
7. Vue
8. Browser Extensions
9. Icons
10. Fonts and Typography
11. Illustrations
12. Optimization
13. Color Inspiration
14. Images and Videos
15. Hosting Sites
16. Design Inspiration
17. Portfolio Inspiration
18. Youtube Channels
19. Podcasts
20. Blogs
21. Interview Prep
22. Newsletters
23. Contributing

How the Internet Works

Documentation

• 📜How does the Internet work? — MDN

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

👆 Back To Top

HTML

Documentation

• 📜Structuring the web with HTML MDN
• 📜HTML Reference

Cheat Sheets

• 📜OverAPI
• 📜HTML Cheat Sheet
• 📜HTML Entity Refernce

Articles

• 📜A simple guide to HTML elements

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.

👆 Back To Top

CSS

Documentation

• 📜Learn to style HTML using CSS - MDN

Cheat Sheets

• 📜OverAPI CSS Cheat Sheet
• 📜Extensive CSS Reference
• 📜Getting to Know CSS

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

• 🌐Codepen
• 🌐CodeSandbox
• 🌐CSS Deck
• 🌐Dablet
• 🌐JS Bin
• 🌐JSFiddle
• 🌐Liveweave
• 🌐Plunker
• 🌐StackBlitz

Style Guides

• 📜AirBnb Style Guide - CSS
• 📜CSS Guidelines
• 📜Google Style Guide - HTML & CSS
• Trello CSS Guide

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.

👆 Back To Top

JavaScript

Documentation

• 📜JavaScript — Dynamic client-side scripting - MDN

Reference & Cheat Sheets

• 📜JavaScript Reference - MDN
• 📜JavaScript Cheat Sheet - OverAPI

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

• 📜Airbnb JavaScript Style Guide
• 📜Google JavaScript Style Guide
• 📜Standardjs

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

• 🌐HTML DOM
• 🌐this vs that

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

👆 Back To Top

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

• 📒Pro Git
• 📒Git Notes for Professionals

Tools

• 🌐Bitbucket
• 🌐Github
• 🌐Git Extensions for Windows
• 🌐Sourcetree

👆 Back To Top

React

Documentation

• 📜React Official Docs

Cheat Sheets

• 📜React Cheatsheet

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

• 🌐Devprojects
• 🌐DevChallenges

Podcasts

• 🎤React Round Up
• 🎤The React Podcast

Blog Sites

• 🌐Official React Blog
• 🌐Kent C. Dodds' Blog
• 🌐useHooks Blog

Youtube Channels

• 🎥Coding Addict
• 🎥Codevolution
• 🎥freeCodeCamp
• 🎥The Net Ninja
• 🎥Traversy Media

React Tooling

• 🌐ESLint
• 🌐Lodash
• 🌐npm
• 🌐React Sight
• 🌐React Router
• 🌐React Developer Tools
• 🌐Storybook

State Management

• 🌐Mobx
• 🌐Recoil
• 🌐Redux

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

• 🌐Enzyme
• 🌐Jest
• 🌐React Testing Library
• 🌐Cypress

Create React App

• 🌐Create React App
• 🌐React Boilerplate
• 🌐Divjoy 💵

CSS in JS

• 🌐Styled Components
• 🌐Emotion (css in js)

Remote Data Fetching

• 🌐Axios
• 🌐React Query
• 🌐swr

Server Side Rendering

• 🌐Gatsby
• 🌐Next.js

Experts on Twitter

• 📱Andrew Clark
• 📱Brian Vaughn
• 📱Dan Abramov
• 📱Kent C. Dodds
• 📱Luna Ruan
• 📱Rachel Nabors
• 📱Rick Hanlon
• 📱Sebastian Markbåge
• 📱Seth Webster

Conferences

• 🌐ReactNext
• 🌐React Rally
• 🌐ReactFest
• 🌐React Europe

Community

• 🌐React Forum
• 🌐Reactiflux
• 🌐Reddit
• 🌐React Spectrum

👆 Back To Top

Vue

Documentation

• 📜Getting started with Vue - MDN
• 📜Vue Cheatsheet
• 📜Vue Cookbook
• 📜Vue Docs

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

• 🌐Free Vue Projects and Community - DevProjects

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

• 🎥freeCodeCamp
• 🎥Traversy Media
• 🎥Vue NYC
• 🎥VueConf EU

Tools

• 🌐Bit
• 🌐Bootstrap Vue
• 🌐Nuxt.js
• 🌐Onseen UI
• 🌐Quansar Framework
• 🌐Vue Dev Server
• 🌐Vuex
• 🌐Vue Router
• 🌐Vue Dev Tools
• 🌐Vue CLI
• 🌐Vuetify

Blogs

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

Community

• 🌐Reddit
• 🌐Vuejs Forum
• 🌐Vue Land

Conferences

• 🌐Vue Conf
• 🌐Vue Conf US
• 🌐Vue.js London
• 🌐Vue.js Amsterdam

👆 Back To Top

Browser extensions

• 🌐CSS Spider
• 🌐Check Browsers Support 💵
• 🌐CSS Inspector 💵
• 🌐CSS Scan 💵

👆 Back To Top

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

👆 Back To Top

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

👆 Back To Top

Illustrations

• 🌐Blob maker
• 🌐Blush
• 🌐Draw Kit
• 🌐IRA Design
• 🌐Interfacer
• 🌐Icons 8
• 🌐Manypixels
• 🌐Undraw

👆 Back To Top

Optimization

• 🌐CSS Validator
• 🌐Google Analytics
• 🌐Nibbler
• 🌐Namecheap
• 🌐Optimizilla
• 🌐PageSpeed Insights
• 🌐Sizzy
• 🌐Usability Checklist
• 🌐Who Is
• 🌐Woorank

👆 Back To Top

Color Inspiration

• 🌐0to255
• 🌐Branition Colors
• 🌐Coolors
• 🌐Color Hex
• 🌐Color Hunt
• 🌐Flat UI Colors
• 🌐LOL Color Palettes
• 🌐Material Palette
• 🌐myColor Space
• 🌐Paletton
• 🌐UIGradients

👆 Back To Top

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

👆 Back To Top

Hosting Sites

• 🌐Amazon Web Services
• 🌐Digital Ocean
• 🌐Firebase
• 🌐Github
• 🌐Netlify
• 🌐Render
• 🌐Vercel

👆 Back To Top

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

👆 Back To Top

Portfolio Inspiration

• 🌐Aral Tasher
• 🌐Brittany Chiang
• 🌐Fidalgo Pedro
• 🌐Jack Jeznach
• 🌐Julia Johnson
• 🌐Matt Farley
• 🌐Nathan Simpson
• 🌐Developer Portfolios - Github Repo

👆 Back To Top

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

👆 Back To Top

Podcasts

• 🎤codeNewbies
• 🎤Commit Your Code
• 🎤Codepen Radio
• 🎤DevDiscuss
• 🎤freeCodeCamp
• 🎤Frontend Happy Hour
• 🎤Fullstack Radio
• 🎤JavaScript Jabber
• 🎤Ladybug Podcast
• 🎤Modern Web
• 🎤Syntax
• 🎤The Changelog

👆 Back To Top

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

👆 Back To Top

Interview Prep

Resume Templates

• 🌐Canva
• 🌐Creddle
• 🌐Harvard Office Of Career Services
• 🌐MyPerfectResume
• 🌐ResumeWorded
• 🌐Resume.io
• 🌐Resume Maker

Resume Editing

• 🌐Grammarly
• 🌐JobScan
• 🌐SkillSyncer
• 🌐Top Resume

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

• 🌐Codementor
• 🌐Freelancer
• 🌐FlexJobs
• 🌐FreelancerMap
• 🌐Gun.io
• 🌐Guru
• 🌐People Per Hour
• 🌐Upwork

Mock Interviews

• 🌐Interviewing.io
• 🌐Pramp

Project Pair Programming

• 🌐Chingu

Open Source

• 🌐Github Explore
• 🌐First Contributions
• 🌐Good First Issue
• 🌐Good First Issues
• 🌐Open Source Fridays

YouTube Series

• 🎥Get A Job Using LinkedIn - Danny Thompson

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

👆 Back To Top

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