Learning Web Development from YouTube
Tags: css, javascript, react, node
Published: 2022-05-28 14:11:49

---
title: 'Learning Web Development from YouTube'
description: 'List of youtuber channels that I watched to learn Web Development.'
tags: 'css,javascript,react,nodejs'
canonical_url: 'https://hamidmehmood.vercel.app/blog/youtube-list'
---

## Introduction

July 2020 is the first time I started learning web development. Sharing best youtube video where you able to master web developing.

## HTML CSS

- [Coding Addict](https://www.youtube.com/watch?v=-8ORfgUa8ow) → This channels is best for beginners to intermediate I highly recommended to learn from Jhon Smilga.
- [Default Starter for CSS](https://www.youtube.com/watch?v=UDdyGNlQK5w) → Use this Starter for html and css. You gonna love this starter ✅.
- [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw) → Really good for beginners because he covers basic stuff

## JavaScript

- [Traversy Media](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) → There are so many stuff besides JavaScript like React
- [Coding Addict](https://www.youtube.com/watch?v=2Ji-clqUYnA) → Check out the Higher Order Function (like map, foreach, filter), also check his project with [Vanilla Javascript](https://www.youtube.com/watch?v=c5SIG7Ie0dM) → Incredible opportunity to learn JavaScript .

## React.js

- [Coding Addict](https://www.youtube.com/watch?v=iZhV0bILFb0) → React Fundamentals, Hooks, Context API, React Router, Custom Hooks (very recommended)

## TypeScript & React

- [Ben Awad](https://www.youtube.com/watch?v=Z5iWr6Srsj8) → Awesome content for learning typescript. Check out this video to clear generics concept [Typescript Generics](https://www.youtube.com/watch?v=nViEqpgwxHE)

## Full-stack Next.js + GraphQL

- [CoderOne](https://www.youtube.com/watch?v=4ELH8CT4J0A) → Full MERN Website React Nodejs w/ GraphQL Tailwind and Docker

- [Ben Awad](https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw) → Great videos, but he uses some stack that is not familiar for beginners like Typescript and GraphQL

## Animation in React

- [devaslife](https://www.youtube.com/watch?v=bSMZgXzC9AA) → Make your portfolio by learning framer-motion & three
- [CoderOne](https://www.youtube.com/watch?v=IlnmWntmUns) → Create Lovely Auto-Complete SearchBar framer-motion
- [CoderOne](https://www.youtube.com/watch?v=-bll7l-BKQI) → Login/Register Form with smooth Animations using framer-motion

## Additional Resources

- [Ben Awad](https://www.youtube.com/watch?v=4WTV6ZCY4qo) → let's break our limits by learning algorithm & data structure ,importent of good sleep and by using vim to boost how fast you code.
- [Jason Lengstorf](https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A) → Check his 90 minutes stream that covers a lot of topic. Also check out his - [react-query video](https://www.youtube.com/watch?v=4UCwA2n4gsA): it pretty similiar with SWR for data fetching and caching
- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) → A lot of 'quick course' in 10 or 1 minute to give you knowledge about other tech stack

## Courses that I Have Completed

Course is sorted based on the first one I completed:

1. [React Tutorial and Projects Course](https://www.udemy.com/course/react-tutorial-and-projects-course) → long duration, great materials,incredible teaching style. I Promise if you watch and practice along with this tutorial then you become intermediate to master level react developer.

2. [Javascript Tutorial and Projects Course](https://www.udemy.com/course/javascript-tutorial-for-beginners-w) → Highly recommended this course will give you grip on javascript fundamental along incredible project.

3. [NodeJS Tutorial and Projects Course](https://www.udemy.com/course/nodejs-tutorial-and-projects-course) → Very recommended if you are interested in learning backend language with MongoDB & Express Js. Jhon Smilga will cover every importent topic of node js in this course.

## Summary

Learning web development can be very tiring because there are so many things that need to be covered from the very basic like HTML, CSS, JS, then you need to learn Git for version control, frontend framework, styling framework, backend services, database. But, you will eventually understand it with some time.

But, if you enjoy doing web development, watching these videos will feel like entertainment, you learn new stuff every day and keeps investing yourself with knowledge. Also, try to not only watching the video but follow along with the code and make your own project. It was the fastest way to learn for me.

Pro Tips: change the playback speed to 1.5x speed to make your productivity 1.5x faster