Web Development 2021 Roadmap
How The Internet Works
Basic Tools
HTML
CSS Time To Choose
Back-End Path
Front-End Path
Pick A Language
C#
Databases
APIs
Text Editor
Authentication
Transitions /
Animations
Terminal
Browser
JavaScript
Forms & Validations
Blockchain / Crypto
Python
More Tools
Desktop
Applications
Browser Dev Tools
Content Management Systems (CMS)
CSS Preprocessors
Electron
Deployment /
DevOps
Mobile Applications
Front-End Framework
Svelte
Virtualization
Testing
Hosting
Design
GraphQL
Photoshop
Back-End Frameworks
Java
Responsive Design
Static
Build Tools
Accessibility
Express (Node.js)
CSS Grid
React
Figma
iTerm
Chrome
Basics
GitHub Actions
JAMstack
TypeScript
Static Site Generators
Fluid Widths
Nuxt.js (Vue)
Ionic
Fetch API
Linters / Formatters
Visual Studio Code
Version Control
Custom Properties
GitHub Pages
Sketch
Unit
CSS Frameworks
Integration
Koa (Node.js)
Markup
Viewport
Axios
State Management
Netlify
Semantic HTML
HTTP
PHP
Rust
Web Servers Apache
Vercel
Module Bundlers
ESLint
Nginx
Spring (Java)
JavaScript
Server Side Rendering (SSR)
Package Managers
Modern CSS
Hyper
Edge
Serverless
(FaaS)
Bootstrap
Parcel
Media Queries
Context API (React)
rem units
SEO
Zsh
Blazor (C#)
C
11ty
Speech Recognition
Functional
Services (Angular)
AWS
Rollup
MS IIS
Headless
PostCSS
SSH
Heroku
Domain Names
Flexbox
Emmet
React Native
Apollo
Next.js (React)
Django (Python)
Adobe XD
yarn
Firefox
Flask (Python)
Gatsby (React)
JSON
Task Runners
NativeScript
VS Code Extensions
Netlify
SSL Certificate
Vim
Git Bash
ES6+
Laravel (PHP)
CSS Modules
C++
Kubernetes
Rust
Sass
Azure
DNS
Vue
Nuxt.js (Vue)
Prettier
DOM Manipulation
AWS Lambda
API
Progressive Web Apps (PWA)
Powershell
Basic Syntax
Load Balancing, Monitoring, Security
Vuex (Vue)
Mobile First
Styled Components
GitHub
Hosting
storyblok
Tailwind CSS
Webpack
Next.js (React)
Gulp
Ruby on Rails (Ruby)
Browsers
Go
Ruby
Git
Best Practices
Sublime Text
Redux (React)
Docker
npm scripts
Atom
JavaScript (Node.js)
Bash
Angular
npm
Gridsome (Vue)
Resources:
TypeScript - The Basics (Fireship)
Resources:
React State Management Tutorial (Dev Ed)
Redux For Beginners (Dev Ed)
LEARN VUEX IN 15 MINUTES (Program With Erik)
Resources:
MongoDB Crash Course
(Traversy Media)
FaunaDB Basics (Fireship)
Firebase Beginner's Guide
(Fireship)
Build a React App with Airtable
(codeSTACKr)
Relational
MS SQL
Resources:
Design Course
(YouTube)
Adrian Twarog (YouTube)
Resources:
npm (Website)
yarn (Website)
Gulp (Coder Coder)
Prettier (Website)
ESLint (Website)
Webpack (freeCodeCamp)
Parcel (James Q Quick)
Rollup (Website)
Eddie Jaoude (YouTube)
Git (Website)
GitHub (Website)
Learn Git in 30 Minutes
(codeSTACKr)
Next Level GitHub Profile
Readme.md (codeSTACKr)
Top VS Code Extensions
Emmet = Faster HTML & CSS
Workflow! (codeSTACKr)
Axios Crash Course (Traversy
Media)
Machine Learning / AI
Resources:
Laravel Crash Course
2020 (Traversy
Media)
Spring Boot Tutorial
(freeCodeCamp)
Ruby on Rails Crash
Course 2020
(Traversy Media)
Express JS Crash
Course (Traversy
Media)
Django (Dennis Ivy)
Learn Flask for
Python
(freeCodeCamp)
Blazor (Claudio
Bernasconi)
NoSQL / Cloud
Resources:
CSS Crash Course in 30 Minutes (codeSTACKr)
Learn CSS Flexbox in 20 Minutes (codeSTACKr)
Learn CSS Grid in 20 Minutes (codeSTACKr)
Learn Sass in 30 Minutes (codeSTACKr)
GSAP Typing Animation (codeSTACKr)
CSS King, Kevin Powell (YouTube)
JWT
Resources:
How the Internet
Works in 5 Minutes
What is the
Internet?(Code.org)
Traditional
JavaScript (Deno)
Resources:
VS Code Playlist
Become A VS Code
SuperHero!
Resources:
Tailwind CSS
Bootstrap
Contentful
Prismic
Resources:
GSAP (GreenSock Animation Platform)
anime.js
Firebase
Brain.js
Providers
Web Assembly
Resources:
GraphQL Full Course (freeCodeCamp)
PWA Tutorial for Beginners (The Net Ninja)
WebAssembly (Wasm) in 100 Seconds (Firship)
What is the Jamstack? (Traversy Media - James Q Quick)
JAMstack Crash Course (James Q Quick)
HTML5 Web Speech API (Website)
Google Speech-To-Text (Website)
Alan AI (Website)
Build A Voice Recognition Ecommerce App With Alan AI (Web Dev Simplified)
Resources:
HTML Crash Course in 30 Minutes
(codeSTACKr)
AWS
Resources:
Learn PostgreSQL
Tutorial
(freeCodeCamp)
MySQL Crash
Course (Traversy
Media)
Resources:
Gatsby (Weibenfalk)
Next.js (Colby Fayock)
Gridsome (Traversy Media - Gwen Faraday)
Nuxt.js (Traversy Media)
Examples:
VS Code
Twitch
Slack
Figma
Discord
Wordpress
Resources:
React Playlist (codeSTACKr)
Vue (Program With Erik)
Vue (Faraday Academy)
Angular Crash Course (Traversy Media)
Svelte Crash Course (Traversy Media)
Resources:
Node.js Crash Course (Traversy Media)
Deno Intro & Tutorial (codeSTACKr)
Caleb Curry (YouTube)
Rust Crash Course (Traversy Media)
C# Full Course for Beginners (freeCodeCamp)
Intro to Java (freeCodeCamp)
PHP Tutorial (freeCodeCamp)
Go Tutorial (freeCodeCamp)
Ruby Full Course (freeCodeCamp)
OAuth
Resources:
styled components
CSS Modules
Flutter
Resources:
JavaScript Tutorial for Beginners (codeSTACKr)
Learn JSON in 10 Minutes (codeSTACKr)
Fetch API Explained (codeSTACKr)
JavaScript Playlist (codeSTACKr)
JavaScript Shorts (codeSTACKr)
Firebase
Azure Cloud SQL
Plain CSS
MongoDB
Airtable
Python
GSAP
MySQL
FaunaDB Auth0
Sanity.io
Drupal
TensorFlow.js
Strapi
Netlify CMS
anime.js
PostgreSQL
Resources:
Make Your Own API (Ania Kubow) Resources:
Simple React User Login Authentication with Auth0
(codeSTACKr)
React Authentication Crash Course With Firebase
(Web Dev Simplified)
Resources:
How to make a WordPress
website from scratch (Adrian
Twarog)
Getting Started with Sanity.io
(James Q Quick)
Build a Portfolio Site with
Sanity.io and Gatsby (Jason
Lengstorf)
Strapi.js Crash Course
(Traversy Media)
Resources:
DevOps Directive (YouTube)
What are GitHub Actions? (Eddie Jaoude)
Automatic Deployment with GitHub Actions (Traversy
Media - Anson The Developer)
Create a Serverless Express App (Program With Erik)
Serverless Lambda Functions (Traversy Media)
Dockerize VS Code (codeSTACKr)
Wordpress
Resources:
React Native (William Candillon)
Flutter (Flutter Explained)
Flutter (Tadas Petra)
Flutter (Robert Brunhage)
Resources:
Machine Learning (Patrick Loeber aka Python Engineer)
Resources:
Netlify
GitHub Pages
Heroku
Linode
Vercel
AWS
Azure
Web
Linode
Resources:
thenewboston (YouTube)
Caleb Curry (YouTube)
Soft Skills &
Personal Development
Motivation /
Impostor Syndrome
Attention to Detail Adaptability
Creativity Communication
Leadership
Interpersonal Skills
Teamwork Problem Solving
Time Management Work Ethic
Resources:
Danny Thompson:
-- YouTube
-- Twitter
ULTIMATE WEB DEVELOPMENT ROADMAP 2021+
Start Here