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-generated code. You may use AI or web searches to look up documentation, syntax, or examples, but the code and design decisions for this project must be your own.

In class, we will build a simple slider template together and work through the JavaScript logic step by step. Your assignment is not to simply restyle that template. Use what you learned from the class example to design your own slider-based webpage with your own content, visual approach, and interface.

Your slider might present photography, artwork, products, places, characters, a sequence, a visual story, portfolio work, or another collection of content. Think about how the slider itself can become part of the design. The more you make the interface visually distinctive and appropriate to your content, the better.

JavaScript Goals

Be sure to include your detailed logic steps, commented out at the beginning of your script:

  1. Initialize the current slide index.
  2. Select all slide elements.
  3. Set up event listeners for the previous and next buttons.
  4. Create a function to update the display based on the current index.
  5. Create a function to handle navigation (previous/next).
  6. Explain any CSS animations included.

Your JavaScript should demonstrate that you understand how a slider works rather than simply reproducing code from the class example. You should be able to explain how your variables, indexes, functions, conditions, and event listeners work together.

Design & Content

Create your own visual design rather than reproducing the appearance of the class demo. Consider the relationship between the content, layout, typography, navigation, controls, and movement.

You might experiment with:

Do not feel that your project has to look like a conventional image gallery. The class example gives you the underlying logic. Your job is to explore what else you can make with it.

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.