Unit05 Activity Cards

Overview

The purpose of this assignment is to build a series of responsive activity cards.

Tools

• No Tools

Objectives

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

• Build a set of cards using a row/column layout
• Style the cards to accommodate hover on large screens
• Identify the optimal image width for the images in your layout

Tasks

• Download a set of matching images
• Resize them to a common size

Watch

• Kultra
• 4610 05a- Overview of Activity Cards
• 4610 05b- Determining the Optimal Image Size
• 4610 05c- The Finished HTML
• 4610 05d- Small Screen CSS
• 4610 05e- Large Screen CSS
• 4610 05f- See More Button Styling
• 12-column grid review from 2610
• Watch 2610_06b CSS Framework
• Watch 2610_06c Building the For Loop
• Watch 2610_06d Seeing the Grid Structure
• Watch 2610_06e Layout Even Grids
• Watch 2610_06f Layout Uneven Grids
• Watch 2610_06g Layout Incomplete Grids
• Watch 2610_06h Adding Extra Classes

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 Writing CSS In 2023: Is It Any Different Than A Few Years Ago? by Geoff Graham

Assignment Example

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

Assignment Checklist

Unit05 Activity Cards (10 pts)

On your home page template, add a series of cards.

Implement a 12 column grid

• row class displayed a flex, wrapped, and centered
• columns class with padding at the sides
• small 1-12 class with flex basis values
• medium 1-12 class with flex basis values
• large 1-12 class with flex basis values
• SASS CALC() used
• SASS for loop used

Activity Cards

• Build a set of 6 cards
• Cards need an image that is the optimal size for all three views
• Cards need a text description
• On mobile screens, the text information must be displayed at all times
• On screens that support mouse hover the text must be hidden until mouse-over
• The cards must be visually stunning (no slop permitted)

Hosting a Static Page

• Update your page on the AWS - S3 bucket used in the previous assignment
• Share a link to your bucket in Canvas

Validators

• Your page must pass the HTML validation test.
• Your page must pass the CSS validation test.
• Your page must pass the WAVE web accessibility evaluation test.

Grade

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

• Pass
• Fail