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: Fri Sept 6, 2024

In-Class 2

Website HTML Markup Audit

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

Due: Fri Sept 13, 2024

In-Class 3

CSS Resets

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

Due: Fri Sept 20, 2024

In-Class 4

Website & App Design Critique

Go through some websites and find some common web components.

Due: Fri Sept 27, 2024

In-Class 5

Basic Footer

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

Due: Fri Oct 4, 2024

In-Class 6

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 11, 2024

In-Class 7

Basic Banners

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

Due: Fri Oct 18, 2024

In-Class 8

Container Queries

Let's apply our learning on container queries through a practical example.

Due: Fri Nov 1, 2024

In-Class 9

Sign Up Form

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

Due: Sun Nov 10, 2024

In-Class 10

Tabbing & Focus States

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

Due: Fri Nov 15, 2024

In-Class 11

Transitions

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

Due: Fri Nov 22, 2024

In-Class 12

Tailwind CSS Bike Product Page

Let's continue working with Tailwind CSS and build a basic Bike Product Page.

Due: Fri Dec 6, 2024

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: Thurs Sept 12, 2024

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 15, 2024

Assignment 3

Buttons

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

Due: Sun Sept 22, 2024

Assignment 4

Responsive Type Hierarchy

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

Due: Sun Sept 29, 2024

Assignment 5

Navbar

Build a basic responsive navbar.

Due: Sun Oct 5, 2024

Assignment 6

Card Group

Create a responsive layout to display a group of cards.

Due: Mon Oct 14, 2024

Assignment 7

Banners With Variables

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

Due: Sun Oct 27, 2024

Assignment 8

Container Query Card

Create a basic card that is made responsive with container queries.

Due: Thurs Nov 7, 2024

Assignment 9

Contact Form

Create a basic Contact Form.

Due: Tues Nov 12, 2024

Assignment 10

Page Accessibility Audit

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

Due: Sun Nov 17, 2024

Assignment 11

Banner Animation

Add life to your site with a banner animation.

Due: Sun Nov 24, 2024

Assignment 12

Tailwind CSS Form Page

Using Tailwind CSS re-create the form page from the Bike Club example site and update the colour scheme and font using the Tailwind config.

Due: Sun Dec 8, 2024

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 3, 2024

Project 2

Recipe Website

Joint project with MAD9014 to create a recipe website.

Due: Fri Dec 13, 2024