Learn the Web · Web Dev 1's repositories
responsive-header
Use float and media queries to make a responsive website header.
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
flexing-your-muscles
Follow this lesson to learn some flexbox techniques to apply to different layouts.
header-icons
Use float to add navigation and two image icons to the header of a website.
html-document-setup
Create a valid HTML document with all the right starter code.
responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
curriculum
The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 1 course.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
cmon-do-the-sketchin
An activity to practice recognizing and drawing parts of a website including semantics and basic CSS.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
confectionery-website-prototype
Create a wireframe/prototype for a confectionery website—showing what you learned this term.
confectionery-website-sketches
Show the teacher that you’ve started planning the code for your Confectionery website prototype.
dev-tools-modifier
An exercise learning how to use the developer tools by modifying an existing website.
dinosaur-designs
Assets for an in-class pair programming exercise that introduces CSS.
family-lines
An activity to help reinforce indentation best practices & the understanding of parent-child relationships in HTML.
hero-banner
Use CSS position to make a hero banner with text displayed in front of an image.
horizontal-nav
Make a horizontal navigation using the CSS flow and display properties.
image-grid
Use float and media queries to make a grid of images responsive for different screen sizes.
masthead-semantics
Write out the semantically correct HTML elements for the masthead, navigation & banner of a website.
navigation-highlight
A code exercise to practice highlighting the current page in website navigation.
responsive-icon-cards
Use media queries and display to create responsive icon cards.
responsive-section
Use media queries and float to make a responsive section on a website with three columns.
responsive-typography
Use media queries to enhance the typography of a website for different screen sizes.
stylish-beets
Style the beets HTML file from the previous week to match the screenshots.