Roadmap to Learning Full Stack (MERN) Web Development Beginner Level Through Free Online Tutorials

Last updated on 23 March 2024

This document provides a roadmap for learning full stack web application development - beginner level, using free online tutorials. The student/participant is expected to know one computer language beforehand. Ideally if the student knows a dynamically typed language it will be better as JavaScript is dynamically typed. If not, the student should know a statically typed language like C++ or Java. I have gone through these tutorials myself (some in detail and some at overview level) before listing it in this roadmap below.

The last phase of the course is a MERN (MongoDB, Express, React.js and Node) full-stack project. The course also covers Visual Studio Code, Git and Github. Overview information about the main tutorials of the course are given below. The student should also see the extensive and well organized notes that I prepared while following two rounds of this course. It may be a very helpful aid to the student as he/she goes through the course.

Online Tutorials used in Course

HTML

Main tutorial (around 4 hours video)

Learn HTML – Full Tutorial for Beginners (2022), 4 hrs, 3 mins, by freeCodeCamp.org.

Additional resources

HTML Tutorial (w3schools.com)


CSS

Main tutorial (around 6 hours, 30 minutes video)

[Till end of Chapter 18, around 6 hours, 33 minutes of video:] CSS Tutorial – Full Course for Beginners, 11 hrs. 8 mins, published by freeCodeCamp.org on 30 Aug. 2022. Source code (github).

Additional resources

“CSS Tutorial” section of CSS Tutorial


JavaScript

As student would have prior knowledge of a programming language, it may be enough to use a text based tutorial for JavaScript. However dynamic HTML parts of the JavaScript tutorials like HTML DOM, Browser BOM and Web APIs need to be studied in depth if the student is new to them.

Main tutorial (text based)

JavaScript Tutorial (w3schools.com) for most topics. webdevsimplified.com covers promises, fetch API and async/await better.

Additional resources

JavaScript Programming – Full Course, 7 hrs. 44 mins, published Jun 21, 2021 by freeCodeCamp.org (Created by Per Harald Borgen). Source code (github)


Mini-Project using HTML, CSS and JavaScript (around 1 hr, 30 min video)

Has quick coverage of JavaScript along with one small game project, which can serve as a refresher to the main tutorial, and a web app project using HTML, CSS and JavaScript. The first two parts of the video are on HTML and CSS which can be skipped.

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB), 7 hrs. 29 mins, published on Nov 1, 2022 by freeCodeCamp.org.

The relevant sections of the video:

(3:15:49 till around 4:52:01) Learn JavaScript

(4:52:01 till around 5:44:04) Create Frontend Movie App


Node.js and Express.js

Main tutorial (around 8 hours, 15 minutes video)

1st in series: Node.js and Express.js – Full Course, 8 hrs. 16 mins, published on Apr 1, 2021 by freeCodeCamp.org. Source code (github)

Additional resources

Node.js and Express.js – Complete Course for Beginners | Learn Node.js in 6 Hours, 6 hrs, published on Jul 20, 2023 by Dipesh Malvia.


MongoDb and Mongoose including mini-project using Node.js, Express.js, Mongoose and MongoDb

Note that the coverage of MongoDb and Mongoose in this roadmap is very limited (quick start type).

Main tutorial (around 3 hours video)

2nd in series: Node.js Projects, around 10 hrs, published on Sep. 21, 2021 by Coding Addict. This video follows up on Node.js and Express.js tutorial video. It covers MongoDb and Mongoose in the first project (TASK MANAGER). This coverage is from beginning of video till around 3 hrs 7 mins after which the next project (STORE API) starts.For this course, we can stop at end of the 1st project which is till 3 hrs 7 mins of the video.]. Source code (github, same as 1st in series). The first project (TASK MANAGER) does not cover JWT (JSON Web Token) and user registration and login. Later parts of the video seem to cover them. Here's a text based tutorial on them: Node.js User Authentication Guide.

Additional resources

Getting Started with MongoDB Atlas – A Modern Database!, 19 min. 55 secs, published on Sep. 20, 2022 by MongoDB

Getting Started with MongoDB & Mongoose ODM (Object Data Modeling) Library, 21 mins., published on May 24, 2022 by MongoDB


Additional mini-project for Node.js, Express.js and MongoDb (without Mongoose) (around 1 hr, 45 min. video)

Last two parts of this video which is mentioned earlier in JavaScript section: Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB), 7 hrs. 29 mins, published on Nov 1, 2022 by freeCodeCamp.org.

The relevant sections of the video:

 (5 hr: 44 min till around 6 hr:49 min)) Create Backend Reviews API

 (6 hr: 49 min till end of video around 7 hr: 29 min) Connect Frontend with Backend


ReactJS

Main tutorials (around 10 hours, 30 minutes video)

React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours, 8 hr 49 min, published on Sep 10, 2021 by Dave Gray. Source code (github)

React Router 6 – Tutorial for Beginners, 1 hr 17 mins, published on May 4, 2022 by freeCodeCamp.org. Source code (github)

React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial, 21 min. 31 secs., published on Dec 7, 2021 by Dave Gray. This video explains the changes made to earlier version of Dave Gray's router tutorial code (1st video in this set) to migrate it to router v6.

Additional resources

Tutorial on React (official)


Notes

  1. Total main tutorial video time: 35 hrs 30 min (JS is text based tutorial). Main video tutorial breakup:
    • HTML - 4 hrs
    • CSS - 6 hrs 30 min
    • HTML+CSS+JS Mini-project - 1 hr 30 min
    • Node.js and Express.js - 8 hrs 15 min
    • MongoDb and Mongoose - 3 hrs
    • Node+Express+MongoDb Addl. mini-project - 1 hr 45 mins.
    • ReactJS - 10 hrs 30 min
  2. JavaScript main tutorial is text based. Alternative video tutorial is around 7 hrs 45 mins. So if JS alternative video is used as main tutorial, the total main tutorial video time will become around 33 hrs.

Comments

Post a Comment