Unit01 Product Page

Overview

In this module, you will build a responsive product page for a fictious company using tailwind CSS Play CDN. You will then upload this assignment to your GitHub account. This assignment can be any product of your choice but cannot be an item of clothing.

Tools

• Download Visual Studio Code for FREE
• Add the Live Server extension
• Add the Tailwind CSS IntelliSense Extension by Tailwind Labs
• Adobe Illustrator (free for UVU students)

Objectives

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

• Pick a color scheme with 3-5 colors
• Build a site logo 50px tall by 100px to 200px wide
• Build a favicon from your logo
• Locate a square SVG icon for shopping cart
• Locate a square SVG icon for personal account
• Build a responsive header
• Select an item that you want to feature
• Locate a product image and resize it to 600px by 600px (square)
• Build a responsive page

AI Assist

Use AI to generate product information (title, description, sizes, price)

PROMPT: Please give me a title, description, available sizes, and price for a man's hoodie

Tasks

• Reference for custom grids and value separated by spaces
• Reference for aligning items
• Reference for justifying flex content
• Reference for font family
• Reference for font size
• Reference for font weight
• Reference for text transform
• Reference for border width
• Reference for colors
• Reference for buttons
• Reference for margin
• Reference for Padding
• Reference for Responsive Design
• Reference for width as a percentage
• Reference for max width

Watch

• Building the Assignment
• Watch 2620_01a Overview of tailwind
• Watch 2620_01b Building an SVG Logo
• Watch 2620_01c Gathering other icons
• Watch 2620_01d Building the favicon
• Watch 2620_01c Building the header & footer
• Watch 2620_01c Building the main page
• Watch 2620_01c Building the footer

Assignment Example

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

Assignment Checklist

Unit01 Product Page (10 pts)

html head tag

The head tag should contain the following

• Link to a favorite icon
• Link to tailwind using a script CDN link
• Add a viewport meta tag
• Set the page title

Header

The header tag should contain the following

• Styling done using only Tailwind classes
• SVG Logo built in a tool like Adobe Illustrator
• SVG icon representing the account
• SVG icon representing the shopping cart
• Displayed to match the proivided assignment examples

Main

The main tag should contain the following

• Styling done using only Tailwind classes
• Product image saved as a webp
• Product title
• Product description
• Product options like size or color
• Product price
• Add to cart button

Footer

The footer tag should contain the following

• Styling done using only Tailwind classes
• copyright symbol
• Student's name
• Class Name

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