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, jcaserta@risd.edu
- 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
- https://github.com/risd-gd/wp18
- Instructor: Assoc Prof John Caserta, jcaserta@risd.edu; Office hours by appointment
- TAs: Miro Kroner, mkroner@risd.edu
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
Schedule
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
- Part 1: Basic HTML
- Part 2: CSS Basics
- Part 3: Basic Layout
- Part 4: Positioning
- Assignment 1: Draw five small objects using HTML and CSS.
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
Demos
- Webtype and Type overview
- Sketch, wireframming
- CMSes (Jekyll) and “real” websites
Assignment 4: Single serve website
Supplies needed
- HTML editor (atom, textwrangler)
- Github
- Download GitHub Mac client and clone class repo
- Safari or Chrome browser
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 disabilitysupportservices@risd.edu.
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.
Grading
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.
