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 📝 🎁
​Visual guide to the most popular CSS properties 📝 🎁
​FrontEnd Masters Bootcamp 📹🎁
🏆 Exercises & Challenges to test out your knowledge on HTML and CSS 🏆
​Make a customised birthday card​
​Tell a story with a webpage​
​Make a poster​
​Create a webpage to display your favourite recipe​
​Create a mystery letter​
​Create a webpage to showcase your projects​
​Build a robot on a webpage​
​Create fun robot stickers​
​Create an animated sunrise image​
​Create a web project with several linked rooms​
​Create a multi-page magazine website​
​Create a pixel editor​
​Build a simple website using HTML, CSS, and Javascript​
JavaScript
​JavaScript.info 📝 🎁
​Eloquent JavaScript 📚 🎁
​Mozilla Developer Network - Learn 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
​A Beginner’s Guide to CSS Grid by Kara Luton - freeCodeCamp 📝 🎁
​CSS Grid Layout — Simple Guide by Sergey Gavelyuk 📝 🎁
​Learn CSS Grid by Per Harald Borgen - Scrimba 📹 🎮 🎁
​CSS Flexbox - W3Schools 🎮 🎁
​CSS Flexbox Tutorial - mmtuts 📹 🎁
​Quick! What’s the Difference Between Flexbox and Grid? 📝 🎁
​Media Queries - MDN Web docs 📝 🎁
​CSS3 Media Queries - TutorialRepublic 📝 🎁
​Logic in Media Queries by Chris Coyier - CSS-Tricks 📝 🎁
​What is a CSS Preprocessor? - MDN 📝 🎁
​CSS Preprocessors by Shay Howe 📝 🎁
​An Introduction to CSS Pre-Processors: SASS, LESS and Stylus 📝 🎁
​What is Responsive Web Design? - W3Schools 📝 🎁
​Responsive Web Design by Shay Howe 📝 🎁
​Responsive Web Design Tutorial and Explanation 📹 🎁
​Responsive Web Design Principles - freeCodeCamp 🎮 🎁
​Responsive Web Design Fundamentals - Udacity 📹 🎁
​FlexBox Froggy 🎮 🎁
​Grid Garden 🎮 🎁
​How Flexbox works — explained with big, colorful, animated gifs 📝 🎁
​How to Organize Your CSS with a Modular Architecture (OOCSS, BEM, SMACS) 📝 🎁
​Understanding CSS Selectors 📝 🎁
​BEM: A New Front-End Methodology 📝 🎁
​BEM - Full Introduction to the BEM Methodology 📝
​CSS Mega Cheat Sheet 📝🎁
JavaScript
​10 Things A Serious JavaScript Developer Should Learn 📝 🎁
​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 📚 🎁
​The beginning of an adventure: 13 Weeks of JavaScript  📝 🎁
​JavaScript: Template Literals & Tag Functions for Beginners 📝 🎁
​JavaScript & The spread operator 📝 🎁
​Libraries vs Frameworks 📝 🎁
​Single-Page Applications (and how they work) 📝 🎁
​Regular Expressions Demystified: RegEx isn’t as hard as it looks 📝 🎁
​An Introduction to Regular Expressions (Regex) In JavaScript 📝 🎁
​Commenting JavaScript code with JSDoc 📝 🎁
​Introduction to Functional Programming in JavaScript 📝 🎁
​Functional Programming and Function Chaining in JavaScript 📝 🎁
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: Getting Started (Deborah Kurata - Pluralsight) 📹 💰
​Angular CLI (John Papa - Pluralsight) 📹 💰
​Build your first Angular app (Dan Wahlin - Scrimba) 📹 🎮 🎁
​Angular - The Complete Guide (Maximilian Schwarzmüller - Udemy) 📹 💰
​Using Animations with Angular 📝 🎁
Testing
​Testing JavaScript on Udacity 📹 🎁
​Testing Clientside JavaScript 📹 💰
​Testing with Jest: from zero to hero 📝 🎁
​Learn Javascript Unit Testing With Mocha, Chai and Sinon 📹 💰
🏆 Exercises & Challenges to test out your knowledge on JavaScript 🏆
​Bin2Dec​
​TrueOrFalse​
​Color Cycle​
​Flip Image​
​Lorem Ipsum generator​
​Notes App​
​Slider Design​
​Pomodoro Clock​
​Cause-Effect​
​Christmas Lights​
​Windchill​
​Book Finder App​
​Flash Cards​
​Markdown Previewer​
​Markdown Table Generator​
​String Art​
​Timezone Slackbot - TZ​
​To-Do App​
​GitHub Timeline​
​Kudo's Slackbot​
​Slack Archiver​
​Spell-It​
​Build a simple calculator​
​Make an Image slider​
​Make a pop-up penguin game​
​Make your own modrian​
​Night and Day switcher​
​Music Boxes​
​Two Puppy​
​Create a Game: Breakout​
Web Animations
​A Detailed Guide to CSS Animations and Transitions 📝 🎁
Developer Tools
​A Brief Introduction to Chrome Dev Tools 📝 🎁
​Get Started with Debugging JavaScript in Chrome DevTools 📝 🎁
​Debugging in Chrome 📝 🎁
Web Fonts
​Quick to web fonts via @font-face📝 🎁
​A beginner's Guide to Choosing Web Fonts - Google 📝 🎁
​Understanding Web Fonts and Getting the Most Out of Them - CSS-Tricks 📝 🎁
​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
​Advanced State Management in React (feat. Redux and MobX) 📹 💰
​Getting Started with Redux 📹 💰
​Manage Application State with Mobx-state-tree 📹
​Building React Applications with Idiomatic Redux 📹 💰
​React js tutorial - How Redux Works 📹 🎁
​A Complete React Redux Tutorial for Beginners (2019) 📝 📹 🎁
Web Typography
​Quick guide to webfonts via @font-face 📝 🎁
​A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES 📝 🎁
​Web fonts 📝 🎁
​Responsive Typography 📹 🎁
Responsive and Mobile Design
​Responsive Web Design Fundamentals 📹 🎁
​CSS Grids and Flexbox for Responsive Web Design 📹 💰
​Responsive Web Design Podcast 🎤 🎁
Progressive Web App
​Progressive Web App - Google 📝 🎁
​Intro to Progressive Web Apps 📹 🎁
​Progressive Web Applications and Offline 📹 💰
​A Beginner's Guide To Progressive Web Apps 📝 🎁
​MDN - Progressive Web App Guide 📝 🎁
​4 important points to know about Progressive Web Apps (PWA) 📝 🎁
​Your First PWA 📝 🎁
Web Performance
​Website Performance Optimization 📹 🎁
​Perf.rocks 📝 🎁
​High Performance Web Sites: Essential Knowledge for Front-End Engineers 📚 💰
​JavaScript Performance 📹 💰
Web Accessibility
​Getting Started: Intro to Accessibility Concepts & Tools 📝 🎁
​Accessible to all 📝 🎁
​Accessiblity.dev📝 🎁
​Accessibility Guide 📝 🎁
​Accessiblity Insights📝 🎁
​Web Accessibility - Google 📝 🎁
​Web Accessibility Course by Google and Udacity 📹 🎁
​Writing JavaScript with accessibility in mind 📝 🎁
​WCAG Docs📝 🎁
Contributing
Last modified 3yr ago