MAD9013

# Deliverables

# Deliverables Breakdown

# In-Class Activities

In-Class 1

Web Pattern Hunt

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

Due: Wed Sept 6, 2023

In-Class 2

Website HTML Markup Audit

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

Due: Wed Sept 13, 2023

In-Class 3

CSS Resets

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

Due: Fri Sept 22, 2023

In-Class 4

Website & App Design Critique

Go through some websites and find some common web components.

Due: Wed Sept 27, 2023

In-Class 5

Basic Footer

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

Due: Fri Oct 6, 2023

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 13, 2023

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 20, 2023

In-Class 8

Container Queries

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

Due: Fri Nov 3, 2023

In-Class 9

Sign Up Form

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

Due: Fri Nov 10, 2023

In-Class 10

Tabbing & Focus States

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

Due: Fri Nov 17, 2023

In-Class 11

Transitions

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

Due: Fri Nov 24, 2023

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 8, 2023

# 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 13, 2023

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 17, 2023

Assignment 3

Buttons

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

Due: Sun Sept 24, 2023

Assignment 4

Responsive Type Hierarchy

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

Due: Sun Oct 1, 2023

Assignment 5

Navbar

Build a basic responsive navbar.

Due: Mon Oct 9, 2023

Assignment 6

Banners With Variables

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

Due: Sun Oct 15, 2023

Assignment 7

Card Group

Create a responsive layout to display a group of cards.

Due: Sun Oct 29, 2023

Assignment 8

Container Query Card

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

Due: Wed Nov 8, 2023

Assignment 9

Contact Form

Create a basic Contact Form.

Due: Sun Nov 12, 2023

Assignment 10

Page Accessibility Audit

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

Due: Sun Nov 19 2023

Assignment 11

Banner Animation

Add life to your site with a banner animation.

Due: Sun Nov 26 2023

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 10 2023

Last Updated: 9/2/2023, 10:56:04 AM