Class:Digital Portfolio 2014/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

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

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. Complete lessons 1, 3 and 5 here (7 is extra credit).

codecademy.com/tracks/web

Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2014/Week_3&oldid=199"