Deliverables

Deliverables Breakdown

• In-class Work

  15% of grade

  12 in-class work activities

• Assignments

  50% of grade

  12 assignments

• Projects

  35% of grade

  2 projects

In-Class Activities

In-Class 1

Web Pattern Hunt

Let's explore some websites to discover common web patterns.

Due: Wed Sept 7, 2022

In-Class 2

Website HTML Markup Audit

In groups, review the website and discuss its HTML Markup.

Due: Wed Sept 14, 2022

In-Class 3

CSS Resets

Let's explore a basic CSS Reset to help make our CSS consistent between browsers.

Due: Wed Sept 21, 2022

In-Class 4

Website & App Design Critique

Go through some websites and find some common web components.

Due: Wed Sept 28, 2022

In-Class 5

Basic Footer

This follow along tutorial will be a practical application of flexbox to create a footer.

Due: Wed Oct 5, 2022

In-Class 6

Basic Banners

This follow along tutorial will be a practical application of this week's lesson to create a basic banner.

Due: Fri Oct 14, 2022

In-Class 7

Split Image Content Section

This follow along tutorial will be a practical application of CSS Grid to create an image with text section.

Due: Fri Oct 21, 2022

In-Class 8

Sign Up Form

Let's apply our learning on Forms through a practical Sign Up Form example.

Due: Fri Nov 4, 2022

In-Class 9

Tabbing & Focus States

Let's make our website more accessible and keyboard friendly with tabbing and focus states.

Due: Fri Nov 11, 2022

In-Class 10

Transitions

Let's add polish to our site by adding some transitions!

Due: Fri Nov 18, 2022

In-Class 11

Sass File Structure

Let's set up a Sass folder that combines all of our patterns into one, easily re-usable, project folder!

Due: Fri Nov 25, 2022

In-Class 12

Bootstrap File Structure

Let's set up a Bootstrap project that allows us to customize colors and styles through Sass variable overrides.

Due: Fri Dec 2, 2022

Assignments

Assignment 1

Deliverables Repository Set Up

Set up the GitHub repository that we will be using for all of the code-based in-class activities and assignments over the course of the semester.

Due: Wed Sept 14, 2022

Assignment 2

HTML Mark Up

Based on the Website HTML Markup Audit in-class activity, let's mark up the HTML for the page.

Due: Sun Sept 18, 2022

Assignment 3

Buttons

Create a reusable button class that can easily adapt with simple modifier classes.

Due: Sun Sept 25, 2022

Assignment 4

Responsive Type Hierarchy

Create a responsive type hierarchy that helps visually organize content on the page.

Due: Sun Oct 2, 2022

Assignment 5

Navbar

Build a basic responsive navbar.

Due: Mon Oct 10, 2022

Assignment 6

Banners With Variables

Create a banner with different alignment & size options using CSS variables and modifier classes.

Due: Sun Oct 16, 2022

Assignment 7

Card Group

Create a responsive layout to display a group of cards.

Due: Sun Oct 30, 2022

Assignment 8

Contact Form

Create a basic Contact Form.

Due: Wed Nov 9, 2022

Assignment 9

Page Accessibility Audit

Conduct a thorough audit of the Tabbing & Focus page to ensure it passes accessibility requirements.

Due: Sun Nov 13 2022

Assignment 10

Banner Animation

Add life to your site with a banner animation.

Due: Sun Nov 20 2022

Assignment 11

Sass Mixins & Functions

Set up the GitHub repository that we will be using for all of the assignments over the course of the semester.

Due: Sun Nov 27 2022

Assignment 12

Bootstrap Form Page

Using Bootstrap re-create the form page from the Bike Club example site and update the colour scheme using Sass variables.

Due: Sun Dec 11 2022

Projects

Project 1

Two Page Site

Create a two page website building upon the patterns created in our in-class activities and assignments.

Due: Sun Nov 6, 2022

Project 2

Portfolio Website

Create a portfolio website to showcase the work you created this semester.

Due: Fri Dec 16, 2022