ART 258
Interface Programming II
Site #1: Simple Base
Site #2: Client Site
- S. Neil Fujita Bio v1 View Code
- S. Neil Fujita Bio v2 / View Code
- S. Neil Fujita Bio Final / View Code
Tests & Exercises
- Individual Tests
- Big Home Nav - test 01
- Big Home Nav - test 02
- Big Home Nav - test 03
- Big Home Nav - test 04
- Rotated Header - test 01
- Rotated Header - test 02
- Grid Line names - test 01
- Grid Line names - test 02
- Grid Line names - test 03
- Vertical Timeline Test - 01
- Vertical Timeline Test - 02
- Vertical Timeline Test - 03
- Fixed BG Test - 01
- Fixed BG Test - 02
- Fixed BG Test - 03
- Fixed BG Test - 04
- Fixed BG Test - 05
- Inspirations
- Helvetica
- Bold Typography
- Clean transition experience
- CSS scroll-driven scroll-snapping animations
- Beautiful scroll experience
- No JS (!!)
- Responsive slider timeline with Swiper
- timeline
- This code may be a bit dated, but I like the cadence.
- Animated SVG Travel Timeline
- Building a Vertical Timeline With CSS and a Touch of JavaScript
- Using ul & li
- In-Class Tests
- Type Block Test - 01 (in-class sprint)
- JavaScript Exercise 05 - Simple Toggle Nav w/ vanilla JS
- JavaScript Exercise 06 - Full Screen Overlay Nav w/ vanilla JS
- Carousel Test 01 - Swiper
- Simple CSS animation test - 01: Transition
- Simple CSS animation test - 02: @Keyframes
- Simple CSS animation test - 03: Header and Hero Section
- On scroll Animation Test Using Intersection Observer on Sections
- On scroll Animation Test Using Intersection Observer on indiv elements
- Parallax Scroll Demo (in-class)