Although we have reached an era where we can access information at our fingertips and could learn anything we are interested in, learning curves and durations may be different for different people. Here I am sharing my journey that how I was able to take command of the MERN stack within 15 days. And I will also suggest a learning strategy and resources for complete beginners.

Seed of web development

In 2012, my interest in web development was seeded in my school days when I was so much interested in HTML, CSS and XML which were part of our curriculum. Since then, I have made so much effort in learning techs but I didn't have proper guidance as it was the era when the internet was so costly and smartphones were not so common in India.

Code without computer

In 2015, after being admitted to engineering, the first programming language I learned was C language during my first semester. But this wasn't as simple as today's internet world. I used to write codes using a pen on a notebook and debug codes using my eyes and yes, sometimes on a desktop during computer labs but it was very limited. So, the majority of codes and logic were compiled inside of my head imagining the outputs of the programs.

The major change in life

In Feb 2019, the 6th semester, I managed to get a scholarship and purchased a laptop and a smartphone. Now I had internet access and could compile my codes on a computer. I tried learning android studio from youtube and made an app on which GATE preparation materials were organized and documents displayed in a pdf view generated for google drive pdf links. To learn android in-depth concepts, I enrolled in a paid self-paced course on Internshala. But, till now I had only learned C language and native android development needs java or kotlin, I tried too hard to follow the course but as a beginner, it became very hard to understand android studio with java having OOPs concepts. So I quit the course.

The web development journey begins

I was comfortable with HTML and CSS, so I researched a little about the next language to learn which could be beneficial in web development and I came to know about PHP. I started learning PHP from w3schools.com and completed it in 2 days. After a few days, I started to work with one of my friends outside of college. He had a tech startup idea and explained all his visions to me. I started to work with him and used all of the skills I had learned. While working, I came to know about the architecture of a typical website i.e. how a frontend connects with the backend through APIs, how the backend manages APIs and databases, how data in databases are stored, how to query data from a relational database, how AJAX requests data without reloading the page and how Git & Github tool is important for a developer. Along with this, I worked on WordPress also. Now, I call this work duration my first internship as a WAMP full-stack web developer.

My first job: cool or fool

After that so-called internship duration, my final semester arrived and I began to prepare for exams and interviews. But unfortunately, this was 2020, and the COVID-19 pandemic situation halted my learning flow. In October 2020, I gave my final semester exam and this was the time when I had to think of my career and preparation for off-campus placement as I knew already that my college will not be able to provide good placement opportunities. I prepared for service-based companies and got placed in Tata Consultancy Services Pvt Ltd. For me, joining TCS was not a very easy task, this was the hardest decision I have ever made. On 6th May 2021, I joined TCS. I was doing great, my prior web dev experience was helping me a lot and it was more than enough to keep enjoying TCS. After a few months, I started to realize that my knowledge and skills aren't improving. I have all got was my own prior experience only.

Seed of MERN Stack

At the end of December 2021 and starting of January 2022, I developed a Personal Assistant AI using python consuming several APIs. After that, I developed 2 telegram bots using python, one of them can shorten the links and the other can compile 4 programming languages (C, CPP, JAVA and Python).

At this moment, I got the idea to build an online compiler web application as I already had used the Codex APIs in my compiler telegram bot. I created a website from scratch using HTML, CSS and JavaScript but there was a CORS problem that meant I cannot make requests from other domains. I researched a lot but I got nothing to fix it properly. The same API was working with the python telegram bot but not with javascript, how this could happen? I left the website without fixing it properly and after a few months, I left TCS as well.

Before leaving TCS, I joined a 4 months backend development Bootcamp. I attended its first week and realized that they are going to take 4 months to teach NodeJs and ExpressJs. So I left the Bootcamp after the first week and started learning on my own.

Zero to hero in 15 days

I followed the frontend library path of freeCodeCamp.org for a day and moved to youtube another day.

I watched ReactJs and JavaScript lectures from @Thapa Technical and @pepcoding youtube channels.

Due to my prior web dev efforts, I didn't need to put much effort into learning JavaScript as every language has the same logic( loops, conditions, operators, etc. ), so I just watched lessons for topics like higher-order functions, Rest & spread operators and Objects from @pepcoding channel. And for ReactJs, one 3 hours of video was enough from the @Thapa Technical channel. This took me a whole day. On 3rd day, I continued to learn ReactJs and found that the Codex API having CORS error on my online compiler website was resolved using the Axios library in ReactJs. So this was the time when I converted my HTML, CSS and JavaScript website to a ReactJs website on 3rd day.

First React app, Kompiler- An Online Compiler using codex API.

Since this was a compiler having UI containing an editor and two boxes for input and output boxes, a drop-down for language selection and a clickable icon to toggle dark/light theme wasn't utilizing ReactJs Single Page Application features. So I decided to build another one that can use Routers, Context APIs and other hooks properly.

Second React app, BigScreen - Movies & TV shows information app

I started watching more videos from both the youtube channels mentioned earlier and took their thoughts, mixed them with my creativity and built my second ReactJs web application on 6th day. I named it 'BigScreen' consuming The Movies Database ( TMDB ) API. I was glad that I made something that has a better UI than the previous one.

Home Page

Filter by Movies genre

Filter by Tv show genre

Movie/Tv show detail component, add to favorite button and back navigation button at the left side of the screen

list of favorite movies/tv shows on favorite component, delete from favorites button and back navigation button at the left side of the screen

Search box at home page with debouncing multiple requests into one

Pagination

Fully responsive

Link to the web app: https://bigscreen.netlify.app/

From the 7th day, I started to learn NodeJs, ExpressJs, MongoDB and mongoose from freeCodeCamp.org's Backend Development module. I continued to watch 100s of youtube videos for the next 4-5 days and was able to build an Authentication API backend on the 15th day. It can generate OTPs and mail them to users using nodemailer in a formatted template design and assigns JWT tokens to users while sign-in/sign-up/password recovery.

Guidance for the complete beginner

For someone who is a complete beginner in web development and wanted to learn MERN/MEAN stack before suggesting the resources, I would like to tell you that please don't try to deep dive into any tech in you are in the beginning phase of learning. Try to learn while building and the more you build more you grow. Just start with basics and build something of your interest and then add new features.

HTML

1. For any stack, HTML is the most important pillar. So, first, learn some basics of HTML.

   If you like to read and do then the freeCodeCamp.org website is good for you. Here, you can read concepts and practice side by side using a built-in online editor and on completing the module you will get a free certificate. Click here to access Responsive Web Design and start from the beginning.

   

   And if you like to watch and do then there are plenty of videos available on YouTube. Here are some good resources in English and Hindi :

   English videos:

   Learn HTML – Full Tutorial for Beginners (2022) 4 hours 7 mins

   %[youtube.com/watch?v=kUMe1FH4CHE&t=7569s]

   HTML Tutorial - Website Crash Course for Beginners (2021) 45 mins

   %[youtube.com/watch?v=916GWv2Qs08]

   Hindi video:

   HTML Tutorial for Beginners in Hindi | Free Notes + Project 3 hours 36 mins

   %[youtube.com/watch?v=byTOONVJn-k]

   CSS

2. To style HTML you will need a CSS style sheet language. CSS is a vast topic and when you feel that you have grasped the basics then you can watch longer videos otherwise just stick to the basics and try to learn by doing in while building projects.

   You can learn CSS from freecodeCamp.org same as HTML. Click here to access Responsive Web Design and start learning CSS basics. Don't forget to learn about flexbox and grid as these are very helpful in layout design and management.

   Here are some recommended videos:

   English videos:

   CSS Full Course - Includes Flexbox and CSS Grid Tutorials 1 hour 25 mins

   %[youtube.com/watch?v=ieTHC78giGQ]

   CSS Tutorial - Zero to Hero (Complete Course) 6 hours 18 mins

   %[youtube.com/watch?v=1Rs2ND1ryYc]

   Hindi videos:

   Learn Complete CSS In One Video In Hindi 1 hour 31 mins

   %[youtube.com/watch?v=hkQv0NIxKQY&t=2s]

   CSS Tutorial In Hindi (With Notes) 🔥 8 hours 21 mins

   %[youtube.com/watch?v=Edsxf_NBFrw]

   Practice HTML and CSS

3. Now you have learned CSS, It's time to practice.

   Go to frontendpractice.com and try to design some beginner-level interfaces.

   JavaScript

4. Till now, you would be able to build any static website using HTML and CSS. Now, it's time to learn JavaScript to build dynamic websites. Again you can learn it from the freeCodeCamp.org website. Click here to go to the JavaScript module.

   Youtube videos in English:

   JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

   %[youtube.com/watch?v=W6NZfCO5SIk]

   Learn JavaScript - Full Course for Beginners 3 hours 36 mins

   %[youtube.com/watch?v=PkZNo7MFNFg]

   Videos in hindi

   JavaScript Tutorial In Hindi 3 hrs 44 mins

   Practice JavaScript

5. Practice and make HTML, CSS and JavaScript projects on https://www.frontendmentor.io/

6. Now, from here you can follow along my 15 days journey and use the resources which I used to command MERN or there are plenty of videos available on youtube here are some suggestions:

   learn about package managers ( NPM or Yarn ),

   Read this freeCodeCamp.org article or watch these youtube video

   English videos:

   NPM Crash Course 42 mins

   %[youtube.com/watch?v=jHDhaSSKmB0]

   Yarn Package Manager Crash Course 22 mins

   %[youtube.com/watch?v=g9_6KmiBISk]

   Hindi videos:

   NPM (Node Package Manager) in 10 Minutes 16 mins

   %[youtube.com/watch?v=MpDDlFX_zr0]

   Intro to Yarn Package Manager (In Hindi ) - Why & How to Use Yarn? 16 mins

   %[youtube.com/watch?v=lRvePayD7Xo]

   ReactJs

7. For react, you can learn from the freeCodeCamp.org website and go to the model 'Front End Development Libraries' and start doing React section.

   For videos, these are some recommendations:

   English video

   React Course - Beginner's Tutorial for React JavaScript Library [2022] 11 hrs 55 min

   %[youtube.com/watch?v=bMknfKXIFA8]

   Hindi video:

   Complete React JS Tutorial in Hindi with 5 Projects in 2022 3 hrs 47 mins

   %[youtube.com/watch?v=EHTWMpD6S_0&t=6s]

8. Now, you have become a front-end developer and you have to learn NodeJs and ExpressJs in MongoDb with mongoose to become a full-stack developer.

   MongoDB

9. MongoDB is easy to grasp. You will understand it very quickly if you know JavaScript.

   English tutorial video:

   Complete MongoDB Tutorial, 25 videos playlist

   %[youtube.com/playlist?list=PL4cUxeGkcC9h77dJ..

   Hindi tutorial video:

   MongoDB Tutorial For Beginners in Hindi 1 hour 13 mins

   %[youtube.com/watch?v=oSIv-E60NiU]

   NodeJs and ExpressJs

10. NodeJs is the JavaScript environment that enables the execution of JavaScript codes in our system and ExpressJs is a backend framework used for creating APIs on top of NodeJs.

# Suggested Video in English:

# Node.js and Express.js - Full Course 8 hrs 16 mins

# Suggested Video in Hindi:

# Node Js Tutorial in Hindi 1 hrs 41 mins

# Express JS Tutorial in Hindi 1 hrs 20 mins

# Node Js and Express JS projects

1. Here is a playlist of 50 projects using NodeJs and ExpressJs

1. Now you can explore more about MERN things as you have gone so far till now.

2. After creating your projects, you will need to push them to GitHub repositories, so watch a tutorial on Git & Github also.

Do comment if you had made some MERN projects and explain about it or share your thoughts and your journey of becoming a developer.