Topic 08 · Web foundations + design studio

Web Basics and App DesignTurn one bounded idea into a reviewable interface plan.

First use and explain a small web app. Then design one user task, three visible states, and a testable build contract. Study Sprint supplies a complete starting example; an earlier project idea is optional.

Before class

Open the Topic 8 learning path for the proposed class sequence. Use Study Sprint or a fictional one-screen idea; Topic 7 completion is not required. Original design reference: 2 × 80 minutes. The learning path selects stops from both; do not add the full reference sequence after the introduction. Open the App Design Packet or use paper. No AI account, coding setup, video access, private data, generated code, or public deployment is required.

By the end

Four outcomes you can demonstrate.

The focus is judgment students can show, not vocabulary they can merely repeat.

01 · SCOPE

Reduce an app idea to one user, one task, one screen, one primary action, and one visible result.

02 · MAP

Explain how HTML, CSS, JavaScript, and the browser contribute different responsibilities.

03 · DESIGN

Create a labeled wireframe with initial, missing-input, and result states plus a recovery action.

04 · CONTRACT

Write a first-build prompt with an exact transformation rule, authorized input, boundaries, success checks, and a Topic 9 interaction handoff.

Original design reference

Two full lessons to revisit.

These timings describe the original full sequence. Use the learning path above for the selected class route. Meeting 1 plans 68 taught minutes plus a 12-minute flex and access buffer; Meeting 2 plans 68 plus 12.

MEETING 1

Scope the User Task and Wireframe the States

Run one small web app through input, error, result, and recovery; connect its visible behavior to web responsibilities; then produce a labeled one-screen wireframe.

80 MIN

00:00–00:11
Working app tour + starting ideaRun Study Sprint through three visible states, then use the supplied example or choose a fictional one-screen idea.
00:11–00:27
Layer reveal + scope challengeConnect the same app to HTML, CSS, JavaScript, and browser responsibilities; then remove excess scope.
00:27–00:50
Scope + user taskReduce feature lists to one user task and decide whether AI is necessary.
00:50–01:08
Wireframe roundsDesign initial, missing-input, and result states; preserve a recovery action.
01:08–01:20
Checkpoint + flex/access bufferSave the scope sentence and wireframe labels; no code is required.

Start Meeting 1

MEETING 2

Write, Critique, and Defend the Build Contract

Turn the wireframe into a self-contained prompt contract, compare paper and optional live-prototype routes, interpret a small web anatomy example, and prepare the Topic 9 handoff.

80 MIN

00:00–00:14
Retrieval + prompt anatomyRecover the three states, then reveal the nine parts of a build contract.
00:14–00:30
Two prompt roundsRepair vague scope, missing-input behavior, and accessibility boundaries.
00:30–00:45
Probe routes + critiqueUse paper, course mockup, or optional live prototype under identical evidence criteria.
00:45–01:08
Web anatomy + video transfer + packetExplain responsibilities, connect the build-flow source, and assemble submission evidence.
01:08–01:20
Close + flex/access bufferConfirm formats, privacy, optional sources, and the Topic 9 handoff.

Start Meeting 2

Evidence

App Design Packet

Show that one small web-app idea has a specific user task, explicit web responsibilities, inspectable states, a bounded build contract, and a testable Topic 9 handoff.

What to submit

Submit one completed packet through the course LMS before Topic 9. Preferred filename: Lastname-Topic08-AppDesign.pdf; maximum four pages. LMS text, DOCX/export, scanned paper, or an instructor-approved accessible alternative is also accepted. The LMS supplies the exact deadline and policy details.
Include one user/task scope sentence, one removed feature, authorized input, visible result, boundary, HTML/CSS/JavaScript/browser responsibility map, initial/missing-input/result states, recovery action, labeled wireframe or equivalent text outline, AI-fit decision, and the exact input→rule→output mapping for any transparent rule.
Include a nine-part prompt contract, one critique finding and revision, three manual success checks with exact expected results, and one build-flow transfer note using either the optional Andrew Ng video or the course-created summary.
No generated code is required. Paper/text wireframes, the named Study Sprint state mockup, and an instructor-approved optional client-only layout/state probe can earn the same credit when they provide the same evidence; the probe does not replace or earn extra credit for Topic 9 implementation.
Assignment 4 Part 1 supplies Topic 9 with the user task, states, exact rule, boundaries, and expected test results. Instructor feedback uses complete/developing/incomplete evidence anchors; the official points or course weight, if any, come from the LMS rather than this packet.
Do not submit credentials, account/device screenshots, access proof, API keys, real student/peer/instructor records, private or unpublished material, full chat histories, or unnecessary identity evidence.

Open assignment

Boundary

Use a fictional or non-sensitive task and only authorized inputs. Design a client-only app that runs in the browser: no login, backend, model API, private records, external action, or public deployment. A model feature requires a stated user benefit and new verification plan; it is never required for this assignment.

Access: No coding setup, AI account, paid tool, video, upload, generated code, or public deployment is required. Editable local HTML, tagged printable PDF, paper/text wireframe, course summary, supplied source map, and approved accessible alternatives provide equal-credit routes.

AI disclosure: Name the route used (course materials, optional video, optional approved tool), the design decision affected, one accepted/rejected/revised suggestion, the success checks, the remaining limitation, and the final human decision.

References

Core sources and optional extensions.

The class deck contains the required explanation. These links support verification, deeper reading, or alternate access.

Topic 8 learning pathProposed class sequence, a complete Study Sprint starting idea, exact design-screen links, and the packet handoff.Additional lesson: Web Application FundamentalsA separate 44-minute introduction to app behavior, web responsibilities, local preview, and a small change with a test. The existing meetings and design assignment remain available.Editable App Design PacketPrimary local route with scope, web map, states, wireframe text alternative, prompt contract, critique, and Topic 9 handoff.Tagged Printable App Design Packet PDFFour-page offline and paper route with the same evidence fields.Course Study Sprint State MockupNamed three-state course example for students using the supplied-mockup critique route.Build Your Own App In Just 30 Minutes!Optional Andrew Ng / DeepLearning.AI build-flow lesson; the course-summary route is equivalent.MDN Getting StartedBeginner reference for environment, first website, standards, files, and browser vocabulary; do not attempt the entire path this week.web.dev Learn HTMLOptional structured HTML enrichment after the responsibility map.People + AI GuidebookOptional instructor/product-design reference for deciding whether and how an app should use AI.AI Workflow Skill MapOptional requirements-interview, questionnaire, and disposable-prototype routes; skills are not required.Optional grill-me notesUse only as a requirements interview; students own every design decision and keep private data out.

Next week

Topic 9: Adding Interactivity and Intelligence

Implement one input, one event, one transparent rule, one visible output, missing-input handling, and three manual tests—without requiring a backend or model API.

Open next week