Unit05 Auto Dealer

Overview

In this module, you will build a page for a fictitious auto dealership and review importing data from a JSON file to display customer quotes. You will also use positioning to overlay text in a scalable hero image.

Vocabulary

SVG

Scalable Vector Graphics defined using XML format.

Term

Description.

Tools

• Download Adobe Illustrator (free for UVU students)
• View the Multiplication-x Entity on toptal
• View the Trigram for Heaven Entity on toptal

Objectives

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

• Create SVG graphics by hand using a text editor
• Minify SVG icons
• Grab SVG icons from a commercial source
• Convert a number into a graphic star set
• Animate icons using CSS
• Build a logo that includes text

Tasks

• Read about CSS Animation om MDN
• Read about SVG Tutorial: How to Code SVG Icons by Hand
• Learn about CSS gradients using rgba
• Review 10 open source SVG icon libraries that you can use for your next project
• Download the SVG start file
• Download and print the grid to design your own SVG

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_05a-Introduction
• Watch 2610_nav_05b-Navigation
• Page Content Tutorials
• Watch 2610_05a Auto Dealer Overview
• Watch 2610_05b Text Over Photo
• Watch 2610_05c Creating Copycat Logos
• Watch 2610_05d Logo Dilemma
• Watch 2610_05e Creating SVGs From Scratch
• Watch 2610_05f Using Commercial Icons
• Watch 2610_05g Four Animations Reviewed
• Watch 2610_05h Using JS to Add Comments pt1
• Watch 2610_05i Using JS to Add Comments pt2
• NOTE: the path to your star needs to be changed to "./" instead of "../" in order for them to work on GitHub.🤪

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

Unit05 Auto Dealer (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 Auto Dealer site logo which includes text in the file.
• Clickable Phone Number

Navigation

The navigation should feature:

• SMALL - Add close X to the simple hamburger
• MEDIUM - justify, left [FLEX]
• LARGE - justify, left [FLEX]
• Background color behind the nav items

Main

The main tag of your page should contain the following:

• Scalable hero image with live text overlay
• Four service cards with an animated scalable vector graphic, title, description and styled link
• At least two SVG icons must be hand built in a text editor
• The other two icons must be created in Adobe Illustrator.
• At least 4 responsive customer quotes loaded from a JSON file that you will create. (JSON learned in "Scripting Essentials" 07 Presidents)

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