Syllabus

DTC 477: Advanced Web Design & Development

Fall 2026

• Location: VMMC 111
• Class Time: MW 4:20pm–5:35pm
• Instructor: Will Luers
• Email: wluers@wsu.edu
• Office Hours: MWTh 3:00pm–4:00pm in the Digs (VMMC basement, room 26)

Course Rationale

DTC 477 Advanced Web Design & Development builds on the HTML/CSS skills developed in DTC 355 and provides a foundation in JavaScript — the primary programming language of the web. By working across HTML5, CSS3, and JavaScript, students create dynamic, interactive, and multimedia web projects.

This is a small class (10–12 students) and is taught as a studio. The pace is deliberate: the first half of the semester focuses on building real programming fluency through handcoding, logic thinking, and problem-solving without shortcuts. AI tools are introduced gradually in the second half, once students have developed enough understanding to direct, evaluate, and extend AI-generated code rather than simply accept it.

The CMDC aims to: 1) provide students with knowledge and skills for developing their own knowledge-making, 2) facilitate exploration, and 3) prepare students for the field and the world beyond.

Learning Goals

The assignments and activities for this course reflect these objectives and serve to assist students with reaching program goals.

How This Course Is Structured

The course moves through four phases:

• Phase 1 — Logic and Language (Weeks 1–4): No AI. Students learn to write logic steps in plain English using JavaScript terminology, then translate those steps into working code. Each week opens with concepts and examples; the second class is a solo coding challenge where the only resource allowed is Stack Overflow. The instructor walks through the solution afterward. This builds the reading, reasoning, and debugging skills that make AI assistance actually useful later.
• Phase 2 — Handcoded Projects (Weeks 5–9): Three projects completed without AI assistance, followed by a collaborative Hangman build. Students work from structured task lists and are expected to manage their own CSS, logic, and debugging.
• Phase 3 — Front-End Modules with AI (Weeks 10–11): AI is introduced alongside the front-end module topics — Audio/Video, Canvas, P5.js, APIs, and Canvas Games. Students explore guided examples of each, then complete two module projects. Claude enters here as a coding partner: students learn to prompt effectively, evaluate AI output critically, and document how AI contributed to their work.
• Phase 4 — Collaboration, Design, and AI Coding (Weeks 12–15): The final four weeks focus on collaborative development using GitHub and the design and coding of an original web project. AI is used actively as a development tool, with documentation required. Students work in pairs or small groups, manage version control, and present finished sites in Week 15.

Weekly Class Format

• Monday: New concept introduced with examples and guided walkthrough. Discussion of design and logic approaches.
• Wednesday (Phases 1–2): Solo coding challenge based on Monday's concept. Students work independently — Stack Overflow only, no AI. Instructor walks through the solution at the end of class.
• Wednesday (Phases 3–4): Studio work on projects. Peer review, instructor feedback, iteration.

Online Tools

• Slack — download and sign up with your WSU account. This is the primary channel for questions, code sharing, and updates.

Required Resources

• Codecademy's Learn JavaScript — free track used for Codecademy assignments
• Visual Studio Code or a similar plain-text editor (VS Code also works)
• Claude & ChatGPT — introduced in Week 9; free plans are sufficient; a shared class project will be provided
• Stack Overflow — your main reference during Phase 1 & 2 coding challenges

Assignments and Grading

• JavaScript Codecademy #1 — 10%
• JavaScript Codecademy #2 — 10%
• Clickable Page (DOM manipulation, animation, content changes — no AI) — 5%
• Slider/Menu Site (JavaScript added to a provided HTML/CSS structure — no AI) — 5%
• Electronic Literature (generative text and CSS changes — no AI) — 10%
• Hangman (collaborative build; CSS tasks completed individually in class) — 5%
• Front-End Module Projects (two projects, each using at least two modules: Audio/Video, Canvas, P5.js, API, Canvas Games) — 20% (10% each)
• Final Project (original design and JavaScript-driven site, developed over four weeks) — 25%
• Participation (in-class engagement, coding challenges, peer review) — 10%

Schedule & Project Due Dates

Project Descriptions

Clickable Page (5%) — No AI

Build a single web page that responds to user interaction: clicking elements triggers visible changes — content updates, CSS transitions, animated movement. All JavaScript must be written by you. You will plan the logic in plain English before writing a single line of code.

Slider/Menu Site (5%) — No AI

You will receive a provided HTML/CSS structure with an image slider and animated navigation menu. Your job is to write all the JavaScript that makes them work — no frameworks, no libraries, no AI. This is a logic and problem-solving exercise as much as a coding one.

Electronic Literature (10%)

Create a work of electronic literature that uses JavaScript to randomly select and combine letters, words, or sentences, and to apply CSS changes that alter the visual experience of the text. The work should have a concept — it should feel like a creative decision, not just a technical demonstration. Inspired by Oulipo, generative poetry, and early net art.

Hangman (5%) — Collaborative + individual CSS tasks

We build Hangman together as a class, working through the game logic step by step. Your individual contribution is a set of CSS tasks assigned during class — you complete and submit these on your own, demonstrating that you can read, understand, and extend existing JavaScript without being the one who wrote it.

Front-End Module Projects (10% + 10%)

After exploring Audio/Video, Canvas, P5.js, APIs, and Canvas Games through guided examples, you will complete two independent projects — each using at least two of these modules in combination. AI assistance is permitted with full documentation. The work should demonstrate creative intent, not just functional demonstration.

Final Project (25%)

Design and build an original JavaScript-driven website over the final four weeks of the course, working in pairs or small groups using GitHub for version control and collaboration. The site should reflect genuine creative or professional intent, incorporate at least two JavaScript techniques from the course, and demonstrate thoughtful design and interaction design. AI may be used actively as a coding and ideation partner, with full documentation of how it was used and what you built on top of it. Individual GitHub commit history will be used to assess each student's contribution. Graded across four weeks: concept and design (Week 12), development sprint I (Week 13), development sprint II (Week 14), and final presentation (Week 15).

General Project Guidelines

• All projects should demonstrate care in design, usability, and code organization
• JavaScript, HTML, and CSS must be written and understood by you — not copied wholesale from another source
• For Phase 1 & 2 projects, AI assistance is not permitted. These are the foundational exercises that make everything else possible.
• For Phase 3 & 4 projects, AI assistance is permitted with full documentation: what tool, what prompt, what output, and what you changed or built on top of it
• All media not created by you must be clearly labeled with source and copyright information
• Sloppy code, untested output, or copy-pasted work without understanding will count against your grade

Assessment and Final Grades

Both attendance and participation will be monitored. Participation means being present and engaged: working during studio time, contributing to peer review, completing in-class challenges, and asking questions. Passive attendance does not count.

You are allowed 3 class absences. Each absence after that results in a 3-point deduction from your final grade. Late arrivals and early departures also count against participation. Absent students remain responsible for all work and announcements from that class.

Submission of Late Work

All work must be submitted as and when required. If you are sick or have an emergency, contact me on Slack as soon as possible and we will arrange a submission time. Unannounced late work may not be accepted.

AI Use Policy

This course takes a phased approach to AI — not because AI is bad, but because AI assistance is only genuinely useful when you understand the code well enough to evaluate, extend, and take responsibility for what it produces.

Phases 1 & 2 (Weeks 1–9): No AI. These weeks exist to build real programming instincts. You will write logic steps in plain English, translate them into JavaScript, test your code, find errors, and fix them. The Wednesday coding challenges are completed with Stack Overflow only — no AI, no other students' code. The instructor walks through the solution afterward so you can see where your thinking was right, where it went wrong, and why.

Phase 3 (Weeks 10–11): AI introduced alongside front-end modules. As you explore Audio/Video, Canvas, P5.js, APIs, and Canvas Games, Claude becomes available as a coding partner. We will work together in class to learn how to prompt effectively, how to read and question AI-generated code, and how to adapt it rather than copy it. A shared class Claude project will be provided. All AI use must be documented: what tool, what prompt, what output, and what you changed.

Phase 4 (Weeks 12–15): AI as active development tool. For the final project, AI may be used freely for coding, debugging, and design ideation — with full documentation. You are also working collaboratively with GitHub, which means your individual contributions need to be traceable. Submitting AI-generated code as your own work without documentation is academic dishonesty.

The goal is not to avoid AI or depend on it — it is to develop the judgment to use it well.

The University Syllabus

https://syllabus.wsu.edu/university-syllabus/