DESN 368: Web Design + Code 1Fall 2026

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

All courses

Course / Resources

Carrying source fluency into DESN 378

This is a proposed bridge for planning the next course, not a new official prerequisite or a rebuild of 378. The 368 portfolio should make the starting capabilities visible.

What you should carry forward

By the end of 368, you should independently be able to:

  • Read and write a small semantic HTML document; explain its headings, navigation, links, and images.
  • Trace a visible design choice to its CSS selector and declaration, and distinguish content structure from presentation.
  • Build a readable layout with Flexbox or Grid and adjust it to narrower widths.
  • Use browser evidence to repair a broken selector, path, or layout assumption.
  • Commit and publish a static page, then verify its actual public URL.
  • Credit outside sources, explain any AI help, and demonstrate a source change without AI.

The final portfolio presentation samples these capabilities. It does not claim mastery of JavaScript, API integration, application architecture, or independent accessibility auditing.

A suggested 378 opening activity: same HTML, different design

Allow one 150-minute studio. Give everyone the same compact HTML page containing a header, navigation, main section, three articles, and a footer. Use the worked example as the reference structure, remove its style block into a shared starter stylesheet, and preserve the element order and meaningful content.

  1. Read, 20 minutes: label the page's sections and predict which elements will stack by default. Find its anchor destinations before editing.
  2. Style, 40 minutes: write a distinct type, spacing, and color treatment using only CSS. Keep the HTML unchanged except for an explicitly needed accessibility repair.
  3. Break, 10 minutes.
  4. Adapt, 35 minutes: make the layout readable at 375px and 1280px. Test keyboard focus and 200% zoom.
  5. Explain, 25 minutes: compare two classmates' designs. Each student points to a rule responsible for one visible difference and makes a fresh change independently.
  6. Recover, 20 minutes: identify a missing foundation and repair a smaller version of it before moving into new material.

No AI is needed for this diagnostic. Its purpose is to reactivate the shared HTML/CSS foundation and expose gaps early. It is not a contest to produce the most ornate page. New 378 material can then build on observed ability rather than assuming that every returning student remembers the same details.