Learning-Resource-Path-Front-End

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

• 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 📹 🎁

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 🎮 💰
• 📝 🎁