Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Web Programming Workshop

Week 1

Setting up

  • Create a Github account using your risdemail address. you can change that later.
  • Download Atom
  • We'll add you to RISD GD Github Team for the class
  • Download Github Desktop
  • Clone the repository to your desktop once you have access

The web in context

  • Browsers, Internet vs Web, URLs, Servers
  • Browsers read HTML. HTML describes content, is structure.
  • HTML, CSS, Javascript
  • NYTimes with no CSS

Week 1 Lessons

Week 2

Review assignment 1

Sync your work, pull up each other's drawings in browser. Let's airplay a few and see together.

Week 2 Lessons

Assignment 2: Grid drawing

Week 3

Review assignment 2

Week 3 Lessons

Assignment 3: Animated composition

Week 4

Review assignment 3

Week 4 Lessons


Assignment 4: Single serve website

Course Overview

This workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to the structural elements and properties of HTML and CSS through hands-on demos and take-home assignments. Tight technical HTML drawings in week one give way to looser, full-screen abstract compositions in week two. Weeks three and four make use of animation and interactivity using CSS3 and jQuery.

Course Objectives

  • Be comfortable creating and editing HTML and CSS
  • Be familiar with jQuery
  • To be comfortable finding solutions to what you don't know
  • To be comfortable solving code problems, and to be just as comfortable adjusting your design to adapt to the code
  • To better work with developers
  • To adjust existing themes, work with others

Learning Outcomes

  • A series of coded drawings and mini-projects that focus on web layout and interaction

Method of Instruction

This course is a hands-on workshop. Students will watch short demonstrations on a projector, then be asked to apply what was seen on their own. Homework will be given from week to week.

Course Policies and Expectations

Please show up to class on time with your homework already committed to the class repository. Although we are facing our machines during class, please avoid doing non-course computer activities except during breaks. If you finish an exercise early, help a classmate, extend the complexity of the exercise or take a break outside the classroom.

Readings / Resources

Articles and code help is being placed contextually within the Github course repository and on an open Arena channel.

Disability Statement

Rhode Island School of Design is committed to providing equal opportunity for all students. If you are a student with a disability that may require accommodations to complete the requirements of this class, I encourage you to discuss your learning needs with me during the first week of the term. Once an approval letter from the Office of Disability Support Services is submitted, accommodations will be provided as needed. For more information on how to receive accommodations, please contact Disability Support Services at 401 709-8460 or

Inclusivity Statement

No learning can truly occur without accepting each other’s differences — those that we inherit and those that we choose. This course, this Department and this College thrive on self-expression. Students and faculty should feel comfortable using art and design as a means to understand themselves and their work. It is everyone’s responsibility to create an atmosphere of inclusiveness.

Collaboration / Plagiarism / Appropriation

All work is built upon other work; whether explicitly or not. In this course, there will be opportunities to work with your classmates to build something that is shared. Particularly with many deadlines and when learning a new skill, other people’s work may offer a pathway forward. What you do with what you see is important and can be the difference between riffing, appropriating, copying and stealing. As a general rule of thumb, if you see something you are excited about (in class or outside), understand the context in which it was made. What was the design responding to, communicating, and to whom. A deeper understanding of other people’s work generally produces additional ideas, realizations and starts to “fork” the idea (thank you, Github). It’s rare that your design problem is exactly like someone else’s. It is rare that you share the same values, interests, skills, as someone else. Referencing another person’s work can make sense (logo parodies, etc) if that fits your concept. In a school environment it’s best to check in with your teacher to see how to best make your own work truly your own.

Zero costs

This workshop will not require you to pay for software or printing or server fees.


Course is graded pass fail. One unexcused absence fails the course. Check in with instructor if a planned absence is known. It is possible to make up a missed day in another session. Failing grades will be given for a notable amount of missing work or notable errors in the work provided. Passing means you have a working knowledge of the concepts covered in the curriculum.