https://marketplace.visualstudio.com/items?itemName=anish.easy-npm

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 Project – Star Rating with JS & Font Awesome

• 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 – 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 other thread

Edit2: u/tapu_buoy comment for other great programming channels.

I’m currently teaching myself React with the help of The Odin Project. While, I have learned a lot, I can’t help but think if I’m completing these projects at a slower rate than my peers.

It seems like i try a solution only to get an error. => try another one to get another error => try another one and success! => onto the next step. And then it’s rinse and repeat until you have something that works. Sometimes I will get 10 errors before I make any real progress. Is this how everyone else learns programming/JavaScript?

Edit: Thanks for all the positive replies, I’m feeling re-energized and motivated to tackle this project. Much appreciated, everyone! :)

We've been working on building a fun way to introduce people to JavaScript, specifically designed to help you write code and see the results quickly as you learn the fundamentals of JS along the way.

It's completely 100% free, and open to everyone. Thought it might be interesting to some folks here - https://lambdaschool.com/free-mini-code-bootcamp.

I want to respect this community as being for learning, so if this feels spammy please feel free to remove it, just wanted to let folks know of what I think will be a pretty cool course.

Unfortunately, the instructor is a big Taylor Swift fan, so if you're not into T Swift you'll have to write your own code so that you can plug in whichever artist you prefer ;)

This is my first front-end/design project, it's game called Hangman built with vanilla javascript, html, css and illustrator for the design.

It's my first attempt to try and learn the javascript language, please support the project if you like it.

Link to the github repo with a demo: Hangman.