mirror of
https://github.com/mojpm/frontend-development.git
synced 2025-09-30 03:28:58 +02: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
- 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
-
Videos
- KhanAcademy - What is the Internet
- Youtube - The Internet: Crash Course Computer Science
- Youtube - Computer Networks: Crash Course Computer Science
- Youtube - The World Wide Web: Crash Course Computer Science
HTML
-
Documentation
- Cheat Sheet - HTML Cheat Sheet
- Cheat Sheet - OverAPI - Links To MDN
- CSS-Tricks - HTML Entity Refernce
- Josh Buchea - HEAD, A free guide to HTML5
<head>elements - MDN - HTML5 Reference
- Reference - HTML Reference
- W3Schools - Introduction to HTML
-
Books
-
Courses
- CodeCademy - Learn HTML 💵
- EDX - HTML5 and CSS Fundemantals
- FreeCodeCamp - Introduction to Basic HTML & HTML5
- Pluralsight - HTML Fundamentals 💵
- Scrimba - Introduction to HTML
- Team Treehouse - Introduction to HTML and CSS 💵
- The Odin Project - HTML & CSS
- Udemy - HTML and CSS3 Course 💵
- Udacity - Intro to HTML and CSS
- W3Schools - HTML Tutorial
- Youtube - HTML Full Course
-
Websites
- HTML5 Doctor - A great reference for HTML Elements
- HTML-5-TUTORIAL - Another 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 Sheet - OverAPI - Links To MDN
- Extensive CSS Reference
- Getting to Know CSS
- MDN - CSS
- Reference - CSS Reference
-
Books
-
Courses
- CodeCademy - Learn CSS 💵
- FreeCodeCamp - Introduction to Basic CSS
- Scrimba - Introduction to CSS
- Team Treehouse - CSS Basics 💵
- W3School - CSS Tutorial
-
Frameworks and Libraries
-
Practice your CSS Skills
-
Style Guides
-
Websites
- 7 Days, 7 Websites - A challenge site to build 7 websites in 7 days
- Can I use - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
- Clippy - A small tool to help you using the new and powerful clip-path property.
- CSSBattle - Learn CSS through a fun code-golfing game
- CSS Easing functions - An amazing collection of easing functions bo be 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 wonderful blog site for everything CSS
- Cubic Berzier Function Generator - Free insights about traffic, visitors and conversions.
- Flexbox Froggy - Learn CSS Flexbox through a game
- Responsinator - A quick tool to check the responsiveness of a site across different devices.
- Responsive Grid System - A quick, flexible and easy fluid grid for easy responsive web design.
JavaScript
-
Documentation
- Cheat Sheet - OverAPI - Links To MDN
- MDN - JavaScript Reference
- MDN - Operator Precedence Table
- MDN - JavaScript Event Refernce
-
Courses
- CodeCademy - Learn JavaScript
- EDX - Programming the Web with JavaScript
- freeCodeCamp - JavaScript Algorithms and Data Structures
- GeekforGeeks
- The Odin ProjectJavascript Course- includes some backend related content too
- Wes Bos - JavaScript30
- W3Schools - JavaScript Tutorial
- Udemy The Complete JavaScript Course 💵
-
Books
-
Challenge Websites
- AtCoder
- CodeChef
- Coderbyte
- Coderbyte
- Codewars
- CodinGame
- CodeForces
- DevProjects - Free real-world JavaScript projects.
- Exercism
- HackerEarth
- Hackerrank
- Leetcode
- Mintbean - Free learnathons instead of just algorithms.
- Pramp
- Project Euler
- SPOJ
- TopCoder
-
Snippets and cheatsheets
-
Style Guides
-
Visual Studio Code Extensions
- Babel JavaScript - Syntax highlighting for today's JavaScript
- Bracket Pair Colorizer 2 - Matches brackets with same color.
- Debugger for Chrome - Debugging tool.
- ESLint - Code Linter that can find out any problematic patterns. You can even make your own set of rules to check and reuse logic.
- Intellisense - Can show code completion and information on a certain function, variables, and properties by hover.
- Live Server - Automatically reload the web page whenever there are changes in your code.
- npm - npm support for Visual Studio Code
- Path Intellisense -Aauto-complete the path of the file you are trying to import
- Prettier - Responsible for 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 - Common tasks of managing HTML DOM with vanilla JavaScript
- this vs that - The differences between _ and _ in the front-end development
-
Articles
Git
-
Courses
-
Books
-
Tools
React
-
Documentation
-
Courses
- Egghead - The Beginner's Guide to React
- freeCodeCamp - Introduction to React
- FullStackOpen - Introduction to React
- Pluralsight - React Getting Started
- Scrimba - Learn React
- Wes Bos - React for Beginners
- EpicReact - Epic React 💵
-
Books
-
Projects
-
Podcasts
-
Blog Sites
-
Youtube Channels
-
React Tooling
-
State Management
-
UI Framework / UI Library
-
Unit Testing
-
Create React App
-
CSS in JS
-
Remote Data Fetching
-
Server Side Rendering
-
Experts on Twitter
-
Conferences
-
Community
Vue
-
Documentation
-
Courses
- freeCodeCamp - Learn Vue.js - Full Course for Beginners
- Frontend Masters - Advanced Vue.js Features from the Ground Up
- Laracasts - Learn Vue 2: Step By Step
- Scotch - Getting Started with Vue.js
- Testdriven - Learn Vue by Building and Deploying a CRUD App
- Vue-Exercises Ninja Squad - Become a Ninja with Vue 3
- Vuemastery - Intro to Vue 2
- VueSchool - Learn Vue 💵
- Vuemastery - Premium Beginner to Advanced Vue Course 💵
-
Projects
- 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
-
Youtube Channels
-
Tools
-
Blogs
-
Community
-
Conferences
Browser extensions
- CSS Spider - The quickest and convenient way to copy, visualize, edit and export CSS
- Check Browsers Support 💵 - Check browser compatibility without leaving your tab
- CSS Inspector 💵 - Get the CSS code of any web element with CSS Inspector
- CSS Scan 💵 - The fastest and easiest way to check, copy and edit CSS
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 - Check if your CSS code is valid and contains no errors.
- Google Analytics - Free insights about traffic, visitors and conversions.
- Nibbler - Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
- Namecheap - Premium and cost-effective domain names and web hosting.
- Optimizilla - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
- PageSpeed Insights - Quick tool to test your webpage for performance on all devices.
- Sizzy - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
- Usability Checklist - Catch common usability problems of your website before deployment.
- Who Is - Quick tool to check the availability of a domain name.
- Woorank - Get a review of your website to address issues and identify opportunities to get ahead of competition.
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
- Developer Portfolios
- Fidalgo Pedro
- Jack Jeznach
- Julia Johnson
- Matt Farley
- Nathan Simpson
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
-
ATS Resources
-
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
- Danny Thompson - Ge A Job Using LinkedIn (Series)
-
Articles
- 5 things you need to know in a programming interview
- Finding your first remote job
- 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.