What you will be able to do
Seven course objectives under two program objectives, reached one week at a time. Each week lists what you will be able to do by its end, where you show it, and which objective it serves. Completion marks a place; nothing here measures ability.
The seven course objectives
PLO-1 · Visual Vocabulary
Achieve fluency in design's visual language.
- Apply Graphic Design Principles to Web Interfaces Incorporate layout, typography, and color principles into web design projects to build a visually coherent interface a reader can follow.
- Read the Web as a Made Thing Inspect how pages are built, and explain the choices and tools behind them, including AI assistance, on a platform that keeps changing.
- Design for Accessibility and Inclusivity Apply WCAG-based practices so pages work for people of diverse abilities: meaningful structure, text alternatives, keyboard access, visible focus, and layouts that reflow.
PLO-2 · Technical Skills
Demonstrate proficiency in relevant design skills.
- Write HTML and CSS by Hand Write clean, valid, semantic HTML and CSS, and explain and modify any code you submit.
- Implement Responsive Design Principles Apply responsive design techniques, including media queries, Flexbox, and CSS Grid, so layouts adapt across devices and screen sizes.
- Use Version Control and Browser Tools Use GitHub to keep one repository, commit changes, and publish a working site, and use browser developer tools to locate a fault, predict a change, and verify the result.
- Direct and Evaluate AI Assistance Use AI assistance only within the stage an assignment allows, evaluate its output against the source, the browser, and documentation, and explain and revise any code you keep.
By week
Week 0 · Peel up the pixels
Enter the course by locating your work and tracing one visible change to its source.
-
State what Canvas, the course site, and your repository each hold.
-
Predict what a Markdown mark will change. Make the change without AI. Compare the preview with your prediction.
-
Accept the Workspace assignment. Commit a first edit in your own private repository.
-
Answer the four introduction questions in Markdown in your repository. Submit the repository link.
In the Apply lesson
Compare the page before and after one source edit before naming what changed.
Student AI is off. Use the demonstration, documentation, and human help.
Week 1 · Give content a structure
Give Project 1 meaningful structure before styling it.
-
Structure Project 1 with meaningful headings, unordered ingredients, and ordered steps.
-
Explain the Project 1 list choice after moving one step outside its list in a copy.
-
Credit one permitted Project 1 image with purposeful alternative text and a descriptive source link.
-
Test the Project 1 source link, image, and latest saved HTML before delivery.
In the Apply lesson
Choose ordered steps and unordered ingredients because they carry different kinds of content.
Student AI is off. Use the demonstration, documentation, and human help.
Week 2 · Make the structure visible
Make Project 1 readable with CSS and connect each visible result to its source.
-
Explain how a selector and declaration create the Project 1 type hierarchy and spacing.
-
Predict a margin or padding change, make it without AI, and compare the visible result.
-
Publish a readable Project 1 whose headings, lists, image credit, and source link survive narrow widths.
-
Repair a supplied nesting or class-name fault without AI and verify the saved result.
In the Project lesson
Compare each spacing prediction with the browser result, even when the prediction felt certain.
Student AI is off. Use the demonstration, documentation, and human help.
Week 3 · Build a place for your work
Move Project 1 into one published repository and plan Project 2 with real content.
-
Trace a relative path from the Project 2 file to the Project 1 folder and test the destination.
-
Commit, push, and verify one manual Project 1 change on its published page.
-
Plan the real Project 2 content and reading order in one wide Figma frame.
-
Credit two Project 2 sources beside the planned content and one permitted image.
-
Ask AI to explain one Project 2 path or commit message, then check its answer against documentation.
In the Apply lesson
Separate saving, committing, pushing, and publishing while tracing one change to the live page.
AI may answer questions and explain. It may not write, complete, or rewrite your code.
Week 4 · Arrange the pieces
Turn the Project 2 plan into a flexible composition and repair one observed layout problem.
-
Arrange the Project 2 figure and introduction with Flexbox while preserving meaningful source order.
-
Predict how removing flex-wrap affects Project 2 at 375px, then restore the safer behavior.
-
Repair one observed Project 2 layout problem and verify it at narrow and wide widths.
-
Publish Project 2 with readable content, working sources, keyboard focus, and a route home.
In the Project lesson
Make a layout prediction, test it at 375px, and keep room for the browser to prove it wrong.
AI may answer questions and explain. It may not write, complete, or rewrite your code.
Week 5 · Build a repeatable pattern
Build a repeatable Project 3 pattern and test its columns through supported independent practice.
-
Build three Project 3 entries from one reusable semantic card pattern.
-
Predict and test gap and column changes at 375px and 1000px.
-
Explain which media-query rule applies at each tested width from browser evidence.
-
Name an exact blocker after two focused repair attempts on the practice starter.
In the Apply lesson
Use results at 375px and 1000px to support the column explanation instead of relying on appearance alone.
AI may answer questions and explain. It may not write, complete, or rewrite your code.
Week 6 · Let the page respond
Adapt Project 3 when its content becomes crowded and test its navigation across widths.
-
Choose a Project 3 breakpoint where its cards or navigation begin to crowd.
-
Build a semantic Project 3 section and repair one selector or path fault without AI.
-
Test the Project 3 anchors, focus, images, and text at narrow, intermediate, and wide widths.
-
Explain the active responsive rule immediately below and above the chosen breakpoint.
-
Accept one AI completion in Project 3, test it in the browser, and explain the line you kept.
In the Apply lesson
Watch where Project 3's content becomes crowded before choosing a breakpoint.
AI may complete a line or block you started. You explain every completion you keep.
Week 7 · Debug and publish Project 3
Use browser evidence to repair and publish Project 3 as a usable responsive page.
-
Locate one Project 3 fault using browser or source evidence before changing code.
-
Repair the fault, reproduce its original test, and check one neighboring condition.
-
Publish Project 3 as a responsive page with three accurate entries, reliable navigation, credits, and keyboard focus.
-
Verify Project 3's public page signed out at narrow, intermediate, and wide widths.
-
Set a written scope for AI code in Project 3, test the result, and revise one part yourself.
In the Project lesson
Show the original symptom, exact cause, repair, and passing test before calling Project 3 fixed.
AI may write code inside a scope you set and describe. You test it and explain it.
Week 8 · Design a clear invitation
Design one truthful Project 4 invitation and translate two frames into one document.
-
State the Project 4 audience, offering, and primary action in three concise sentences.
-
Plan the real Project 4 content at 375px and 1280px in Figma.
-
Build one semantic Project 4 structure with a flexible hero or feature group.
-
Explain how the same HTML changes arrangement between widths after one peer revision.
In the Apply lesson
Revise one confusing hierarchy or action after a peer tries to identify the offering and next step.
AI may write code inside a scope you set and describe. You test it and explain it.
Week 9 · Make interactions honest
Make Project 4's primary action truthful and keyboard usable.
-
Choose a link, button, or labeled form that matches the actual Project 4 behavior.
-
Reach and activate the primary Project 4 action by keyboard with visible focus.
-
State the expected and observed action result, including whether it sends any data.
-
Repair one misleading interaction or confirm its destination at a narrow width.
In the Apply lesson
Compare the action's promised result with what actually happens when you activate it.
AI may write code inside a scope you set and describe. You test it and explain it.
Week 10 · Finish, test, and curate
Finish Project 4, repair delivery faults, and curate the existing portfolio.
-
Repair the highest-impact Project 4 failure and verify the published result signed out.
-
Publish Project 4 with a truthful primary action, working links, readable layouts, and visible focus.
-
Curate four project entries with introductions, working return paths, credits, and a repository link.
-
Explain and modify one source decision independently during the portfolio presentation.
-
Commit the final portfolio version and test every project link while signed out.
In the Project lesson
Prioritize broken behavior and unreadable content, then revise the portfolio without starting a new direction.
AI may write code inside a scope you set and describe. You test it and explain it.
The seven course objectives are the syllabus's promise. The week outcomes are the route to them.