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:

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

* 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)

Posted in Uncategorized | Leave a comment

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

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


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


List of fixes for IE7:


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


Other CSS fixes:


Most useful for the links to other tutorials:


Posted in Uncategorized | Leave a comment

Media Queries and a Responsive Web Site

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


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


And a fairly dry but reference-y version:


Posted in Uncategorized | Leave a comment

Set up your student personal website

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


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


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


Posted in Uncategorized | Leave a comment

Text effects summary with text-shadow


There’s a “glow” option in there…

Posted in Uncategorized | Leave a comment

Creating patterned backgrounds with CSS

To make checkerboard, striped and other repeat pattern backgrounds:


Posted in Uncategorized | Leave a comment

Fonts, Fonts, Fonts

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


Free and cheap type foundaries:





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)

Posted in Uncategorized | Leave a comment