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 ๐ ๐
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 ๐ ๐
๐ 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
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 ๐ ๐
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 ๐
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 - es6 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 ๐ ๐
- Vue Cookbook ๐ ๐
- Vue Mastery ๐น ๐ฐ
- Awesome Vue ๐ ๐
- Egghead Vue Courses ๐น ๐ฐ
- Fullstack Vue ๐น ๐ฐ
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
Web Animations
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 ๐น ๐
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๐ ๐