✨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
- 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 📝🎁
- 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 📝 🎁
- 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.info 📝 🎁
- Eloquent JavaScript 📚 🎁
- Mozilla Developer Network - Learn JavaScript 📝 🎁
- Codecademy 🎮 🎁
- You Don't Know JS - Up and Going 📚 🎁
- JavaScript Tutorial 📚 🎁
- MDN JavaScript Reference 📝 🎁
- Array Explorer 🎮 🎁
- Object Explorer 🎮 🎁
- HTMLDog - JavaScript Beginner 📝 🎁
- JavaScript for Beginners - Udacity 📹 🎁
- Learn JavaScript - The easiest way to learn & pracice modern JavaScript 🎮 🎁
- JavaScript Books 📝 🎁
- 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 📚 🎁
- 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 📝🎁
- 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 📝 🎁
- 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 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 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 JavaScript on Udacity 📹 🎁
- Testing Clientside JavaScript 📹 💰
- Testing with Jest: from zero to hero 📝 🎁
- Learn Javascript Unit Testing With Mocha, Chai and Sinon 📹 💰
- 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
- A Brief Introduction to Chrome Dev Tools 📝 🎁
- Get Started with Debugging JavaScript in Chrome DevTools 📝 🎁
- Debugging in Chrome 📝 🎁
- 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 📝 🎁
- Learn UX 📝 🎁
- Design for Non-Designers 📹 🎁
- 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 📝 🎁
- 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) 📝 📹 🎁
- Quick guide to webfonts via @font-face 📝 🎁
- A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES 📝 🎁
- Web fonts 📝 🎁
- Responsive Typography 📹 🎁
- Responsive Web Design Fundamentals 📹 🎁
- CSS Grids and Flexbox for Responsive Web Design 📹 💰
- Responsive Web Design Podcast 🎤 🎁
- 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 📝 🎁
- Website Performance Optimization 📹 🎁
- Perf.rocks 📝 🎁
- High Performance Web Sites: Essential Knowledge for Front-End Engineers 📚 💰
- JavaScript Performance 📹 💰
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent