Unit08 Technology Conference

Overview

In this module, you will build a page for a fictitious conference and use a looping video with text overlay to grab the attention of your audience. In addition you will follow one of several on-line instructions to build flop cards.

Vocabulary

Flip card

Digital flip cards present information to the user and when clicked or moused over, additional details are revealed.

Background Video

A background video is a video clip that is used as the background of your website, usually as a replacement for a hero image.

Tools

• Download Adobe Premiere (free for UVU students)
• Download Handbrake for Mac, Windows, Linux
• Use an on-line video converter

Objectives

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

• Implement an this

Tasks

• Read How to Embed a Hero Background Video on Your Homepage
• Read10 Guidelines for Better Website Background Videos
• Access Stunning free stock video
• Access Vecteezy Free Videos
• Looking for ideas for another logo

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_08a-Overview
• Watch 2610_nav_08b-Navigation
• Page Content Tutorials
• Watch 2610_08a Technology Conference Overview
• Watch 2610_08b Background Video
• Watch 2610_08c Create Video in Premiere
• Watch 2610_08d Handbrake Compression
• Watch 2610_08e HTML Video Tag
• Watch 2610_08f Add Overlay Text
• Watch 2610_08g Flip Cards

Implementing Online Documentation

As a professional, you will be asked to do something you have never tried before. You may turn to the web or get ideas from other developers. In this module, you are being asked to build flip cards below the looping video. Here are several tutorials form reputable sources you can select from.

• Follow Magic Flip Cards by Smashing Magazine
• Follow How To - Flip Card by W3 schools
• Follow Card Flip by 3D Transformations
• Follow Pure CSS Card Flip on Code Pen

Assignment Example

• View the small screen open navigation
• View the small screen layout
• View the medium screen layout
• View the large screen layout
• View the motion video of the layout

Assignment Checklist

Unit08 Technology Conference (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 Technology Conference site logo.
• Company Name
• Company Slogan

Navigation

The navigation should feature:

• SMALL - Animate the X to a hamburger
• MEDIUM – justify, left [FLEX]
• LARGE - justify, left [FLEX]

Main

The main tag of your page should contain the following:

• Looping bckground video
• Text positioned over the video
• At least three flip speaker cards based on any tutorial you choose.

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