Skip to content

@ltw-webdev-3 Learn the Web · Web Dev 3

Change the repository type filter

All

    Repositories list

    33 repositories

    • curriculum

      Public
      The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 3 course.
      HTML
      •0•0•0•0•Updated Mar 12, 2024Mar 12, 2024

    • .github

      Public
      Web Dev 3 educational resources & course from Learn the Web.
      0•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • but-em-buttons

      Public
      An exercise making a banner with a button that transitions to hover & active states.
      148•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • frozen-not-in-time

      Public
      Create an animated introduction banner about ice cream.
      150•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • interactive-polaroids

      Public
      Create interative polaroid images with CSS transitions and transforms.
      CSS
      •276•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • interactive-svg

      Public
      Make an embedded SVG graphic with animations & transitions.
      HTML
      •267•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • jurassic-dashboard

      Public
      Make an application dashboard interface for a dinosaur park.
      CSS
      •73•1•0•0•Updated Dec 4, 2022Dec 4, 2022

    • leafy-decorations

      Public
      Use background images to create design elements on a masthead & banner.
      CSS
      •218•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • modularity-mindfulness

      Public
      A simple review exercise exploring grids, type systems & modular CSS
      176•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • svg-icon-sets

      Public
      Use SVG icons sets to create a small layout with different icons.
      198•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • svg-line-drawing

      Public
      An exercise to create a banner graphic while practicing animating SVG strokes using stroke-dashoffset.
      CSS
      •139•1•0•0•Updated Dec 4, 2022Dec 4, 2022

    • action-hero-card-with-actions

      Public
      Create a card interface with a toolbar of actions using <img srcset> and SVG icons.
      CSS
      •105•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • animal-rescue-website

      Public
      Re-design an animal rescue website by applying everything learned this term.
      121•2•0•0•Updated Dec 4, 2022Dec 4, 2022

    • me-oh-my-html

      Public
      Write all the necessary HTML for the content in the All ’bout them semantics group activity.
      178•2•0•0•Updated Dec 4, 2022Dec 4, 2022

    • this-site-aint-no-sloth

      Public
      Create a simple responsive website that conforms to our performance budget.
      160•0•0•0•Updated Dec 4, 2022Dec 4, 2022

    • all-bout-them-semantics

      Public
      A quick review exercise for HTML semantics before starting the term.
      0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • animated-clock

      Public
      A lesson in using CSS keyframe animations to make a clock face with rotating hands.
      CSS
      •277•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • background-images

      Public
      Use multiple images as background to create more complex design solutions.
      CSS
      •227•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • different-crops-same-image

      Public
      Use the picture tag to create a responsive banner that adjusts the image to fit the screen while maintaining the design aesthetic better.
      CSS
      •103•1•0•0•Updated Nov 11, 2022Nov 11, 2022

    • fancy-hover-boxes

      Public
      An exercise using transitions to create hover boxes that fade from black & white to colour.
      CSS
      •171•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • fastness-fixer

      Public
      Fix a bunch of performance problems and pass the performance budget.
      CSS
      •195•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • gotta-sketch-em-all

      Public
      A in-class review exercise for grids, type systems and modular CSS.
      0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • kraken-good-accessibility

      Public
      Fix some accessibility problems for VoiceOver & make sure the document prints properly.
      CSS
      •97•1•0•0•Updated Nov 11, 2022Nov 11, 2022

    • micro-interface-branding

      Public
      A lesson on making the minimal/necessary amount of favicons at different dimensions & getting them to load.
      117•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • production-prepping-compression

      Public
      Given a series of graphics, prepare their production files and export them properly for the web.
      7•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • retina-gallery

      Public
      Given a complete website, export the images into the right dimensions, compress & smush.
      CSS
      •213•2•0•0•Updated Nov 11, 2022Nov 11, 2022

    • retina-images

      Public
      A quick look at exporting retina ready images using the compressive JPG technique.
      CSS
      •224•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • svg-smiley-face

      Public
      Hand write SVG code to create an interactive smiley face.
      238•2•0•0•Updated Nov 11, 2022Nov 11, 2022

    • using-svg-icons

      Public
      Use Illustrator & Spritebot to generate some SVG icons and use them in a website.
      159•0•0•0•Updated Nov 11, 2022Nov 11, 2022

    • animal-rescue-website-ux

      Public
      Do the standard UX research and design process for your animal rescue website.
      8•0•0•0•Updated Jan 10, 2020Jan 10, 2020