DTC 477: Advanced Web Design & Development

Course Projects

Project Process and Documentation

All projects should demonstrate care in design, usability, and code organization. JavaScript, HTML, and CSS must be written and understood by you rather than copied wholesale from another source.

For every project, begin by working out the program in plain English. At the top of your JavaScript file, before the code, include a multi-line comment containing:

All media not created by you must be clearly labeled with source and copyright information. Sloppy code, untested output, or copied work that you cannot explain will count against the grade.

AI Use Policy

This course uses a phased approach to AI. The purpose is to develop enough programming fluency to evaluate, extend, and take responsibility for AI-generated code.

Weeks 1–7: No AI

The Clickable Page and Slider/Menu Site must be completed without AI assistance. You may use course materials and Stack Overflow. Write the logic steps yourself, translate them into JavaScript, test the code, and debug it.

Week 8: AI Introduced

Claude is introduced as a coding partner during the Electronic Literature project. AI may support planning, coding, and debugging, but you must read, question, adapt, and document its output.

Weeks 9–15: Documented AI Use

AI may be used for the Hangman work, Front-End Module Projects, and Final Project when permitted by the assignment. All meaningful AI assistance must be documented. Direct, unmodified AI output may not be submitted as your own work.

Clickable Page (5%)

No AI.

Build a single web page that responds to user interaction. Clicking elements should trigger visible changes such as content updates, CSS transitions, color or style changes, animated movement, or the appearance and disappearance of elements.

Plan the logic in plain English before writing code. Your grade will emphasize clear logic, working JavaScript, purposeful interaction, and a coherent visual design.

Minimum Requirements

Slider/Menu Site (5%)

No AI.

You will receive a provided HTML and CSS structure containing an image slider and animated navigation menu. Your task is to write the JavaScript that makes the interface work.

This is primarily a logic and problem-solving project. You should be able to explain how each event, function, variable, and state change contributes to the slider and menu behavior.

Minimum Requirements

Electronic Literature (10%)

Create a work of electronic literature that uses JavaScript to select, combine, transform, or rearrange letters, words, sentences, or passages. CSS should contribute meaningfully to the reading experience.

The piece should have a clear concept. It should feel like an intentional work of writing and design rather than only a technical demonstration. Possible influences include Oulipo, generative poetry, recombinant narrative, concrete poetry, and early net art.

Possible Approaches

Minimum Requirements

Hangman (5%)

Collaborative build with individual CSS tasks.

We will build Hangman together as a class, working through the game logic step by step. The shared build will demonstrate how arrays, functions, conditionals, loops, events, and DOM manipulation work together in a complete program.

Your individual contribution will consist of assigned CSS and interface tasks completed and submitted on your own. You should be able to read and explain the existing JavaScript and extend the presentation without breaking the game.

Individual Submission

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

Complete two independent projects after exploring the course’s front-end modules. Each project must combine at least two of the following:

The projects should demonstrate creative intent rather than merely showing that a feature works. You may use AI assistance, but you must document what it contributed and how you evaluated, changed, and extended the generated material.

Minimum Requirements for Each Project

Final Project (25%)

Design and build an original JavaScript-driven website over the final four weeks of the course. You will work in pairs or small groups and use GitHub for version control and collaboration.

The site should reflect a genuine creative, informational, or professional purpose. It must incorporate at least two JavaScript techniques from the course and demonstrate thoughtful visual and interaction design.

Development Schedule

Project Requirements

AI may be used actively for coding, debugging, and design ideation, but all use must be documented. Individual GitHub commit history will be considered when assessing each student’s contribution.