MERN Stack Developer (MSD) Roadmap.

#webdev #javascript #node #react

For those of you who don't know what is MSD, the following 3 lines will sum it all up for you.
MERN stands for MongoDB, ExpressJS, ReactJS, NodeJS, these technologies allow you to create a server & client-based application (web app).

HTML

Learn HTML basics.
The anatomy of HTML tags: tables, forms, lists.
Deploy a "Contact me" static HTML page as a good practice.

CSS

Learn CSS basics.
You have to understand the language syntax and how to connect it to the previously learned material.
The CSS skills I suggest to know well are:
Inline, Internal, External, Debugging, Selectors, wise usage of id's and classes, Favicons, HTML divs styling, Box model of website styling, Positions and Sizing.
and any one of these topics could be found by Googling "CSS {TOPIC NAME}"
Now you can style your "Contact me" page the way you want.

JavaScript

Learn advanced JavaScript.
to become a MERN stack developer you MUST know JavaScript WELL.
for that, I'm here (:
Read about JS concepts and understand why JS is important for your improvement in the web app environment.
First of all,
the simple basics are:
Document alerts, Data types, Variables, Naming conventions, String concatenation, Arithmetic logic and operators, Boolean expressions, Functions parameters and arguments, math&random classes usage, arrays, objects.
Once again, all of the topics mentioned above can be researched by Googling "JavaScript {TOPIC NAME}", eg: "JavaSciprt functions"
Advanced terms:

DOM (Document Object Model) concept.
Manipulating HTML elements with JS DOM.
Higher orders functions.
Event handling.
Dot notation.
CallBacks.
Async/Await functions & promises.
Ajax.

Bonus - jQuery, it's a JavaScript framework such as "React" that will be expanded later.
In my opinion, It makes your code unclear and incomprehensible in an attempt to shorten the number of lines.

ReactJS

As you already understood JavaScript is STRONG language which has many frameworks.
What Is a framework?
A framework in programming is a tool that provides ready-made components or solutions that are customized in order to speed up development.
Why ReactJS is special?
ReactJS is an excellent tool with which to create interactive applications for mobile, web, and other platforms. React's popularity and usage are increasing day by day for good reason. As a developer, coding in React makes you better at JavaScript, a language that holds nearly 90% of the web development share today
React is SPA (single page application).

To learn ReactJS and understand it clearly, I suggest taking an online courses.

YouTube crash course which is really good for those who doesnt want to pay -
https://www.youtube.com/watch?v=Dorf8i6lCuk
ReactJS Udemy best seller course (the one I used), I recommend it a lot.
https://www.udemy.com/course/react-the-complete-guide-incl-redux/

Backend introduction

All the topic mentioned above are used for frontend development.
MSD project is a bunch of code and interfaces that merges front & back into an application.

In the computer world, the "backend" refers to any part of a website or software program that users do not see. It contrasts with the frontend, which refers to a program's or website's user interface. In programming terminology, the backend is the "data access layer," while the frontend is the "presentation layer."

NodeJS and ExpressJS

Javascript was always a client side language until node.js.
Common server side languages include PHP, Python, Perl, Ruby
and several more. Node enables you to use Javascript server side.
This now means you can have a consistent language both ends
which could not be done prior to Node.
ExpressJS - express docs
The course I used - Udemy NodeJS bestSeller
YouTube crash course -

Backend Development and server handling with MongoDB

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License.
mongodb docs
Tech target article
MongoDB bestseller course -

Thank you very much for reading! 🙂

Top comments (9)

Neel Devani • Mar 28 '22

Great roadmap will agree as I'm in the middle of somewhere but like while doing Internship kinda left behind on practicing what advice would yaa give to get back on MERN stack ??

OriCohen05 • Mar 28 '22 • Edited

Do you need any resources or material to practice on?
You can contact me presonally for any help-
Discord: Ori Cohen#0006
Gmail : ori050905@outlook.com
Instagram: origcohen.
Thank you for the comment, I would love to help