Unit20 Capstone

Overview

So if you have completed all previous modules in this course at 90% and you still want to do more design/development work to improve your grade, then you can build one more web page as interview practice.

I got this idea from a chief technology officer who works at a tech company here in Utah County. Whenever they interview a new employee they ask lots of questions and the if they are impressed, they hand them wire frame and ask them to turn it into a functioning responsive web page.

You will hve to use everything you have learned in this class to create a large, medium, and small version of this page.

This assignment will let me know how well you internalized what you have been learning without the aid of tutorials.

Objectives

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

• Demonstrate many of the things you have leaned already in this course.

Resources

Here4 are some resources that will make this assignment easier to complete.

• Download a mp4 video you may use for the hero video.
• Download photos for the "How We Can Help" section
• Download some client logos for the "Trust Us" section
• Download the logo as an Adobe Illustrator image (yes you will have to convert it to webp)

Capstone Example

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

Assignment Checklist

Unit20 Capstone (15 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 the site logo.
• Company Name

Navigation

The navigation should feature:

• SMALL - hamburger with full screen width drop down menu items
• MEDIUM - hamburger with partial width drop down menu items
• LARGE - Horizontal navigation bar
• Current menu item is highlighted

Hero Video

• Page Name
• Full width scaling looping video
• SMALL - overlay text at the right side
• MEDIUM - overlay text at the left side
• LARGE - Overlay text at the bottom

Cards

• A heading two tag for how we can help
• At least 4 cards with rounded corners
• Each card has a title, photo and several bullet points
• photo must be appropriately sized
• Each card has a subtle shadow

Clients

• A client heading 2 tag
• At least 6 client logos displayed in rows and columns depending on the device width

Footer

The footer tag of your page should contain the following:

• A clickable phone number that dials out
• At least three location cards
• Address indented below the company name
• 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

Grade

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

• Pass
• Fail