Unit10 Hotel Chain

Overview

In this module, you will build a page for a fictitious hotel chain using the JSON data and DOM manipulation. You will also review how to use named grid areas to layout the cards differently based on screen width. That part will be awesome!

Vocabulary

JSON

Stands for JavaScript Object Notation which is is a text format for storing and transporting data.

Grid Template Areas

A way to layout a grid using names for rows and columns.

Tools

• Online JSON validation tool

Objectives

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

• Build a responsive page using JavaScript and modules (covered in unit07 Presidents)
• Implement CSS Grid Named Areas
• Build a page with off-canvas navigation

Tasks

• Lookup up ideas for hotel names
• Review Harry Potter themed hotels and accomidations
• Review the Best Hotels in the World
• Read about Grid template Areas
• How to Create an Off-Canvas Menu
• Read How To Implement Off-Canvas Navigation For A Responsive Website
• Build a JSON data file for the hotel cards Example

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_10a-Overview
• Watch 2610_nav_10b-Navigation Small
• Watch 2610_nav_10c-Navigation Large
• Page Content Tutorials
• Watch 2610_10a Hotel Chain Overview
• Watch 2610_10b Hotel Chain Content
• Watch 2610_10c Script and Data
• Watch 2610_10d Grid Template Areas
• Watch 2610_10e Setup Review
• Watch 2610_10f Grids for Small Screens
• Watch 2610_10g Grids for Medium & Large Screens

Assignment 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

Unit10 Hotel Chain (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 Hotel site logo.
• Company Name

Navigation

The navigation should feature:

• SMALL – Off Canvas menus
• SMALL – Off Canvas menus
• LARGE – horizontal navigation

JSON data file

Build a valid JSON data file that includes the following:

• Path to a local image
• Hotel name
• Two line address (think array)
• Phone Number

Main

The main tag of your page should contain the following:

• At least eight cards with photo, address, and phone number
• Small screen cards the photo, address and phone number link are stacked.
• Medium screen the photos is left of the address and phone number link
• Large screen the cards are presented in two columns

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