Syllabus

Catalog Description

This course will introduce modern and advanced web design technologies, building on the foundations from Graphic Design 2 and Web Design. Students face unique problems when designing for the web, and the course will provide an opportunity to analyze problems and implement appropriate solutions both conceptually and technically, through hands-on exercises and projects using HTML, CSS and JavaScript.

Prerequisite: GD 220 or Graduate Graphic Design student standing
Format: 3 credit studio

Learning Outcomes

As part of this course, you will:

• Evaluate websites based on inclusive design principles
• Use and justify semantic markup
• Identify strategies for writing and organizing your CSS
• Demonstrate an ability to work as part of a web development team
• Practice using version control in your web projects, including git commits, branching and pull requests

Format

This studio course will be offered online in a mostly asynchronous format.

👉🏻 This does not mean you’re learning on your own or that there will not be deadlines. We will be connecting via Slack and Zoom throughout the course. I will be providing feedback on all your work.

At the beginning of the course, we will jointly determine the best use of the scheduled course time (Thursdays, 4–10pm) and when and how often to hold any synchronous meetings.

Expectations

Course Communications

• Zoom will be used for meetings, including small groups, whole class and 1:1.
• Canvas will be used for posting grades for all assignments, including participation. That’s it. 😬
• A combination of GitHub and Google Drive will be used for submitting your assignments.
• All other class communication will occur through the class Slack.
• 📧 Before these other methods are set up, some communication will occur using your preferred email. Essentially, after week 1, I won’t rely on email unless all other forms of communication fail. 🙈

Assignments & Grading

Coursework will include:

• Short quizzes about the readings or knowledge and skills you’re building; these will be ungraded and count toward your course participation grade.
• Activities, including
  • writing in response to course readings;
  • small exercises to demonstrate and experiment with your growing HTML, CSS and JavaScript skills;
  • checkins to prove you’re on schedule with multi-week projects;
  • presentations of your process, designs and finished work;
  • peer review of your colleague’s design and code.
• 3 major multi-week projects that will showcase your designs and demonstrate your growing coding skills

Activities are graded on scale of 0-3 based on your effort:

• 0: Didn’t do the assignment.
• 1: Did the bare minimum.
• 2: Some effort.
• 3: Meets expectations.
  This is like a slightly more graduated pass-fail. The intention is that a couple of 1s won’t wreck your grade, but a semester of 1s will prevent you from getting an A.

The multi-week projects are graded on a traditional scale of 0-100 against a rubric (example here) which is shared at project kickoff. Detailed feedback will be provided for each project via GitHub review.

Projects account for the bulk of your semester grade – 60%. The remainder is between activities (25%) and participation (15%).

Deadlines are paramount; missing deadlines almost always results in you receiving feedback and evaluation later than your colleagues. Late activities can be submitted for feedback, but will be ungraded and receive a zero. Barring exceptional circumstances, late projects will receive a grade no higher than a C (79%).

Attendance & Participation

In lieu of a strict attendance policy, you are expected to participate in this course on a weekly basis. Participation will take the form of short, ungraded quizzes on the week’s content; being responsive in the class Slack; completing and submitting assignments on the expected schedule.

If you are unable to participate during a given week of the course, please notify me as early as possible via DM on Slack.

Anticipated Costs

Short answer: $0

This course requires access to a laptop or computer that you can install software on and software to create your designs (e.g., Adobe Illustrator, Sketch). As your instructor, I have zero preference about which software you use for creating your designs or which operating system you use (i.e., you do not need a Mac).

No additional services or purchases are necessary to complete this course. All other materials, including readings and tools, are freely available online.

Schedule

• WEEK 1: Intro to the course + understanding the Internet, your first git commit 🎉
• WEEKS 2-3: Review of CSS + HTML, discussion of best practices
• WEEK 4: CSS box model
• WEEK 5: Intro to Sass + responsive design
• WEEK 6: CSS animation
• WEEKS 7-8: UX evaluations
• WEEK 9: Mobile-first navigation
• WEEK 10: Accessibility
• WEEKS 11-12: Static site generators
• WEEK 13: No class 🦃
• WEEKS 14-15: Interaction + JavaScript
• WEEK 16: Presentation of final projects

More detail about the weekly schedule will be provided on the course web site.

Practical Advice

Be prepared to put in effort in this class and to struggle. Writing code is strange and can be unforgiving. Everyone writes code that either doesn’t work as anticipated or breaks. I cannot teach you to code without these experiences — but I can and will teach you strategies for learning from and resolving broken code.

Back up your work — regularly, often, and in more than one location (i.e., locally and in the cloud). We will discuss and implement strategies for backing up your code, but you should also consider where and how often you back up your design files, notes, etc.

Overcommunicating should be the norm this class, especially when it’s delivered online. Use the class Slack to connect with your colleagues and with me. Don’t be a stranger and please reach out when you’re confused or struggling. My job here is to teach you things; if you’re confused or struggling, give me the opportunity to get it right.