Learning Resource Roadmap - (Front-End Development)
โจThis repo serves as a resource for developers to leverage on their journey into Front End Development.โจ
This is a visual roadmap for beginners venturing into the World of Software Development. In order not to feel overwhelmed by how much you need to know to be a Front End Developer. This roadmap serves as a guide through out your journey. You can follow through this guide and be assured you are on the right path.
Resource types: ๐ฎ - Interactive ๐ - Book ๐น - Video ๐ - Article ๐ค - Podcast ๐ฉโ๐ป - Community ๐ฐ - Paid Resource ๐- Free Resource ๐ - Exercises
Beginner Level Front End Development
HTML
Codecademy ๐ฎ ๐
HTML Cheatsheet ๐ ๐
Udacity ๐น ๐
HTML Best Practices ๐ ๐
HTML Reference Guide ๐ ๐
MDN HTML Guide ๐ ๐
Marksheet.io ๐ ๐
W3Schools HTML Guide ๐ ๐
HTML.com ๐ ๐
HTMLDog - HTML Beginner ๐ ๐
FrontEnd Masters Bootcamp ๐น๐
HTML5 Periodic Table ๐๐
CSS
Learn CSS from CodeCademy ๐ฎ ๐
MDN CSS Guide ๐ ๐
CSS Reference ๐ ๐
Learn Layout ๐ ๐
CSS Diner ๐ฎ ๐
CSS Secrets By Lea Verou ๐ ๐ฐ
30 Seconds of CSS ๐ ๐
CSS-in-Depth ๐น ๐ฐ
W3Schools CSS Guide ๐ ๐
CSS Tutorial ๐ ๐
Learn CSS in 5 minutes ๐ ๐
HTMLDog - CSS Beginner ๐ ๐
FrontEnd Masters Bootcamp ๐น๐
๐ Exercises & Challenges to test out your knowledge on HTML and CSS ๐
JavaScript
JavaScript.info ๐ ๐
Eloquent JavaScript ๐ ๐
Codecademy ๐ฎ ๐
You Don't Know JS - Up and Going ๐ ๐
MDN JavaScript Reference ๐ ๐
Array Explorer ๐ฎ ๐
Object Explorer ๐ฎ ๐
HTMLDog - JavaScript Beginner ๐ ๐
JavaScript for Beginners - Udacity ๐น ๐
GIT
Git basics ๐น ๐
git - the simple guide ๐ ๐
Version Control with Git - Udacity ๐น ๐
How to use Git and Github - Udacity ๐น ๐
Github and Collaboration - Udacity ๐น ๐
Git Cheatsheet ๐ ๐
Git Interactive ๐ฎ ๐
Pro Git Book ๐ ๐
Git Branching ๐ฎ ๐
Mid Level Front End Development
CSS
Learn CSS Grid by Per Harald Borgen - Scrimba ๐น ๐ฎ ๐
CSS Flexbox - W3Schools ๐ฎ ๐
CSS Flexbox Tutorial - mmtuts ๐น ๐
Media Queries - MDN Web docs ๐ ๐
CSS3 Media Queries - TutorialRepublic ๐ ๐
What is a CSS Preprocessor? - MDN ๐ ๐
CSS Preprocessors by Shay Howe ๐ ๐
Responsive Web Design by Shay Howe ๐ ๐
FlexBox Froggy ๐ฎ ๐
Grid Garden ๐ฎ ๐
Understanding CSS Selectors ๐ ๐
BEM: A New Front-End Methodology ๐ ๐
CSS Mega Cheat Sheet ๐๐
JavaScript
Exploring ES6 ๐ ๐
Learning JavaScript Design Patterns ๐ ๐
Robust JavaScript ๐ ๐
You Don't Know JS - Types and Grammer ๐ ๐
You Don't Know JS - Scope and Closures ๐ ๐
You Don't Know JS - ES.Next and beyond ๐ ๐
JavaScript & The spread operator ๐ ๐
Libraries vs Frameworks ๐ ๐
Commenting JavaScript code with JSDoc ๐ ๐
React
Official React Documentation ๐ ๐
React Resources ๐ ๐
React 101 - Codecademy ๐ฎ ๐
The Beginner Guide to ReactJS ๐น ๐ฐ
React Bootcamp ๐น ๐
Road to Learn React ๐ ๐ฐ
React Quickly ๐ ๐
React Podcast ๐ค ๐
React for Beginners ๐น ๐ฐ
Leigh Halliday Blog ๐ ๐
Vue
Vue Official Documentation ๐ ๐
Learn Vue 2: Step By Step ๐น ๐
Vue Cookbook ๐ ๐
Vue Mastery ๐น ๐ฐ
Awesome Vue ๐ ๐
Egghead Vue Courses ๐น ๐ฐ
Vue Developers Blog & Courses ๐ ๐น ๐ ๐ฐ
Fullstack Vue ๐น ๐ฐ
THE VUE.JS COURSE ๐ ๐
Angular
Angular Tutorial ๐น ๐ฐ
Angular - An Overview ๐ ๐
Angular - Official Home Page ๐ ๐
Angular CLI (John Papa - Pluralsight) ๐น ๐ฐ
Build your first Angular app (Dan Wahlin - Scrimba) ๐น ๐ฎ ๐
Using Animations with Angular ๐ ๐
Testing
Testing JavaScript on Udacity ๐น ๐
Testing Clientside JavaScript ๐น ๐ฐ
Testing with Jest: from zero to hero ๐ ๐
๐ Exercises & Challenges to test out your knowledge on JavaScript ๐
Web Animations
Developer Tools
A Brief Introduction to Chrome Dev Tools ๐ ๐
Debugging in Chrome ๐ ๐
Web Fonts
Quick to web fonts via @font-face๐ ๐
Get Started with the Google Fonts API ๐ ๐
UI/UX Design
Learn UX ๐ ๐
Design for Non-Designers ๐น ๐
Advanced Level Front End Development
Web Security
The Basics of Web Application Security ๐ ๐
Web Security Basics ๐ ๐
A Quick Introduction to Web Security ๐ ๐
Web Security on FrontEndMasters ๐น ๐
Browser Security Handbook ๐ ๐
Frontend Security ๐น ๐
HTTP Security Best Practice ๐ ๐
Data Mangement (GraphQL, Rest)
REST API Concepts and Examples ๐น ๐
Serverless Architecture
Serverless Architecture Explained ๐น ๐
Computer Science
Computer Science for All ๐ ๐
State Management
Getting Started with Redux ๐น ๐ฐ
React js tutorial - How Redux Works ๐น ๐
A Complete React Redux Tutorial for Beginners (2019) ๐ ๐น ๐
Web Typography
Quick guide to webfonts via @font-face ๐ ๐
Web fonts ๐ ๐
Responsive Typography ๐น ๐
Responsive and Mobile Design
Responsive Web Design Fundamentals ๐น ๐
Responsive Web Design Podcast ๐ค ๐
Progressive Web App
Progressive Web App - Google ๐ ๐
Intro to Progressive Web Apps ๐น ๐
Progressive Web Applications and Offline ๐น ๐ฐ
MDN - Progressive Web App Guide ๐ ๐
Your First PWA ๐ ๐
Web Performance
Website Performance Optimization ๐น ๐
Perf.rocks ๐ ๐
JavaScript Performance ๐น ๐ฐ
Web Accessibility
Accessible to all ๐ ๐
Accessiblity.dev๐ ๐
Accessibility Guide ๐ ๐
Accessiblity Insights๐ ๐
Web Accessibility - Google ๐ ๐
WCAG Docs๐ ๐
Last updated