DTC 477: Advanced Web Design & Development
Spring 2025
Location: VMMC 111
Class Time: MW 4:20pm-5:35pm
Instructor: Will Luers
Phone: 503-975-3254
Email: wluers@wsu.edu
Office Hours: T 4pm-5pm, W 3pm-4pm in the Digs or on Zoom most days after 12pm.
Site: http://dtc-wsuv.org/wp/dtc477/
NOTE: All matters associated with this course are subject to change. Any changes will be communicated to students.
Course Rationale
DTC 477 Advanced Web Design & Development builds on the HTML/CSS skills developed in DTC 355 and provides a foundation in the main programming language for the web: JavaScript. By integrating various tools, design approaches and scripting languages (HTML5, CSS3 andJavascript), students create dynamic multimedia and interactive projects.
The CMDC aims to achieve three main goals: 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
Required Course Activities | University Learning Goals | University Learning Objectives | CMDC Goals & Objectives |
1. Interactive Website/E-lit Project (Javascript basics) | Critical and Creative Thinking (ULG1)
Communication (ULG4) |
Combine and synthesize existing ideas, images, or expertise in original ways.
Express concepts propositions, and beliefs in coherent, concise, and technically correct form. |
Goal 1: Demonstrate competency with computers for designing, distributing, retrieving, and preserving digital works in various mediums for humane and effective human-computer interactions
Goal 2: Synthesize media forms for multimedia contexts Goal 3: Employ the principles of visual form for sophisticated image manipulation |
2. Maps Project: Javascript API (introduction to programming and geolocation) | Critical and Creative Thinking (ULG1)
Communication (ULG4) Quantitative and Symbolic Reasoning (ULG2) |
Combine and synthesize existing ideas, images, or expertise in original ways.
Express concepts propositions, and beliefs in coherent, concise, and technically correct form. Understand and apply quantitative, symbolic and computational principles and methods in the solution of problems |
Goal 7 Recognize various forms of language processing and their implications for media authoring |
3. Canvas Project/Weather App: Javascript Animation (program an original interactive object) |
Critical and Creative Thinking (ULG1)
Communication (ULG4) Quantitative and Symbolic Reasoning (ULG2) |
Combine and synthesize existing ideas, images, or expertise in original ways.
Express concepts propositions, and beliefs in coherent, concise, and technically correct form. Understand and apply quantitative, symbolic and computational principles and methods in the solution of problems |
Goal 7 Recognize various forms of language processing and their implications for media authoring |
3. Final Project: (responsive HTML5 app with Javascript) | Critical and Creative Thinking (ULG1)
Information Literacy (ULG2) Communication (ULG4) Depth, Breadth, and Integration of Learning (ULG7) |
Combine and synthesize existing ideas, images, or expertise in original ways.
Determine the extent and type of information needed. Express concepts propositions, and beliefs in coherent, concise, and technically correct form.By applying the concepts of the general and specialized studies to personal, academic, service learning, professional, and/or community activities. |
Goal 7 Recognize various forms of language processing and their implications for media authoring
Goal 5 Know the basics of information architecture and knowledge management along with ways digital information can be structured for retrieval and archival purposes for different audiences |
The assignments and activities for this course reflect these objectives and serve to assist students with reaching program goals.
Course Structure
- Focus on the manual creation of web-based objects and other digital interfaces
- Readings, discussion of concepts, and application of theory
- Multiple assignments and projects
- Conceptual and creative work with ideas explored in this course
Online tools
- Slack – download and sign-up with your wsu account. Once you are invited to the class channel you will see it in the sidebar.
Required Course Texts and other resources
- Codecademy’s Learn JavaScript
- Sublime Text or a similar text-editor
- ChatGPT (ideally the Plus version at $20 per month)
Course Point-Earning Opportunities
- Javascript Codecademy: 10% x 2 = 20%
- Hangman Game: 5%
- Interactive Website: 5%
- E-Lit Project: 5%
- Map Project: 15%
- Canvas Project: 5%
- HTML5 Game Project: 15%
- Weather App: 5%
- P5js Project: 5%
- Final Project: 20%
Class Schedule
WEEKLY SUBJECTS | ASSIGNMENTS/PROJECTS |
---|---|
Week 1 January 6 & January 8 |
|
Week 2 January 15 & January 17 |
|
Week 3 January 22 |
Hangman Game (5%) – due January 22 |
Week 4 January 27 & January 29 |
Javascript Codecademy #1 (10%) -due January 29 |
Week 5 February 3 & February 5 |
Interactive Website (5%) – due February 5 |
Week 6 February 10 & February 12 |
|
Week 7 February 19 |
Javascript Codecademy #2 (10%) -due February 19 |
Week 8 February 24 & February 26 |
E-Lit Project (5%) – due February 26 |
Week 9 March 3 & March 5 |
|
Week 10 March 17 & March 19 |
Map Project (15%) – due March 19 |
Week 11 March 24 & March 26 |
Canvas Project (5%) – due March 26 |
Week 12 March 31 & April 2 |
|
Week 13 April 7 & April 9 |
HTML5 Game (15%) – due April 9 |
Week 14 April 14 & April 16 |
Weather App (5%) – due April16 P5js Project (5%) – due April 16 |
Week 15 April 21 & April 23 |
Final Project for Peer Review (5%) -due April 23 Final Project for Grading (15%) – due April 30) |
General Project Guidelines
- Projects should address usability, navigation, and design issues raised in this course and in DTC 355
- Projects should utilize attractive and effective design and layout
- JavaScript coding, HTML/CSS mark-up, site design and content must be your own work. You may use snippets of code and ChatGPT to build your project, but it may not be another’s code that you call your own.
- Content should be substantive and should be written/created by you with the assistance of AI tools,
- All images not created by yourself or in collaboration with an AI image generator must be clearly labeled with ownership and copyright information
- Projects should be checked thoroughly for errors. There is no excuse for sloppy writing or error filled code and such mistakes will count against you.
Assessment and Final Grades
Both attendance and participation will be monitored and deficiencies in either/both will result in lower final grades. Participation means being attentive in class, joining in discussions, engaging in informal critiques and completing all in-class and outside assignments.
You are allowed 3 class absences. Each class absence after that will result in a 3-point deduction from the final cumulative points. It is your responsibility to make sure I check your attendance if you arrive after the start of class. Frequent late arrivals, leaving early, or other forms of lack of attendance will also deduct points from the cumulative total. Absent students remain responsible for all course matters during their absence(s). Opportunities to make up missed work may not be available.
A A- |
93-100 90-92 |
B+ | 87-89 |
B | 83-86 |
B- | 80-82 |
C+ | 77-79 |
C | 73-76 |
C- | 70-72 |
D | – |
F | 0-69 |
Notice that the grade of “D” is not offered; reverts to “F.”
Submission of Late Work
All work must be submitted as and when required. If you are sick or have an emergency, you must make contact with me (best to use Slack) and arrange a time to submit work.
Use of AI in This Course
I do not prohibit the use of AI in this course since it is clear that it can assist with many tasks and expand your understanding and ability to do digital work, especially with coding. AI tools will become a standard practice in web design and development by the time you graduate.
That said, in order to use the AI tools properly, you need to understand JavaScript before your can manipulate scripts generated by AI. You will not be able to pass the class, by letting AI take over your own creative thinking.
Make an effort to read code, understand it and manipulate it tso that you can use these AI tools for fast iteration of your ideas. You will need to document how and what you use for your projects from AI by detailing your steps and workflow in the comments of your source code. I expect your use of AI to be a starting point for your output and that you will layer your own insights and creativity over it so that you can uniquely express yourselves.
The University Syllabus:
https://syllabus.wsu.edu/university-syllabus/