John Caserta
Four session workshop that uses drawing to teach HTML and CSS. This page contains 991 words and is filed under teaching

Web Programming 2018

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 particulars

  • Assoc. Professor John Caserta,
  • Rhode Island School of Design, Graphic Design Dept.
  • GRAPH-3188-(01-03) is a 1 credit elective studio
  • Spring 2018, Fridays, 1:10 – 6:10pm in DC 404
  • Instructor: Assoc Prof John Caserta,; Office hours by appointment
  • TAs: Miro Kroner,

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


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

Supplies needed

Method of Instruction

This course is a hands-on workshop. Students will watch short demonstrations on a projector, then be asked to practice the concepts and code introduced. Homework will be given each week and due the following week.

Students are to sign up for one 4-week intensive session. Students are welcome to continue working after their session is over and/or visit in office hours or other sessions (as space allows). Grades will be give at the end of the semester.

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. Please add to these resources as it may help others in the course.

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.

Index of everything


Interim Dean of Architecture + Design and formerly Department Head of the Graphic Design Department at Rhode Island School of Design. Founded The Design Office, a workspace for designers, in 2007, and ran it until its closing in 2021. Hear an interview that covers my teaching and design career. Read an overview of my work from The Noun Project. This site is updated regularly and outputs to a book with Bindery. Get in touch via email.