Unit09 Alternating Column Cards

Overview

The purpose of this assignment is to have you build a page with alternating column cards.

Objectives

At the end of this module, you should be able to...

• Add a new page and menu item to your site
• Build a 4 generation HTML structure
• Properly calculate the optimal image size
• Crop and upload a matching set of images
• Create the CSS to have stacked small screen cards and alternating medium screen cards.

Tasks

• Properly use & with a nested psudo class in your SASS file
• Review nth child

Watch

• Kultra
• 4610 09a- Alternating Cards Overview and Setup
• 4610 09b- Building Alternating Cards

Reflection Questions

After reading the following article, write me a short 1-2 paragraph summary and submit it in Canvas.

• Please submit a 1-2 paragraph summary on Dark Patterns And Other Design No-Nos For Mobile by Suzanne Scacca

Assignment Example

• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit09 Alternating Column Cards (10 pts)

Site Header

• Add a new page to your site
• Add a new menu item to your navigation

Images

• Crop a series of 4 images related to your site
• Save the iamges as webp and upload them to your AWS account

HTML

• Properly use your class of row and class of column woth an additional class to target your html cards
• Use 4 generations of nested HTML to build a series of cards with text
• In the text area of the cards, use heading, paragraph and some kind of list tag

CSS

• Use CSS to layout the cards vertically on small screens
• Use CSS grid and nth child to alternate the photo on larger screens

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail