Difference between revisions of "Class:Digital Portfolio 2013/Week 3"

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(Created page with "== Last Week == * Item == This Week == * CSS Normalized * CSS Floats * CSS Position * CSS Offset * CSS Sliding Gallery == Open Questions == ; Question : note - http://url...")
 
(→‎Files)
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Last Week ==
 
== Last Week ==
  
−
* Item
+
* Prepping Images for the Web
 +
* Tools: Text Editors
 +
* HTML / CSS Review
  
 
== This Week ==
 
== This Week ==
  
 +
* Browser Develop Tools
 +
* Divs & Spans -vs- classes & ID's
 
* CSS Normalized
 
* CSS Normalized
 
* CSS Floats
 
* CSS Floats
Line 11: Line 15:
 
* CSS Sliding Gallery
 
* CSS Sliding Gallery
  
−
== Open Questions ==
+
== 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>
  
−
; Question
+
; All tags can optionally have attributes of type class or ID
−
: note - http://url
+
: <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
  
−
== Links ==
+
=== CSS Floats ===
  
−
; Title - http://url
+
* [http://alistapart.com/article/css-floats-101 CSS Floats 101]
−
: note
+
* [http://www.w3schools.com/css/css_float.asp CSS Float] at w3schools.com
  
−
== Notes ==
+
=== CSS Positioning ===
  
−
A class in CSS is a "." --> .highlight
+
* [http://www.w3schools.com/css/css_positioning.asp CSS Positioning] at w3schools.com
−
An id in CSS is a "#" --> #highlight
+
* [http://www.barelyfitz.com/screencast/html-training/css/positioning/ Learn CSS Positioning in Ten Steps]
  
−
Spans and divs are TAGS
+
=== CSS Overflow ===
−
- Just like <h1> <img> <ul>
 
  
−
All tags can optionally have attributes of type class or ID
+
* [http://www.w3schools.com/cssref/pr_pos_overflow.asp CSS overflow Property] at w3schools.com
−
- <div class="header">
+
* [http://css-tricks.com/the-css-overflow-property/ The CSS Overflow Property]
−
- <div id="header">
 
−
- <h1 class="highlight">
 
  
 +
=== The CSS Box Model ===
  
−
; Title - http://url
+
* [http://www.w3schools.com/css/css_boxmodel.asp CSS Box Model] at w3schools.com
−
: note
+
* [http://css-tricks.com/the-css-box-model/ The CSS Box Model]
  
 
== Video Notes ==
 
== Video Notes ==
  
−
; Title - http://url
+
=== Section A ===
−
: note
+
 
 +
* [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 ===
 +
 
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_BrowserWebInspector.mp4 Using the built in browser tools to help you debug your projects]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_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/20130515_MPS-DP-B_CSSFloats.mp4 CSS Floats Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_CSSPosition.mp4 CSS Position Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_DivsAndSpans.mp4 Further clarification on divs & spans]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_CSSBoxModelOverview.mp4 CSS Box Model Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20130515_MPS-DP-B_CSSOverflowAndOverflowGallery.mp4 Building a quick gallery using the stuff we learned today]
  
 
== Files ==
 
== Files ==
  
−
; Title - http://url
+
* 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]
−
: note
+
* [[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 ==
  
−
'''Bold'''
+
# 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 with you to class next week .
+
# Style it (with CSS) further or make additional design changes.
−
* Description.
+
# Bring your web project folder to class next week.

Latest revision as of 11:32, 22 May 2013

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.

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 Positioning

CSS Overflow

The CSS Box Model

Video Notes

Section A

Section B

Files

Assignment

  1. Prep some of your images for the web using the techniques and tips shown in class.
  2. Rebuild or replicate (copy) the CSS Sliding Gallery we built in class and get your images in there.
  3. Style it (with CSS) further or make additional design changes.
  4. Bring your web project folder to class next week.
Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2013/Week_3&oldid=78"