5D Tools - ARTF2224

In Class + Assignments Syllabus Resources Extra Credit
Instructor: Vendela Larsson
vendelalinnea@mac.com

01Helpful links

Sideways Dictionary of Web Terms

HTML Reference

CSS Reference

Mozilla Developer Network

Guide to Flexbox

How to use Sketch

How to use Figma

HTML Color Names

Article about font-face declarations

02Cool sites

Wave Animation (with code)

Singing Octopus Animation (with code)

Flickering Neon Sign Animation (with code)

Goertek variable typeface with sound

ESPN we the fans webgl

Culture at Basic Agency

Particle Code Pen

Random Ball --> Confetti

Horizontal Scroll Gallery Walk

Jonathan Patterson Portfolio Site

Other Studio

Bullying and Behavior Video Portfolio

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