snedarb Goto Github PK

action-hero-card-with-actions

Create a card interface with a toolbar of actions using <img srcset> and SVG icons.

animal-rescue-website

Re-design an animal rescue website by applying everything learned this term.

animated-clock

A lesson in using CSS keyframe animations to make a clock face with rotating hands.

background-images

Use multiple images as background to create more complex design solutions.

but-em-buttons

An exercise making a banner with a button that transitions to hover & active states.

designing-form-errors

Write up code for accessible, well designed form error messages with a little Javascript to help.

different-crops-same-image

Use the picture tag to create a responsive banner that adjusts the image to fit the screen while maintaining the design aesthetic better.

dsn1675-class-examples

dsn1675-exercise-0

dsn1675-exercise-1

dsn1675-planet-website

dsn1675-saas-website

ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.

fancy-hover-boxes

An exercise using transitions to create hover boxes that fade from black & white to colour.

fastness-fixer

Fix a bunch of performance problems and pass the performance budget.

fork-pass-tests

A demo repository to get practice forking and passing automated tests.

frozen-not-in-time

Create an animated introduction banner about ice cream.

image-tabs

Practice using CSS :target by making image tabs.

interactive-polaroids

Create interative polaroid images with CSS transitions and transforms.

interactive-svg

Make an embedded SVG graphic with animations & transitions.

javascript-less-carousel

Learn to implement a functional and reusable carousel without Javascript.

kraken-good-accessibility

Fix some accessibility problems for VoiceOver & make sure the document prints properly.

leafy-decorations

Use background images to create design elements on a masthead & banner.

me-oh-my-html

Write all the necessary HTML for the content in the All ’bout them semantics group activity.

micro-interface-branding

A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.

modularity-mindfulness

A simple review exercise exploring grids, type systems & modular CSS

music-control-bar

Practice using position, absolute, and relative by recreating a music control bar.

only-keyboards-allowed

Solve keyboard focus problems in this small accessibility-related exercise.

responsive-banner

Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.

responsive-infographic