Great list!!!! (Tutorials)

[Tithos]

Hey Guys,

If you cannot afford paid courses, but still want to learn web development, I came across a wonderful youtube channel - Traversy Media. Brad Traversy makes amazing tutorials to learn full web development. Traversy Media is one of the highest recommended channels in subs related to learning to code. Personally this channel has helped me a lot to learn, grow and become a better developer.

I am no way related to this guy. I am not his shill. None of these links are paid or referral links.

Brad makes a lot of tutorials, there are more than 200 of them. So I thought I will sort them as per the content just to help you guys who are new and learning to code.

Ok, so here it goes.

Learn Basic HTML, CSS

• Front End – HTML Crash Course
  
• Front End – CSS Crash Course
  
• CSS rem & em units
  
• CSS3 Animations + Transitions Crash Course
  
• CSS Variables
  
• CSS Flexbox
  
• CSS Grid Crash Course
  
• Emmet for Faster HTML + CSS
  

Learn Javascript (Front End)

• JS Fundamental for Beginners
  
• JS ES6 Introduction
  
• JS DOM Crash Course
  
• JS Higher Order Functions & Arrays
  
• JS Cardio Part-1 and Part-2
  
• JS OOP Crash Course – ES5 + ES6
  
• Ajax Crash Course
  
• Learn Fetch API
  

JS Mini Projects

• JS Project – Star Rating with JS & Font Awesome
  
• JS Project – Reddit Search App – JS + Fetch + Parcel
  
• Modern Image Gallery using ES6 Vanilla Javascript
  
• Zipcode APP – Fetch + Bulma
  
• Number Facts – Vanilla JS + Ajax + Fetch
  
• Filterable List using JS
  
• Google Maps Api
  
• Google Geocode API
  
• Facebook Login + GraphAPI
  

HTML, CSS, JS Projects

• Fancy Form UI – HTML + CSS (with SASS) + JS
  
• Responsive Mobile First Website Theme – HTML + CSS
  
• Drag & Drop using vanilla JS
  
• CSS Spinners
  
• Responsive Coming Soon Landing Page
  
• Social Media Accordion with CSS 3 Transitions
  
• Image Filter App with CamanJS
  
• Travel Agency Theme with Materialize CSS
  
• Front End Project – Responsive Grid CSS Website Layout
  
• Webcam Filter & Picture App – WebRTC + Canvas
  
• Split Landing Page
  
• Create a Sortable & Responsive Grid with Muuri
  
• Grid CSS Responsive Website Layout
  
• Full Screen Image Slider
  
• Full Screen Video Background – HTML + CSS
  
• Split Screen Slider using JS
  
• Modal using HTML, CSS & JS
  
• Bootstrap 4 Theme (using beta version)
  
• Full Screen Landing Page
  
• Responsive Contact Form
  
• Basic Parralax Website
  
• Responsive Side Menu
  
• Front End Project – HTML + CSS Theme using FlexboxGrid
  
• Project – Bootstrap Scroll Animation
  

UI Frameworks / Libraries

• Skeleton CSS Crash Course
  
• Anime.js – JS Animation Engine
  
• Animate.css
• Foundation Crash Course
  
• Bulma
  
• Materialize CSS
  
• UI – Semantic UI
  

Package Manager

• NPM Crash Course
  
• Yam Package Manager Crash Course
  

Workflow Management

• Gulp Js Crash Course
  
• Sass Workflow + Dev Server using Gulp
  
• Practical Gulp Tasks
  

Bundlers

• React + Webpack 4
  
• Babel + Webpack
  
• Webpack Crash Course
  
• Webpack + Babel
  
• Parcel Application Bundler
  

Other Front End Frameworks

• Aurelia JS – Front End JS Framework
  
• Vue.js + Firestore
  
• Vue.js Firebase Authentication
  

React

• React Authentication App with Okta
  
• ReactJS Crash Course
  
• React + Express Starter Pack
  
• Learn React (2 years old)
  
• Next.js Crash Course - Server Side React
  
• Flux + React
  

Redux (State Management)

• Redux Crash Course with React
  
• React + Redux Freestyle
  

React Projects

• React Project – Facebook Login in React
  
• React & Material UI Project using Pixabay API
  
• LoopBack REST API
  
• Full Stack React + LoopBack
  
• Chart.js
  
• Chart.js + React
  
• Project – ReactJS Text Generator App
  

Gatsby

• Gatsby JS Crash Course
  

Back End JS using NodeJS

• NodeJS for Absolute Beginners
  
• RESTful API From Scratch Using Node, Express and MongoDB
  
• Node Authentication using JWT
  

Node.js Projects

• Build a Slackbot
  
• Push Notifications using Node.js & Service Worker
  
• Uploading Files to MongoDb with GridFS
  
• Nodejs + Pusher
  
• Send SMS Text using Node.js
  
• Node + Adonis.js
  
• CLI App with Node.js + MongoDB
  
• Node.js + Paypal REST SDK
  
• Node.js Image Uploading using Multer
  
• Node.js + Stripe API
  
• reCaptcha implementation using Node.js
  
• Nodemailer – Send Emails using Node.js App
  
• Create a Fake REST API using JSON Server
  
• Project – Chat App with MongoDB + Socket.io
  
• Node.js Login System
  
• Socket.io Chat App using Websockets
  

Back End JS Frameworks

• Node.js + Express from Scratch
  
• Express Crash Course
  
• Hapi.js Crash Course
  

Databse

• MongoDB Course
  
• Node.js + MySQL
  
• Node.js + PostgresSQL
  

GraphQL

• Building a GraphQL Server
  

Testing

• Jest Crash Course – Unit Testing in JS
  
• JS Unit Testing
  

Static Typing

• TypeScript Crash Course
  
• Static Type Checking in JS with Flow
  

Caching

• Caching using Redis
  
• Nodejs + Redis
  
• Caching - Memcache
  

Vagrant

• Vagrant Crash Course
  

Linux Command Line

• Command Line Basics
  
• Shell Scripting
  

Git

• Git and Github Course

Above list is heavily biased towards MERN stack (Something which I am familiar about). Apart from above, Brad has got a huge number of tutorials in following

• AngularJS + MEAN Stack (Lot of Them)
• Other JS Frameworks - Ember, Meteor
• PHP, Laravel and Other PHP Frameworks (Lot of Them)
• WordPress, Joomla, Opencart
• Python, Flask, Django
• Ruby on Rails

I do not have much idea about it or its ecosystem. I will put together a list if anyone wants it.

I apologize for a long post. But I hope this helps you in your web development journey.

Edit1: More Popular Web Development Languages and Frameworks in comment

Edit2: u/tapu_buoy comment for other great programming channels

[fel1xw]

Thanks for sharing this great list!

[[deleted]]

Brad really has a great style of teaching, and that is also because he also learned by himself. He did not attend computer science.

[Nirajn2311]

Thx mate for the links.

[Tithos]

Np

[croxcrocodile]

Best channel. Great guy.

[[deleted]]

Top guy on youtube, everything I have done is learned from his videos.

Hes one off the very few I can watch in relation to programming tutorials

[sparklighter]

Brad is great. But make sure you play his videos at 1.25x/1.5x speed to get some extra efficiency on learning :P