Skip to content

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

Change the repository type filter

All

    Repositories list

    46 repositories

    • 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.
      341•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.
      304•1•0•0•Updated Dec 4, 2022Dec 4, 2022

    • navigation-highlight

      Public
      A code exercise to practice highlighting the current page in website navigation.
      350•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•6•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•2•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.
      329•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
      •331•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.
      395•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.
      234•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.
      227•1•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.
      266•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.
      159•1•0•0•Updated Nov 11, 2022Nov 11, 2022

    • html-document-setup

      Public
      Create a valid HTML document with all the right starter code.
      268•1•0•0•Updated Nov 11, 2022Nov 11, 2022
    ProTip! When viewing an organization's repositories, you can use the props. filter to filter by custom property.