iSchool

Grade 9Web Builders

Module 1 : Front End Studio

Build your WebsiteUsing Bootstrap

Write raw code like a pro. Students transition to professional text editors to master the anatomy of the web. By building a fully responsive, modern e-commerce gaming website, they will master HTML, CSS, and the Bootstrap framework while deploying their work live to the world.

3 modules · 12 lessonsFront-End Development
Grade 9 Web Builders hero
Final Project
iPlay E-Commerce Web Platform
What you'll walk away with

Four Learning Outcomes.One confident web developer.

Real, transferable skills that bridge clean code, modern design, and live deployment.

Master Web Architecture

Understand how the internet works and write clean, semantic HTML to structure modern webpages.

Advanced CSS Layouts

Utilize the Box Model, Flexbox, and CSS Grid to design complex, pixel-perfect user interfaces.

Rapid Responsive Design

Implement the Bootstrap framework and Media Queries to ensure websites look perfect on any device.

Professional Deployment

Manage code versions with GitHub and launch live websites to the public using Netlify hosting.

Tools & Technologies

Developer's Tech Stack

Learn front-end development through hands-on work with industry-standard tools and frameworks.

VS Code & GitHub logo

VS Code & GitHub

The industry-standard code editor paired with the world's largest developer network for writing and storing professional code.

HTML & CSS illustration

HTML & CSS

The foundational building blocks of the internet. Students use HTML for structure and advanced CSS Grid/Flexbox for styling.

Bootstrap framework logo

Bootstrap Framework

A powerful, modern CSS framework that allows developers to rapidly build mobile-first, highly responsive website layouts.

The Learning Path

Three modules.A live deployed website at the end.

From your first line of HTML to a Bootstrap-powered site deployed live on the web.

Module 01

Anatomy of the Web (HTML & Basic CSS)

Discover how the internet actually works. Set up a professional VS Code environment and learn to write semantic HTML to structure text, links, forms, and images.

Module 02

Layouts & Responsive Design

The core of modern web design. Master the CSS Box Model, dive deep into Flexbox and CSS Grid, and use Media Queries to make your sites mobile-friendly.

Module 03

Bootstrap Framework & Deployment

Speed up your workflow! Implement Bootstrap to build professional Navbars instantly. Finally, learn to host your projects on real domains using GitHub.

Skills Gained

More than just code.

Every Grade 9 graduate leaves with applied front-end skills, deployment know-how, and the soft skills to pitch their work with confidence.

Technical Skills

Advanced CSS Layouts

Master the Box Model, Flexbox, and CSS Grid to design complex, pixel-perfect user interfaces.

Bootstrap Framework

Use Bootstrap components and grid system to rapidly build modern, professional website layouts.

Responsive Web Design

Apply Media Queries and mobile-first principles so your sites look perfect on every device.

GitHub & Netlify Hosting

Version your code on GitHub and deploy live, public websites with Netlify hosting.

Soft Skills

Structural Planning

Plan page architecture and content hierarchy before writing a single line of code.

UI/UX Implementation

Translate design ideas into clean, accessible interfaces that users love to navigate.

Digital Footprint Creation

Establish a professional online presence through public repositories and live deployed sites.

Technical Pitching

Confidently present technical work, walking audiences through code and design decisions.

The Final

The Graduation ProjectiPlay E-Commerce Web Platform.

By the end of this course, every student builds and proudly deploys a fully responsive, multi-page e-commerce website, live on the web via GitHub and Netlify.

iPlay E-Commerce Web Platform

Bring your code to life! Students deploy all their front-end skills to build a responsive, multi-page website for an e-commerce store featuring a massive product library and dynamic product cards.

  • Responsive Multi-Page Site: Build a full e-commerce journey with navigation, product libraries, detailed item pages, and a checkout portal.
  • Dynamic Product Cards: Style reusable product cards using CSS Grid and Bootstrap components, complete with pricing details and "Add to Cart" functionality.
  • Mobile-First Design: Apply Media Queries to ensure the entire shopping and checkout experience looks perfect on phones, tablets, and desktops.
iPlay E-Commerce Web Platform preview
Student presenting their GitHub project and live website

GitHub Launch & Pitch

Step into the developer world. Students publish their raw code to GitHub, deploy their live site via Netlify, and present their work to their parents.

  • GitHub Publishing: Push your raw code to a public repository for the developer community.
  • Netlify Deployment: Launch your live website to the public with a real, shareable URL.
  • Parent Pitch: Walk your family through your code, design choices, and live site.
Module 2 : Full Stack Lab

Launch your WebsiteWith Node.Js & MongoDB

Transition into full-stack web development! Students master advanced JavaScript, build server-side backends with Node.js and Express, and manage databases using MongoDB. They will engineer a robust backend infrastructure to power a real-world, dynamic web application.

3 sections · 12 lessons · Full Stack Web Development
Grade 9 Module 2 hero
Final Project
Full Stack Web App
What you'll walk away with

Four Learning Outcomes.One Full-Stack Dev.

Real, transferable skills bridging frontend interfaces and backend logic.

Master JavaScript Logic

Write complex scripts using advanced functions, arrays, objects, and event listeners.

Manipulate the DOM

Dynamically update website content, styling, and attributes based on user interactions.

Engineer RESTful APIs

Use Node.js and Express to build backend servers that handle dynamic HTTP requests and JSON data.

Manage Cloud Databases

Connect applications to MongoDB, allowing websites to create, read, update, and delete real data securely.

Industry-Standard Tools

The Tech Stack.

Professional frameworks and cloud databases used by top software engineers.

JavaScript & DOM

Mastering core programming logic, arrays, functions, and dynamic DOM manipulation to build interactive front-end experiences.

Node.js & Express

Engineering robust server-side backends, routing with Express, and building RESTful APIs that power dynamic applications.

MongoDB & Postman

Designing NoSQL databases with MongoDB and Mongoose, plus testing RESTful endpoints with Postman for true full-stack workflows.

The Curriculum

Your Step-by-Step Roadmap.

From client-side scripting to a fully deployed cloud database.

Module 01

JavaScript & DOM Magic

Master the logic of the web! Explore variables, loops, and functions, then use the DOM and Event Listeners to make web pages highly interactive.

Module 02

Node.js & Backend Servers

Go behind the scenes. Run JavaScript on the server using Node.js, build RESTful APIs with Express, and test data requests with Postman.

Module 03

MongoDB & Full-Stack Integration

Connect the database! Learn NoSQL data modeling with MongoDB and Mongoose, and perform live CRUD operations to power your website.

Skills Gained

Hard Code. Soft Skills.

Every graduate leaves with production-ready back-end skills, full-stack system thinking, and the soft skills to ship and present a real database-driven app with confidence.

Technical Skills

Advanced JavaScript

Functions, arrays, objects, and event-driven programming for real interactive experiences.

Node.js & Express

Run JavaScript on the server and route HTTP requests with the Express framework.

RESTful APIs

Design endpoints, handle JSON, and build the contract between front-end and back-end.

MongoDB & Mongoose

Model NoSQL data and perform live CRUD operations against a cloud database.

Soft Skills

Full-Stack Architecture

Think across layers, UI, server, and database, to plan robust systems end-to-end.

Data Modeling

Design clean schemas and relationships that match how the product actually behaves.

API Testing

Use Postman and structured tests to verify endpoints before wiring up the UI.

Systematic Debugging

Isolate bugs across the stack and reason through logs, requests, and database state.

The Capstone

The Final Project.

Showcasing advanced software engineering with a real-world database.

ISchool Gaming Store Backend

Students take their front-end gaming store to the next level by engineering a complete backend. Using Node.js and MongoDB, they build a live database to manage user data, product listings, and dynamic inventory.

ISchool Gaming Store Backend
API Testing & Integration

API Testing & Integration

Students use professional tools like Postman to test their RESTful APIs, ensuring their database communicates seamlessly with the front-end interface, creating a true full-stack experience.