home & schedule | class blog | syllabus | contact | grades

Link your original page to an external stylesheet,
then look at some templates,
their presentational rules and their structural objects.

First, do your Task 02.02

finish Task 02.02 | link to CSS by applying some CSS rules to your hard coded page

Then, find a CSS template you like:

Free CSS3 Templates offers a variety of elegant, but straightforward templates,
and Free HTML5 Templates had even more.
A more challenging, responsive, template example can be found at W3Schools.

There are also other resources (though you may find others in other locations as well):

HTML5 Up or
Open Design Community website or
Free Open Source Web Designs or
OS Templates Premium & Free Website Templates - CSS / (X)HTML + PSD or
Snapp Happy's 98 CSS WEB TEMPLATE DESIGNS to choose from ...,

where one can find

XHTML and CSS based free web design templates available for download.

CSSZenGarden, a place where one can obtain free CSS stylesheets.

The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

CSS Trappist Monastery - built on same model as CSS Zen Garden

These latter two are interesting to look at, but I would recommend you use the first three resources if you wish to use a template.

To prepare yourselves for the CSS practice session

think about your editor options

There are many free editors, beyond the text editors we have been using

• for Windows
• for Mac

presentational layer | in practice | 02.02 | planning | next session