Unit 4: Interface and Communication (HTML + CSS)

Framing Concept: Code is interpretation—computational ideas need an audience.

Unit Overview

Students now pivot from behavior and logic to communication and presentation. This unit introduces web-based interface design through HTML and CSS. The goal is not just to build webpages, but to understand how design shapes interpretation. Students structure, style, and present prior computational work in a way that speaks clearly to others.

This unit emphasizes that programs and data are not only for machines—they are artifacts that require clarity, framing, and human-centered design.

Essential Questions

  • How is code presented to others?
  • What does it mean to design for clarity, access, and meaning?
  • How do structure and style influence interpretation?
  • How do we build a coherent presentation of computational work?

Core Learning Goals

  • Write semantic HTML to structure content
  • Use CSS for visual style and layout
  • Apply accessibility and design principles (contrast, hierarchy, readability)
  • Present previous work (data, logic, systems) through an interpretive frame
  • Understand the web as an environment for sharing computation

Core Activities

  • Build a Personal Portfolio Page: Introduce themselves and their work
  • Code Presentation of a Simulation or Data Project: Repackage prior unit work into a user-facing site
  • Web Design Gallery Walk: Peer review with design criteria and accessibility checks
  • Deconstruct + Rebuild: Analyze and refactor an existing public webpage

Stretch + Extensions

  • Minimal JavaScript: Add interactivity (optional)
  • Style Frameworks: Use grid/flexbox or lightweight libraries (e.g., Pico.css)
  • Narrative Sites: Build a “guided tour” through a topic or data story
  • HTML Embeds: Use iframe or hosted charts to enhance storytelling

Technical Notes

  • Hosted locally or with GitHub Pages (if infrastructure permits)
  • Projects remain static (no full-stack required)
  • Emphasis on authoring and curation, not just aesthetics

Assessment and Reflection

  • Presentation rubric: structure, clarity, visual hierarchy
  • Design self-critique: What choices did I make and why?
  • Peer feedback loop: Does the page communicate the intent of the code/data?
  • Journal: What did you learn about presenting your own ideas?

End-of-Unit Statement

By the end of Unit 5, students understand that code is not just written—it’s shared. They’ve made their thinking visible to others, and they’ve seen how decisions about structure and presentation shape what others take away. They’re now ready to move into “code in the wild”—APIs, real-world systems, and inquiry through code.