Difference between revisions of "Class:Digital Portfolio 2013/Week 3"
Jump to navigation
Jump to search
(→Your Browser is a Web Inspector) |
(→Your Browser is a Web Inspector) |
||
| Line 24: | Line 24: | ||
* Amazing free Code School course on [http://www.codeschool.com/courses/discover-devtools Discovering DevTools] | * Amazing free Code School course on [http://www.codeschool.com/courses/discover-devtools Discovering DevTools] | ||
* Quick little Safari Web Inspector Video [http://www.youtube.com/watch?v=BUQaqn6DM4k on YouTube here]. | * Quick little Safari Web Inspector Video [http://www.youtube.com/watch?v=BUQaqn6DM4k on YouTube here]. | ||
| + | |||
| + | === Clearing your CSS Slate Before' You Start === | ||
| + | |||
| + | The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. | ||
| + | |||
| + | * [http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css What is the difference between Normalize.css and Reset CSS?] | ||
| + | * The [http://meyerweb.com/eric/tools/css/reset/ Reset CSS] | ||
| + | * The [http://necolas.github.io/normalize.css/ Normalize CSS] | ||
== Video Notes == | == Video Notes == | ||
Revision as of 20:54, 17 May 2013
Contents
Last Week
- Prepping Images for the Web
- Tools: Text Editors
- HTML / CSS Review
This Week
- Browser Develop Tools
- Divs & Spans -vs- classes & ID's
- CSS Normalized
- CSS Floats
- CSS Position
- CSS Offset
- CSS Sliding Gallery
Notes
Your Browser is a Web Inspector
Believe it or not, the browser that you are using to read this page, is also the best toolkit to use for debugging your projects. Both Safari and Chrome have fantastic built in Web Inspectors and there is a plugin for Firefox called firebug.
- How to set up Safari for web inspection.
- Amazing free Code School course on Discovering DevTools
- Quick little Safari Web Inspector Video on YouTube here.
Clearing your CSS Slate Before' You Start
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
Video Notes
Section B
- Using the built in browser tools to help you debug your projects
- What is a CSS reset/normalize and why do we need to love them
- CSS Floats Overview
- CSS Position Overview
- Further clarification on divs & spans
- CSS Box Model Overview
- Building a quick gallery using the stuff we learned today
Files
To be posted.
Assignment
To be posted, mentioned in video.
