Learning Web Development from Youtube

May 2020 is the first time I started learning web development. In the beginning, I learn from a Udemy Course by Angela Yu. In my opinion, that course is really great, but it is a very long course, about 54 hours. This course is really good if you really have no clue about Web Development because she explains it thoroughly.

But, that only course is not enough, there are some materials that are outdated and she teaches the styling with bootstrap and skipped the fundamental of CSS. I cover all of that with these youtube channels.

HTML CSS

• Kevin Powell This channels cover so many fundamentals of CSS, I learned so much from this channel. I also follow his best practice in writing CSS
• Design Course Focuses on how to design a website
• Web Dev Simplified Really good for beginners because he covers basic stuff
• Dev Ed There are some video that covers common layouting in HTML and CSS
• The Net Ninja There is a crash course on HTML CSS

JavaScript

• Traversy Media There are so many stuff besides JavaScript like React
• Florin Pop Check out the Higher Order Function (like map, foreach, filter), also check his project with Vanilla Javascript
• codeSTACKr Check the Javascript in 90 seconds series, there are also some crash courses and some fundamental stuff like this, async await, fetch api

React.js

• Traversy Media There is a React Course that is released in early 2021 (very recommended)
• Dev Ed Nice content on Advanced React like Context, Reducer
• The Net Ninja This Channel also has an ongoing course on React
• James Q Quick Some of Gatsby course if you are interested, I personally choose Next.js over Gatsby

Next.js

• Lee Robinson Great explaining on Next.js, he actually worked for Vercel he also has a course which called React 2025 using Next.js and Firestore
• Ben Awad Great videos, but he uses some stack that is not familiar for beginners like Typescript and GraphQL

Animation in React

• Wrong Akram Many materials on GSAP, framer-motion and some other libraries
• Sam Selikoff Focus on Framer Motion and Tailwindcss

Additional Resources

• Austin Shelby explains the design pattern using Tailwindcss
• Jason Lengstorf Check his 90 minutes stream that covers a lot of topics. Also, check out his react-query video: it is pretty similar to SWR for data fetching and caching
• Fireship A lot of 'quick course' in 10 or 1 minute to give you knowledge about another tech stack

Courses that I Have Completed

The course is sorted based on the first one I completed:

1. The Complete 2020 Web Development Bootcamp long duration, great materials, some of them are outdated
2. The Complete Node.js Developer Very recommended if you are interested in learning backend language with MongoDB
3. User Experience Design Essentials - Adobe XD UI UX Design Course to learn how to use Adobe XD, I prefer Figma more because it's free
4. Learn Figma - UI/UX Design Essential Training really good, has many exercise that can make you feel comfortable on how to use Figma
5. Learn UI Design Fundamentals FREE on scrimba, Gary Simon created this course covers the UI Design Fundamentals
6. Complete Python Developer in 2020: Zero to Mastery Really good, teach you from the basic, then covers topic like automation using beautiful soup
7. React Front to Back Great course by Brad Traversy, more like hands-on project using React Context and Redux

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.

Good luck! Contact me if you need some personal recommendation, I will be glad to help you!

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

What are your favorite youtube channels to learn from?

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site