Pinned Repositories
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.
assignment2
Plants and what not
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.
Box-Model-
BOXES
but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
oryn's Repositories
oryn/action-hero-card-with-actions
Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
oryn/animal-rescue-website
Re-design an animal rescue website by applying everything learned this term.
oryn/animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
oryn/but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
oryn/coming-soon-page
Create a business card website to act as the coming soon page for your portfolio.
oryn/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.
oryn/ecommerce-pattern-library
A term-long project redesigning an ecommerce website focusing on making a pattern library.
oryn/fancy-hover-boxes
An exercise using transitions to create hover boxes that fade from black & white to colour.
oryn/fastness-fixer
Fix a bunch of performance problems and pass the performance budget.
oryn/frozen-not-in-time
Create an animated introduction banner about ice cream.
oryn/interactive-polaroids
Create interative polaroid images with CSS transitions and transforms.
oryn/interactive-svg
Make an embedded SVG graphic with animations & transitions.
oryn/jurassic-dashboard
Make an application dashboard interface for a dinosaur park.
oryn/kraken-good-accessibility
Fix some accessibility problems for VoiceOver & make sure the document prints properly.
oryn/leafy-decorations
Use background images to create design elements on a masthead & banner.
oryn/micro-interface-branding
A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.
oryn/modularity-mindfulness
A simple review exercise exploring grids, type systems & modular CSS
oryn/only-keyboards-allowed
Solve keyboard focus problems in this small accessibility-related exercise.
oryn/oryn.ca
The starter portfolio repository, basically empty, but with a few helper files.
oryn/portfolio-metadata
Look at writing the code necessary for describing portfolio piece using metadata and Schema.org.
oryn/responsive-banner
Practice using position, absolute, and relative in a responsive setting by recreating a responsive hero banner.
oryn/retina-gallery
Given a complete website, export the images into the right dimensions, compress & smush.
oryn/retina-images
A quick look at exporting retina ready images using the compressive JPG technique.
oryn/robot-parts-co
A lesson in using honest SEO techniques and microdata to optimize a website.
oryn/svg-icon-sets
Use SVG icons sets to create a small layout with different icons.
oryn/svg-line-drawing
An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.
oryn/svg-smiley-face
Hand write SVG code to create an interactive smiley face.
oryn/using-css-variables
Learn how to use CSS variables to make your CSS more easily understood and more maintainable.
oryn/using-svg-icons
Use Illustrator & Spritebot to generate some SVG icons and use them in a website.
oryn/video-background
Create a video background for the header of a website.