Web Development

✨This repo serves as a resource for developers to leverage on their journey into Full Stack Web Development.✨

Web Development RoadMap

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 Full Stack Web 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📝🎁