Learn the Web · Web Dev 1

Web development part 1 for Learn the Web.

Ottawa, Canada

Pinned Repositories

button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
Language:HTML2 2 0333
curriculum
The weekly term materials, exercises & assignments for Algonquin Design’s Web Dev 1 course.
Language:HTML0 2 00
exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
Language:HTML1 2 0269
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
Language:HTML2 2 0305
html-document-setup
Create a valid HTML document with all the right starter code.
1 2 0271
link-card
Making a card pattern that is completely clickable.
1 2 0306
making-an-image-card
Use CSS position absolute and relative to make an image card.
1 2 0219
responsive-header
Use float and media queries to make a responsive website header.
Language:HTML4 2 0258
responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
1 2 0270
use-all-the-selectors
A CSS exercise refreshing and teaching about all the different selectors.
Language:HTML2 2 0380

Learn the Web · Web Dev 1's Repositories

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