5D Tools - ARTF2224

01Helpful links

HTML Reference

CSS Reference

Mozilla Developer Network

Guide to Flexbox

How to use Sketch

How to use Figma

02Cool sites

Week 13 Wave Animation (with code)

Week 13 Singing Octopus Animation (with code)

Week 13 Flickering Neon Sign Animation (with code)

Week 9 Goertek variable typeface with sound

Week 9 ESPN we the fans webgl

Week 9 Culture at Basic Agency

Week 6 Particle Code Pen

Week 3 Random Ball --> Confetti

Week 3 Horizontal Scroll Gallery Walk

Week 2 Jonathan Patterson Portfolio Site

Week 2 Other Studio

Week 2 Bullying and Behavior Video Portfolio

Week 2 Copywriter's Portfolio

04Sublime Stuff

Color Highlighter plugin for Sublime

HTML, CSS, Javascript Autoformatter

(I recommend installing via Sublime Package Manager)

My Sublime theme

The following code is my Sublime user settings. Copy and paste these into the "User settings" area of Sublime > Preferences > Settings:

{ "color_scheme": "Packages/Agila Theme/Agila Oceanic Next.tmTheme", "font_size": 13, "rulers": [ 80 ], "scroll_past_end": true, "tab_size": 2, "theme": "Agila.sublime-theme", "theme_agila_compact_sidebar": true, "theme_agila_compact_tab": true, "theme_agila_sidebar_font_xsmall": true, "theme_agila_sidebar_mini": true, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "word_wrap": true, "wrap_width": 80 }

Note: These will only work if you have the same theme that I use installed, since it is referenced in the settings. If you're having trouble getting this working, revert back before class and I'll stick around after class to help you work it out.

05More Advanced HTML/CSS

Want to learn more?

Another Flexbox game like Flexbox Froggy for more practice!

Gardening game for learning CSS Grid

Class site for information design 2016 for D3 tips (Use arrows to navigate presentations)

Codecademy for HTML and CSS