Updates on Project 3

The syllabus is slightly incorrect – we will meet at class time on the 19th to review the final projects, but there will NOT be class on the 17th, as it is exam week.

Project 3 should include the following elements/features:

Typography
* using @font-face or some type of graphic substitution hack (Sifr, Phark, etc.)

Layout
* use a method you did not use on a previous project for at least one of your pages (i.e., if you used absolute positioning last time, use floats, etc.)

Use at least 2 CSS3 functions:
-text or box shadows
-rounded corners
-pseudo classes (nth child, :hover, etc.)
-multiple backgrounds
-multicolumn layout
-any other CSS3 functionality
(Use adapted code for all supported browsers -moz- or -webkit- type prefixes and understand how it will degrade into unsupportive browsers, like oh, I don’t know… IE maybe)

Fixes for non-compliant browsers (yes, I mean IE)

List of overall compliance and a good survey of mobile browsers:

http://www.quirksmode.org/

List of fixes for IE6 (you probably won’t design for IE5 accomodation:

http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

List of fixes for IE7:

http://www.ensight.org/2006/08/list-of-ie7-css-bug-fixes/

List of bugs in IE 8 (I don’t see that he has fixes, but this is a good reference to see if it’s an issues with IE8 to start with. Most bugs are given a cute name, so then you can google on it).

http://jhop.me/ie8-bugs

Other CSS fixes:

http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

Most useful for the links to other tutorials:

http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/

Media Queries and a Responsive Web Site

This is from our friends at A List Apart and Ethan Marcotte, who wrote about fluid grids:

http://www.alistapart.com/articles/responsive-web-design/

and a more practical and less conceptual version from Smashing Magazine:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

And a fairly dry but reference-y version:

http://reference.sitepoint.com/css/mediaqueries

Set up your student personal website

Here’s a PDF for how to set up your student personal website space on JCCC:

enable-web-publishing

Here’s a tutorial on how to upload using Filezilla (same as you use with the homework folder):

http://www.thesitewizard.com/gettingstarted/howtoupload.shtml

Here’s a YouTube video showing how to do it with Filezilla as well – it’s a little long ~ 10 min.

http://www.youtube.com/watch?v=yr_u2iKfAt0&feature=related

Text effects summary with text-shadow

http://www.w3.org/Style/Examples/007/text-shadow.en.html

There’s a “glow” option in there…

Creating patterned backgrounds with CSS

To make checkerboard, striped and other repeat pattern backgrounds:

http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

Fonts, Fonts, Fonts

A nice overview of how to use the @font-face code:

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Free and cheap type foundaries:

www.google.com/webfonts

http://www.youthedesigner.com/2010/04/06/free-web-2-0-fonts/

http://www.fontsquirrel.com/

Subscription:

http://webfonts.fonts.com/ (you can sign up for a free account with access to about 2,000 fonts, limit to 25K views per month and you have to show their badge –ad on your page.)

http://typekit.com/ (I love their fonts, but don’t know anything about their webfont service)