Class:Digital Portfolio 2014/Week 4

Last Week

• Browser Develop Tools
• Divs & Spans -vs- classes & ID's
• CSS Floats

This Week

• CSS Normalized
• CSS Position
• CSS Offset
• CSS Sliding Gallery
• CSS Web Fonts
• CSS Background Images
• Tips for styling HTML headers

Notes

Image Processing & Image Renaming Tricks

In class we discussed a few different solutions for streamlining a photographers batch processing needs.

I have updated the Handy Utilities reference page for you here.

A Better Finder Rename (http://www.publicspace.net/ABetterFinderRename/)

Insanely quick and useful way to rename files and folders.

Trial download available from the website, also available in the Mac App Store here.

Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)

Fantastic image processing extension for Photoshop/Bridge

Direct link to download right here.

CSS3 Web Fonts

We discussed pretty much everything you need to know about CSS web fonts.

Reading/refresher materials

• Web Fonts at the Crossing
• Quick guide to webfonts via @font-face

Web Font Purchase (download options)

• Google Fonts
• fontsquirrel.com

Web Font Services (subscription-based)

• typekit
• fonts.com

TypeKit is now owned by adobe and the $50 membership is a free part of your Creative Cloud Membership.

Some Design/Type Inspiration

• Hoefler & Frere-Jones
• House Industries
• Lost Type Super awesome, super cheap, might be able to convert to web fonts.
• Beautiful (Google) Web Type

CSS Background Images

• CSS background-image Property at w3schools.com

Video Notes

Section A

• HTML & CSS Boot Camp pt1
• HTML Navigation Lists
• CSS Floats
• CSS Positioning
• CSS Box Model
• CSS Overflow
• HTML Thumbnail Gallery
• JavaScript Shadowbox Gallery

Section B

• CSS Positioning
• CSS Overflow
• Introduction to HTML5 Web Fonts
• Assignment Overview

Files

• The choppingblock / html-css-demos files will always be posted here from github.com here

Assignment

If you did not complete the codecademy.com assignment from last week, please do.

Review as many photo portfolio websites and themes as you can.

Study how they are broken down.

Study how the sections (photography) is organized.

Outline (written, on paper) what the goal of your website is.

Are you building a website for your thesis only?

Are you building your new professional site and featuring your thesis?

Wireframe (sketch) your website sections and your main navigation

Gather Content

Images

About Me / Contact Me - should be one page imho.

How will you link to (or feature) friends?

Blog?

Twitter?

Newslist Signup?

Instagram?