24 July 2026
See also: Syllabus · Class Schedule · Grading One 2hour session per week, Tuesdays 2:15–4:15pm. No class on 8 and 15 September, 6 October, 20 October (Dussehra), or 10 November (Diwali break). Dem...
04 August 2026
11 August 2026
18 August 2026
25 August 2026
01 September 2026
22 September 2026
29 September 2026
09 October 2026
13 October 2026
27 October 2026
03 November 2026
17 November 2026
Make your home page your own You have a live website, but it looks like the template. Before we learn CSS next week, decide what you actually want your own home page to look like — in the tool you...
Put your website on the real internet — free, today You already have a repo made from webstarter. Now we tell GitHub to serve it as a live website. This is called GitHub Pages — free hosting for s...
Make the real page match your Figma Last week you designed your home page in Figma. This week you build it. The design already exists, so the exercise is to translate your designs into implementat...
The web is standardised Most blogs look like blogs. Most news sites look like news sites. Most Ecommerce websites look like ecommerce websites. What if we kept the standard interactions aside and...
Make a small app powered by an API that returns anything you ask for api.gyanl.com is a madeup API. Whatever path you request, it invents a JSON response for it. api.gyanl.com/pokemon/pikachu retu...
Put live weather in the footer of your own site A small strip at the bottom of your page that knows what the sky is doing. Real data, from OpenMeteo, on the site you already shipped in Exercise S...
Save a colour theme in localStorage In Lecture 3 Divs, Dark Mode, Flexbox you defined your colours once in :root. Now you'll add a few themes to your site, let visitors switch between them, a...
Find out what a stranger could do to the class wall The class wall is open on purpose. The page only lets you paint squares in your own colour, but the page isn't what protects the data. The d...
Build something several people use at the same time Create your own Firebase project and build a small realtime feature with it, live on your github.io URL. By using Realtime Database, you will ge...
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 Exerc...
Make something where a model decides, not writes In Lecture 7 What are LLMs? you tried the emoji picker: you type a sentence, and Jev picks from a fixed list. Now make your own. Your page asks Je...
Start collecting ideas for your final project Your final project is a startup: a digital product that people sign in to and use, and a landing page that tells them about it and lets them sign up. ...
Add Sign in with Google to your multiplayer experience Take what you built in Exercise Realtime Web Experience and make people sign in with Google before they can change anything. Same Firebase p...
API Keys API keys are like passwords that let someone use your account with an API provider. Therefore, you have to store them carefully they should never even be sent into an AI chat! (Why?) In...
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 eac...
Put a model inside something you've built Add one AI feature to something you've already made this semester, through your own server on Vercel, as in Lecture 9 API Keys and Vercel. The ba...
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 ...
See also: Syllabus · Lectures · Grading Tuesdays, 2:15–4:15pm. Dates may shift if I'm travelling — I'll give as much notice as possible, and this page stays up to date. Wee...
See also: Lectures · Class Schedule · Grading · AI Policy Course Title: Tech 1 — Web & Mobile Ecosystem Fundamentals Course Objective: Gain a foundational understanding of the core techno...
See also: Syllabus · Lectures Tech 1 Grading Plan Assessment and Grading Breakdown # Component Weightage (%) 1 Attendance and Class Partici...
Similar courses at other universities, and places to go deeper. Vibe Coding (T564A) Harvard Graduate School of Education — Karen Brennan. Creative building with AI code generation. CS50's Un...
About this Website This website documents the material I am sharing with students as part of Tech 1: Web & Mobile Ecosystem Fundamentals, a course for design students. The course takes a ...
See also: Grading · Syllabus In many 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 skill ...
Keep feedback respectful and focused on the work, not the person. We’re all here to learn. If you liked something, call it out! If you don’t, try and explain why. You can use “I wonder…” or “Ha...
© 2025 • Contents under CC-BY-NC • Credits