Difference between revisions of "Class:Digital Portfolio 2013/Week 3"
Jump to navigation
Jump to search
(→Files) |
|||
| (14 intermediate revisions by the same user not shown) | |||
| Line 17: | Line 17: | ||
== Notes == | == 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 [http://getfirebug.com firebug]. | ||
| + | |||
| + | * How to [http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html set up Safari] for web inspection. | ||
| + | * 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]. | ||
| + | |||
| + | === 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] | ||
| + | |||
| + | === CSS Cheat Sheet === | ||
| + | |||
| + | ; Spans and divs are TAGS | ||
| + | : Just like <h1>, <img>, <ul> | ||
| + | |||
| + | ; All tags can optionally have attributes of type class or ID | ||
| + | : <div class="header"> is styled in CSS using .header | ||
| + | : <div id="header"> is styled in CSS using #header | ||
| + | : <h1 class="highlight"> is styled in CSS using .highlight | ||
| + | |||
| + | === CSS Floats === | ||
| + | |||
| + | * [http://alistapart.com/article/css-floats-101 CSS Floats 101] | ||
| + | * [http://www.w3schools.com/css/css_float.asp CSS Float] at w3schools.com | ||
| + | |||
| + | === CSS Positioning === | ||
| + | |||
| + | * [http://www.w3schools.com/css/css_positioning.asp CSS Positioning] at w3schools.com | ||
| + | * [http://www.barelyfitz.com/screencast/html-training/css/positioning/ Learn CSS Positioning in Ten Steps] | ||
| + | |||
| + | === CSS Overflow === | ||
| + | |||
| + | * [http://www.w3schools.com/cssref/pr_pos_overflow.asp CSS overflow Property] at w3schools.com | ||
| + | * [http://css-tricks.com/the-css-overflow-property/ The CSS Overflow Property] | ||
| + | |||
| + | === The CSS Box Model === | ||
| + | |||
| + | * [http://www.w3schools.com/css/css_boxmodel.asp CSS Box Model] at w3schools.com | ||
| + | * [http://css-tricks.com/the-css-box-model/ The CSS Box Model] | ||
== Video Notes == | == Video Notes == | ||
| + | |||
| + | === Section A === | ||
| + | |||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_StyleCSSLists.mp4 Quick Overview on CSS Styling Unordered Lists] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_BrowserWebInspector.mp4 Using the built in browser tools to help you debug your projects] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSResetAndNormalize.mp4 What is a CSS reset/normalize and why do we need to love them] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSBoxModelOverview.mp4 Box Model Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSFloats.mp4 CSS Floats Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSPosition.mp4 CSS Position Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSOverflow.mp4 CSS Overflow Overview] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130520_MPS-DP-A_CSSOverflowGallery.mp4 Building a quick gallery using the stuff we learned today] | ||
=== Section B === | === Section B === | ||
| Line 34: | Line 88: | ||
== Files == | == Files == | ||
| − | + | * The choppingblock / html-css-demos files will always be posted here [https://github.com/choppingblock/html-css-demos/archive/master.zip from github.com here] | |
| − | : | + | * [[media:SvaMPS-DP_20130520_A.zip|The Section A files that we made in class: SvaMPS-DP_20130520_A.zip]] |
| + | * [[media:SvaMPS-DP_20130515_B.zip|The Section B files that we made in class: SvaMPS-DP_20130515_B.zip]] | ||
== Assignment == | == Assignment == | ||
| − | + | # Prep some of your images for the web using the techniques and tips shown in class. | |
| − | + | # Rebuild or replicate (copy) the CSS Sliding Gallery we built in class and get your images in there. | |
| − | Bring | + | # Style it (with CSS) further or make additional design changes. |
| − | + | # Bring your web project folder to class next week. | |
Latest revision as of 11:32, 22 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.
CSS Cheat Sheet
- Spans and divs are TAGS
- Just like <h1>, <img>, <ul>
- All tags can optionally have attributes of type class or ID
- <div class="header"> is styled in CSS using .header
- <div id="header"> is styled in CSS using #header
- <h1 class="highlight"> is styled in CSS using .highlight
CSS Floats
- CSS Floats 101
- CSS Float at w3schools.com
CSS Positioning
- CSS Positioning at w3schools.com
- Learn CSS Positioning in Ten Steps
CSS Overflow
- CSS overflow Property at w3schools.com
- The CSS Overflow Property
The CSS Box Model
- CSS Box Model at w3schools.com
- The CSS Box Model
Video Notes
Section A
- Quick Overview on CSS Styling Unordered Lists
- 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
- Box Model Overview
- CSS Floats Overview
- CSS Position Overview
- CSS Overflow Overview
- Building a quick gallery using the stuff we learned today
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
- The choppingblock / html-css-demos files will always be posted here from github.com here
- The Section A files that we made in class: SvaMPS-DP_20130520_A.zip
- The Section B files that we made in class: SvaMPS-DP_20130515_B.zip
Assignment
- Prep some of your images for the web using the techniques and tips shown in class.
- Rebuild or replicate (copy) the CSS Sliding Gallery we built in class and get your images in there.
- Style it (with CSS) further or make additional design changes.
- Bring your web project folder to class next week.
