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

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(→‎Video Notes)
(→‎Assignment)
 
Line 83: Line 83:
 
== Assignment ==
 
== 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]
−
# Style it (with CSS) further or make additional design changes.
 
−
# Bring your web project folder to class next week.
 

Latest revision as of 18:50, 1 June 2014

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"