Unit02 Responsive Welcome Page

Overview

For this module, you will be building a single, responsive web page and hosting it on an AWS bucket.

You will be responsibe for all the design, asset creation, content creation, logo design, color scheme, etc.

Since everything we cover in this unit was covered in a previous class, I have links to 2610 in case you forgot some things you previously learned.

In future units, you will take the page you create here and turn it into a WordPress theme.

Tools

• Adobe Photoshop for image manipulation
• Adobe Illustrator to create a logo.
• VS Code for scripting the web page
• Favorite Icon Generator

Objectives

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

• Identify an appropriate color scheme for your target audience
• Create a custom vector based Pixel Density logo (2610 unit2)
• Create a responsive HTML template (Review of DWDD2610)
• Implement a CSS Preprocessor (2610 unit1)
• Add a FavIcon to your site (2610 unit1)
• Write an Appropriate page title tag (2610 unit1)
• Add a Google font appropriate to your audience (2610 unit1)
• Implement two level deep navigation (2610 unit9)
• Use WordPress classes for Navigation list items (current-menu-item, menu-item-has-children, current-menu-parent)
• Build a 3-piece responsive hero image (300 tall by 700,1100,1500 wide] (2610 unit3)
• Fancy Footer with social media links (2610 unit4)
• Follow best practice design rules (Proximity, Alignment, Repetition, Contrast)

Tasks

• Add a new AWS bucket to host this assignment
• Grab a sample bucket policy from the "Add a Bucket Policy" page on AWS

Watch

• Kultra
• 4610 02a Building Your Own Template Overview [3:44]
• AWS S3 Bucket for Hosting
• AWS-bucketA Create a New Bucket [1:34]
• AWS-bucketB Upload Files [1:22]
• AWS-bucketC Set the Properities [0:48]
• AWS-bucketD Set the Permissions [1:22]
• AWS-bucketE View the Site [0:41]
• AWS-bucketF Handling Upload Errors [2:48]

Reflection Questions

After reading the following article, write me a short summary and submit it in Canvas.

• Please read The Big Four: Contrast, Repetition, Alignment, Proximity from Presentation Zen: Simple Ideas on Presentation Design and Delivery by Garr Reynolds
• Submit a 4 paragraph report on how you applied each of these four design principles in your ssignment this week.

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

Unit02 Responsive Welcome Page (10 pts)

HTML head

• FavIcon
• Google Font with multiple weights
• Appripiate title tag [Page | Site]
• Single CSS compressed CSS file
• Appripiate author meta tag

Site Header

• Pixel density logo (1x, 2x, 3x)
• Site Title

Site Navigation

• Eight primary navigation links
• At least one menu item with 4 dropdown menu items
• Animated X dropdown for small and medium screens
• Horizontal navigtion for large screens
• Needs to fit with no wrapping

Responsive Hero Image

• Scaling Hero Image
• small version is 700px by 300px
• small version is 1100px by 300px
• small version is 1500px by 300px
• picture tag with srcset used properly

Site Footer

• Address
• Linked Email address
• linked phone number
• mission statement
• At least 4 social media icons using Font Awesome
• Copyright symbol, current year, Student Name, Login (linked to "wp-admin")
• Displayed as a single column for small screens using the 12 column grid
• Displayed as two columns for medium screens using the 12 column grid
• Displayed as three columns for large screens using the 12 column grid

No Design Errors

• Appropiate Visual Tangent
• Appropiate Alignment
• Appropiate Proximity
• Appropiate Repetition
• Appropiate Contrast

Hosting a Static Page

• Host your page on a AWS - S3 bucket
• Share a link to your bucket in Canvas

Validators

• Your page must pass the HTML validation test.
• Your page must pass the CSS validation test.
• Your page must pass the WAVE web accessibility evaluation test.

Grade

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

• Pass
• Fail