This curriculum takes students from zero experience to building and deploying real, professional web applications. Each module builds on the last, and every student works through hands-on projects so they leave each session with something they built themselves. Sessions are fully customized whether your student is in middle school exploring coding for the first time or in college preparing for a software engineering internship.
Curriculum Overview
1Learn Responsive Web Design
Students learn how browsers render content and how to build professional, mobile-friendly websites from scratch. This is the foundation every developer needs — by the end, students can build real, styled web pages that look great on any device.
HTML Fundamentals
- Semantic HTML — writing markup that is meaningful and accessible
- Adding text, images, and videos to a webpage
- Inspecting pages with browser developer tools
- Project: Recipe Page
- Project: Travel Blog Page
CSS Fundamentals
- Styling elements with selectors, colors, fonts, and spacing
- The Box Model — margin, border, padding, and content
- Flexbox for flexible, responsive layouts
- Positioning — static, relative, absolute, fixed, sticky
- Responsive design with media queries
- Bootstrap — rapid UI with a CSS framework
- Project: Build a full page with Navbar, Header, Service Cards, Contact Form, and Footer
- Project: Recreate clearlaketutor.com from scratch
2GitHub Fundamentals
Every professional developer uses version control to save, organize, and collaborate on code. Students learn Git and GitHub so their projects are backed up and shareable.
Topics
- Creating and cloning repositories
- Staging, committing, and writing meaningful commit messages
- Branching and merging
- Pull requests and code review basics
- Pushing code to GitHub and sharing projects publicly
3Learn JavaScript Fundamentals
JavaScript is the programming language of the web. It makes pages interactive and powers everything from animations to real-time apps. Students go from zero programming experience to building functional apps that respond to user input.
Topics
- Variables — var, let, and const
- Data types — strings, numbers, booleans, null, undefined, objects, and arrays
- Functions — declarations, expressions, and arrow functions
- Arrays — creating, reading, and transforming data
- Objects — key-value pairs and methods
- Loops — for, while, and array iteration
- The Document Object Model (DOM) — reading and changing the page with JavaScript
- Web APIs — fetch, JSON, and working with live data
Projects
- Fahrenheit to Celsius Converter
- Simple Calculator
- Todo App
- Weather App — pulls live data from a public weather API
4Learn Relational Databases
Behind every app from Instagram to your school's grade portal is a database storing and organizing information. Students learn how to design, build, and query databases using SQL and PostgreSQL, one of the most widely-used databases in the industry.
Topics
- Data types — text, integers, booleans, dates, and more
- Entity Relationship Diagrams (ERDs) — modeling data before writing a single line of code
- SQL — SELECT, INSERT, UPDATE, DELETE, JOIN, and subqueries
- PostgreSQL — installing and running a real relational database
Projects
- Periodic Table Database — query element data with custom SQL
- Social Media Database — model users, posts, and relationships
5Learn to Build an API with Node.js and PostgreSQL
Students learn how web apps send and receive data by building their own backend server. This is the layer between the frontend a user sees and the database storing their information, a critical skill for any full-stack developer.
Topics
- CRUD Operations — Create, Read, Update, Delete
- REST API design — organizing endpoints clearly and consistently
- Connecting Node.js to a PostgreSQL database
- Authentication and authorization — protecting routes with tokens
- Testing APIs with Postman
Projects
- To-Do List API — a fully functional REST API with all CRUD operations
6Learn Next.js
Next.js is the React framework used by companies like Netflix, TikTok, Hulu, and Twitch to build fast, scalable web applications. This section starts with React fundamentals — JSX, components, props, and state — before moving into Next.js features like the App Router, Server Components, data fetching, built-in API routes, image optimization, and SEO metadata. Students finish by deploying a live, real-world website to Vercel.
Topics
- React fundamentals — JSX, components, props, and useState
- The Next.js App Router — file-based routing, layouts, and pages
- Server Components vs. Client Components — when and why to use each
- Data fetching — server-side rendering and static generation
- Built-in API routes
- Image optimization and metadata for SEO
- Deploying a live website to Vercel
Project
- Personal Portfolio Website — a multi-page site deployed live with a custom domain
7Build a Full-Stack App with Next.js and PostgreSQL
Students bring everything they have learned together to build a complete, production-ready web application with a real database, user accounts, and live deployment. This is the capstone of the program. Students connect a Next.js frontend to a PostgreSQL database using Prisma ORM, perform CRUD operations via Server Actions, add user authentication and protected routes with NextAuth.js, and deploy the entire app to Vercel with a cloud-hosted database. Students leave with a working full-stack app in their portfolio — something they can show colleges, employers, and clients.
Topics
- Connecting Next.js to PostgreSQL with Prisma ORM
- Environment variables and managing secrets securely
- Server Actions — performing database operations directly from React components
- User authentication and session management with NextAuth.js
- Protected routes — restricting pages to logged-in users
- Cloud database hosting with Neon or Supabase
- Full-stack deployment to Vercel
Project
- Full-Stack Task Management App — users can sign up, log in, and manage their personal tasks stored in a real database
What You'll Build
Every module ends with a real project students can put in their portfolio.
Recipe Page
Module 1 — HTML
Travel Blog Page
Module 1 — HTML
clearlaketutor.com Clone
Module 1 — CSS
Fahrenheit to Celsius Converter
Module 3 — JavaScript
Simple Calculator
Module 3 — JavaScript
Todo App
Module 3 — JavaScript
Weather App (Live API)
Module 3 — JavaScript
Periodic Table Database
Module 4 — Databases
Social Media Database
Module 4 — Databases
To-Do List API
Module 5 — Node.js
Personal Portfolio Website
Module 6 — Next.js
Full-Stack Task Management App
Module 7 — Full-Stack Capstone