Unit03 Architecture Company

Overview

In this module, you will build a page for a fictitious Building and design company. You will learn to use Art Direction, use the video tag and add your own captions. We will also use the details tag to show and hide content without using JS.

Vocabulary

Art Direction

Cropping an image differently depending on the target screen size.

Responsive Images

A set of images that work together on devices with widely differing screen sizes to deliver the optimal image.

Tools

• Download HandBrake (free).
• Download Adobe Premiere (free for UVU students).
• Use Youtube Studio (free) for automatic captioning.
• Use MP4 to WEBM Converter.
• Convert Subtitles to vtt.

Objectives

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

• Create a responsive image set
• Implement Art Direction on a set of images
• Use the video tag with two source files
• Create and add a caption track to a video
• Implement the details tag to show and hide content

Tasks

• Read about Adding captions to videos
• Convert mp4 videos to webm .
• Read about Responsive Images with Art Direction
• Read about adding captions and subtitles to HTML video
• Read about Shooting better video with a smart phone
• View the code for video with closed captioning

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_03a Navigation
• Page Content Tutorials
• Watch 2610_03a Architecture Company Overview
• Watch 2610_03b Responsive Image Introduction
• Watch 2610_03c Responsive Image Practice
• Watch 2610_03d Video Creation
• Watch 2610_03e Video Transcript
• Watch 2610_03f Video Tag
• Watch 2610_03g Details Tag

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

Unit03 Architecture Company (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 Architecture Company site logo.
• Use a PNG with transparency (so the background color shows through)
• Company Name

Navigation

The navigation should feature:

• SMALL - Vertical menu with center aligned menu items
• MEDIUM - Horizontal menu with fully justified menu items
• LARGE - Horizontal menu with right aligned menu items
• HOVER - use text decoration to underline the hover pseudo class with a wavy line
• Background color behind the menu items
• Activate the current menu item

Main Hero Image

The main tag of your page should contain the following:

• Responsive hero image with three images.
• The small image is 500px wide
• The medium image is 1000px wide
• The large image is 1500px wide
• Implement art direction as you crop each image

Main Video

The main tag of your page should contain the following:

• A full width video with audio (speaking)
• Serve up a .mp4 version and a .webm version of the video to accommodate different browsers
• A caption track (vtt) in English
• Add a second language of ypur choice using Google Translate.
• Details tag with the video transcript available

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