👨‍💻
Community Resources
  • Welcome!!
  • Blockchain Resources
  • Web Development
  • A to Z Resources
  • Best GitHub Repos
  • MEAN & MERN Stack
  • React, Redux and ES6
    • basic-concepts
    • boilerplates-and-starter-kits
    • community-resources
    • es6-features
    • flux-tutorials
    • functional-programming
    • git-resources
    • immutable-data
    • javascript-resources
    • node-js-and-npm
    • pros-cons-discussion
    • react-performance
    • react-redux-architecture
    • react-redux-testing
    • react-styling
    • react-tutorials
    • react-vs-backbone
    • redux-side-effects
    • redux-techniques
    • redux-tutorials
    • thinking-in-react-and-flux
    • tips-and-best-practices
    • using-react-with-es6
    • webpack-advanced-techniques
    • webpack-tutorials
  • NodeJS
  • React Native
  • Mixed PDFs
  • AI/ML/DL
Powered by GitBook
On this page
  • Beginner Level Front End Development
  • HTML
  • CSS
  • 🏆 Exercises & Challenges to test out your knowledge on HTML and CSS🏆
  • JavaScript
  • GIT
  • Mid Level Front End Development
  • CSS
  • JavaScript
  • React
  • Vue
  • Angular
  • Testing
  • 🏆 Exercises & Challenges to test out your knowledge on JavaScript🏆
  • Web Animations
  • Developer Tools
  • Web Fonts
  • UI/UX Design
  • Advanced Level Front End Development
  • Web Security
  • Data Mangement (GraphQL, Rest)
  • Serverless Architecture
  • Computer Science
  • State Management
  • Web Typography
  • Responsive and Mobile Design
  • Progressive Web App
  • Web Performance
  • Web Accessibility

Was this helpful?

Web Development

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

PreviousBlockchain ResourcesNextA to Z Resources

Last updated 4 years ago

Was this helpful?

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

CSS

🏆 Exercises & Challenges to test out your knowledge on HTML and CSS🏆

JavaScript

GIT

Mid Level Front End Development

CSS

JavaScript

React

Vue

Angular

Testing

🏆 Exercises & Challenges to test out your knowledge on JavaScript🏆

Web Animations

Developer Tools

Web Fonts

UI/UX Design

Advanced Level Front End Development

Web Security

Data Mangement (GraphQL, Rest)

Serverless Architecture

Computer Science

State Management

Web Typography

Responsive and Mobile Design

Progressive Web App

Web Performance

Web Accessibility

🎮 🎁

📝 🎁

📹 🎁

📝 🎁

📝 🎁

📝 🎁

📝 🎁

📝 🎁

📝 🎁

📝 🎁

📹🎁

📝🎁

🎮🎁

📝🎁

📝🎁

📝🎁

🎮🎁

📚💰

📝🎁

📹💰

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📹🎁

📝🎁

📚🎁

📝🎁

🎮🎁

📚🎁

📝🎁

🎮🎁

🎮🎁

📝🎁

📹🎁

📹🎁

📝🎁

📹🎁

📹🎁

📹🎁

📝🎁

🎮🎁

📚🎁

🎮🏆

📝🎁

📝🎁

📹🎮🎁

🎮🎁

📹🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📹🎁

🎮🎁

📹🎁

🎮🎁

🎮🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝

📝🎁

📝🎁

📚🎁

📚🎁

📚🎁

📚🎁

📚🎁

📚🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

🎮🎁

📹💰

📹🎁

📚💰

📚🎁

🎤🎁

📹💰

📝🎁

📝🎁

📹🎁

📝🎁

📹💰

📝🎁

📹💰

📝📹🎁💰

📹💰

📝🎁

📹💰

📝🎁

📝🎁

📹💰

📹💰

📹🎮🎁

📹💰

📝🎁

📹🎁

📹💰

📝🎁

📹💰

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📹🎁

📝🎁

📝🎁

📝🎁

📹🎁

📝🎁

📹🎁

📝🎁

📹🎁

📹🎁

📝🎁

📹💰

📹💰

📹

📹💰

📹🎁

📝📹🎁

📝🎁

📝🎁

📝🎁

📹🎁

📹🎁

📹💰

🎤🎁

📝🎁

📹🎁

📹💰

📝🎁

📝🎁

📝🎁

📝🎁

📹🎁

📝🎁

📚💰

📹💰

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📝🎁

📹🎁

📝🎁

📝🎁

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
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
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
MDN JavaScript Reference
Array Explorer
Object Explorer
HTMLDog - JavaScript Beginner
JavaScript for Beginners - Udacity
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
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
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
A Detailed Guide to CSS Animations and Transitions
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
REST API Concepts and Examples
Serverless Architecture Explained
Computer Science for All
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
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
Web Development RoadMap