mirror of
https://github.com/mojpm/frontend-development.git
synced 2025-01-29 10:19:04 +01:00
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.
Contibuting
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
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 💵
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
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.
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💵
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
-
Snippets and cheatsheets
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 💵
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
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
- DevProjects - Free Vue Projects and Community
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
- 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
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
- 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.