Learning Resource Roadmap - (Front-End Development)

Search…
✨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 2yr ago
Copy link
On this page
Beginner Level Front End Development
HTML
CSS
🏆 Exercises & Challenges to test out your knowledge on HTML and CSS 🏆
JavaScript
GIT
Mid Level Front End Development
CSS
JavaScript
React
Vue
Angular
Testing
🏆 Exercises & Challenges to test out your knowledge on JavaScript 🏆
Web Animations
Developer Tools
Web Fonts
UI/UX Design
Advanced Level Front End Development
Web Security
Data Mangement (GraphQL, Rest)
Serverless Architecture
Computer Science
State Management
Web Typography
Responsive and Mobile Design
Progressive Web App
Web Performance
Web Accessibility