Exercise List 2019 – In Order of Complexity

Hummus Recipe ( HTML semantics )
HTML Paths Exercise ( HTML Paths based on GuitarMania site, also FTP if at Langara )
Fela Kuti Markup & Styling Exercise ( Markup, Images, CSS: b0rders, fonts, gradients, bg-image, text-transform, letter-spacing. Has screenshot. Can be simple or complex. Early in the course, this would take a couple classes.
Sublime Formatting Exercise: 140 item list based menu
Gibson Gallery Website 2018: ( images, paths, REM units, websafe font stacks explained, inheritance, header / nav / article / div, css basics such as list based menu (basic, comments, ems, fluid images, descendent selectors, text decoration, one use of classes, margin auto, max-width )
Gibson Gallery Website 2018 pt 2: (phrasing elements, inline vs block vs inline-block in detail, box model nuances, display: block for links). Includes ending part with things for class to figure out: first para italicized and bigger, full hover on entire header element)
Jim Jarmusch Resume Exercise

NOT BUILT but could be: Gibson Gallery Website could have a pt 3: to turn the menu into a FLEX parent.
GuitarMania 2018: Flexbox, Google Font Hosting, Mobile First, Media Queries
GuitarMania pt 2: Design Revisions (linked example uses floats, but that’s OK)
Flexbox Froggy
Flex in a Nutshell: explains flex with a single menu project (flex wrap, direction, basis, grow, shrink)
Light Photo Blog: Google font hosting, intricate menu Flexbox, four layout sizes, positioning, translucent bg color, responsive alternate striping via complex nth-of-type
Basic Responsive Flexbox Form (Beefheart)

JazzIcons Grid Layout (single page mockup)
CSS Grid Garden
Grid Layouts in Abstract
Windows 8 Desktop Layout (grid machinations, icomoon, typekit)
DTN Magazine from Scratch (has about 10 pages of tasks in the exercise: flex, grid, svg generation out of Illustrator, positioning, translucence, google fonts, etc)
Berlin Nine Layout Exercise (On Own)
Berlin Nine Layout Exercise (Step by step) Grid & Flex
Fender Vs Gibson Grid Exercise 2018
Fender Vs Gibson History & Gallery 2018 Layout Exercise
Gibson Fender History 2018 Annotated Solution
Gibson Vs Fender History Grid 2019 PUBL 2019 Midterm
Great Cities of Europe (Advanced grid)
I Heart Cities HTML/CSS Mockup 2019
Metonymy (variation on Book Club)
Gibson Vs Fender HTML Layout 2019 3769842

Emmet Lab Exercise (major descendent selectors, etc)
Emmet Lab Exercise 2 ( hardcore based on DTN )

Borp Mag 2018 Responsive Layout (‘midterm’)
Borp Mag Grid Flex & More (this has the clipping path )
Advanced Selectors Exercise (fela)
The Walrus Layout Reconstruction Exercise ( Flex, Grid ?, JS for transitions)
The Eatery
Basic Transitions Exercise
Redunzl
CSS Blend Modes: Grid Area, Sophisticated Forms, CSS Variables, @Supports, Mondo JS.
This doesn’t have much of an exercise yet, but there is an annotated Solutions file.
JS Photo Viewer

GULP.JS & SASS

WORDPRESS EXERCISES

Lab Exercise 1: WP Basics Exercise
Homework: AMP Installation
Lab Exercise 2: Obsessive Compulsive Guitarist
Lab Exercise 3: Fishy Fishy
Lab Exercise: Major Plugins Exercise (needs revision)
Moving a WP Site (sort of an exercise)
WP Configuration Exercise (Ryan Theme JazzIcons)
WP Configuration Theme (Miyazaki Theme, MetaSlider)
WP Configuration Exercise 1066 (Allegoric, Minimal Grid Theme, masonry, Relevanssi)
WP Configuration Exercise 1922 (Blogberg, JetPack)
Themes Review Exercise (could use more specific questions)
WP Theme and Gallery Plugin Setup Exercise (Berlin – European Guitarist)
WP Bare Bones Theming Exercise pt 1
WP Bare Bones Theming Exercise pt2: Common Template Tags, get_template_part
WP Bare Bones Theming Exercise pt 3: wp template hierarchy
Underscores Menu Exercise 2018
Underscores Menu Exercise: Enqueueing
JazzIcons 2018 Theme Building Exercise (could be revised a bit. Let them enqueue the video script. )
Custom Loops: WP-Query Exercise (Pedalmania)
Imaginary Film Festival (about 8 pages, has Custom Fields, do_shortcode, js, etc)
I Heart Cities (has CPTs, too)
I Heart Cities 2019 Test
Metonymic Theme Building (hardcore CSS, also post-navigation: has a number of explanation pages, but a few, such as all the CSS parts need to be written or revised)
Face Place Theme Building (grid, wp_query, single, archive, home, alternating posts via css, sass, or php)
PretendMag
Eatery Restaurant Menu (custom fields, custom post types, serious grid and flex)
Mais Henri (WordPress JS: masonry, random bg colors limited by Lightness values, multiple sliding menu treatments, complex typography)
Could make Pretendco (4835 midterm) into Theme
Random Numbers Year Archive Exercise Problem Exercise

POSSIBLE NEW WP TO MAKE

realfavicongenerator.net exercise (for WP via action hook plugin)
bg color and blend more wp plugin

IMAGE / MEDIA RELATED

Batch Processing With XnConvert
Responsible Responsive Designs: WebP Images
Responsible Responsive Design: srcset
Responsible Responsive Design: srcset with sizes
Embedding Video / Responsive Video / SrcSet
Background Images & Gradients (Clearleft: Silverback)
Background Image – Parallax
Background Images – CSS Gradients & Gradient Patterns (working on it)
multiple gradients, repeats, angles, repeating gradients, multiple bg sizes
HSL Palette Matching Exercise (in progress)

ACCESSIBILITY

Color Contrast

TO REVISE

Re:Action Mag Icon Fonts
St Paul’s BG Images (Parallax 2018: link to zip is above)
Upside Down Mag
Positioning ?
Pedal Mania
Making own Grid
TubeWorld
Beefheart
SASS exercise

TO MAKE

Image processing exercise…
realfavicongenerator.net exercise (for WP via action hook)
keycode tester app
typing speed tester
Atom Theme Build (introduction to LESS sitepoint page in evernote)
SASS exercise of some sort

NEW JS in PROCESS

Slide Down Photo Gallery Dom Traversal
color contrast tester app
title case exercise
css blend mode
table processing (sort)
KEYCODE indicator
Array of Objects band output to page and sorter.
drum machine?