Difference between revisions of "Class:Digital Portfolio 2014/Week 3"
Jump to navigation
Jump to search
(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 *...") |
(→Video Notes) |
||
| Line 67: | Line 67: | ||
=== Section A === | === 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 === | === 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] | |
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140528_MPS-DP_HTMLAndCSSToolsOverviewB.mp4 HTML/CSS Overview SectionB] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140528_MPS-DP_HTMLCSSBootCampB01.mp4 HTML/CSS Boot Camp 01 Section B] | ||
== Files == | == Files == | ||
Revision as of 20:46, 29 May 2014
Contents
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 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
Section B
- Animated GIF's and Cinemagraphs
- Image Compression Assignment Review
- HTML/CSS Overview SectionB
- HTML/CSS Boot Camp 01 Section B
Files
- The choppingblock / html-css-demos files will always be posted here 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.
