Ever since the inception of YouTube, there have been thousands of people who have imparted free education to their followers. Today you can learn to play a guitar, or basics of gardening or speak a new language or get good at Math, all at the comfort of your couch.
Web Development and Software development in general is no different. You can find some of the best instructors on YouTube to learn everything about a programming language, build projects, acquire new skills, improve your code quality etc.
Since there are thousands of hours of content one can simply binge watch, it is most important to focus on only those videos which will help you achieve your goals. Whether you are a student or an employee or a freelancer, the best way to improve your skills and achieve your goals is to build projects. If you are a web developer, I cannot stress this point enough.
Among ocean of resources on YouTube, there is only bucketful of full fledged, project focused web development tutorials. This is because coming up with an idea for a project is hard. A content creator needs to spend considerable amount of time working on the idea, translating the idea into code, polishing the content and finally delivering it as a tutorial.
My blog post aims to make a curated list of best web development tutorials on YouTube. You will end up creating tangible projects at the end of each tutorial which you can showcase in your portfolio.
I aim to keep this list up to date and weed out any outdated tutorials.
HTML and CSS
Components
- Sliding Sign In & Sign Up Form by Traversy Media
- Masonry Layout with Infinite Scroll by Andre Madarang
- Create a CSS only lightbox! by Kevin Powell
- CSS Grid Playlist with Projects by Wes Bos
- Build A Price Comparison Page With HTML And CSS by Web Dev Simplified
- Image Thumbnail Previewer Using HTML/CSS by Daily Tuition
- Parallax in HTML, CSS and JavaScript Tutorial – Let’s make it happen! by DesignCourse
- Simple Image Lightbox Tutorial by Web Dev Simplified
- Pure CSS Hamburger Menu & Overlay by Traversy Media
- Animated Responsive Navbar Tutorial by Dev Ed
- Build Tabs Using HTML/CSS In Only 12 Minutes by Web Dev Simplified
- Full Screen Responsive Image Slider | No Libraries by Traversy Media
- How to code a carousel with HTML, CSS and JavaScript by Kevin Powell
- How To Create An Image Slider In HTML, CSS & Javascript by Dev Ed
- Create a responsive navigation with no JS! by Kevin Powell
- Social Media Accordion With CSS3 Transitions by Traversy Media
Full Websites / Landing Pages
- HTML Full Course – Build a Website Tutorial by freeCodeCamp
- Product Landing Page | Build & Deploy | HTML & CSS by Traversy Media
- Mobile First Responsive Layout with CSS Grid by Net Ninja
- Build A Responsive Website With HTML & CSS Tutorial by Dev Ed
- HTML & CSS Easy Elegant Landing Page With Blur Effect by Traversy Media
- Creating a better todo app – the HTML and CSS by Kevin Powell
- Build An HTML5 Website With A Responsive Layout by Traversy Media
- Complete Responsive Blogger Website Using HTML/CSS by Daily Tuition
- Build a Responsive Grid CSS Website Layout From Scratch by Traversy Media
- How to Create a Website – Complete workflow by Kevin Powell
- Responsive Coming Soon Landing Page With Countdown by Traversy Media
- Responsive Landing Page Tutorial – HTML/CSS by Web Dev Simplified
- Build a Netflix Landing Page Clone with HTML, CSS & JS by Traversy Media
- Coding a responsive webpage from start to finish by Kevin Powell
- Make Responsive Web Design with HTML/CSS by Daily Tuition
- Grid CSS Responsive Website Layout – “Mobile First” Design by Traversy Media
- How to create a Portfolio Website with CSS Grid & Sass by Kevin Powell
- Online Store E-commerce Responsive Website Using HTML/CSS by Daily Tuition
- Social Network Theme With Sass by Traversy Media
- How to code a Brewery Website by Kevin Powell
- HTML & CSS Easy Elegant Landing Page With Blur Effect by Traversy Media
- Responsive Landing Page Using HTML & CSS (A Little jQuery) by Traversy Media
- How to Create a Responsive Website from Scratch by Kevin Powell
- Responvie Portfolio Website by Traversy Media
Libraries
- Tailwind
- Bootstrap
- Learn Bootstrap by creating a custom admin theme – Intermediate Tutorial by freeCodeCamp
- Building a quick site with Bootstrap 4 by Kevin Powell
- Build a website with Bootstrap 4 by Kevin Powell
- Materialize
JavaScript
- JavaScript30 – A series of 30 high quality JavaScript projects and exercises by Wes Bos
- Dynamic Landing Page with JavaScript by Traversy Media
- Build A Calculator With JavaScript Tutorial by Web Dev Simplified
- JavaScript Password Generator by Traversy Media
- Wheel of Fortune with Vanilla JS by Weibenfalk
- Build A Password Generator With JavaScript by Web Dev Simplified
- Star Ratings With JavaScript & Font Awesome by Traversy Media
- Build Tic Tac Toe with JavaScript by Web Dev Simplified
- Javascript Rock Paper Scissors Game by Dev Ed
- Build A Text Adventure Game With JavaScript by Web Dev Simplified
- Rock Paper Scissors Game by freecodecamp
- Rock Paper Scissors Game by Traversy Media
- Build A Speed Typing Game With JavaScript by Web Dev Simplified
- Build A Speed Typing Game In JavaScript by Traversy Media
- Compound Interest Calculator by Weibenfalk
- Simple Weight Converter App With JavaScript & Bootstrap 4 by Traversy Media
- Build A Piano With JavaScript by Web Dev Simplified
- Build a Reddit Search App With ES6, Fetch & Parcel by Traversy Media
- Advent Calendar using HTML, CSS and JavaScript by Academind
- JavaScript BookList App by Traversy Media
- Build a Weather App With JavaScript by Web Dev Simplified
- Build A Filterable List With Vanilla JavaScript by Traversy Media
- JavaScript Budget App by freecodecamp
- Javascript Bookmark App by Traversy Media
- How to Code A Better To-Do List with JavaScript by Web Dev Simplified
- Modern Image Gallery With ES6 Vanilla JavaScript by Traversy Media
- Build An Image Gallery In HTML CSS & Javascript by Dev Ed
- Build A Quiz App With JavaScript by Web Dev Simplified
- JavaScript Ecommerce Shopping Cart by freecodecamp
- Build A Clock With JavaScript by Web Dev Simplified
- Create a Custom PDF Viewer With JavaScript by Traversy Media
React
- Lyrics Search App with React & Context API by Traversy Media
- React Snake Game by Weibenfalk
- Build a Recipe App With React by Dev Ed
- React Advent of Code Calendar by Weibenfalk
- React File Uploader with Express (using React Hooks) by Traversy Media
- React Tetris with Hooks by Weibenfalk
- Build A Pokémon Application with React by Web Dev Simplified
- React Tic Tac Toe with Hooks + Functional Components by Weibenfalk
- Simple Frontend Pagination with React by Traversy Media
- Infinite Scrolling With React by Web Dev Simplified
- React Infinite Scroll by Traversy Media
- Live Markdown Preview app with React and Firebase (demo available) by Classed
- React Tutorial: Weather App with RESTful APIs by freecodecamp
- React Tutorial: Build an e-commerce site from scratch using React and Netlify by freecodecamp
- In-Depth React Tutorial: Build a Hotel Reservation Site (with Contentful and Netlify) by freecodecamp
- Intermediate React Tutorial – Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing) by freecodecamp
- Intermediate React and Firebase Tutorial – Build an Evernote Clone by freecodecamp
- Full Stack React & Firebase Tutorial – Build a social media app by freecodecamp
Vue
- Build a Calendar With Vue, Vuetify & Firebase by Traversy Media
- Full Stack Vue.js, Express & MongoDB by Traversy Media
- Vue.js & Firestore App – Build & Deploy by Traversy Media
NodeJS
- RESTful API with NodeJS by Academind
- Build A REST API With Node.js, Express, & MongoDB – Quick by Web Dev Simplified
- Blogging Framework in NodeJS by Chris Hawkes
- Create A Paginated API With Node.js by Web Dev Simplified
- Build a Custom URL Shortener Service by Traversy Media
- JWT Authentication Tutorial using NodeJs by Web Dev Simplified
- Node.js Passport Login System Tutorial by Web Dev Simplified
- Real-time App With Feathers.js, Socket.io & Express by Traversy Media
- Build a Real Time Chat App With Node.js And Socket.io by Web Dev Simplified
- Chat App
- Chat Rooms (Sequel)
- Send SMS Text Messages From Node.js by Traversy Media
- How To Setup Payments With Node.js And Stripe by Web Dev Simplified
- Node.js GeoJSON API & App | Store Locator by Traversy Media
- Uploading Files to MongoDB With GridFS (Node.js App) by Traversy Media
- NodeJS & PostgreSQL Recipe App by Traversy Media
- Node.js App with Sequelize by Traversy Media
GraphQL
MERN Stack
PHP
- PHP, MySQL & Stripe API Payment App by Traversy Media
- PHP REST API from Scratch by Traversy Media
- PHP Online Exam System by Webslesson
- Attendance System in PHP by Webslesson
- Inventory System using PHP + AJAX by Webslesson
- Live Data Search with Pagination in PHP+MySQL using Ajax by Webslesson
Django
- How to Build an E-commerce Website with Django and Python by freecodecamp
- Full Stack React & Django by Traversy Media
WordPress
- Build WordPress Website by Traversy Media
- WordPress Website Build for Beginners by Traversy Media
- Become a WordPress Developer: Unlocking Power with Code by LearnWebCode
- Build WordPress Website in 1 hour by Travery Media
- Custom WordPress Website from scratch (WordPress Theme Development) by freecodecamp
- WordPress Theme Development by Traversy Media
- Convert HTML to WordPress Theme by Traversy Media
- WordPress Plugin Development by Traversy Media
- WordPress Widget Development by Traversy Media
I hope you will find this curated list of Best Web Development Tutorials on YouTube very helpful . There are still hundreds of good creators and thousands of awesome tutorials. So I apologize if I have missed any good content creator or any good tutorial. You can always share them in comments.
Keep Coding, Keep Smiling !
PS: If I have helped you and made a difference in your life, considering supporting my blog.