Resources


Lectures

HTML Basics P1
Internet Aesthetics
HTML Basics P2
CSS Basics P1
CSS Basics P2
net.art
Platforms
Reponsive Web Design / CSS Media Queries
Diagrams
CSS Animation
Art and Design Showcase
Intro to JQuery
Privacy and Surveillance
Intro to JQuery part 2

Exercises

Setting Up Your Class Site
Creating a Taxonomy
Creating a Chrome Extension Using JQuery

Files

Presentation Template
Media Queries Template
Flowchart Symbols
Hover/Show Steps
Flag Files
JQuery: Keypress
JQuery: Mouse Coordinates
JQuery: Random Colors
JQuery: Rotate on Scroll
JQuery: Add Elements Over Time
JQuery: Value from an Array
JQuery: Increment Value from an Array
JQuery: Random Value from an Array
JQuery UI: Draggable Elements
HTML 5 Video

Basics

For code editing, we will use Sublime Text or Atom.
For website hosting, we will use Github Pages.
For code learning, we will use Codecademy.

Overview

Shay Howe's Guide to HTML & CSS
Learn Layout
Free Code Camp

CSS

FlexBox
FlexBox Example
Bootstrap
The Shapes of CSS
CSS Animations
Clippy CSS
animate.css
Nav Bars

JS

Getting Started: Building a Chrome Extension
Javascript Arrays

jsFiddles

Click a button and toggle
Mouseenter, mouseleave and Hover
Scroll and alert
Accordion slideToggle
Turn on and off lights with button
jQuery Examples
Change background color
Scroll to anchor smoothly
Draggable div
Add and remove class
Check window width on click
Add and Offset Images

Documentation

Recording your screen
Project Submission Form

Troubleshooting

If you find yourself stuck while writing code, remember to be patient. If you haven't already, try breaking your problem down into smaller, more manageable parts. Search Google or Stack Overflow for how to solve those parts, one at a time. Remember that most of the time you spend writing code will be fixing bugs. (And sometimes bugs will allow you to discover something new you haven't ever seen before!)

However, if you reach a point in which you absolutely need help and must ask another human, please considerately phrase your code question in the form of a jsFiddle. (To do this, type your code in the appropriate boxes and press "Run". Once it looks right, press "Save". Copy and paste the URL at the top.) In an email, explain everything you know so far about the problem and paste the link to the jsFiddle.

More

MIT Code Lectures
Eloquent Javascript
Getting Git Right
Unix for Mac OS X Users
Copy Paste Character
Devdocs

At CCA

CCA's Learning Resource Center

Developed with

Design for the Web with Federico Pérez Villoro, RISD
Interactive 1 with Joanna Cheung, CCA
Interactive 1 with Max Batt, CCA