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 📝🎁
• Scaler HTML Reference 📝🎁
• HTML Features 📝🎁

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 📹 💰
• Learn CSS in Deatil📝 🎁
• W3Schools CSS Guide 📝 🎁
• CSS Tutorial 📝 🎁
• Learn CSS in 5 minutes 📝 🎁
• HTMLDog - CSS Beginner 📝 🎁
• Visual guide to the most popular CSS properties 📝 🎁
• FrontEnd Masters Bootcamp 📹🎁
• Types of CSS 📝 🎁

🏆 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 网络 - Learn JavaScript 📝 🎁
• Codecademy 🎮 🎁
• You Don't Know JS - Up and Going 📚 🎁
• JavaScript Tutorial 📚 🎁
• MDN JavaScript Reference 📝 🎁
• Array 探索r 🎮 🎁
• Object 探索r 🎮 🎁
• HTMLDog - JavaScript Beginner 📝 🎁
• JavaScript for Beginners - Udacity 📹 🎁
• Learn JavaScript - The easiest way to learn & pracice modern JavaScript 🎮 🎁
• JavaScript Books 📝 🎁

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 🎮 🏆
• Git Notes for professionals 📚 🎁

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 🎮 🎁
• Anchoreum 🎮 🎁
• 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 新建 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 📝 🎁
• Disarray 🎮 💰
• 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 📝 🎁
• Regex Machina 🎮 💰
• 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 📝 🎁
• Learn React for free 🎮 🎁

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
• Easybank Landing Page
• IP Adress Tracker
• BigFrontEnd 🎮 🎁 💰

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 安全

• The Basics of Web Application 安全 📝 🎁
• Web 安全 Basics 📝 🎁
• A Quick Introduction to Web 安全 📝 🎁
• Web 安全 on FrontEndMasters 📹 🎁
• Browser 安全 Handbook 📝 🎁
• Frontend 安全 📹 🎁
• HTTP 安全 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 洞察📝 🎁
• Web Accessibility - Google 📝 🎁
• Web Accessibility Course by Google and Udacity 📹 🎁
• Writing JavaScript with accessibility in mind 📝 🎁
• WCAG Docs📝 🎁

Leverage The Power Of IDE/Text-Editors

• Deep dive into your favorite code Editor (VScode) and increase productivity📹 🎁