Rhode Island School of Design, Graphic Design Dept.
GRAPH-3188-(01-03) is a 1 credit elective studio
Fall 2021, Fridays, 1:10 – 6:10pm
Room 210, Design Center
Assoc. Professor John Caserta,
[email protected]

Course Overview

Designing for the web, like any medium, necessitates thinking in the tools and materials of that medium. Websites are just boxes within boxes within boxes that have different ways of fitting together. This workshop gets programming novices writing instructions in order to create and manipulate these boxes. In order to learn the core syntax of HTML and CSS, students will make simple websites that look like flags. These exercises are put to use to make a one-page mini-site of the student's choosing. Designed as an in-person four week workshop (meeting once per week), this curriculum can be done solo or with assistance from a neighborhood web programmer.

Course Objectives

  • Be comfortable creating and editing HTML and CSS
  • Be able to copy and paste (and edit) javascript syntax
  • 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 be able to adjust existing Cargo/Wordpress themes

Learning Outcomes

  • A series of coded assignments that focus on web layout and simple interaction
  • A one page microsite

Method of Instruction

This course will meet in person on four consecutive Fridays. Live lectures and demos will be supported by video demos taken last year when the course was fully remote.

Course Policies and Expectations

Students are expected to have Slack open, so that the instructor and fellow students can stay abreast of each other's work. Students who are unable to meet their 'in-class' commitment should be in touch with the instructor.

Readings / Resources

Articles and code help are 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

Inclusivity Statement

The intention is to serve students from all backgrounds and perspectives and that students’ learning needs will be addressed both in and out of class, and that the differences students bring to class will be viewed as a resource, strength and benefit. Our intention is to present materials and activities that respect and represent the full spectrum of gender identity, sexual orientations, disabilities, ages, socioeconomic statuses, ethnicities, races, cultures, perspectives, and other background characteristics. Your suggestions about how to improve the value
of diversity in this course are encouraged and
appreciated. Please contact the instructor if there
are concerns or ways to improve the effectiveness
of the course for you or others.
β†’ Ruben Pater has groundrules on being inclusive
β†’ GD Dept. Statement on Racism
β†’ GD Dept. SEI Action Items

During the course of your work throughout the type sequence you will experience a range of opportunities to be inspired and influenced by other designers and artists. While plagiarism with the goal of deception will not be tolerated, it is normal to explore the work of others in new and original ways, and to express that influence through a variety of techniques β€” including homage, parody, style, derivation, and appropriation. We expect all GD students and faculty to maintain an open perspective towards these concepts, and to use class as a safe testing ground for exploring influence, with the guidance of faculty.


Week 1
  • Getting set-up
  • HTML Basics
  • CSS Basics
Week 2
  • CSS Layout with flexbox
  • CSS Layout with grid
Week 3
  • CSS Media Queries
  • HTML5/CSS3 Images: SVG, srcset
  • CSS Interactivity & Animation
Week 4
  • Javascript & JQuery
  • Making it real: serving, favicons, analytics, meta-data, etc.
  • Putting it all together

Zero costs

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

Final assignment

Create a one page microsite that showcases your knowledge of web programming. Use images, non-default text and a layout that is appropriate given the content chosen. The content and audience are up to you. The microsite should be accessible online until the end of the grading period. The site is due one week after the session ends. and the URL should be placed in the Slack Channel #final-projects with a short description.


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 missing exercises or final project. Passing means you have a working knowledge of the concepts covered in the curriculum and have proven this by completing all the exercises and final assignment.



Create a Glitch account and remix the Web-Programming-2021 project. There you'll see sample code and demo files. Let us know where you are in Slack #session1 (or 2 or 3).

πŸ‘©πŸΎβ€πŸ’» Get on Glitch

πŸ‡ΉπŸ‡­ πŸ‡ΉπŸ‡­ πŸ‡ΉπŸ‡­

In your Glitch project, create a flags/thailand.html file and make the flag of Thailand with five block elements using content from the Thai Ministry of Culture website. It should have five semantically relevant block elements, structured like the flag of Thailand but without any visible color or borders. Use a minimum of three inline elements: a, em, strong.

πŸ‡ΉπŸ‡­ Basic Tags