Unit06 X-Mobile
Overview
In this module, you will build a page for a fictitious mobile phone company using a hand build 12-column grid.
Vocabulary
- Bootstrap
- Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites using Sass.
- Operators
- Standard mathematical operators like +, -, =, and *.
- ADA Compliance
- Americans with Disabilities Act Compliance
- WCAG
- Web Content Accessibility Guidelines
Tools
- Web Aim provides a Contrast Checker.
Objectives
At the end of this module, you should be able to...
- Use SASS variables
- Use SASS for loops
- Build your own 12 columns grid
- Check colors for accessibility
Tasks
- Read about modern color schemes
- Read about Sass Operators
- Read Using UI System Fonts In Web Design
Watch
- Navigation Tutorials
- Download the Navigation Start File for the tutorials below.
- Watch 2610_nav_06a-Introduction
- Watch 2610_nav_06b-Navigation
- Page Content Tutorials
- Watch 2610_06a X-Mobile Overview
- Watch 2610_06b CSS Framework
- Watch 2610_06c Building the For Loop
- Watch 2610_06d Seeing the Grid Structure
- Watch 2610_06e Layout Even Grids
- Watch 2610_06f Layout Uneven Grids
- Watch 2610_06g Layout Incomplete Grids
- Watch 2610_06h Adding Extra Classes
- Watch 2610_06i Accessibility
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
Unit06 X-Mobile (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 X-Mobile site logo with text.
- ALSO contain the navigation links
Navigation
The navigation should feature:
- Be part of the header tag
- SMALL – Hamburger entity which opens navigation items OVER the page content.
- MEDIUM – Right aligned horizontal menu.
- LARGE – Right aligned horizontal menu.
- Active menu item
Main
The main tag of your page should contain the following:
- Demonstrate three different row column combinations
- Demonstrate adding a background color by adding a class to a row.
- Add graphic to some of the 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