Class:Digital Portfolio 2013/Week 3

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search

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"