Skip to content

Vanilla Development

What are We Trying to Accomplish?

The goal of the Vanilla Development lesson is to give students a strong, framework-free understanding of how the web works at its core. Before introducing abstractions like React, component libraries, or build tooling, students must understand how browsers interpret HTML, apply CSS, and execute JavaScript to create interactive user experiences.

By working directly with HTML, CSS, and JavaScript, students develop a mental model of how structure, presentation, and behavior are layered together in a web application. This lesson emphasizes clarity over convenience, helping students understand what modern frameworks automate and why those abstractions exist. Mastery at this level enables students to debug confidently, reason about performance, and transition into front-end frameworks with intention rather than reliance.

Lectures & Assignments

Lectures

Assignments

Terminal Learning Objectives (TLO's)

  • Create structured web pages using semantic HTML
  • Apply visual styling using external CSS stylesheets
  • Manipulate the browser’s Document Object Model using JavaScript
  • Selecting DOM elements
  • Updating content and styles dynamically by responding to user events
  • Handling form submissions without triggering default browser behavior.
  • Organize JavaScript logic externally and reason about execution order using attributes such as defer.

Enabling Learning Objectives (ELO's) conceptual

  • Understanding of how browsers transform HTML into a DOM tree
  • How JavaScript interacts with that tree to produce dynamic behavior.
  • Understand the separation of concerns between structure, presentation, and behavior
  • How these layers collaborate to form a complete front-end application.
  • Gain insight into event-driven programming, event propagation, and the role of the DOM