Unit06 Dynamic Cards

Overview

In this module, you will build a set of 6 responsive cards with images, text, cost and buttons. You may NOT use vacation destinations for your assignment.

Objectives

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

• Implement tailwind advanced image fit techniques
• Build responsive cards using grid columns
• Build cards using JavaScript from a JSON file
• Use @apply to build your own theme classes

AI Assist

Use AI to build a JSON file for the destinations

PROMPT: Generate a JSON file with 6 popular vacation destinations, including the destination name, length of the tour, description of the destination, the cost of the trip, and an image URL.

Tools

• Use a JSON Formatter on the AI result file

Tasks

• Reference for overflow
• Reference for Object Fit
• Reference for height (use to determine the image height images are sized in PS)
• Reference to Grid template Columns
• Reference for max width
• Reference for html cards
• Reference for html cards
• Reference card examples

Watch

• Building the Assignment
• Watch 2620_01a Video
• Watch 2620_01b Video
• Watch 2620_01c Video

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit06 Dynamic Cards (10 pts)

html head tag

The head tag should contain the following

• Link to a stylesheet
• Viewport meta tag
• Page title

Modules

The cards on the page should be dynamically built using JSON data

• Use AI to generate data for at least 6 cards on a topic of your choice.
• The data for each card must contain a photo link, title, decription, and price.
• Use a JS script to dynamically build the cards and append them to the web page.

Main

The main tag should contain the following

• Styling done using only Tailwind classes
• A responsive layout of the cards with various columns depending on the browser width.
• Each card needs two button that look similar with links to #

Design Principle Requirements

Your page needs to meet these requirements

• Passes the HTML W3C HTML validator
• Passes the WAVE Accessibility test with no contrast errors
• Does not contain any Visual Tangent errors (items touching the screen edge)
• Page is responsive from 320px to 1600px
• Page does not have horizontal scrolling at any page width

Grade

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

• Pass
• Fail