Unit04 Diner
Overview
In this module, you will build a page for a fictitious retro diner that uses icon libraries and a cards for the menu items. You will also create a formidable footer for the site.
Vocabulary
- Font Awesome
- Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
- IonIcons
- Premium designed icons for use in web, iOS, Android, and desktop apps.
- DRY
- A coding practice where you do NOT repeat code in multiple places.
Tools
- Download Adobe Bridge (free for UVU students).
Objectives
At the end of this module, you should be able to...
- Use an existing library of icons
- Create a robust footer
- Build a set of fancy cards
- Implement SASS calc()
Tasks
- Use beautifully crafted open source icons
- Read about Font Awesome
- Read about Website Footers: Best Design Practices
- Learn about SASS calc()
- Read about 7 popular icon libraries you can use for free
Watch
- Navigation Tutorials
- Download the Navigation Start File for the tutorials below.
- Watch 2610_nav_04a-Introduction
- Watch 2610_nav_04b-Navigation
- Page Content Tutorials
- Watch 2610_04a Diner Overview
- Watch 2610_04b HTML for Cards
- Watch 2610_04c CSS for Small Screens
- Watch 2610_04d CSS for Large Screens
- Watch 2610_04e Footer HTML
- Watch 2610_04f Footer Icons
- Watch 2610_04g Footer Small CSS
- Watch 2610_04h Footer Large CSS
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
Unit04 Diner (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 Diner logo.
- Company Name rendered as a span or div tag
Navigation
The navigation should feature:
- SMALL - Simple hamburger/X navigation that opens and closes
- MEDIUM - same as small
- LARGE - justify, right [FLEX]
- Background color for nav wrapper extends FULL screen width
Main
The main tag of your page should contain the following:
- A page title rendered as an h1 tag
- At least 5 menu item cards. Each with a title, image, description, and styled link.
Footer
The footer tag of your page should contain the following three sections:
- A section with a name, company name, email, URL, and phone number. Each should contain an appropriate icon.
- A section with at least 5 styled social media icons of your choice
- A section with the complete address
- Below those show a copyright, year and your name
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