Web Development In 2020 - A Practical Guide Video Tutorials List

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! 😊

High Level Overview

• 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

Tools 1 - The Necessities (2:38)

Computer & OS

• Linux
• MacOS
• Windows

Text Editor / IDE

• 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

Browser

• Chrome

• Firefox

• Shearer's Links

Terminal

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

Design (Optional)

• Adobe XD

• Figma

• Photoshop

• Sketch

• Shearer's Links

UI/UX (Optional)

• Shearer's Links

The Building Blocks (7:10)

HTML

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

CSS

• CSS3

• Suggested YouTube Videos:

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

• Shearer's Links

HTML & CSS

• Shearer's Links

Responsive Design (9:18)

• 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)

Custom Reusable CSS Components (10:50)

• 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

CSS Frameworks (Choose One) (12:26)

• 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

Vanilla JavaScript (13:52)

• 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

Tools 2 - Essential Dev Tools (16:28)

• 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

Basic Deployment (20:45)

• 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

Where To Now? (24:12)

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

Front-End Framework (Choose One) (25:00)

• 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 (27:14)

• Svelte

• Suggested YouTube Videos:

  • Svelte Crash Course

• Shearer's Links

State Management (28:32)

• 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

Server-Side Rendering (30:40)

• 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

Static Site Generators (33:04)

• GatsbyJS

• Gridsome

• Scully

• Suggested YouTube Videos:

  • Gatsby JS Crash Course

• Shearer's Links

TypeScript (35:05)

• TypeScript

• Suggested YouTube Videos:

  • TypeScript Crash Course
  • Setup TypeScript With Node & Express

• Shearer's Links

Server-Side Language (Choose One) (37:42)

• 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

Server-Side Framework (Choose One) (42:52)

• 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

Database (Choose One) (47:37)

• 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 (52:08)

• GraphQL

• Apollo

• Suggested YouTube Videos:

  • Build a GraphQL Server
  • GraphQL With React & Apollo

• Shearer's Links

Content Management (53:41)

• 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

Deployment & DevOps (55:22)

• 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

Mobile Development (Choose One) (59:51)

• Flutter

• React Native

• NativeScript

• Ionic

• Xamarin

• Shearer's Links

PWA: Progressive Web Apps (1:01:43)

• Progressive Web Apps (PWAs)

• Suggested YouTube Videos:

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

• Shearer's Links

Desktop Apps with Electron (1:03:19)

• Electron

• Suggested YouTube Videos:

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

• Shearer's Links

JAMstack (1:04:24)

• Jamstack (JavaScript, APIs & Markup)

Serverless Architecture (1:06:10)

• Serverless

• AWS Lambda & Netlify

• Suggested YouTube Videos:

  • Serverless Lambda Functions

• Shearer's Links

API-First Design (1:07:24)

• 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 / AI & The Web (1:08:12)

• Machine Learning

• Artificial Intelligence (AI)

• Suggested YouTube Videos:

  • Simple Machine Learning With JavaScript - Brain.js

• Shearer's Links

Speech Recognition (1:09:03)

• 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 (1:09:42)

• Web Assembly

---

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

Shearer's Other Links