Welcome Dev-s, Let's do Webbbbb ! Let's Learn Full Stack Development (Front End + Back End) and build amazing projects. There are a lot of amazing resources for Learning Web Development and here they are (few of them) - ♞ The Coding Train, Programming with Mosh, Traversy Media, freeCodeCamp.org etc. This is the web development mindmap and this chart is amazing as well. I have created a list of best-selling resources (level wise from Top to Bottom) that you can learn chronologically. Let's begin this amazing journey.
Things to Learn:
- Code Editor - VSCode, Git & Hosting.
🌓FrontEnd Masters - VSCode, VSCodeIntro, Favourite VSCode Extensions, VSCode Tutorial, VSCode Tutorial 2, Git In-depth, Git Under the Hood LiveLessons, Git a Web Developer Job: Mastering the Modern Workflow, Advanced Git, Git Internals, Git from the Bits Up, Git Tutorial, Git Tutorial Playlist - HTML, CSS & Sass [Better CSS] - nodeSass
🌓W3School - HTML, CSS ; CSS - The Complete Guide (incl. Flexbox, Grid & Sass), Advanced CSS and Sass: Flexbox, Grid, Animations and More!, CSS Grids and Flexbox in Responsive Web Design, Learn CSS In-Depth, v2, Sass Fundamentals, Saas in 20 Mins, CSS for Absolute Beginners, CSS Full Course - Includes Flexbox and CSS Grid Tutorials - Vanilla JavaScript (DOM+Json+FetchAPI)+ ES6 + jQuery
🌓 The Complete JavaScript Course 2019: Build Real Projects!, JavaScript: The Hard Parts, Modern JavaScript From The Beginning, 2019 JavaScript Algorithmic Scripting - Basic, Intermediate, Advanced, JavaScript Exercise - Tank Shooter Game from Scratch, Unit Testing JavaScript (with CoffeeScript), Creating an Open Source JavaScript Library on Github, JavaScript: The Hard Parts of Object Oriented JavaScript, jQuery Tutorial, jQuery Crash Course, JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge, ECMAScript 6 Tutorial, Learn JavaScript, JavaScript Crash Course For Beginners, Create a Platformer Game with JavaScript , ES6 Javascript: The Complete Developer's Guide, WES BOS - ES6 For Everyone!, The Complete jQuery Course - Beginner to Professional, JavaScript, jQuery and jQuery UI Complete Video Course: An Introduction to Front-End Web Development, jQuery Essential Training, jQuery for Beginners - Create Website Animations Easily - CSS Frameworks - BootStrap /Materialize /Bulma (Helps Speed up Front End)
🌓 Bulma CSS Framework Crash Course, Materialize CSS Crash Course Part 1, Part 2, Materialize Tutorial, Bootstrap Beginner Crash Course, Bootstrap Tutorial, Derek Banas - Bootstrap, Bootstrap 4 From Scratch With 5 Projects - Package Manager : npm /yarn
🌓 npm crash course, npm tutorial, Yarn Package Manager Crash Course, Intro to yarn package manager - Module Bundling - WebpackJS or ParcelJS
🌓WebPack Crash Course, Exploring The Parcel Application Bundler, Webpack Plugins System, Web Performance with Webpack, Webpack 4 Fundamentals, Webpack 4: Beyond the Basics, Parcel: A Zero-Configuration Webpack Alternative - Automation - GulpJS or GruntJS
🌓GulpJS Crash Course, Gulp Task Automation for Beginners, GruntJS: Quick Introduction, JavaScript Build Automation With Gulp.js, An Introduction to JavaScript Automation with Gulp, GulpJS for Beginners
Front End JavaScript Frameworks:
- ReactJS
🌓 Learn React.js - Full Course for Beginners, Learn React - Mosh, React JS Crash Course, React - The Complete Guide (incl Hooks, React Router, Redux), MERN Stack Front To Back: Full Stack React, Redux & Node.js, React Nanodegree, Advanced State Management in React Applications (Redux, MobX, sagas, etc.), The Complete React Web Developer Course (with Redux), React Native - The Practical Guide, Advanced React Patterns - VueJS
🌓 Vue JS Crash Course - 2019, Learn Vue.js - Full Course for Beginners - 2019, VueJS 2 Tutorial, Vue.js 2.0 In 60 Minutes, Vue js Customer Manager App Frontend, Build a Calculator with Vue.js, Vuex Crash Course | State Management, The Ultimate Vue JS 2 Developers Course, Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex), The Vue.js Master Class, Vue JS 2: From Beginner to Professional (includes Vuex), Advanced Vue.js Features from the Ground Up - AngularJS
🌓 Angular Tutorial for Beginners: Learn Angular from Scratch | Mosh, Learn Angular - Full Tutorial Course, Angular Crash Course - 2019, Angular 7 (formerly Angular 2) - The Complete Guide, Angular (Full App) with Angular Material, Angularfire & NgRx, Angular Core, The Complete Angular Course: Beginner to Advanced, Reactive Angular with NgRx
JS State Management:
- Redux ,Context API (REACT)
🌓 Redux Crash Course With React, [Redux] - The Best Explanation of How it Works, Redux Tutorial, A Complete React Redux Tutorial for Beginners (2019) - Apollo (GraphQL Client)
🌓 GraphQL With React & Apollo [1] - Express GraphQL Server, GraphQL Full Course - Novice to Expert, The basics of GraphQL and Apollo, What's next for Apollo Client (Peggy Rayzis), What Is GraphQL?, GraphQL Tutorial, Testing GraphQL (Jake Dawkins), REST vs. GraphQL: Critical Look, Using GraphQL, ReactJS and Apollo To Create Amazing Apps, Zero To GraphQL In 30 Minutes, The Modern GraphQL Bootcamp (Advanced Node.js), REST & GraphQL API Design in Node.js, v2 (using Express & MongoDB), Full-Stack React with GraphQL and Apollo Boost, GraphQL with React: The Complete Developers Guide, Advanced GraphQL - VueX (Vue)
🌓 Vuex Crash Course | State Management, Learn Vuex by Example - Handling Vue State Management, Mastering Vue.js and Vuex, VueX Tutorial, The VueX Tutorial - NgRx (Angular)
🌓 Ngrx Store Tutorial for Angular - Learn State Management for Angular, Ultimate Angular - Todd Motto, Angular ngrx Redux Quick Start Tutorial, Angular NgRx: Getting Started, Angular (Full App) with Angular Material, Angularfire & NgRx
JavaScript Engines
- Chrome - v8
🌓 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code, How the V8 engine works?, JavaScript Engine Internals for JavaScript Developers, V8 Today and in the Future (Chrome Dev Summit 2017), V8, Advanced JavaScript, & the Next Performance Frontier (Google I/O '17), The V8 Engine and Node.js, Understanding How the Chrome V8 Engine Translates JavaScript into Machine Code - Mozilla - SpiderMonkey
🌓 SpiderMonkey Guides, A Trip to the Zoo: SpiderMonkey, SquirrelFish, Nashorn, V8*
Server Side Programming Languages and Frameworks:
- Node.Js ( ExpressJS, KoaJS , AdonisJS )
🌗 Node.js Tutorial for Beginners: Learn Node in 1 Hour | Mosh, Node.js Crash Course, NodeJS Tutorial, Learn Node.js - Full Tutorial for Beginners, Express.js Tutorial: Build RESTful APIs with Node and Express | Mosh, Express JS Crash Course, Express.js & Node.js Course for Beginners, Koa.js Crash Course - Modern & Minimalist Node.js Framework, Getting Started With AdonisJS 4.0, AdonisJS 4.1 Crash Course for Beginners - Learn by Example, The Complete Node.js Developer Course (3rd Edition), Node.js: Developing Web Applications, Node.js: The Complete Guide to Build RESTful APIs (2018), Zero to Production Node.js on Amazon Web Services, Code with Mosh - Python ( Django, Flask )
🌗 Python Tutorial for Beginners - Mosh, Learn Python - Full Course for Beginners, Python Django Web Framework - Full Course for Beginners, Python Crash Course For Beginners, Zero to Hero with Python Programming, Creating an Online Chess Game With Python, Python Django Crash Course, Sentdex - Python, Flask Tutorial, CS50 - Web Programming with Flask, Python and Django Full Stack Web Developer Bootcamp, The Complete Python 3 Course: Beginner to Advanced!, The Python Mega Course: Build 10 Real World Applications, Learn Python 3 the Hard Way - PHP ( Laravel, Symfony )
🌗 PHP Programming Language - Full Course, Creating Ecommerce Website with php, PHP Tutorials, Symfony Tutorial, Laravel from Scratch, The Complete PHP MYSQL Professional Course with 5 Projects, Test Driven Laravel, Create a High End Social Network Twitter Clone In PHP, MySQL, Let's Build A Forum with Laravel and TDD, PHP with Laravel for beginners - Become a Master in Laravel - C# ( ASP.NET )
🌗 C# Tutorial - Full Course for Beginners, Learn C# Basics in 1 Hour - C# Tutorial For Beginners, C# Fundamentals for Absolute Beginners, Create a C# Application from Start to Finish - Complete Course, ASP.NET Core - Beginner, ASP.NET CORE for Beginners - an 8 Hour Workshop, Step-by-step ASP.NET MVC Tutorial for Beginners | Mosh - Golang
🌗 sentdex - Go, Go / Golang Crash Course, Go Programming, Ultimate Go Programming, Learn How To Code: Google's Go (golang) Programming Language
DataBase
- Relational - MySQL, PostgreSQL, MS SQL
- NoSQL - MongoDB, Couchbase
- Cloud - Firebase, AWS, Azure DocumentDB
- Lightweight - SQLite, NeDB, Redis
🌙⛄ Here is my DataBase repository.
Server Rendered Pages: Frameworks like React, Vue & Angular can be rendered on the server side. Here are the Frameworks:
- Next.js (React)
🌗 Next.js Crash Course - Server Side React - Nuxt.js (Vue)
🌗 Nuxt.js - Introduction by Project, Nuxt.js Basics - Video Game Site & API - Angular Universal (Angular)
🌗 Angular Universal and Server Side Rendering (Step By Step), ANGULAR ON THE SERVER
♣ Phantom JS
🌗 PhantomJS demo for web scraping, Automation with PhantomJS, The Ultimate Introduction to Web Scraping and Browser Automation
♣ Selenium
🌗 Creating an Automated Testing Framework With Selenium, Selenium-Python|Best for Automation beginner|Live Apps-30+hr, Selenium WebDriver With Python 3.x - Novice To Ninja
♣ Scrapy
🌗 Scrapy: Powerful Web Scraping & Crawling with Python, Python Scrapy: Scrape Web Data Using Python, Scrapy Tutorial, Web Scraping Using Scrapy Tutorial For Beginners: Learn Scrapy From Scratch, Web Scraping in Python using Scrapy: Scraping a Crowdfunding Website
♣ Beautiful Soup
🌗 Python Tutorial: Web Scraping with BeautifulSoup and Requests, Sentdex - BeautifulSoup, Intro to Web Scraping with Python and Beautiful Soup, Beautiful Soup Tutorial - Web Scraping in Python
♣ TensorFlow JS
🌗 Tensorflow.js Tutorial, Learn TensorFlow.js - Deep Learning and Neural Networks with JavaScript, Tensorflow.js Explained, TensorFlow.js, TensorFlow.js Crash Course, Webcam Tracking with Tensorflow.js
♣ Brain JS
🌗 Neural Networks with JavaScript - Full Course using Brain.js, Simple Machine Learning With JavaScript - Brain.js, Want to learn neural networks? Here’s a free Brain.js course!
Content Management System
- PHP Based - Wordpress, Drupal
- JS Based - GhostJS, KeystoneJS
- Python Based - Mezzanine
- .NET - Piranha, Orchard CMS
DevOps & Deployment
- Deployment - Linux, SSH, Git, Server Software (NGINX, Apache)
- Platform - Digital Ocean, AWS, Heroku, Azure
- Virtualization - Docker, Vagrant
- Testing - Unit, Integration, Functional, System, MochaJS
Intro To JavaScript Unit Testing With Mocha JS & Chai, Testing Node.js with Mocha, Unit Testing in JS
Mobile Development
- React Native - Build Android & iOS with React Framework
React Native Tutorial for Beginners - Getting Started, React Native - Intro Course for Beginners, React Native Web Full App Tutorial - Build a Workout App for iOS, Android, and Web, Build React Native Chat App In 30 Minutes - NativeScript - Angular, TypeScript, JavaScipt
- Ionic - Hybrid Apps with HTML/CSS/JS - Ionic 3 Mobile Weather App Build
- Flutter - Mobile SDK for Android & iOS (Uses Dart Programming Language)
Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart, Flutter Challenge: Music Player, Flutter & Dart - The Complete Flutter App Development Course, Dart and Flutter: The Complete Developer's Guid - Xamarin- Mobile Apps with C# - Xamarin Forms Tutorial: Build Native Mobile Apps with C#
Desktop Apps with ElectronJS
- Chromium & NodeJS (VSCode, Atom , HTTP client - Postman all written in Electron)
- Build an Electron App in Under 60 Minutes, Electron JS Tutorials, Build a Native Desktop App with Electron (YouTube Stats App), S01E13 - Plant App - React Native, How to Build Calculator App | Project in Electron
Serverless Architecture
Blockchain Technology
- Solidity (Language for Implementing contracts) : Solidity / Ethereum Smart Contract BEGINNER Tutorial - Create 5 Smart Contracts
- Mist (Storing Ethereum, sending transactions and contracts) : Deploying A Smart Contract To The Ethereum Blockchain w/ Mist
- Coinbase API (can easily develop apps and integrate Bitcoin) - Tutorial
- What Is A Progressive Web App?, Progressive Web App tutorial – learn to build a PWA from scratch, Progressive Web Apps (PWA) Tutorial for Beginners - Getting Started
Web Assembly - Faster than JS - Assembly like binary format for code can be executed by Web Browsers
- Build the future of the web with WebAssembly and more (Google I/O '18), WebAssembly: Disrupting JavaScript, WebAssembly: Real World Applications