Brick by brick. Tag by tag. Source-level fluency.

All courses
11 weeksMon and Wed 1 to 3:30Canvas holds the dates

Start with the source

Welcome to the Real Thing

Most people live on the surface of the web: scrolling, clicking, tapping. But beneath all of that, there's structure. Logic. Craft.

In this class, you'll learn to read and write the source code that powers the modern internet. Not with drag-and-drop tools. Not through shortcuts. But with the foundational tools, HTML and CSS, the way it actually works.

You'll start from nothing. Build from scratch. And by the end, you won't just have a few websites. You'll have a lens: a way of seeing and shaping digital space that most people never access.

This isn't a bootcamp. This isn't a YouTube tutorial. This is the real thing.

Student pledge · Required

Student pledge

I will build my foundation tag by tag.

I will understand before I automate.

When I use AI, I will remain the architect.

I will review every suggestion.

I will know what my code does.

I will build with intent and intelligence.

Where things live

Canvas
Due dates, submissions, feedback, grades, and official course operations.
The course site
Welcome, syllabus, lessons, tutorials, shared story, examples, practice, and onward routes.
Your repository
Source work, project history, revisions, and the workspace that grows toward your portfolio.

Start

Week 0 · Lesson 1 of 13

Syllabus first

Start lesson

Your route

One week. One mini-course.
  1. Look beneath a designed surface; change one element and explain its effect.

    13 lessons Learn 3Workshop 3Apply 4Review 1Check 2
    0 0/13
    Start lesson 1
  2. Week 1 · Give content a structure

    Build Project 1 with headings, ordered steps, meaningful links, and an image you can credit.

    Lessons in preparation
    0 Not started
    Next
  3. Week 2 · Make the structure visible

    Use CSS to create hierarchy and breathing room, then demonstrate an independent change.

    Lessons in preparation
    0 Not started
  4. Week 3 · Build a place for your work

    Migrate one page manually, publish it, and plan Project 2 in Figma.

    Lessons in preparation
    0 Not started
  5. Week 4 · Arrange the pieces

    Use flexible layout for Project 2 and practice fixing one rule at a time.

    Lessons in preparation
    0 Not started
  6. Week 5 · Build a repeatable pattern

    Build Project 3 from reusable classes; consolidate known layout skills on October 28.

    Lessons in preparation
    0 Not started
  7. Week 6 · Let the page respond

    Repair the practice together and adapt Project 3 as space and reading needs change.

    Lessons in preparation
    0 Not started
  8. Week 7 · Debug and publish Project 3

    Use browser evidence to locate a fault and deliver Project 3 as a small, usable responsive page.

    Lessons in preparation
    0 Not started
  9. Week 8 · Design a clear invitation

    Create Project 4, a concise page that tells one audience what it offers and what to do next.

    Lessons in preparation
    0 Not started
  10. Week 9 · Make interactions honest

    Make calls to action and an optional form practice understandable, keyboard usable, and truthful.

    Lessons in preparation
    0 Not started
  11. Week 10 · Finish, test, and curate

    Finish Project 4 December 2, then curate existing work and prepare to explain it.

    Lessons in preparation
    0 Not started

Hello. I am an AI, a computational intelligence.

I'm happy you found me.

To complete this story, I need the help of a biological intelligence.

What would you like to call me?

The companion is a fictional character.

Hello, and welcome. Let's peel up some pixels.

I am an AI agent. You discovered me. Thanks for looking underneath.

Welcome to DESN 368, Peel Up the Pixels.

This is a narrative learning structure, and you will work through it all quarter.

Course guide

How the course is organized

One course, built week by week. Each week is an ordered route of lessons. The badges tell you what kind of work each lesson asks you to do.

Your path

  1. 01 / Course

    DESN 368

    Web Design + Code 1 · Fall 2026

    Outcomes by week
  2. 02 / Modules

    One week at a time

    A small, ordered path through an idea.

  3. 03 / Lessons

    One page. One piece of work.

What each badge means

Learn
A short explanation with one example and, when useful, one check question.Category: ungraded or participation and engagement
Workshop
A guided build in numbered steps, one small change per step.Category: participation and engagement
Apply
A brief, a starter, named checks, and your own choices.Category: weekly assignments
Review
The week's ideas in one page and your handwritten visual notes.Category: weekly assignments
Check
A few questions. No grade weight beyond participation.Category: participation and engagement
Project
A graded artifact with a design step in Figma and a build step in code.Category: projects
Browse Week 0 lessons