Syllabus

See also: LecturesLectures
See also: Syllabus · Grading

One 2-hour session per week. Dates may shift — treat the week numbers as canonical.

Lecture 1 - Hello, Internet
Week 1 — 3 August 2026 — Ship a personal w... · GradingGrading
See also: Syllabus · Lectures

Tech 1 Grading Plan

Assessment and Grading Breakdown




#
Component
Weightage (%)




1
Attendance and Class... · AI PolicyAI Policy
See also: Grading · Syllabus

In most courses, an AI policy is a list of things you can't do. This course is different: using AI to generate code is the expected way of working here. The sk...

Course Title: Tech 1 — Web & Mobile Ecosystem Fundamentals

Course Objective: Gain a foundational understanding of the core technologies, platforms, and concepts that underpin the modern web and mobile ecosystems, essential for product and design professionals.

Format: 13 lectures, 2 hours each, once a week.

How this course works

This is not a coding course. You will not be asked to memorise syntax or write programs from scratch. Instead:

  • You will build from week one. Using AI tools, you will generate, modify, and deploy real web applications — starting with a personal webpage in the very first session.
  • Fundamentals follow experience. Each week we dissect something you have already built: "you made this — now let's understand what HTML, hosting, and DNS actually did for you."
  • AI is the medium, not a module. You are expected to generate most of your code with AI tools (Claude, Cursor, v0, Lovable, etc.). The skill we are building is directing these tools well — which requires understanding the stack conceptually.
  • The course converges into a final project. The last third of the course is a build sprint where you take a product idea to a working, deployed application, presented at a Demo Day.

Key Areas Covered

S. No. Contents
1 Internet & Web Basics — How the internet works (HTTP/HTTPS, DNS, IP addresses); client-server architecture; web browsers and their role
2 Front-End Technologies — HTML (structure), CSS (styling), JavaScript (interactivity); responsive web design
3 Back-End Technologies — Server-side languages, databases (SQL, NoSQL), APIs (REST, GraphQL); data flow
4 AI in the Stack — LLM APIs, AI features in products, AI-assisted development
5 Mobile Ecosystems — iOS vs. Android; native vs. hybrid vs. web apps; app stores and distribution
6 Cloud Computing Basics — IaaS, PaaS, SaaS; hosting and deployment
7 Development Methodologies — the software development lifecycle (SDLC); how software teams work

Detailed Structure

Act I — Ship First (Weeks 1–3)

  • Lecture 1Lecture 1
    Hello, Internet

    The premise of this course, stated out loud: you can build and ship real things on the web today, and we will spend the rest of the semester understanding what you did.

    Hour 1 — W...     — Hello, Internet: ship a page on day one
  • Lecture 2Lecture 2
    Anatomy of a Web Page

    Last week you shipped a page. This week we open the hood.

    Hour 1 — The three languages

    View Source: what the AI actually wrote for you
    HTML — structure and meaning (hea...     — Anatomy of a Web Page: HTML, CSS, JavaScript
  • Lecture 3Lecture 3
    Talking to Servers

    Your page lives somewhere. What happens when someone types your URL?

    Hour 1 — The journey of a request

    Client-server architecture — the fundamental shape of the web
    What h...     — Talking to Servers: HTTP, DNS, IPs, client-server
  • Exercises: Exercise - Ship a PageExercise - Ship a Page
    Build and deploy a personal webpage — today, in class

    You will use an AI tool to generate a personal webpage and put it on the real internet with a URL you can send to anyone.

    Steps


    Pick a to...     · Exercise - Web Page AnatomyExercise - Web Page Anatomy
    Dissect a complex web page

    Pick a rich, real-world web page (a news homepage, an e-commerce product page, a streaming service) and analyze it: identify its HTML structure, CSS styling, and JavaScr...     · Exercise - Trace a RequestExercise - Trace a Request
    Watch your website load, piece by piece

    Use the browser's Network tab to observe everything that happens between typing your URL and seeing your page.

    Steps


    Open your own site (from Exercis...

Act II — The Full Stack (Weeks 4–9)

  • Lecture 4Lecture 4
    Front-End in Practice

    From "a page that works" to "an interface that's designed."

    Hour 1 — The front-end as a design material

    Responsive design: one design, every screen (viewports, breakpoint...     — Front-End in Practice: responsive design, design systems, Figma to code
  • Lecture 5Lecture 5
    Back-Ends and Databases

    Everything before this week disappeared when you refreshed. Let's fix that.

    Hour 1 — Where data lives

    What a back-end is: code that runs on someone else's computer, not...     — Back-Ends and Databases: where data lives
  • Lecture 6Lecture 6
    APIs

    How software talks to software — and why every product you design is really a bundle of APIs.

    Hour 1 — The contract

    What an API is: a menu of things you can ask another program to do
    RE...     — APIs: how software talks to software
  • Lecture 7Lecture 7
    AI in the Stack

    You've been using AI to build all semester. Now: AI as an ingredient inside the products you design.

    Hour 1 — Models as materials

    LLMs demystified: prediction machines, not dat...     — AI in the Stack: models, prompts, and AI features
  • Lecture 8Lecture 8
    Mobile Ecosystems

    Why the app on your phone is a different animal from the site in your browser.

    Hour 1 — The two kingdoms

    iOS vs Android: platforms, philosophies, and what it means for design...     — Mobile Ecosystems: iOS, Android, and the in-betweens
  • Lecture 9Lecture 9
    Cloud Computing

    "The cloud" is someone else's computer — but which one, and what are you paying for?

    Hour 1 — Layers of someone else's computer

    IaaS, PaaS, SaaS explained with one running exam...     — Cloud Computing: someone else's computer
  • Exercises: Exercise - Figma to CodeExercise - Figma to Code
    Get an AI to build your design — then judge it

    Take a screen you have designed in Figma (from any past project) and use an AI tool to turn it into a working web page. Document faithfully where the...     · Exercise - Add a DatabaseExercise - Add a Database
    Make something that remembers

    Everything you've built so far forgets on refresh. Build a small app where data persists — a guestbook, a class poll, an RSVP page, a tiny leaderboard.

    Steps


    Pic...     · Exercise - API MashupExercise - API Mashup
    Build a page powered by someone else's data

    Use a public API to make a small, well-designed page that displays live data — and understand the request/response loop underneath it.

    Ideas


    Weathe...     · Exercise - Add an AI FeatureExercise - Add an AI Feature
    Put a model inside your product

    Add one genuinely useful AI feature to something you've already built this semester. The bar: it must be better because it's AI, not AI for its own sake.

    Ideas


    ...     · Exercise - Mobile Ecosystem ComparisonExercise - Mobile Ecosystem Comparison
    iOS vs Android, from a product team's chair

    Compare and contrast the iOS and Android ecosystems for app development and distribution, highlighting the differences that would actually change a prod...

Act III — Build Something Real (Weeks 10–13)

  • Lecture 10Lecture 10
    How Software Gets Built

    The people part: how ideas become products, and how teams avoid chaos.

    Hour 1 — The lifecycle

    The SDLC: idea → requirements → design → build → test → ship → maintain
    ...     — How Software Gets Built: SDLC, agile, version control + final project kickoff
  • Lecture 11Lecture 11
    Studio 1 — Build Sprint

    Full working session for Project - Final Project.

    Format

    First 15 min — standup: each team states what's built, what's next, what's blocked
    Working time — build w...     — Studio 1: build sprint and crits
  • Lecture 12Lecture 12
    Studio 2 — Ship-Ready

    Second working session for Project - Final Project — from "works on my machine" to "works for everyone."

    Hour 1 — What "done" means (short lecture)

    Performance basics...     — Studio 2: making it ship-ready (performance, security, privacy basics)
  • Lecture 13Lecture 13
    Demo Day

    Final presentations for Project - Final Project.

    Format

    Each team: 7 minutes — live demo of the deployed product (no slides for the demo itself), followed by the story: problem, p...     — Demo Day
  • Exercise: Exercise - SDLC Stage MappingExercise - SDLC Stage Mapping
    Walk a feature through the lifecycle

    Map a hypothetical product feature through the stages of a chosen software development lifecycle (e.g., Agile Scrum), and locate the designer's role at each st...     · Project: Project - Final ProjectProject - Final Project
    See also: Grading · Lecture 10

    Brief

    In teams of up to 3, take a product idea from concept to a working, deployed web application that a stranger could use — built primarily by directing ...