Unit07 Advanced CSS
Overview
In this unit you will implement a responsive navigation system for mobile phones as well as adding a hero image to the home page. At this point your site should look awesome.
Vocabulary
- Media Query
- A Media Query uses the @media rule to implement a set of CSS rules only when a condition is true.
- Hero Image
- A hero image is a term used to describe a banner image at the top of a web page.
- CSS Box Model
- The box model is a square that wraps around every HTML element. It consists of margins, borders, padding, and the content of the tag.
Tools
- View the CSS Gradient Generator
- Look for logo ideas on BrandCrowd
- Generate a favorite icon with favicon.io
- Use my Module 7 AutoGrader to check your own work before submitting.
Objectives
At the end of this module, you should be able to...
- Add a hero image to the home page.
- Implement responsive navigation using media queries.
- Implement a CSS gradient.
- Implement drop shadows.
- Limit the overall page width.
- Create a site icon (favicon).
- Demonstrate design principles (Proximity, Alignment, Repetition, Contrast, Wayfinding, Visual Tangent).
- Validate your page with three different tools.
- Upload your pages to a server using FTP.
Tasks
- Read A Basic Look at Typography in Web Design
- Read min-width property by w3schools
- Read max-width property by w3schools
- Read border radius by w3schools
- Read CSS box shadow property by w3schools
Download
Watch
- Canvas Videos
- Watch unit07-Unit Overview
- Watch unit07b-Follow Along Intro
- Watch unit07c-Box Model
- Watch unit07d-Prepare Logo in Photoshop
- Watch unit07e-Prepare Logo in PIXLR
- Watch unit07f-Add a Logo to the Header
- Watch unit07g-Build a Favicon
- Watch unit07h-Media Queries for Responsive Navigation
- Watch unit07i-Implement Max Width
- Watch unit07j-Add a Hero Image
- Watch unit07k-Graident and Shadows
- Watch unit07l-Common Mistakes
Assignment Example
View an example of this assignment
Assignment Checklists
Follow Along Activity(5 pts)
- Follow along with videos in this unit to create you own version of the "Angelo's Bake Shop" Website.
- Rename the completed assignment folder as "07follow-along".
- Upload this folder to your GitHub account and make sure the link works.
- Submit a link to your site in Canvas.
Unit07 Advanced CSS (10 pts)
Box Model
Change the box model for your style sheet.
- Change the box model to border box.
Site Logo
Add a logo to the header of your site.
- Create a graphic logo no more than 100px wide or 100 px tall.
- Use flexbox to position the logo to the left side of the site name and slogan.
Width Control
Limit the overall width of your site.
- Limit the overall width of your site by adding max-width to the header, nav, main and footer
Center Page Contents
Center the page.
- Use margin to center the page contents
In-line Media Queries
Create CSS navigation rules for the phone and other rules for the tablet and desktop.
- Implement a single column of menu items of the small screen
- Implement a horizontal list of menu items
- Insure that Wayfinding is working on all screens
Hero Image
Add a hero image.
- Add a full width scaling hero image to a page on your site.
CSS Gradient
Somewhere on your site use a CSS gradient
- Implement a CSS gradient
Shadows
Use a drop shadow to give your site elements a sense of depth.
- Apply a hover drop shadow to gallery images
Fav Icon
Create a favorite Icon
- Createa fav icon from your site logo.
- Add the favicon file to the root of your site.
- Add a link to the header of your site for the fav icon.
Valid CSS markup
Please check your CSS to see if you have any errors (warning are OK). You should use the CSS code validator to check your work.
- Valid CSS for your CSS file
Upload to GitHub
Upload your assignment to a GitHub repository
- Create a folder called "07advanced-css" and put the two html files inside it.
- Upload this folder to your "dwdd1600" repository.
Grade
In order to receive a grade for this assignment you must earn 90% of the points listed above.
- Pass
- Fail