✨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📝 🎁