Web development is a minefield of tools and technologies and it is very difficult to know what you need to learn and why you need to learn it. The absolute best resource I have come across on this topic is the YouTube video Web Development In 2020 - A Practical Guide by Brad Traversy. Watching this video is an absolute must for anyone who wants to become a web developer. In fact before you start learning anything you should first watch this video to understand the big picture. It will act as an invaluable compass in your learning journey. Free Code Camp's blog post Web Development in 2020: What Coding Tools You Should Learn gives a good high-level summary of what is covered in the video should you wish to know more prior to investing your time in watching the video.

Brad mentions in the video that you do not need to learn everything here. He is essentially providing you with an option menu of what is possible to learn (and some things you really should learn - such as HTML, CSS, and JavaScript) and why you should learn them depending on what your goals are. So really it is up to you to pick and choose what you want to learn.

I have created a list of links below to sections of the video along with the slides so you can delve further into certain specific topics that you are interested in learning more about. I have also compiled convenient links to the suggested YouTube tutorials highlighted in the video. You can also see the links I have added to relevant sections of Andrew Shearer's excellent Web Development 2020 Course List that comprises a list of the top Udemy courses for each slide as well as other resources. In fact this very repository is based on his excellent work so huge credit to him for putting all of that together. However, not everyone likes or can afford Udemy courses on all of these topics so I wanted to provide links to the YouTube videos and other resources so that people can either learn for free in a more bitesized manner.

OK no time to waste and time to start learning cos it's gonna take you years to learn even part of this stuff! 😊

• Intro - 0:07
• What Do You Want To Do? - 1:28
• The Necessities - 2:38
• HTML/CSS (Building Blocks) - 7:10
• Responsive Web Design - 9:18
• Reusable CSS Components - 10:50
• CSS Frameworks - 12:26
• Vanilla JavaScript - 13:52
• Tools (Git, Dev Tools, etc) - 16:28
• Basic Deployment - 20:45
• Basic Frontend Dev - 23:15
• Where To Now? - 24:12
• Frontend Framework - 25:00
• Svelte - 27:14
• State Management - 28:32
• SSR (Next & Nuxt) - 30:40
• SSG (Gatsby & Gridsome) - 33:04
• TypeScript - 35:05
• Frontend Wizard - 37:06
• Server Side Language - 37:42
• Server Side Framework - 42:52
• Database - 47:37
• GraphQL - 52:08
• CMS & Headless CMS - 53:41
• Deployment & DevOps - 55:22
• Full Stack Dev - 59:23
• Mobile Development - 59:51
• PWA - 1:01:43
• Desktop Apps With Electron - 1:03:19
• JAMstack - 1:04:24
• Serverless Architecture - 1:06:10
• API-First Design - 1:07:24
• Machine Learning & AI - 1:08:12
• Speech Recognition - 1:09:03
• Web Assembly - 1:09:42
• Advice & Thank You - 1:11:21

• Linux
• MacOS
• Windows

• Eclipse

• Sublime Text

• Visual Studio

• Visual Studio Code

• Shearer's Text Editor Links

• Shearer's IDE Links

• Suggested YouTube Videos:

  • My Top 5 Free Text Editors For Web Development
  • Visual Studio Code Intro & Setup
  • 15 VS Code Extensions for Front-End Developers in 2019

• Chrome

• Firefox

• Shearer's Links

• Bash
• Zsh
• Powershell
• Git Bash
• iTerm2
• Hyper

• Adobe XD

• Figma

• Photoshop

• Sketch

• Shearer's Links

• Shearer's Links

• HTML5
• Suggested YouTube Videos:
  • HTML Crash Course For Absolute Beginners
• Suggested Udemy Courses:
  • Modern HTML & CSS From The Beginning

• CSS3

• Suggested YouTube Videos:

  • CSS Crash Course For Absolute Beginners
  • CSS Grid Layout Crash Course
  • Flexbox in 20 Minutes

• Shearer's Links

• Shearer's Links

• Suggested YouTube Videos:
  • Build an HTML5 Website With A Responsive Layout
  • Responsive Landing Page Using HTML & CSS (A Little jQuery)
  • Build a Responsive Mobile First Website
  • Build a Netflix Clone (HTML / CSS)

• Syntactically Awesome Style Sheets (Sass)

• Suggested YouTube Videos:

  • Sass Crash Course
  • Social Network Theme With Sass
  • Responsive Portfolio Project
  • Fancy Form UI From Scratch

• Shearer's Links

• Bootstrap
• Suggested YouTube Videos:
  • Bootstrap Beginner Crash Course
• Suggested Udemy Courses:
  • Bootstrap 4 From Scratch With 5 Projects
• Tailwind CSS
• Suggested YouTube Videos:
  • Tailwind CSS Crash Course
• Materialize
• Suggested YouTube Videos:
  • Materialize Crash Course [Part 1]
  • Materialize Crash Course [Part 2]
• Suggested Udemy Courses:
  • Materialize From Scratch With 5 Projects
• Bulma
• Suggested YouTube Videos:
  • Bulma CSS Framework Crash Course

• JavaScript

• Suggested YouTube Videos:

  • JavaScript Crash Course For Beginners
  • JavaScript DOM Crash Course
  • JavaScript OOP Crash Course (ES5 & ES6)
  • Async JS Crash Course (Callbacks, Promises, Async Await)
  • Vanilla JS Playlist

• Suggested Udemy Courses:

  • Modern JavaScript From The Beginning
  • 20 Web Projects With Vanilla JavaScript

• Shearer's Links

• Git (Version Control) & GitHub

• Browser Dev Tools

• VSCode Extensions

• Emmet

• NPM or Yarn (Package Manager)

• Axios

• Webpack or Parcel (JS Module Bundlers)

• Suggested YouTube Videos:

  • Linux Tutorial - Basic Command Line
  • Git & GitHub Crash Course For Beginners
  • NPM Crash Course
  • Yarn Crash Course
  • Google Chrome Developer Tools Crash Course
  • Emmet Crash Course
  • Webpack Crash Course
  • Exploring The Parcel Application Bundler
  • Axios Crash Course | HTTP Library

• Shearer's Links

• Domain Registration (NameCheap, Google Domains, etc.)

• Managed Hosting (InMotion, Hostgator, Bluehost, etc.)

• Static Hosting (Netlify, GitHub Pages)

• SSL Certificate

• FTP, SFTP (File Transfer Protocol)

• SSH (Secure Shell)

• CLI & Git

• Suggested YouTube Videos:

  • Web Hosting & cPanel Guide - How To Easily Upload Your Website
  • Deploy Websites in Seconds With Netlify
  • Github Pages Deploy & Domain
  • SSH Crash Course | With Some DevOps

• Suggested YouTube Videos:
  • Front End, Back End & Full Stack Web Development
  • 10 Things All Web Developers Should Learn

• React (Optional: MUI)

• Vue, (Optional: Vue Material)

• Angular, (Optional: Angular Material, Angular Flex-Layout)

• Suggested YouTube Videos:

  • React JS Crash Course
  • Vue JS Crash Course
  • Angular Crash Course, Learn Angular Material

• Suggested Udemy Courses:

  • React Front To Back
  • Angular Front To Back

• Shearer's Links

• Svelte

• Suggested YouTube Videos:

  • Svelte Crash Course

• Shearer's Links

• React - Redux, Context API with Hooks
• Vue - Vuex
• Angular - NGRX, NGRX Facades, Services, Observable Data Services, Smart Components vs Presentation Components
• Apollo Client
• Suggested YouTube Videos:
  • Redux Crash Course With React
  • Vuex Crash Course | State Management
  • Build an Expense Tracker | React Hooks & Context API
  • Full NGRX Course 2020 - OOP Coders
• Suggested Udemy Courses:
  • MERN Stack Front To Back: Full Stack React, Redux & Node.js

• Next.js

• Nuxt.js

• NestJS

• Suggested YouTube Videos:

  • Next.js Crash Course - Server Side React
  • Nuxt JS Crash Course
  • NestJS Crash Course

• Shearer's Links

• GatsbyJS

• Gridsome

• Scully

• Suggested YouTube Videos:

  • Gatsby JS Crash Course

• Shearer's Links

• TypeScript

• Suggested YouTube Videos:

  • TypeScript Crash Course
  • Setup TypeScript With Node & Express

• Shearer's Links

• Node.js

• Python

• PHP

• C#

• Ruby

• GoLang

• Java

• Rust

• Suggested YouTube Videos:

  • Node.js Tutorial For Absolute Beginners
  • Python Crash Course For Beginners
  • PHP Front To Back
  • Build a C# .NET Application in 60 Minutes
  • Go / Golang Crash Course
  • Rust Crash Course | Rustlang

• Suggested Udemy Courses:

  • Node.js API Masterclass With Express & MongoDB
  • Object Oriented PHP & MVC
  • Python Django Dev To Deployment

• Shearer's Links

• Node.js - Express, Koa, Adonis, Feathers.js, Nest.js

• PHP - Laravel, Symfony, Slim

• Python -Django, Flask

• C# - ASP.NET MVC

• Java - Spring MVC, Grails

• Ruby - Ruby on Rails, Sinatra

• Go - Revel

• Suggested YouTube Videos:

  • Express JS Crash Course
  • Koa.js Crash Course - Modern & Minimalist Node.js
  • Getting Started With Adonis JS 4.0
  • NestJS Crash Course
  • Django Crash Course
  • Python Flask From Scratch
  • Laravel From Scratch
  • Up & Running With Symfony 4
  • Ruby On Rails In 60 Minutes

• Suggested Udemy Courses:

  • Node.js API Masterclass With Express & MongoDB
  • Python Django Dev To Deployment

• Shearer's Links

• Relational Database - PostGreSQL, MySQL, MS SQL

• NoSQL - MongoDB, RethinkDB, CouchDB

• Cloud Database - Firebase, Azure Cloud DB, AWS

• Lightweight & Cache - Redis, SQLite, NeDB

• Suggested YouTube Videos:

  • MySQL Crash Course | Learn SQL
  • MongoDB Crash Course
  • Redis Crash Course Tutorial
  • An Introduction To NoSQL Databases
  • RethinkDB & ReQL Crash Course

• Shearer's Links

• GraphQL

• Apollo

• Suggested YouTube Videos:

  • Build a GraphQL Server
  • GraphQL With React & Apollo

• Shearer's Links

• Traditional CMS - Wordpress, Drupal, Keystone, Enduro

• Headless CMS - Contentful, Prismic.io, Sanity, Strapi

• Suggested YouTube Videos:

  • Wordpress Site in 1 Hour
  • Exploring The Wordpress REST API & React Integration
  • Keystone JS Tutorial - A Node.js CMS

• Shearer's Links

• SSH (Secure Shell)

• Web Server Environment - NGINX, Apache HTTP Server

• App Hosting - Linode, Heroku, AWS, Azure, Now

• Virtualization - Docker, Vagrant

• Testing - Unit, Functional, Integration, etc.

• Load Balancing, Monitoring, Security, etc.

• Suggested YouTube Videos:

  • SSH Crash Course | With Some DevOps
  • Full Node.js Deployment - NGINX, SSL With Lets Encrypt
  • Exploring Docker
  • Vagrant Crash Course
  • Jest Crash Course - Unit Testing in JavaScript

• Shearer's Links

• Flutter

• React Native

• NativeScript

• Ionic

• Xamarin

• Shearer's Links

• Progressive Web Apps (PWAs)

• Suggested YouTube Videos:

  • Intro To Service Workers & Caching
  • Build a PWA With Vue & Ionic 4

• Shearer's Links

• Electron

• Suggested YouTube Videos:

  • An Intro To Electron - Desktop Apps with JavaScript
  • Build an Electron App in Under 60 Minutes

• Shearer's Links

• Jamstack (JavaScript, APIs & Markup)

• Serverless

• AWS Lambda & Netlify

• Suggested YouTube Videos:

  • Serverless Lambda Functions

• Shearer's Links

• API First Design

• Suggested YouTube Videos:

  • What Is A RESTful API? Explanation of REST & HTTP

• Suggested Udemy Courses:

  • Node.js API Masterclass With Express & MongoDB

• Shearer's Links

• Machine Learning

• Artificial Intelligence (AI)

• Suggested YouTube Videos:

  • Simple Machine Learning With JavaScript - Brain.js

• Shearer's Links

• Speech Recognition
• HTML5 Web Speech API
• Google Speech-To-Text
• Dialogflow
• Suggested YouTube Videos:
  • Text To Speech & Synthesis App - JavaScript & Web Speech API

• Web Assembly

If all that wasn't enough then here are even more links:

Shearer's Other Links