ltw-webdev-3 Goto Github PK

repos: 33.0 gists: 0.0

Name: Learn the Web · Web Dev 3

Type: Organization

Bio: Web development part 3 for Learn the Web.

Location: Ottawa, Canada

Blog: https://learntheweb.courses/courses/web-dev-3/

Learn the Web · Web Dev 3's Projects

.github

Web Dev 3 educational resources & course from Learn the Web.

action-hero-card-with-actions

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

all-bout-them-semantics

A quick review exercise for HTML semantics before starting the term.

animal-rescue-website

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

animal-rescue-website-check-in

Show the teacher that you’ve started made significant progress coding your website.

animal-rescue-website-ux

Do the standard UX research and design process for your animal rescue website.

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.

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.

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.

frozen-not-in-time

Create an animated introduction banner about ice cream.

gotta-sketch-em-all

A in-class review exercise for grids, type systems and modular CSS.

interactive-polaroids

Create interative polaroid images with CSS transitions and transforms.

interactive-svg

Make an embedded SVG graphic with animations & transitions.

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.

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

only-keyboards-allowed

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

production-prepping-compression

Given a series of graphics, prepare their production files and export them properly for the web.

request-for-grade

Write up the reasons why your final project demonstrates everything learned this term.

retina-gallery

Given a complete website, export the images into the right dimensions, compress & smush.

retina-images

A quick look at exporting retina ready images using the compressive JPG technique.

svg-icon-sets

Use SVG icons sets to create a small layout with different icons.

svg-line-drawing

An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.

ltw-webdev-3 Goto Github PK

Learn the Web · Web Dev 3's Projects

Recommend Projects

Recommend Topics

Recommend Org