π₯ The self taught Web-Developer: YouTube edition
This is a complete resource for learning full-stack web development it doesn't matter if you're a newbie, senior dev, or a hardcore veteran who fought in the great open-source war years ago. anyone can benefit from this list of videos and the best part is these focuses on YouTube videos and courses (it's like a collection so you don't have to search every time. ) so you don't have to pay a single dime to learn the skills which will make you a great web developer.
If you are a creator of any of the videos that are listed in this repo and want it removed just create an issue and tell me which video should be removed. And your suggestions are always welcomed.
One more thing... if you find this guide helpful to you please star it on GitHub and subscribe to all the YouTubers who made all these awesome videos without whom this great resource wouldn't exist, it will make my day and I know that I couldn't include every single video out there and if you find any that you think should be in this list just let me know.
Table of Contents:
Basics:
- What is a web browser - Team Treehouse
- How does the web work - Academind
- What is a web server - WebConcepts
- How a CPU works - Fireship
- What are Dotfiles - Fireship
- Web Development in 2021 - TraversyMedia
- Complete Web development learning path - Academind
- Top 20 Visual studio code extensions - TraversyMedia
- Web dev Vs Web design - Edureka
HTML:
- HTML tutorial for beginners - Code with Mosh
- HTML tutorial for beginners - Code with Harry
- HTML Full Course Build a Website - FreeCodeCamp
- HTML crash course - TraversyMedia
- HTML crash course 2021 - DesignCourse
- Learn HTML in 30 minutes - Edureka
- HTML Playlist - DevDreamer
- Complete HTML in video - KeepCoding
- Learn HTML5 and CSS3 - FreeCodeCamp
- Learn HTML/CSS in 4 hours - DevEd
- HTML and CSS course - CodingAddict
- HTML for everyone - Codemy
CSS:
- CSS Zero to Hero - FreeCodeCamp
- CSS tutorial in Hindi - TechGun
- CSS Crash course - TraversyMedia
- CSS Animations Crash course - TraversyMedia
- CSS Flexbox Crash course - TraversyMedia
- HTML & CSS Playlist - TraversyMedia
- CSS Flexbox in 100 seconds - FireShip
- Learn Flexbox in 20 Minutes - DevEd
- CSS Flexbox - FreeCodeCamp
- CSS Flexbox Playlist -CodeEvolution
- CSS Flexbox in 15 Minutes - WebDevSimplified
- CSS Grid Crash course - TraversyMedia
- CSS Grid tutorial - DevEd
- CSS Grid in 100 seconds - FireShip
- The Joy of CSS Grid - FireShip
- Learn CSS Grid 30 minutes - WebDevSimplified
- CSS Grid tutorial - NetNinja
- CSS Grid course - FreeCodeCamp
- Grid Vs Flexbox - Academind
- CSS Playlist - DevDreamer
- Learn CSS Animation - WebDevSimplified
- CSS Animations - NetNinja
- SVG Animation with CSS - FireShip
- CSS Animations in 100 Seconds - FireShip
- CSS Media queries - FreeCodeCamp
- Flexbox and Grid tutorials - JoySahab
- CSS Tutorial for beginners - KeepCoding
- CSS Flexbox tutorial - FreeCodeCamp
CSS Frameworks:
- Bootstrap tutorial Hindi - CodeWithHarry
- Bootstrap in 20 Minutes - RaddyTheBrand
- Complete Bootstrap 5 Tutorial - ThapaTechnical
- Bootstrap 5 tutorial - KeepCoding
- Bootstrap Portfolio - AdrianTwarog
- How to create a responsive website with Bootstrap - CodeGalaxy
- Tailwind CSS Crash course - TraversyMedia
- Tailwind CSS course - NetNinja
- Tailwind + PostCSS -AdamWathan
- CSS Vs Frameworks - Academind
- Bulma CSS - NetNinja
- Bulma CSS - FreeCodeCamp
- Company website with Bulma CSS - Duomly
- Materialize CSS - NetNinja
- Materialize CSS Crash course - HiteshChaudhary
- Tailwind CSS tutorial - Scrimba
- Complete Tailwind Website - TraversyMedia
- Gym Website with Tailwind - TraversyMedia
- Rebuild Netlify with Tailwind - AdamWathan
- Build WorkCation with Tailwind -AdamWathan
- Building KiteTail with Tailwind - AdamWathan
- Building SponsorShip with Tailwind - AdamWathan
- Tailwind:Zero to Production - TailwindLabs
- Bootstrap for everyone - Codemy
SASS:
- Sass tutorial for beginners - FreeCodeCamp
- Learn Sass in 20 minutes -DevEd
- Sass introduction - YahooBaba
- Sass in 100 Seconds - FireShip
- Sass Crash course - TraversyMedia
- Complete Sass tutoriall - ThapaTechnical
- Sass Tutorial - NetNinja
- Learn Sass for free - DesignCourse
- Sass Tutorial for beginners - KarlHadwen
- Build a Responsive website with Sass - BrianDesign
Responsive Design:
- Intro to responsive web design - FreeCodeCamp
- Build a modern responsive website using HTML & CSS - TraversyMedia
- Build a modern landing page with HTML & CSS - TraversyMedia
- How to make complete responsive website - DailyTution
- Responsive Portfolio website - JulioCodes
- Responsive animated website - JulioCodes
- Responsive hotel website - JulioCodes
- Responsive web design - The NetNinja
- Mobile first web design - The NetNinja
- Mobile first layout using CSS Grid
- Make a Landing page from scratch - FreeCodeCamp
- Responsive Web design essentials - BringYourOwnLaptop
- Build a modern responsive website - JhonKomarnicki
Ui/Ux:
- Adobe XD - GFXMentor
- Web design course - Flux
- Typography full course - FreeCodeCamp
- Laptop Ui - DevEd
- Ui design tutorial - FreeCodeCamp
- Web design in AdobeXD - EasyTutorial
- How to design a Website - FreeCodeCamp
- Ui design for coders - TraversyMedia
- Figma tutorial - DesignCourse
- Figma in 40 minutes - TraversyMedia
- Figma 2021 crash course - DesignCourse
- Ui/Ux design tutorial - FreeCodeCamp
- Adobe XD Ui/Ux tutorial - BringYourOwnLaptop
- Adobe XD 2021 crash course -DesignCourse
- Adobe XD tutorial - PelfizzStudio
- Adobe XD tutorials - Dansky
- Ui/Ux tutorials - DevEd
- Glass website -DevEd
JavaScript:
- JavaScript full course - Edureka
- JavaScript crash course - TraversyMedia
- Learn JavaScript - FreeCodeCamp
- JavaScript tutorial - Telusko
- JavaScript for beginners -MoshHamadani
- JavaScript tutorial in Hindi - CodeWithHarry
- Top 5 JavaScript concepts - JamesQuick
- 15 JavaScript projects - FreeCodeCamp
- Build tetris using JavaScript
- 8 hour JavaScript tutorial - CleverProgrammer
- Weird JavaScript course - FireShip
- JavaScript fundamentals - CodingAddict
- JavaScript complete course - FreeCodeCamp
There are so many great videos on JS that I simply can't include all of them, Apologies.
Advanced JavaScript:
- Advance JavaScript - CodeDamn
- Advance JavaScript Hindi - YahooBaba
- Advance JavaScript tutorial - Edureka
- OOP in JavaScript - MoshHamadani
- ES6 in 1 hour - MoshHamadani
- Modern JavaScript Hindi - ThapaTechnical
- ES6 JavaScript - DevEd
- JavaScript ES6 -NetNinja
- JavaScript ES6 - FreeCodeCamp
- Modern JavaScript - NetNinja
- Async JavaScript - NetNinja
Version controlling:
- Git tutorial for beginners - MoshHamadani
- Git & Github tutorial - CodeWithHarry
- Git & Github crash course - TraversyMedia
- Git & Github tutorial - NetNinja
- Git & Github for beginners - FreeCodeCamp
- Git tutorial for beginners - Telusko
- Git & Github full course - Edureka
- Automatic Deployment with Github actions
- Create an awesome README - CodeStackr
- Git tutorial for beginners - TechWithTim
- Github pull requests in 100 seconds - FireShip
- Git and Github for version control - Codemy
- What is version control - SimpliLearn
- How to use git - FireShip
- 5 ways to Dev-Opsify your app - FireShip
- Git explained in 100 seconds - FireShip
- Git & Github for beginners - AmigosCode
Angular:
- Angular for beginners - AngularUniversity
- Angular tutorial - MoshHamadani
- Angular tutorial in Hindi - CodeWithHarry
- Angular 10 tutorial - CodeStepByStep
- Angular full course - Edureka
- Angular crash course - TraversyMedia
- Learn Angular - CodeDamn
- Angular projects - Edureka
- Angular 11 project -FreeCodeCamp
- Learn Angular material - FreeCodeCamp
- Angular material tuorial - MoshHamadani
- Intro to Agular material - Academind
- Angular material course - AngularUniversity
- Angular universal - AngularUniversity
- Angular universal with Firebase - FireShip
React:
- What is React - MoshHamadani
- React crash course 2021 - TraversyMedia
- React tutorial for beginners - MoshHamadani
- Introduction to React - ThapaTechnical
- React.js tutorial - Codevolution
- React tutorial in Hindi - CodeWithHarry
- React.js full tutorial - FreeCodeCamp
- React.js tutorial for beginners - CleverProgrammer
- Full React course - FreeCodeCamp
- React crash course for beginners - Academind
- Full React tutorial - NetNinja
- React full tutorial - CodeStepByStep
- React in 8 hours - CleverProgrammer
- React in 30 minutes - CleverProgrammer
- Full react course for beginners - Edureka
- 15 react projects - FreeCodeCamp
- React tutorial - DevEd
- Advance React - Codedammn
- React in 100 seconds - FireShip
- React tutorials - WebDevSimplified
- React hooks - WebDevSimplified
- React Query tutorial - NetNinja
- React router course - FreeCodeCamp
- React with TypeScript - LarithHarb
There are many more great tutorials on React.js because of it's popularity but I couldn't list them all. Apologies.
Vue:
- Vue.js Crash course - TraversyMedia
- Vue.js Tutorial in Hindi - CodeStepByStep
- Vue.js 2 tutorial - NetNinja
- Vue.js in 100 seconds - FireShip
- Learn Vue.js - FreeCodeCamp
- Vue.js 3 in 10 hours - Bitfumes
- Vue.js 3 for beginners - NetNinja
- Vue.js 3 Animations - NetNinja
- Vue.js 3 tutorial - Codevolution
- Vue.js 3 tutorial in Hindi - CodeStepByStep
- Learn Vue.js 3 - TheEarthIsSquare
- Vue 3 In-dept course - DevAscend
- Vue 3 tutorial - Codevolution
Node.js (including Express.js):
- Node.js for beginners - MoshHamadani
- Node.js and Express.js full course - FreeCodeCamp
- Node.js in Hindi - ThapaTechnical
- Node.js Crash course - NetNinja
- Node.js tutorial in Hindi - CodeStepByStep
- Learn Node.js - FreeCodeCamp
- Node.js full course - Edureka
- Node.js tutorials -Telusko
- Node.js in 7 easy steps - FireShip
- Node.js crash course - TraversyMedia
- Node.js for beginners - CodeStackr
- Rest API with node and express - MoshHamadani
- Node.js for beginners - MoshHamadani
- Express.js crash course - TraversyMedia
- Node.js tutotrial - CodeDammn
- Node and express from scratch - TraversyMedia
- Build a rest API with node - DevEd
- Vanilla node.js rest API - TraversyMedia
- APIs with node.js - CleverProgrammer
- Node.js crash course - TraversyMedia
- Node.js auth with JWT - NetNinja
- Node,js tutorial - Codemy
- []
MERN Stack:
MEAN Stack:
MEVN STACK:
- Full stack vue - EstebanCodes
- Mevn stack project - DCodeMania
- Full stack photobook using Vue.js - TraversyMedia
- Full stack Vue.js
- Vue.js Full stack course - CodeInspire
- E-commerce using Vue.js and Django
- 6 hours Vue.js and firebase project - TraversyMedia
- Full stack Vue.js - Academind
- Full stack Vue.js message board - CodingGarden
- Laravel and Vue.js - BoltSkills
- Invoice app with Vue.js and Firebase
Svelte:
- Svelte in 100 seconds - FireShip
- Svelte tutorial - NetNinja
- Svelte 3 crash course - DesignCourse
- Full stack svelte - EstebanCodes
- Learn svelte.js full course - FreeCodeCamp
- Svelte tutorial - FreeCodeCamp
- Beginner Svelte tutorial - PortEXE
- Svelte In-depth course - DevAscend
- Svelte crash course - TraversyMedia
- Svelte tutorial - Codevolution
- Sapper.js tutorial - NetNinja
Deno.js:
- Deno.js in 100 seconds - FireShip
- What is Deno.js - Academind
- Deno.js full course - FreeCodeCamp
- Deno.js crash course - TraversyMedia
- Deno.js crash course - Bitfumes
- Deno.js and express course - AdrianTwarog
- Deno.js tutorials - TheCodeholic
- Deno tutorial - NetNinja
- Deno and Web-sockets - NetNinja
TypeScript:
- TypeScript in 100 seconds - FireShip
- TypeScript course for beginners - Academind
- TypeScript tutorial - MoshHamadani
- Basic TypeScript - FireShip
- TypeScript tutorial - FireShip
- TypeScript Full course for beginners - FreeCodeCamp
- TypeScript in 50 minutes - Codevolution
- TypeScript crash course - LaithHarb
- TypeScript with react - BenAwad
- TypeScript generics - BenAwad
- TypeScript for JS developers - CoderOne
- TypeScript with Vue.js - NetNinja
- TypeScript and Webpack tutorial -NetNinja
- Quiz application using TypeScript and React - FreeCodeCamp
- Shopping cart with TypeScript and React - FreeCodeCamp
- Full stack TypeScript with React and GraphQL - BenAwad
GraphQL:
- GraphQL in 40 minutes - WebDevSimplified
- GraphQL in 100 seconds - FireShip
- GraphQL tutorial - NetNinja
- GraphQL crash course
- GraphQL basics - FireShip
- GraphQL beginner tutorial - PedroTech
- GraphQL course - Academind
- GraphQL and Django - VeryAcademy
- Modern APIs with GraphQL - AWS
- GraphQL, TypeScript, and Next.js - BenAwad
- GraphQL beginners - BenAwad
- GraphQL with Keystone.js - TraversyMedia
PHP:
- PHP tutorial in hindi - CodeWithHarry
- PHP full course - FreeCodeCamp
- PHP with MySQL - NetNinja
- PHP for absolute beginners - TraversyMedia
- PHP tutorial - Edureka
- PHP tutorials - DanyKorssing
- PHP tutorial in Hindi/Urdu - YahooBaba
- PHP OOP programming - NetNinja
- OOP in PHP - DaniKorssing
- PHP OOP tutorial in Hindi/Urdu - YahooBaba
- Learn PHP the right way - ProgramWithGio
- PHP for programming - Codemy
Laravel:
- Laravel tutorial - FreeCodeCamp
- Laravel crash course - TraversyMedia
- Laravel tutorial - CodeStepByStep
- Complete Laravel tutorial - CodeWithDarry
- Laravel tutorial - Edureka
- Create a Laravel API - DigitalOcean
- Laravel for beginners - NetNinja
- Laravel complete course - BitFumes
- Laravel restAPI - TraversyMedia
Python:
- Python Tutorial for beginners - TechworldWithNana
- Python full course - Edureka
- Python for everybody - FreeCodeCamp
- Python AI full course - CleverPrgrammer
- Python tutorial for beginners - AmigoCodes
- 12 beginner project in python - FreeCodeCamp
- Learn python by building games - FreeCodeCamp
- Python full course - BroCode
- Python complete course in Hindi - CodeWithHarry
- Python complete course for beginners - FreeCodeCamp
- Python prgramming playlist - Telusko
- Python in 1 hour - MoshHamadani
- Python full course - MoshHamadni
- Python tutorial for beginners - CleverProgrammer
- 6 quick projects in python - FreeCodeCamp
- Advance Python programming - FreeCodeCamp
- OOP in python - TraversyMedia
- Python and MySQL - TraversyMedia
- Python playlist - AmigoCodes
- OOP in python for beginners - TechWithTim
- OOP in python - Telusko
- Python OOP tutorial - CoreySchafer
- OOP in python - PythonEngineer
- Backend web development with Python - FreeCodeCamp
Flask:
- Flask tutorial for beginners - Edureka
- Full website in flask - TechWithTim
- Web programming with flask(Harvard's CS50) - FreeCodeCamp
- Flask and React microservices - FreeCodeCamp
- Python flask web development - CodeWithHarry
- Flask tutorial for beginners - CleverProgrammer
- Learn flask for python - FreeCodeCamp
- Flask course - FreeCodeCamp
- Data Structures with flask and python - FreeCodeCamp
Django:
- Python Django tutorial - CleverProgrammer
- Django 3 course - FreeCodeCamp
- Django for beginners - TechWithTim
- E-commerce website with Django - FreeCodeCamp
- E-commerce with Vue.js and Django
- 3 django projects - FreeCodeCamp
- Build a CRM with Django - JustDjango
- Django Todo list - DenisIvy
- Django for beginners - Telusko
- Django web app - CoreySchafer
- Django tutorial in Hindi - CodeWithHarry
- Django web framework - FreeCodeCamp
- Django Python course -Academind
- Django complete course - BitFumes
You should check out PyPlane and justDjango youtube channels for more videos.
Golang:
Databases:
- 7 database paradigms - NetNinja
- Database design course - FreeCodeCamp
- Database systems - FreeCodeCamp
- SQL tutorial - FreeCodeCamp
SQL Vs. NoSQL databases:
- SQL Vs NoSQL explained - BeABetterDev
- SQL Vs NoSQL - Academind
- SQL Vs NoSQL which is better - WebDevSimplified
- SQL Vs NoSQL - Edureka
- Difference betweenSQL Vs NoSQL - SimpliLearn
- MySQL vs MongoDB - HiteshChahudhary
MySQL:
- MySQL tutorial - MoshHamadani
- MySQL tutorial in Hindi/Urdu - YahooBaba
- MySQL complete course - FreeCodeCamp
- MySQL crash course - TraversyMedia
- MySQL tutorial - Edureka
- MySQL basics - FireShip
- MySQL database full course - FreeCodeCamp
- MySQL with Node.js - Codemy
PostgresSQL:
- Learn Postgres - AmigoCodes
- Postgres tutorial for beginners - Edureka
- Postgres course - AmigoCodes
- Postgres tutorial - Simplilearn
- Postgres tutorial for beginners - BenAwad
- Intro to Postgres - Codemy
MongoDB:
- MongoDB crash course - TraversyMedia
- MongoDB full course - Simplilearn
- MongoDB tutorial in Hindi - ThapaTechnical
- MongoDB for beginners - AmigoCodes
- MongoDB tutorial in Hindi - CodeWithHarry
- MongoDB with Python - FreeCodeCamp
- MongoDB with Node.js - FreeCodeCamp
- MongoDB tutorial - Intelipaat
- MongoDB for beginners - NetNinja
Redis:
Firebase:
APIs:
Testing:
Docker:
- Docker in 100 seconds - FireShip
- Learn Docker+DevOps - FreeCodeCamp
- Docker tutorial full devops course - FreeCodeCamp
- Full Docker tutorial - MoshHamadani
- Docker tutorial in Hindi - CodeWithHarry
- Docker in 3 hours - TechworldWithNana
- Docker in 7 easy steps - FireShip
- Docker playlist - CodeDamn
- Docker tutorial for beginners - Telusko
- Docker full tutorial - Edureka
- Containerize python apps with docker - PythonEngineer
- Docker and Kubernetes full course - AmigoCodes
- Kubernetes crash course - LarithHarb
- DevOps crash course - TraversyMedia
- Docker with Linux - CoderOne
- Docker crash course - LarithHarb
Deployment:
Congrats you made it to the end of this guide. I hope you learned a lot and if any of the links is not working or is out dated please let me know and don't forget to star
β the repository.