MERN Stack

Understand how the web works and write your first HTML pages.

1. How the web works: client–server, DNS, HTTP/HTTPSvideo · 12 min
2. Browsers and web serversreading · 13 min
3. Set up your dev environment: editor, IDE, DevToolslab · 14 min
4. HTML document structure, tags, and attributesreading · 13 min
5. Build your first page: headings, paragraphs, lists, imageslab · 14 min
6. Day 1 checkpointquiz · 12 min

Build forms, embed multimedia, and write accessible, semantic markup.

1. Forms and form controls: inputs, buttons, checkboxes, radiosreading · 13 min
2. Multimedia: audio, video, and embeddingreading · 13 min
3. Tables and structuring datareading · 13 min
4. Semantic HTML, accessibility, and SEO-friendly markupvideo · 13 min
5. Project 1: Personal Bio Pagelab · 30 min
6. Day 2 checkpointquiz · 12 min

Style HTML with selectors, text properties, and the box model.

1. Three ways to add CSS: inline, internal, externalvideo · 11 min
2. Selectors, properties, and valuesreading · 13 min
3. Styling text: fonts, colors, and alignmentlab · 14 min
4. The box model: margin, padding, border, contentreading · 13 min
5. Day 3 checkpointquiz · 12 min

Lay out responsive pages with Flexbox, Grid, positioning, and media queries.

1. Flexbox fundamentalsvideo · 13 min
2. CSS Grid fundamentalsreading · 13 min
3. Float, clear, and positioning (relative/absolute/fixed/sticky)reading · 13 min
4. Responsive design with media querieslab · 14 min
5. Project 2: Responsive Product Landing Pagelab · 35 min
6. Day 4 checkpointquiz · 12 min

Add motion and interactive states with transitions, keyframes, and pseudo-classes.

1. Transitions for smooth animationsvideo · 12 min
2. Keyframes and custom animationsreading · 13 min
3. Pseudo-classes and pseudo-elements: :hover, ::before, ::afterlab · 14 min
4. Day 5 checkpointquiz · 12 min

Write core JavaScript and manipulate the DOM.

1. Variables, data types, and operatorsvideo · 13 min
2. Functions, conditionals, and loopsreading · 13 min
3. DOM manipulation: accessing and modifying elementslab · 14 min
4. Project 3: Interactive Quizlab · 30 min
5. Day 6 checkpointquiz · 12 min

Handle events and validate forms with JavaScript and regex.

1. Arrays, objects, and functions in depthreading · 13 min
2. Event listeners: click, hover, keypressvideo · 13 min
3. Form validation and regular expressionslab · 14 min
4. Day 7 checkpointquiz · 12 min

Use the Bootstrap grid to build responsive layouts fast.

1. What is Bootstrap and how to set it up (CDN vs local)video · 11 min
2. The Bootstrap grid systemreading · 13 min
3. Responsive layouts: breakpoints and column systemlab · 14 min
4. Project 4: Responsive Business Websitelab · 30 min
5. Day 8 checkpointquiz · 12 min

Build UIs faster with Bootstrap components and utility classes.

1. Core components: buttons, cards, forms, alertsreading · 13 min
2. Navigation bars and dropdownsvideo · 13 min
3. Utility classes: spacing, colors, and responsive helperslab · 14 min
4. Day 9 checkpointquiz · 12 min

Build responsive forms, modals, and carousels with Bootstrap.

1. Responsive forms: input groups, form grids, validation stylesreading · 13 min
2. Modals for pop-up contentvideo · 12 min
3. Carousels for image and content sliderslab · 14 min
4. Project 5: Bootstrap Portfolio Websitelab · 14 min
5. Day 10 checkpointquiz · 12 min

Control and extend Bootstrap components with JavaScript.

1. Controlling Bootstrap components with JavaScript (modals, tooltips, dropdowns)video · 13 min
2. Event listeners for dynamic Bootstrap interactionslab · 14 min
3. Day 11 checkpointquiz · 12 min

Fetch and display external data dynamically with AJAX and JSON.

1. Asynchronous JavaScript and AJAX explainedvideo · 12 min
2. Fetching external APIs and working with JSONlab · 14 min
3. Dynamic content loading without page refreshlab · 14 min
4. Day 12 checkpointquiz · 12 min

Use Git for version control and optimize web performance.

1. Version control with Git and GitHub: clone, commit, push, pullvideo · 13 min
2. Performance: minifying CSS/JS and optimizing assetsreading · 13 min
3. Day 13 checkpointquiz · 12 min

Deploy a static site and verify it across browsers and devices.

1. Deploying with GitHub Pages and Netlifylab · 14 min
2. Cross-browser compatibility and responsiveness checksreading · 13 min
3. Final project preparation and reviewreading · 12 min
4. Day 14 checkpointquiz · 12 min

Plan, build, and present a multi-page responsive web app.

1. Capstone brief: a multi-page responsive web appreading · 13 min
2. Planning and structuring your foundation capstonereading · 13 min
3. Build and present your foundation web appproject · 12 min

Understand full-stack development, meet MongoDB, Express, React, and Node, and set up the development environment.

1. What is full-stack development?video
2. Introduction to the MERN stack: MongoDB, Express, React, Nodevideo
3. Overview of web technologies: HTML, CSS, JavaScript, Git & GitHubreading
4. Set up your MERN development environment: Node.js, npm, VS Codelab
5. Day 1 checkpointquiz

Work with HTML elements, forms and tables, lay out pages with Flexbox and Grid, and go responsive with media queries and Bootstrap.

1. HTML elements, forms, and tablesvideo
2. CSS selectors, Flexbox, and the Grid systemreading
3. Responsive design and media queriesreading
4. Bootstrap basicslab
5. Day 2 checkpointquiz

Add motion with CSS animations and transitions, then manipulate the DOM with core JavaScript.

1. CSS animations and transitionsvideo
2. JavaScript basics: variables, data types, operatorsreading
3. DOM manipulation, events, and event listenerslab
4. Day 3 checkpointquiz

Work fluently with functions, objects, arrays, and asynchronous JavaScript.

1. Functions, objects, and arrays in depthvideo
2. Arrow functions and callback functionsreading
3. Asynchronous JavaScript: promises and async/awaitlab
4. Day 4 checkpointquiz

Use modern JavaScript: ES6+ syntax, modules, and browser storage.

1. Spread and rest operators; template literalsvideo
2. Destructuring, modules, and imports/exportsreading
3. LocalStorage, SessionStorage, and JSON handlinglab
4. Day 5 checkpointquiz

Track work with Git, collaborate on GitHub, and host a static site on GitHub Pages.

1. Git basics: commit, push, pull, branchingvideo
2. GitHub repositories and collaborationlab
3. Hosting static sites on GitHub Pageslab
4. Day 6 checkpointquiz

Build a static website with HTML, CSS, and JavaScript and deploy it on GitHub Pages.

1. Mini Project 1: brief and planvideo
2. Build: interactive static websiteproject
3. Deploy on GitHub Pageslab
4. Week 1 checkpointquiz

Understand why React exists, set up a project, and write your first JSX components.

1. Why React?video
2. Setting up a React project (Create React App)lab
3. JSX and React components: functional and classreading
4. Day 8 checkpointquiz

Pass data with props, hold state, and render conditionally.

1. Understanding props and statevideo
2. State management in Reactlab
3. Conditional renderingreading
4. Day 9 checkpointquiz

Handle forms, events, and user input the React way.

1. Handling forms in Reactvideo
2. Controlled and uncontrolled componentsreading
3. Handling user inputlab
4. Day 10 checkpointquiz

Route between pages with React Router DOM and link them together.

1. React Router DOM and dynamic routingvideo
2. Navigation and linking between pageslab
3. Day 11 checkpointquiz

Use useState, useEffect, and useContext, write custom hooks, and share state with the Context API.

1. useState, useEffect, useContextvideo
2. Custom hooksreading
3. Context API for state managementlab
4. Day 12 checkpointquiz

Build a To-Do list app in React with LocalStorage persistence.

1. Mini Project 2: brief and planvideo
2. Build: React To-Do app with LocalStorageproject
3. Day 13 checkpointquiz

Style React apps with Material-UI, Tailwind CSS, and CSS-in-JS, and keep components reusable.

1. Material-UI and Tailwind CSSvideo
2. Styled Components and Emotionreading
3. Component reusability and best practicesreading
4. Day 14 checkpointquiz

Understand the Node.js runtime, set up the environment, and serve your first responses.

1. What is Node.js?video
2. Setting up the Node.js environmentlab
3. Creating a basic server with Node.jslab
4. Day 15 checkpointquiz

Stand up an Express server and handle routes, middleware, query params, and request bodies.

1. Setting up an Express.js servervideo
2. Handling routes and middlewarereading
3. Working with query params and the request bodylab
4. Day 16 checkpointquiz

Design REST APIs with Express and implement full CRUD.

1. Creating REST APIs with Express.jsvideo
2. CRUD operations: GET, POST, PUT, DELETElab
3. Handling API requests and responsesreading
4. Day 17 checkpointquiz

Understand NoSQL, set up MongoDB Atlas, and run CRUD through Mongoose.

1. Introduction to NoSQL databasesvideo
2. Setting up MongoDB Atlaslab
3. CRUD operations using Mongooselab
4. Day 18 checkpointquiz

Build an authentication system with hashed passwords and JSON Web Tokens.

1. Setting up an authentication systemvideo
2. Hashing passwords with bcrypt.jslab
3. JSON Web Tokens (JWT) for authenticationlab
4. Day 19 checkpointquiz

Wire the React frontend to the Express backend with Fetch and Axios.

1. Fetching data from backend to frontendvideo
2. API integration in React using Fetch and Axioslab
3. Day 20 checkpointquiz

Implement login and registration end to end with JWT authentication.

1. Mini Project 3: brief and planvideo
2. Build: login and registration with JWTproject
3. Week 3 checkpointquiz

Manage application state with Redux Toolkit and handle async calls with Thunk.

1. Introduction to Redux and Redux Toolkitvideo
2. Setting up Redux in a React projectlab
3. Redux Thunk for async callslab
4. Day 22 checkpointquiz

Add file uploads with Multer, role-based authorization, and real-time data with WebSockets.

1. File uploading using Multervideo
2. Role-based authorizationlab
3. WebSockets for real-time datalab
4. Day 23 checkpointquiz

Unit-test with Jest, debug across React and Node, and handle errors with logging.

1. Unit testing with Jestvideo
2. Debugging in React and Node.jslab
3. Error handling and loggingreading
4. Day 24 checkpointquiz

Deploy the React app and the Node/MongoDB backend, then connect them in production.

1. Deploying a React app on Vercel/Netlifyvideo
2. Deploying Node.js and MongoDB on Render/Herokulab
3. Connecting frontend and backend after deploymentlab
4. Day 25 checkpointquiz

Plan the capstone: application structure, database schema, and UI/UX.

1. Structuring a MERN applicationvideo
2. Database schema designreading
3. UI/UX planninglab
4. Day 26 checkpointquiz

Build the full-stack capstone application and integrate its features.

1. Full-stack application developmentproject
2. Integrating features and testingproject

Make the capstone bug-free and optimize its performance.

1. Ensuring the application is bug-freelab
2. Optimizing for performancelab

Host the final project, demo it live, and close out with certification.

1. Hosting the final projectlab
2. Live demo and feedbackproject
3. Certification and closing ceremonyvideo