General
For this class you'll need the following software:
- A text editor. I recommend Sublime text.
- A web browser. I'll use Chrome in class for it's dev tools.
We'll use Github Pages for free hosting.
How to set up your class site using Github Pages
Some other web resources
Are.na, a link sharing platform.
WhereBy, a site for free video conferencing.
Glitch, a platform that allows you to build sites the browser. Great for working collaboratively, sketching, or hosting full sites.
Week 1: HTML Basics & Internet history
Lecture slides
HTML Basics
Brief history of the web
Background reading
Getting to know HTML
Week 2: CSS Basics
Lecture slides
HTML Recap + CSS Basics
Background reading
Shay Howe, Getting to know CSS
CSS Basics video
CSS Basics write-up on Dropbox Paper
Week 3: CSS positioning
Lecture slides
CSS Positioning
Background reading
CSS: The Box Model
CSS Positioning
CSS Positioning write-up on Dropbox paper
Week 4: CSS animations & transitions
Background reading
Shay Howe, CSS: Animations and transitions.
CSS animations on LinkedIn Learning
Slides
CSS Animations & Transitions
Week 5: Responsive design
Background reading
Making layouts responsive - Google Slides by Rosa
Fluid and Responsive Layouts (Chapter 8) - Video on Linked In Learning
Week 6: JavaScript intro
Background reading
- JavaScript introduction on Dropbox Paper
- Video option: Learning JavaScript sections 1 and 2. Section 2: Variables and Data Types is most important.
- Intro to vanilla JavaScript by Eric Nylund
Lecture slides (not shown in class)
Media Queries recap + JavaScript intro
Week 7: JavaScript part II and HTML Inputs
Background reading
If you prefer video: Watch sections 5 - Iterating with Loops and 6 - Functions from Learning the JavaScript Language course on LinkedInLearning
If you prefer text: Read JavaScript Loops and Iteration and JavaScript Functions
Lecture Slides
JavaScript Part II and HTML Inputs
Demo code
Week 8: JavaScript Part III
Background reading
Randomness, Dates, and Timing
Lecture slides
Javascript Loops and iteration
Week 9: CMSes and APIs intro
Lecture slides
Dynamic websites, CMSes, and APIs
Week 10: Building a website on Are.na
Lecture Slides
Creating a website with Are.na
Week 11: Building a website with Airtable
Lecture slides
Creating a website with Airtable
Other resources
Demo code
Parsons video tutorials
Week 12: Using accelerometer and mobile sensors
Demo code
Live site on Glitch
Code on Glitch
Week 13: Hosting
Resources about how to publish a website outside of Github pages, with a custom domain name.
- Web hosting basics
- A guide to buying a domain name and setting up hosting in two ways: by pointing Github pages to a custom domain; or by purchasing a webhost elsewhere.
- Mozilla, Dealing with Files
HTML
Some general introductions:
Mozilla HTML Basics
W3 Schools, HTML Intro
Two written tutorials on the basics of HTML. Both W3Schools and Mozilla MDN Web Docs have extensive documentation on HTML, CSS and JavaScript.
Shay Howe, Getting to know HTML
Shay Howe's lessons on HTML and CSS are well written and balance big picture concepts with details.
Some helpful references:
List of all HTML elements from Mozilla
Coffee Cup, Absolute vs. Relative File paths
Emma Rae Bruml, HTML and CSS Reference
Dealing with Files from Mozilla
HTML Energy podcast
CSS
Some general introductions:
W3 Schools, CSS intro
Mozilla, Getting Started with CSS
Shay Howe, Getting to know CSS
Three solid and written introductions to CSS.
DevTips CSS YouTube tutorial
If you like videos, DevTips has a YouTube series on HTML (among other frontend topics).
Some helpful references:
HTML color names
Flexbox in 5 minutes
An interactive lesson on how to use Flexbox.
Boxify
A bookmarklet that visualizes the borders of HTML elements.
Learn CSS Layout
Centering with CSS
Tips for how to make your website responsive
JavaScript & JQuery
General Introductions
JavaScript
W3Schools JavaScript Introduction
Mozilla, a Re-introduction to JavaScript
Eloquent JavaScript
An e-book about JavaScript. Good if you like to read, and want to understand the big picture.
Javascript basics. A good introduction to vanilla JS from Eric Nylund.
JQuery
DevTips, jQuery in 15 minutes
JQuery fundamentals
Code Academy jQuery
Other resources
JavaScript Intro
Google-hosted jQuery library
Coding Train aka Daniel Shiffman's p5.js videos
Front end tutorials
Code Academy
Web courses that include jQuery, from beginner to advanced. Everything's broken up into short explanations with an exercise. Free trial available.
Free Code Camp
Similar to Code Academy, there are courses on a variety of topics. Each course consists of a seris of quick exercises.
Lynda.com, available via LinkedIn Learning through Yale.
medium.com/programming-for-design-practices
Programming for Design Practices, a series of tutorials in basics of web programming.
Readings
Part I: Working on and within the Internet
Olia Lialina, Vernacular Web, 2007
Frank Chimero, The Web’s Grain, 2015
Alexander Galloway, Jodi's Infrastructure, 2016
Part II: Friction vs. the Flow
Samuel R. Delaney and Octavia Butler in conversation, Value of Literacy, 1998
Paul Soulellis, Feed Time, 2019
American Artist, Black Gooey Universe, 2018
Legacy Russell and Momtaza Mehri, Glitching the Master’s House: Legacy Russell and Momtaza Mehri in Conversation, 2020
Part III: Public Domian
Ricardo Dominguez, Entr’actions: From Radical Transparency to Radical Translucency, 2015
Antonio García Martínez, Inside Cuba's DIY Internet Revolution, 2017
Marie Hoejlund, Sharing as Survival: Mindy Seu on the Cyberfeminism Index, 2020
Caroline Sinders, In Defense of Useful Art, 2020
Other things to read
Laurel Schwulst, My website is a shifting house next to a river of knowledge, 2018
J.R. Carpenter, A Handmade Web, 2015
Kevin Brewersdorf, Spirit Surfing
Olia Lialina, Rich User Experience, 2014
David Reinfurt, Interface, excerpt from A New Program for Graphic Design, 2019
Rebecca Solnit, The Annihilation of Time and Space
Jon Gacink, On observing Time, 2018
Jenny O’Dell, How to do nothing, 2017
Kate Crawford, Following you: Disciplines of listening in social media
Jill Lepore, The Cobweb, 2015
Paul Ford, What is Code, 2015
Other classes, workshops and opportunities
School for Poetic Computation
An artist-run school based in NYC. Offers classes on code, hardware and theory.
Fruitful School
An independent online course offered by Laurel Schwulst and John Provencher.
recurse.com
Educational retreat for programmers in NYC.
Southland Institute
Independent school of design and theory. Offers some public programming outside of paid courses.
Afrotectopia
An educational and mentoring organization at the intersection of art, design, technology, Black culture, and activism.