Expected audience?

• This course is meant for developers who are interested in web development using React. You will not be able to grasp all the concepts if you have not built or developed anything before.
• Prior Javascript knowledge is helpful, although not required. You will be able to grasp everything in the course. And if you find this to be an amazing way to build websites, you will have to sharpen your Javascript skills to build further from what you learn here.

Expected Outcomes

• Build robust and scalable websites using the knowledge of only one programming language - Javascript
• Save time and avoid doing repetitive tasks by using popular automation tools
• Stop wasting money on software and infrastructure by leveraging the power of community and open source software
• Stop reinventing the wheel by reusing code and tools built by amazing developers
• Use command line to create boiler plate code, run build tasks, manage source control and even host your site on public domain
• Remove the pain of database management and schema modifications by using NoSQL database
• Get up to speed on the latest tips and tricks being used in web development

MERN Stack Course Outline

Week 1: Introduction to MERN & HTML

• Overview of Web Development
• Understanding the Web (How the Internet works)
• What is MERN and their scope
• Basic HTML Structure
• Elements, Tags, and Attributes
• Heading, Images and Container
• Paragraph, Lists and button
• Forms and Tables
• Creating a Simple Web Page

Week 2: Styling with CSS

• Introduction to CSS
• Inline, Internal, and External CSS
• Basic Selectors and Properties
• Borders, Margin, Colors and Padding
• Class and Id Selectors
• Layout Techniques (Box Model, Flexbox)
• Simple Webpage with HTML and CSS Project

 Week 3: Introduction to JavaScript

• Understanding JavaScript
• Variables, Data Types, and Operators
• Control Structures (Conditionals, Loops)
• Arrays with Methods and Objects
• String Manipulaltion (trim, Split, Upper/lower Case, Includes)
• DOM Manipulation Basics
• Local Storage and JavaScript Console

 Week 4: JavaScript in Action

• Working with Forms and Validations
• Functions and Events
• Introduction to ES6 (Arrow Functions, Template Literals)
• HTTP Request, Async/Await and Promises
• Basic JavaScript Projects (e.g., Counter)

 Week 5: Introduction to React.js

• JSX and Types of Components
• State and Props in React
• Handling Events in React
• Component Lifecycle Methods
• Conditional Rendering
• Lists and Keys in React
• React Hooks

 Week 6: Advanced React JS

• React Router
• React Context API
• React Redux
• Material UI
• Basic Knowledge of Git and their command

 Week 7: React Project

• Building a Simple React Application
• React Project (e.g: Quiz App / To Do App)
• Implementing Features (e.g., User Interface, State Management)
• Deployment and Hosting

 Week 8: Introduction to Node.js and Express.js

• Understanding Node.js
• Setting Up Node.js Environment
• Introduction to NPM (Node Package Manager)
• Building a Basic Server with Node.js
• Setting Up Express.js
• Routing in Express.js
• Middleware in Express.js
• Handling Requests and Responses

 Week 10: Node Integration with mongoose

• Intro of mongodb and mongoose
• Connect mongoose with node.js
• Schemas and objectId
• Middleware and Error Handling
• CRUD operation with express and mongoose
• Hashing the password and json web token
• API validation
• Testing the API via Postman

 Week 11: Full MERN Stack Project

• Planning and Designing the Full Stack Application
• Backend Development with Node.js, Express.js, and MongoDB
• Frontend Integration with React
• User Authentication and Authorization

 Week 12: Project Completion and Deployment

• Completing the MERN Stack Project
  • Final Touches and Testing
  • Deploying the Application (e.g., Heroku, Netlify)
  • Course Wrap-up and Q&A