Pinned Repositories
accessibility-fixer-upper
Fix and debug all the accessibility problems found in this website.
action-hero-card-with-actions
Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
arrrgenes-treasure-tours
Fix colour contrast & colour blindness related problems on a piratey tourism website.
background-images
Use multiple images as background to create more complex design solutions.
banner
Use a type system with a little bit of CSS to create a banner.
basic-accessibility
A quick look at some basic additions to a website to make it more accessible.
but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
button-systems
Explore how to use and change the default set of buttons provided by Modulifier.
Sk16ck's Repositories
Sk16ck/accessibility-fixer-upper
Fix and debug all the accessibility problems found in this website.
Sk16ck/action-hero-card-with-actions
Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
Sk16ck/animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
Sk16ck/arrrgenes-treasure-tours
Fix colour contrast & colour blindness related problems on a piratey tourism website.
Sk16ck/background-images
Use multiple images as background to create more complex design solutions.
Sk16ck/basic-accessibility
A quick look at some basic additions to a website to make it more accessible.
Sk16ck/but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
Sk16ck/designing-form-errors
Write up code for accessible, well designed form error messages with a little Javascript to help.
Sk16ck/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.
Sk16ck/ecommerce-pattern-library
A term-long project redesigning an ecommerce website focusing on making a pattern library.
Sk16ck/fancy-hover-boxes
An exercise using transitions to create hover boxes that fade from black & white to colour.
Sk16ck/fastness-fixer
Fix a bunch of performance problems and pass the performance budget.
Sk16ck/frozen-not-in-time
Create an animated introduction banner about ice cream.
Sk16ck/interactive-polaroids
Create interative polaroid images with CSS transitions and transforms.
Sk16ck/interactive-svg
Make an embedded SVG graphic with animations & transitions.
Sk16ck/javascript-less-carousel
Learn to implement a functional and reusable carousel without Javascript.
Sk16ck/kraken-good-accessibility
Fix some accessibility problems for VoiceOver & make sure the document prints properly.
Sk16ck/leafy-decorations
Use background images to create design elements on a masthead & banner.
Sk16ck/markbot
An application that automatically tests and marks student code assignments in Algonquin College Graphic Design’s Web Dev courses.
Sk16ck/me-oh-my-html
Write all the necessary HTML for the content in the All ’bout them semantics group activity.
Sk16ck/micro-interface-branding
A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.
Sk16ck/modularity-mindfulness
A simple review exercise exploring grids, type systems & modular CSS
Sk16ck/only-keyboards-allowed
Solve keyboard focus problems in this small accessibility-related exercise.
Sk16ck/responsive-banner
Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.
Sk16ck/responsive-recipe-book
Taking the recipe book from your previous Typography class and turn it into a responsive website.
Sk16ck/retina-gallery
Given a complete website, export the images into the right dimensions, compress & smush.
Sk16ck/retina-images
A quick look at exporting retina ready images using the compressive JPG technique.
Sk16ck/svg-smiley-face
Hand write SVG code to create an interactive smiley face.
Sk16ck/using-css-variables
Learn how to use CSS variables to make your CSS more easily understood and more maintainable.
Sk16ck/using-svg-icons
Use Illustrator & Spritebot to generate some SVG icons and use them in a website.