Full-Stack Web Development
HTML5, CSS3, Bootstrap, JavaScript, React.js, Node.js, MongoDB, GitHub and live deployment — 16+ micro-projects plus a live-deployed e-commerce capstone.
Duration
8 Weeks
Level
Beginner → Job Ready
Prerequisites
Basic Computer Skills
Curriculum
HTML5 Structure & Semantic Tags
Foundations of the web — build a personal portfolio using semantic HTML5.
- HTML5 document structure, doctype, head & body
- Semantic tags: header, nav, main, section, article, footer
- Forms, inputs, labels and accessibility attributes
- Images, media embeds, tables and lists
- Project: Personal Portfolio Website
CSS3 Styling, Box Model, Flexbox & Grid
Master modern CSS layout and typography for production interfaces.
- Selectors, specificity, colors and typography
- Box model, positioning and z-index
- Flexbox: alignment, wrapping and responsive rows/columns
- CSS Grid: templates, areas and auto-fit/auto-fill
- Project: Product Card + Pricing Table
Responsive Design, Bootstrap & Git
Make sites work on every screen and ship them to the world with Git.
- Media queries, mobile-first workflow, fluid images
- CSS animations and mobile-first design principles
- Bootstrap 5 grid, utilities and components
- Git basics: init, commit, branch, merge, pull requests
- GitHub Pages & Netlify deployment workflow
- Project: Landing Page + GitHub Deployment
JavaScript Basics, DOM & Form Validation
Add interactivity — variables, functions, DOM manipulation and validation.
- Variables, data types, operators and control flow
- Functions, arrays, objects and ES6+ syntax
- DOM selection, events and dynamic UI updates
- Form validation and client-side data handling
- fetch API, async/await and promises
- Screening tests (Sessions 5, 10, 15, 20): MCQ + practical coding
- Project: To-Do App, Calculator, Contact Form
React.js — Components, JSX, State & Props
Build reactive UIs with components, hooks and one-way data flow.
- React setup with Vite, JSX and component composition
- Props, state and lifting state up
- useState, useEffect and useRef hooks
- Conditional rendering, lists and keys
- Project: Calculator App with Hooks
Node.js, Express.js, REST API & CRUD
Ship a real back-end with routing, middleware and REST endpoints.
- Node.js runtime, npm and modules
- Express server, routing and middleware
- REST principles: GET, POST, PUT, DELETE
- Request validation and error handling
- Project: Basic API with Database
MongoDB Integration & Full-Stack Connect
Persist data, protect routes and wire the React front-end to the API.
- MongoDB Atlas, collections and documents
- Mongoose schemas, queries and relations
- JWT-based user authentication and route protection
- Connecting React with the Express + Mongo API
- Project: User Auth + Product API
Payment Integration, Testing & Live Deploy
Complete a live e-commerce capstone deployed on the internet.
- Stripe / PayPal integration and secure checkout
- Cart, orders and admin dashboards
- API testing with Postman and basic unit tests
- Deployment: GitHub Pages, Vercel / Render
- Capstone: Full E-commerce + Live Deploy
Tools & Technologies
Capstone Projects
Capstone
Live E-commerce (React + Node + MongoDB)
Micro
