Become a Full-Stack Web Developer — Free Resources

The list below isn’t meant to be exclusive!!! It’s a collections of links, videos, articles and videos that helped me and over 200+ students that I helped for the past 2 years to become a web developer. It’s more focused on JavaScript (React.js and Node.js) since that’s my area of expertise along with CSS, HTML and other skills required to become a full-stack developer.

Shout out to this author for putting together a great list of resources.

Big Picture

Author: https://github.com/kamranahmedse/developer-roadmap

Video version

Learning How to Learn

I suppose you decided to follow your dream or change your career path a bit if you are still reading this!!! Reading a new topic could be rather challenging but most definitely rewarding at the end. I DO recommend watching this free course — learning how to learn.

Getting the Basics

Here’s the basics you need to learn:

• HTML & CSS
• Responsive Designs
• JavaScript
• Git

Now once you are a master of the topics above (And I mean really know it inside out) then continue your learning path with these:

Frontend Development:

• CSS Preprocessors (Less, Sass & PostCSS)
• ReactJS (It’s my favorite but feel free to learn AngularJS too if you want)
• AngularJS
• Task Runners

Backend Development:

• Database
• NodeJS (Backend Development)
• Python (With Flask or Django for Backend Development)

Front-End Development

HTML

Here is a list of some of the best HTML courses to start with (All Free):

Basics:

• Learn HTML By Codecademy
• HTML5 & CSS3 Fundamentals: Development for Absolute Beginners By Microsoft
• HTML Fundamentals By Solo Learn
• HTML5 & CSS Fundamentals By edx

Intermediate:

• HTML Modules By MDN
• HTML5 Cheatsheet

CSS

Basics:

• Learn CSS By Codecademy
• Introduction to CSS By MDN
• The Complete CSS3 Tutorial
• How to Code in HTML5 & CSS3

Intermediate:

• Learn CSS Layout
• Intermediate CSS

Responsive Designs

• Learn Responsive Design
• Responsive Web Design
• Beginner’s Guide to Responsive Web Design

JavaScript

Now here’s the most crucial point of your web development… Make sure to dedicate extra effort and time to learn the JavaScript inside out. 1 piece of advice I can give is to NOT start learning or experiencing any JS framework (React, Angular etc…) unless you are 110% comfortable and knowledgeable in vanilla JavaScript. Here’s some of the resources:

Basics:

• JavaScript Tutorial By Solo Learn
• JavaScript Tutorial By Code School
• JavaScript Tutorial By LearnJS
• Learn JavaScript By Codecademy
• JavaScript Fundamentals By Rithm School

Intermediate:

• JavaScript (The Right Way)
• Intermediate JavaScript Part 1 By Rithm School
• Intermediate JavaScript Part 2 By Rithm School
• Object-Oriented JavaScript by HackReactor & Udacity
• Learn JavaScript By MDN

Advanced:

• Advanced JavaScript 1 By Rithm School
• Advanced JavaScript 2 By Rithm School

Projects:

• JS 30 for 30–30 Projects for 30 Days
• 13 Weeks of JavaScript

Books:

• Eloquent JS — Free JavaScript Ebook
• You don’t know JS — Free, hosted on GitHub
• Learning js Design patterns — Reusable solutions to commonly occurring problems

Git

• Official Tutorial — Learn Git in 15 Minutes
• Official Docs
• Git, the simple guide
• Learn Git in 30 Minutes — Article

CSS Preprocessors

At this point there are dozens of CSS preprocessors that you could learn, however here’s the list of the ones that I personally used for the past couple of years:

• Learn Sass Tutorial By Codecademy
• Sass Basics
• Learn Less
• Learn Less in 10 minutes
• Stylus
• Introduction to PostCSS
• PostCSS — A Comprehensive Introduction By Smashing Magazine

ReactJS

• Rithm School React Fundamentals
• Rithm School Intermediate React
• Tutorial By Official React: Intro To React

AngularJS

• Learn AngularJS 1.X
• Learn Angular 1.x with free interactive lessons
• A Better Way to Learn AngularJS
• A Better Way to Learn Angular 2
• AngularJS 3

Task Runners

• Automate Your Tasks Easily with Gulp.js
• Grunt Tutorial
• Learn Webpack in 15 Minutes
• How to use Webpack with React: an in-depth tutorial
• Webpack Tutorials and Courses

The Ultimate List of Best Free Tools & Resources for Front-End Web Developers

Back-End Development

NodeJS

“Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side” aka back-end development. There are other languages for back-end development including but not limited to Python, Ruby, PHP and Java.

Here’s a list of resources on learning NodeJS:

Basics:

• Why the Hell Would You Use Node.js
• Node JS Tutorial Video For Beginners by The Net Ninja
• Node JS Tutorial By Node School
• Intermediate & Advanced:
• Node & Express.js Fundamentals By Rithm School
• Intermediate Node and Express.js By Rithm School
• 10 Best Practices for Writing Node.js REST APIs
• Redis + Node.js: Introduction to Caching

Docs:

• Official NodeJS Docs

Python

Basics:

• Learn Python By Codecademy
• Python for Beginners

Advanced:

• Rithm School Intermediate Flask
• Getting started with Django

Databases

• SQL vs NoSQL
• Intro to Relational Databases — SQL, DB-API, and More!
• MongoDB University — Numerous classes on learning MongoDB
• PostgreSQL Tutorial
• PostgreSQL Exercises
• Try Redis
• Redis Tutorial

You have come a long way, learning all these topics were not easy but it is definitely rewarding to get to this point right?. Please feel free to reach out to me at [email protected] if you have any questions or concerns.

Also look for the next article I will share soon on “How to land a job as a Front-End Developer — Free Resources”.

Best of luck,

“Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.”