ARTD 218 class portfolio

Juan Salamanca Ph.D.

Assignments and class exercises | Spring 2024

Assignment 1: _~ Hello World page
Assignment 2: _~ Links, figures and time-based media
Assignment 3: _~ Formatting a newspaper article
Assignment 4: _~ The Guardian Newspaper
Assignment 5: _~ Adding content to interactive flex grid
Assignment 6: _~ Responsive | Media queries
Assignment 6: _~ Flags | Click events
Assignment 7 JavaScript svg: _~ Animated page | anime.js

Exercise 1: _~ Atoms, Molecules, Organisms, Templates
Exercise 2: _~ Intro to CSS
Exercise 2.1: _~ Absolute, relative, sticky positions
Exercise 3: _~ Basic grid with flex
Exercise 4: _~ Interactive flex grid
Exercise 5: _~ CSS Grid and Hover Interactions
Exercise 6: _~ Duotone images, frozen glass, element rotation
Exercise 7: _~ Horizontal scrolling with flex
Exercise 8 Media query: _~ Device orientation Responsive card
Exercise 9: _~ Cropping images
Exercise 10: _~ Blending and opacity transition between images

Exercise 11 JavaScript: _~ Click and slider events
Exercise 12 JavaScript: _~ Selectors and indexes
Exercise 13 JavaScript: _~ Stop motion scrolling
Exercise 14 JavaScript: _~ Intro to anime.js
Exercise 15 JavaScript svg: _~ Animation SVG | anime.js
Exercise 16 JavaScript svg: _~ SVG path scrolling
Exercise 17 JavaScript svg: _~ Navigating a path | anime.js
Exercise 18 JavaScript: _~ Horizontal scrolling with mouse wheel

Snippet 1 new JavaScript: _~ Fade out window opening
Snippet 2 new JavaScript: _~ Drag and Drop
Snippet 3 new: _~ Flipping cards
Snippet 4 JavaScript svg: _~ Zoom on SVG drawings
Snippet 5 new JavaScript: _~ Responsive hamburger menu
Snippet 6 new JavaScript: _~ Detect mouse position on vertical page
Snippet 7 new JavaScript: _~ Insert SVGs into HTML using object tags