Pinned Repositories
animal-rescue-website
Re-design an animal rescue website by applying everything learned this term.
curriculum
The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 3 course.
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.
jurassic-dashboard
Make an application dashboard interface for a dinosaur park.
kraken-good-accessibility
Fix some accessibility problems for VoiceOver & make sure the document prints properly.
me-oh-my-html
Write all the necessary HTML for the content in the All ’bout them semantics group activity.
only-keyboards-allowed
Solve keyboard focus problems in this small accessibility-related exercise.
retina-gallery
Given a complete website, export the images into the right dimensions, compress & smush.
svg-line-drawing
An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.
svg-smiley-face
Hand write SVG code to create an interactive smiley face.
Learn the Web · Web Dev 3's Repositories
ltw-webdev-3/animal-rescue-website
Re-design an animal rescue website by applying everything learned this term.
ltw-webdev-3/me-oh-my-html
Write all the necessary HTML for the content in the All ’bout them semantics group activity.
ltw-webdev-3/retina-gallery
Given a complete website, export the images into the right dimensions, compress & smush.
ltw-webdev-3/svg-smiley-face
Hand write SVG code to create an interactive smiley face.
ltw-webdev-3/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.
ltw-webdev-3/jurassic-dashboard
Make an application dashboard interface for a dinosaur park.
ltw-webdev-3/kraken-good-accessibility
Fix some accessibility problems for VoiceOver & make sure the document prints properly.
ltw-webdev-3/svg-line-drawing
An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.
ltw-webdev-3/curriculum
The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 3 course.
ltw-webdev-3/.github
Web Dev 3 educational resources & course from Learn the Web.
ltw-webdev-3/action-hero-card-with-actions
Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
ltw-webdev-3/all-bout-them-semantics
A quick review exercise for HTML semantics before starting the term.
ltw-webdev-3/animal-rescue-website-ux
Do the standard UX research and design process for your animal rescue website.
ltw-webdev-3/animated-clock
A lesson in using CSS keyframe animations to make a clock face with rotating hands.
ltw-webdev-3/background-images
Use multiple images as background to create more complex design solutions.
ltw-webdev-3/but-em-buttons
An exercise making a banner with a button that transitions to hover & active states.
ltw-webdev-3/fancy-hover-boxes
An exercise using transitions to create hover boxes that fade from black & white to colour.
ltw-webdev-3/fastness-fixer
Fix a bunch of performance problems and pass the performance budget.
ltw-webdev-3/frozen-not-in-time
Create an animated introduction banner about ice cream.
ltw-webdev-3/gotta-sketch-em-all
A in-class review exercise for grids, type systems and modular CSS.
ltw-webdev-3/interactive-polaroids
Create interative polaroid images with CSS transitions and transforms.
ltw-webdev-3/interactive-svg
Make an embedded SVG graphic with animations & transitions.
ltw-webdev-3/leafy-decorations
Use background images to create design elements on a masthead & banner.
ltw-webdev-3/micro-interface-branding
A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.
ltw-webdev-3/modularity-mindfulness
A simple review exercise exploring grids, type systems & modular CSS
ltw-webdev-3/production-prepping-compression
Given a series of graphics, prepare their production files and export them properly for the web.
ltw-webdev-3/retina-images
A quick look at exporting retina ready images using the compressive JPG technique.
ltw-webdev-3/svg-icon-sets
Use SVG icons sets to create a small layout with different icons.
ltw-webdev-3/this-site-aint-no-sloth
Create a simple responsive website that conforms to our performance budget.
ltw-webdev-3/using-svg-icons
Use Illustrator & Spritebot to generate some SVG icons and use them in a website.