Repositories list

• curriculum

  Public
  The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 1 course.

  HTML

  •0•0•0•0•Updated Mar 12, 2024Mar 12, 2024

• .github

  Public
  Web Dev 1 educational resources & course from Learn the Web.

  0•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• call-to-action-banner

  Public
  Use CSS position along with float to create a call to action banner.

  293•0•0•1•Updated Dec 4, 2022Dec 4, 2022

• columns-of-cards

  Public
  Use the CSS float property to create a column layout with four cards inside.

  287•0•0•1•Updated Dec 4, 2022Dec 4, 2022

• exploding-robot-head

  Public
  Use position relative & absolute to make this robot head explode when hovered.

  HTML

  •268•1•0•2•Updated Dec 4, 2022Dec 4, 2022

• header-icons

  Public
  Use float to add navigation and two image icons to the header of a website.

  333•1•0•0•Updated Dec 4, 2022Dec 4, 2022

• hero-banner

  Public
  Use CSS position to make a hero banner with text displayed in front of an image.

  325•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• hide-show-responsively

  Public
  Use media queries and responsive design techniques to hide and show content on different screen sizes.

  HTML

  •304•2•0•0•Updated Dec 4, 2022Dec 4, 2022

• horizontal-nav

  Public
  Make a horizontal navigation using the CSS flow and display properties.

  343•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• image-grid

  Public
  Use float and media queries to make a grid of images responsive for different screen sizes.

  HTML

  •283•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• link-card

  Public
  Making a card pattern that is completely clickable.

  305•1•0•0•Updated Dec 4, 2022Dec 4, 2022

• navigation-highlight

  Public
  A code exercise to practice highlighting the current page in website navigation.

  352•0•0•1•Updated Dec 4, 2022Dec 4, 2022

• responsive-header

  Public
  Use float and media queries to make a responsive website header.

  HTML

  •257•4•0•1•Updated Dec 4, 2022Dec 4, 2022

• responsive-image-caption

  Public
  Create a responsive image and caption using the CSS position properties and media queries.

  269•1•0•0•Updated Dec 4, 2022Dec 4, 2022

• responsive-section

  Public
  Use media queries and float to make a responsive section on a website with three columns.

  202•0•0•1•Updated Dec 4, 2022Dec 4, 2022

• responsive-typography

  Public
  Use media queries to enhance the typography of a website for different screen sizes.

  HTML

  •275•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• sections

  Public
  Make a responsive website section with an image, blurb and a button.

  330•1•0•0•Updated Dec 4, 2022Dec 4, 2022

• stylish-beets

  Public
  Style the beets HTML file from the previous week to match the screenshots.

  349•0•0•0•Updated Dec 4, 2022Dec 4, 2022

• button-styles

  Public
  A CSS code exercise looking at using multiple classes to create consistent styles.

  HTML

  •332•2•0•1•Updated Dec 4, 2022Dec 4, 2022

• masthead-semantics

  Public
  Write out the semantically correct HTML elements for the masthead, navigation & banner of a website.

  397•0•0•0•Updated Dec 3, 2022Dec 3, 2022

• responsive-icon-cards

  Public
  Use media queries and display to create responsive icon cards.

  241•0•0•0•Updated Dec 3, 2022Dec 3, 2022

• cards

  Public
  Dig into the browser’s layout models to make a simple, flexible informational design.

  235•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• cmon-do-the-sketchin

  Public
  An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.

  0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• confectionery-website-prototype

  Public
  Create a wireframe/prototype for a confectionery website—showing what you learned this term.

  226•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• confectionery-website-sketches

  Public
  Show the teacher that you’ve started planning the code for your Confectionery website prototype.

  0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• dev-tools-modifier

  Public
  An exercise learning how to use the developer tools by modifying an existing website.

  HTML

  •0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• dinosaur-designs

  Public
  Assets for an in-class pair programming exercise that introduces CSS.

  267•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• family-lines

  Public
  An activity to help reinforce indentation best practices & the understanding of parent-child relationships in HTML.

  0•0•0•0•Updated Nov 11, 2022Nov 11, 2022

• flexing-your-muscles

  Public
  Follow this lesson to learn some flexbox techniques to apply to different layouts.

  160•1•0•0•Updated Nov 11, 2022Nov 11, 2022

• html-document-setup

  Public
  Create a valid HTML document with all the right starter code.

  270•1•0•0•Updated Nov 11, 2022Nov 11, 2022