Resources

Course Texts

These readings will be assigned in various weeks throughout the semester. Additional optional readings may be added.

1. Program or Be Programmed: Ten Commands for a Digital Age – Douglas Rushkoff (2010)
2. Rich User Experience, UI, and Desktopization of War – Olia Lialina (2014)
3. Net Art Anthology – Rhizome (2017-2019)
4. Cult of Done Manifesto – Bre Pettis (2009)
5. 404 Page Not Found: The internet feeds on its own dying dreams – Kate Wagner
6. The Modern Trap of Turning Hobbies Into Hustles (2019) - Molly Conway
7. Daily sketches in 2017 (2018) - Zach Lieberman
8. International Art English (2011) - Alix Rule and David Levine
9. Towards More Sustainable Web Experiences (2022) - Chelsea Thompto
10. My website is a shifting house next to a river of knowledge. What could yours be? - Laurel Schwulst

Class Guides

Setting up GitHub and VS Code

Importing your site to Netlify

Using GitHub and VS Code on a Tablet or Chromebook

Free or Freemium Bootcamps

freeCodeCamp

codecademy

Stuff I use in class

CodePen (coding sandbox)

freeCodeCamp (free coding tutorials for all sorts of languages)

GitHub (tool for hosting our website code)

GitHub Desktop (desktop app that simplifies syncing your repos with GitHub)

Visual Studio Code (my code editor of choice, and what we use in class)

Netlify (a static web hosting platform like GitHub pages, but makes it easier to configure custom domain names)

Namecheap.com (a great site for purchasing domain names)

Notion

Neat Websites

labs.jensimmons.com

cameronsworld.net

Net Art Anthology

HTML Energy

CSS Zen Garden

knuteckstein.com

https://screenpond.cool/

General Resources

w3schools.com

developer.mozilla.org (mdn - Mozilla Developer Network)

css-tricks.com

css-tricks.com/guides

Kevin Powell - YouTube Channel

Web Dev Simplified - YouTube Channel

The a11y Project (accessibility on the web and beyond)

Every Layout

CSS Cheat Sheet

Specific Guides

Flexbox

An Interactive Guide to Flexbox - Josh W Comeau

A Complete Guide to Flexbox - CSS Tricks (CSS Flexbox Poster)

Grid

A Complete Guide to CSS Grid - CSS Tricks (CSS Grid Poster)

Layouts

How to wireframe a website - CharlieMarieTV

Ten modern layouts in one line of CSS - Una Kravits

Centering in CSS: A Complete Guide - CSS Tricks

Digging deeper into CSS

The Surprising Truth About Pixels and Accessibility - Josh W Comeau

A Nerd’s Guide to Color on the Web - CSS Tricks

Coding Workflow

Emmet Cheat Sheet

Intro to JavaScript

Intro to Programming and p5.js with The Coding Train

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

Tools & Collections

css-grid-generator.netlify.app (Autogenerates CSS Grid code for your custom layouts)

cssgradient.io (Generate CSS gradients)

cubic-bezier.com (Generate cubic-bezier curves for your animation or transition timing functions)

fontawesome.com (Free icons to use in your website)

fontjoy.com (Generates pairs of fonts that work well together (uses Google Fonts))

fonts.google.com (Import a variety of free fonts into your website)

gifcities.org (A collection of amazing old animated GIFs from the GeoCities era)

picsum.photos (Free stock photos you can easily integrate into your website)

poolors.com (color palettes most and least used by designers)

type-scale.com (Generate a series of font sizes that are sized proportionally based on mathematically precise ratios)

validator.w3.org (HTML and CSS validator for checking your code for bugs)

JavaScript and CSS Libraries and Plugins

Simple plugins

Lightbox2 (click on photos to enlarge them)

Slick (Create carousels/sliders)

Animate.css (pre-built CSS Animations)

Isotope.js (Layouts with built-in sorting and responsive shuffling)

Entire tools

A-Frame (3D experiences on the web, simplified!)

threejs.org (Create 3D experiences on the web. A really advanced library)

Motion One A new animation library (that is more lightweight than GSAP)

GreenSock (GSAP, Green Sock Animation Platform, an advanced but powerful library to create animations that trigger on certain user behaviors)

Anime.js (Another animation library)

jQuery (more of a framework, jQuery simplifies aspects of writing JavaScript)

p5.js (creative coding on the web, based on the Processing programming language)