Class:Digital Portfolio 2014/Week 3 - Revision history

Matthew: /* Assignment */

2014-06-02T01:50:41Z

‎Assignment

Matthew: /* Video Notes */

2014-05-30T03:46:00Z

‎Video Notes

Matthew: Created page with "== Last Week == * Prepping Images for the Web * Tools: Text Editors * HTML / CSS Review == This Week == * File Backup Strategies for Photographers * Browser Develop Tools *..."

2014-05-27T22:26:38Z

Created page with "== Last Week == * Prepping Images for the Web * Tools: Text Editors * HTML / CSS Review == This Week == * File Backup Strategies for Photographers * Browser Develop Tools *..."

New page

== Last Week ==

* Prepping Images for the Web
* Tools: Text Editors
* HTML / CSS Review

== This Week ==

* File Backup Strategies for Photographers
* 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 [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 ==

=== Section A ===

=== Section B ===

== 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]

== 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.

@@ Line 67: / Line 67: @@
 === Section A ===
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140527_MPS-DP_dataBackupForPhotographers.mp4 Data Backup Solutions for Photographers]
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140527_MPS-DP_HTMLAndCSSToolsOverviewA.mp4 HTML/CSS Overview SectionA]
 === Section B ===
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140528_MPS-DP_introductionToCinemagraphs.mp4 Animated GIF's and Cinemagraphs]
+* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140528_MPS-DP_imageCompressionAssignmentReview.mp4 Image Compression Assignment Review]
 == Files ==

@@ Line 83: / Line 83: @@
 == Assignment ==
-# Prep some of your images for the web using the techniques and tips shown in class.
+# Complete lessons 1, 3 and 5 here (7 is extra credit).
-# Rebuild or replicate (copy) the CSS Sliding Gallery we built in class and get your images in there.
+[http://www.codecademy.com/tracks/web codecademy.com/tracks/web]