CDE 276 - Interactive Design - Fall 2023 | Professor Josh Miller

Inspiration sites

Galleries for Inspiration

Awwwards
site inspire
Webdesign-inspiration
The best designs
design shack
end the echo - inspiration from the real world
Smashing Magazine

Resources

The Designers List - web design resources
Makerbook - free design resources

Fonts

league of moveable type - open source fonts (ttf format)
lost type
da font
urban fonts
acid fonts

Font Embed Links

font squirrel - generate @font-face emebds
smashing mag future of css typography
breakdown of @font-face details

Scrollytelling - Interactive Storytelling

What is scrollytelling
Intro to storytelling - examples and libraries
Olympics Climbing
19 artists
Follower Factory
Science of Superspreading
Particles on Subway
Sleeping on Plane
One nation Tracked
Subway Map over time

Snowfall
He Aint Snowfalling - A List Apart being all critical
The Guardian - NSA
South China
The Boat
Glitter - frame by frame
Outside the lines
Vintage shirtless european guys
Wasting time at work
Spinning cat

Storytelling - Libraries

Scrolling experience with libraries
Scrollingtelling sticky
6 libraries
How to make a parallax site - Part 1
How to make a parallax site - Part 2
easy parallax
more parallax
Waypoints - easily track if you're at a certain location
Animate.css
Sticky kit
Nike Parallax
Skrollr
Scroll Magic

Video & Countdown

Full Screen Background Videos - needs video file (not embed)

countdown script

Resets / Grids

Eric Meyer Reset CSS

Initializr Includes html5 boilerplate

Hand-Coding HTML/CSS

CSS/XHTML Cheat Sheet (pdf)
CSS Cheat Sheet (pdf)

Responsive

Lots of great links in the Responsive Web Lecture
Responsive breakpoint tester bookmarklet
Responsive calculators (and other great responsive resources)
Ish viewport tester
Responsive Bookmarklet- easy way to get screen res
Assumptions About Mobile To Reconsider
Supersized backgrounds
UI Guidelines for mobile
Mobile typography
10 tips on responsive web
responsive background images- always a pain in the ass
dealing with responsive issues
Responsive Background images
What your PPI?
Retina.js
2016 CSS Tricks - Responsive Images - What we can do now...

Hamburger Menus

flexbox

Illustrated flexbox guide - sooo good
CSS Tricks Flexbox Guide - The best resource!
Flexbox playground
Flexbox froggy
Learn flexbox in 5 minutes
Simple flexbox site
Tutorial Video
Prefix Free - skip all the vendor prefixes!
Solved by flexbox - amazing flexbox code samples
equal height columns!

css3 & other great stuff

CSS 3 code breakdown (useful resource)
CSS3 Propery Generator
CSS Animation - Transition
CSS Animation - Keyframe
pseudo element stuff (:before :after, also not css3)
Nth child stuff (not actually css3)
CSS3 Magic- Holy Shit. Incredible.
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
Rounded Corner Generator
5 CSS3 Properites - note rotate property
Simple Gradient Generator
CSS3 Gradient Generator
Yet another gradient generator
Lettering.js
Typography Inspiration
Speech Bubbles
CSS3 Menu Animation
Simple Animated Scene
Shapes in CSS3
3d Text
parallax.js
Parallaxin'
jarallax
parallax background builder
superscrollorama (parallax for scrolling!)

misc

useful css snippets - some great stuff here
uncollapsing margins - div peculiarities
1024x768 bookmarlet - autoresizes brower
Stylizing Nav Bar w/ UL's

Project Submissions

Course Documents

HTML 5 Template related: Boilerplate & modernizr
Responsive Web Lecture