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