Performing Arts Center

Overview

In this module, you will build a page for a fictitious performing arts center. You get to make up the name and create a pixel-density aware logo as well as choose the shows and dates for the shows.

Vocabulary

Lazy Loading

Lazy-loading downloads only necessary resources and defers non-critical ones until the user scrolls down the page.

webP

WebP is an image file format developed by Google in 2018. It replaces JPEG, PNG, and GIF file formats. It supports both lossy and lossless compression as well as animation and alpha transparency.

Pixel Density

The number of physical pixels (led lights) per inch on a screen or display of a device. It's often referred to as Pixels Per Inch or PPI.

Layout Jank

When a page reflows based on new content being downloaded. Page elements jump around on the page as it renders.

Tools

• Install Adobe Photoshop (should be free to UVU students)

Objectives

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

• Use CSS Grid to design a site header
• Use CSS Flexbox to layout navigation items
• Use CSS Grid to layout multi-column cards
• Implement native lazy loading
• Save images using the WebP format
• Build a pixel density logo using Photoshop layer names

AI Assist

Use AI to generte a simple HTML solution for a logo that is pixil dependent.

PROMPT: What is a simple solution to build a pixel density-aware logo for my website that is 50px by 50px using a transparent PNG file?

Tasks

• Read about WebP Graphics
• Read about Pixel Density
• Watch Layout Jank
• Read about Native Lazy Loading
• Find out the minimum touch size recommended by Apple
• Find out the minimum touch size recommended by Google for Android devices

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_02a Navigation Overview
• Watch 2610_nav_02b Small Screen Navigation
• Watch 2610_nav_02c Medium and Large Navigation
• Page Content Tutorials
• Watch 2610_02a Performing Arts Center Overview
• Watch 2610_02b Grid-Flex Introduction
• Watch 2610_02c Flex Examples
• Watch 2610_02d Grid Examples
• Watch 2610_02e Image Introduction
• Watch 2610_02f Image Practice
• Watch 2610_02g Lazy Loading Introduction
• Watch 2610_02h Lazy Loading Practice
• Watch 2610_02i Pixel Density Introduction
• Watch 2610_02j Pixel Density Practice
• Watch 2610_02k Card Layout

Assignment Example

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

Assignment Checklist

Performing Arts Center (10 pts)

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Header

The header of your page should contain the following:

• A 1x, 2x, 3x version of an appropiate Performing Arts logo.
• Company Name rendered using a span tag
• Clickable phone number

Navigation

The navigation should feature:

• SMALL - Vertical menu with left aligned menu items
• MEDIUM - Horizontal menu with left aligned menu items
• LARGE - Horizontal menu with left aligned menu items
• HOVER: text color changes
• ACTIVE: background color changes with border radius
• Background color extends the FULL width of the page (think Wrappers)
• Maximum nav width is 75rem (1200px) for the navigation bar color but the color goes all the way across.

Main

The main tag of your page should contain the following:

• A page title rendered as an h1 tag
• 12 cards featuring shows of your choice
• Use the native lazy loading attribute for each image
• Each card has an image and date
• CSS design applied to make each event look like a cohesive card. (More than text and photo)

Footer

The footer tag of your page should contain the following:

• Use a copyright entity and bullet entity
• Display the year and your name
• Center align the text

Hosting this Assignment

• Create a new GitHub public repository
• Make your repository into a GitHub pages site
• Submit a link to the GitHub page

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Grade

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

• Pass
• Fail