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