M6: The CSS Box ModelClass Recap: By now you should understand why we call it "CSS Box Model", and you should also have in depth knowledge of how to structure your page leveraging CSS Box Model. We emphasized the idea that each HTML element is a rectangular box, and depending on which properties you apply, you can create simple or complex layouts by positioning the boxes differently. We also examined the float and clear properties (which is a very important concept when you learn about responsive design and fluid layout). These are essential when creating cross-browser layouts and grids. In addition, we added a CSS reset/normalize to overcome any default browser styling that could hinder our CSS formatting as we build more complex structures.
The box model properties (width, height, margin, padding, and border) are integral parts of web design and page layout. We covered a lot of ground quickly, so be sure to come back to this module often as a reference. Be sure to study the examples I gave you and you can also check out this resource for more info or test your knowledge. http://www.w3schools.com/css/css_boxmodel.asp Student Outcomes:
|
In class
1. In class exercise
2. Continue working on your midterm project. Compress all your images.
2. Continue working on your midterm project. Compress all your images.
For more "tricks" and maybe time saver, check out this page on Adobe:
https://helpx.adobe.com/photoshop/using/generate-assets-layers.html
https://helpx.adobe.com/photoshop/using/generate-assets-layers.html
M6 Discussion
Discussion :
- How many seconds do you expect a search engine (Google.com) to load versus the front page of NYTimes.com or Amazon.com?
- Do you think your download expectations change how long you will wait for different sites?
M6 Homework
1. View the videos in M7/midterm and complete the tasks
2. Coded home page for Midterm Project
Due Date:
Description:
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
This is final assignment for your midterm project. Based on instructor and peer feedback, submit URL of your site index.html page before midterm presentation.
1. A short description of your project (opening statement)
2. A brief description of your process, including your sitemap, wireframes, revisions.
3. A walk through of you website.
For this assignment, you will be creating a small website that takes your viewer on a tour of a Bay Area city. It will consist of five HTML pages: one home page with an introduction, and four other pages that have stops on your tour.
This is final assignment for your midterm project. Based on instructor and peer feedback, submit URL of your site index.html page before midterm presentation.
- Create a project folder inside wnm249 named midterm
- Upload all your files in this midterm folder. Please make sure the home page is called "index.html".
- Test the site through online tools to check for broken links
- Click through all the pages, to make sure there is no missing images
- Click through all external links to make sure they are linked correctly, make sure external links open up in a new tab
- Make sure all images include "alt" tag for accessibility
- Make sure there is a simple site map page with links to all your page
- <click here> to sign up for your midterm presentation and post your URL within the spreadsheet
1. A short description of your project (opening statement)
2. A brief description of your process, including your sitemap, wireframes, revisions.
3. A walk through of you website.
Purpose:
This assignment reinforces the topics covered in the module. It also demonstrates the process of creating a website from the beginning to completion.
This assignment reinforces the topics covered in the module. It also demonstrates the process of creating a website from the beginning to completion.
Tools:
Any code editing software of your choice. Photoshop for layout. Online tools to check for broken links.
Any code editing software of your choice. Photoshop for layout. Online tools to check for broken links.