Difference between revisions of "Class:Digital Portfolio 2014/Week 4"
Jump to navigation
Jump to search
(→Assignment) |
(→Video Notes) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 65: | Line 65: | ||
=== Section A === | === Section A === | ||
| − | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLCSSBootCampA01.mp4 HTML & CSS Boot Camp pt1] | |
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLNavigationLists.mp4 HTML Navigation Lists] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSFloats.mp4 CSS Floats] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSPositioning.mp4 CSS Positioning] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSBoxModel.mp4 CSS Box Model] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_CSSOverflow.mp4 CSS Overflow] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_HTMLThumbnailGallery.mp4 HTML Thumbnail Gallery] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140602_MPS-DP_JavaScriptShadowbox.mp4 JavaScript Shadowbox Gallery] | ||
=== Section B === | === Section B === | ||
| − | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_CSSPositioning.mp4 CSS Positioning] | |
| − | + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_CSSOverflow.mp4 CSS Overflow] | |
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_IntroductionToCSS3WebFonts.mp4 Introduction to HTML5 Web Fonts] | ||
| + | * [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20140604_MPS-DP_AssignmentOverview.mp4 Assignment Overview] | ||
== Files == | == Files == | ||
| Line 77: | Line 86: | ||
== Assignment == | == 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? | ||
Latest revision as of 22:19, 5 June 2014
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 Font Purchase (download options)
Web Font Services (subscription-based)
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
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?
