HTML & CSS:

• Semantic HTML, forms, and accessibility
• CSS fundamentals, Flexbox, Grid, and responsive design

JavaScript Basics:

• Variables, data types, functions, and control structures
• DOM manipulation and event handling

Assignments:

• Build a static personal portfolio page
• Responsive design exercises

Topics:

• ES6+ features: arrow functions, destructuring, spread/rest operators, promises
• Introduction to asynchronous programming

Assignments:

• Create small utility functions and practice asynchronous patterns (e.g., API calls)

Topics:

• Git fundamentals, branching, merging, and collaboration workflows
• Introduction to code editors and debugging tools

Mini‑Project:

• Set up a GitHub repository for your portfolio project and integrate your HTML/CSS/JS work

Topics:

• What is React and why use it?
• JSX, components, and props

Hands‑on:

• Create a simple "Hello World" app and break it into components

Topics:

• Managing state with useState and useEffect
• Lifecycle methods in functional components

Assignments:

• Develop a dynamic counter and to‑do list application

Topics:

• React Router: setting up routes, nested routes, and navigation
• Reusable components and best practices

Hands‑on:

• Build a multipage application with navigation

Topics:

• CSS-in-JS, Styled Components, or SASS in React
• Introduction to UI libraries (e.g., Material‑UI or Bootstrap)

Mini‑Project:

• Create a themed dashboard interface with several components

Topics:

• Node.js basics, module system, and npm
• Creating a basic HTTP server

Hands‑on:

• Build a simple server that responds to client requests

Topics:

• Setting up an Express server, middleware, routing
• Handling requests and responses

Assignments:

• Develop RESTful endpoints for a mock resource (e.g., "users")

Topics:

• Best practices in API design
• Error handling, logging, and debugging techniques

Hands‑on:

• Extend your API with error handling and input validation

Topics:

• Documenting APIs (using Swagger or Postman)
• Writing basic tests for endpoints (using Jest or Mocha)

Mini‑Project:

• Complete and document an API that you will later integrate with the front end

Topics:

• NoSQL concepts, installation, and basic CRUD operations
• MongoDB Shell and Compass

Hands‑on:

• Create and query a local MongoDB database

Topics:

• Defining schemas and models with Mongoose
• Schema relationships and validations

Assignments:

• Model a sample data set (e.g., user profiles, posts)

Topics:

• Connecting Node/Express to MongoDB using Mongoose
• Building routes that perform CRUD operations on the database

Hands‑on:

• Develop endpoints that store, retrieve, update, and delete data

Topics:

• Aggregation, indexing, and performance tuning
• Security best practices (e.g., sanitization, connection security)

Mini‑Project:

• Refine your API by integrating advanced database queries and optimizations

Topics:

• Consuming RESTful APIs in React
• Axios/fetch for API calls, handling responses and errors

Hands‑on:

• Build a feature in your React app that communicates with your Express API

Topics:

• User authentication using JWT
• Role‑based access control and secure routes

Assignments:

• Implement signup, login, and protected routes in your application

Topics:

• Global state management using Redux (or Context API)
• Middleware for handling asynchronous actions

Hands‑on:

• Integrate a global state for user authentication or other shared data

Topics:

• End‑to‑end testing and integration testing for full‑stack apps
• Debugging strategies and performance optimization

Mini‑Project:

• Write tests for key application components and endpoints

Topics:

• Define project scope (e.g., e‑commerce platform, social media app, project management tool)
• Wireframing, UI/UX design, and database schema design

Activities:

• Form project teams or work individually
• Create a project plan and set milestones

Development:

• Build the full‑stack application integrating the MERN components
• Implement additional features such as real‑time updates (using Socket.IO), notifications, etc.

Testing & Deployment:

• Final testing, debugging, and performance optimizations
• Deploy the application on cloud platforms (Heroku, AWS, etc.)

Final Deliverable:

• Complete, production‑ready MERN application
• Prepare a presentation/demonstration with code walkthrough and project documentation

• Weekly Assignments & Quizzes: Reinforce theoretical and practical concepts.
• Mini‑Projects: Hands‑on mini‑projects at the end of each module to build confidence.
• Final Capstone Project: Comprehensive project that covers the entire MERN stack.
• Code Reviews & Pair Programming: Regular code reviews and collaborative sessions to enhance coding best practices.
• Mentor Sessions & Q&A: Scheduled sessions with instructors/mentors for personalized guidance.