Frontend Learning Kit

Frontend tech guide and curated collection of frontend materials

Show your support by giving a ⭐  to this repo

Frontend resources/materials

Roadmaps

• 📍  Road Map (Beginner Version)
• 📍  Road Map (Advanced Version)

HTML

• 📗  MDN HTML
• 📗  W3 Schools
• 📗  HTML Tutorial

CSS

• 📗  MDN CSS
• 📗  Web Dev
• 🎥  CSS Complete Guide - Udemy
• 📘  CSS for JS developers

Advanced CSS

• 📘  Debugging CSS
• 🎥  CSS Demystified

JavaScript

• 📗  Eloquent JavaScript
• 📗  JavaScript Info
• 📗  MDN JavaScript
• 📗  JavaScript Tutorial
• 📘  JavaScript for Impatient Programmers
• 📘  Just Javascript
• 🎥  Complete JavaScript
• 🎥  Javascript Complete Guide

Advanced JavaScript

• 📗  You don't know JS
• 📗  Secrets of the JavaScript Ninja
• 📘  Deep JavaScript
• 📘  Professional JavaScript for Web developers
• 🎥  Deep JavaScript Foundations
• 🎥  JavaScript Hard Parts
• 🎥  JavaScript: Understanding the Weird Parts

TypeScript

• 📗  TypeScript Deepdive
• 📗  Tackling TypeScript
• 📗  TypeScript Tutorial
• 📗  TypeScript Handbook
• 📘  Programming TypeScript
• 🎥  Understanding typescript
• 🎥  TypeScript Course by ui.dev

React

• 📗  React Dev
• 🎥  React - The Complete Guide
• 🎥  Epic React
• 🎥  Scrimba - Learn React for free interactively

React Repos

• 📁  React TypeScript Cheatsheet
• 📁  Entire React code base explanation by visual block
• 📁  Bulletproof React

Other frameworks

• 🎥  NextJS
• 🎥  Angular
• 🎥  Vue:Complete guide
• 🎥  Sveltejs: Complete Guide

HTTP

• 📗  MDN HTTP
• 📘  HTTP2 in Action

Git

• 📗  Become a git guru
• 📗  Pro Git
• 📗  Git Explorer
• 📁  Practical Git Guide

Web Performance

• 📗  MDN Performance
• 📗  Web Dev Performance
• 📗  Google Dev - Performance
• 📗  Smashing Magezine - Performance
• 🎥  Web Performance Fundamentals

Web Security

• 🎥  Web Security

Accessibility

• 🎥  Accessibility in JavaScript Applications
• 🎥  Develop Accessible Web Apps with React

JS Design Patterns

• 📗  Modern Web App Design Patterns
• 📗  JS Design Patterns
• 📁  Design Patterns for Humans

JS Best practices

• 📘  Refactoring JavaScript
• 🎥  Writing Clean Code
• 📘  The art of unit testing

Functional JavaScript

• 📗  Mostly adequate Guide
• 📗  Functional Light JavaScript
• 🎥  Functional JavaScript

Frontend youtube channels

• 🎥  Traversy Media
• 🎥  Clever Programmer
• 🎥  Net Ninja
• 🎥  Web Dev Simplified
• 🎥  Academind
• 🎥  Dev Ed
• 🎥  Kevin Powell
• 🎥  Codevolution
• 🎥  JavaScript Mastery

Interview Prep Resources

• 📁  Front End Interview Handbook
• 📁  JavaScript Interview Questions
• 📁  JavaScript Code Challenges
• 📁  React Interview Questions
• 📁  Tech Interview Handbook
• 📁  JavaScript Questions MCQ
• 📁  FreeCodeCamp Interview Prep
• 📗  Interview Ant
• 📁  Frontend Mini Challenges
• 📁  The DOM Challenge

Interview Prep channels

• 🎥  Namaste JavaScript
• 🎥  Chirag Goel
• 🎥  Devtools Tech Frontend Interview Series
• 🎥  RoadsideCoder
• 🎥  Front-End Engineer
• 🎥  JS Cafe
• 🎥  Uncommon Geeks

Coding challenges

• 🚉  Big Frontend Dev
• 🚉  Great Frontend Dev
• 🚉  Frontend Mentor
• 🚉  Reacterry
• 🚉  JS Challenger
• 🚉  Devtools Tech
• 🚉  Learners Bucket
• 🚉  Exercism
• 🚉  FrontendPro

DSA resources

• 📘  Grokking Algorithms
• 📘  The Algorithm Design Manual
• 📘  Cracking Coding Interview
• 📁  Javascript Algo
• 🎥  DataStructues Algorithms
• 🎥  Practical Algorithms
• 🎥  JavaScript Algorithms fundamentals

DSA youtube

• 🎥  Adbul Bari
• 🎥  Jenny's Lectures
• 🎥  Gaurav Sen
• 🎥  Tushar Roy - Coding Made Simple
• 🎥  Rachit Jain

Coding platforms

• 🚉  Leetcode
• 🚉  Hackerrank
• 🚉  Interviewbit

Additional Resources

• 🎙  JS Party podcast
• 📗  JavaScript 30
• 📗  FreeCodeCamp React Challange
• 📗  React Coding Challange
• 📗  React by Example
• 📗  React Cheatsheet
• 📗  React Patterns
• 📗  Tao Of React
• 🎥  JavaScript Mastery
• 📗  MDN - Front-end Web Dev pathway
• 📗  The React Handbook
  

License

This repository is MIT licensed. Read more