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