Using CSS Zen Garden as a Teaching Tool For New Web Designers

Filed under School, Web Design by Chad | 13 comments

I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing

Posted on February 15, 2009

13 comments

1. Vuji Feb 16

   Here is the link to my CSS Zen Garden which I still use in my portfolio even after I had Chad’s class… which was… 2… no 3 years ago? I think… hmmm…

   Fun project overall. Definitely interested in doing another one if I ever find the time.

   Vuji’s Music CSS Zen Garden

2. darbo Feb 17

   Very cool stuff for css designing, thanx

3. David | WebModia Web Design Feb 18

   I think using CSS Zen Garden as a teaching tool is a great idea, and you’ve definitely taken a unique approach here using existing sites as inspiration / design models and “skinning” the Zen Garden markup with those designs. Never thought of doing that!

   A few comments / questions which occurred to me as reading:
   * While this method you’ve detailed is a great way to focus on CSS, you do cover at some point in your courses, I hope, the importance of developing the semantic structure for markup.

   You can’t disconnect CSS from the concept of properly written markup. Indeed, the only way to truly separate design from content is to in fact understand the importance building the design on top of a semantic foundation.

   * I would disagree with your suggestion to work first with typography, then working your way out to element positioning. In my experience, the best way to ensure a flexible build (and well-organized CSS file) is to build using a “top-down” approach wherein you first define and position the general page sections (typically, the main divs), next the drop in the major background images and design embellishments across those sections, and then work your way progressively inward to the minutiae of design details. Typography would actually be the last styling that I would do… but to each his own!

   * While I believe academic institutions will always struggle to stay up-to-date with the cutting edge best practices of the industry – curriculum simply can’t be updated that quickly, do you agree? – I’m glad to hear of yet another university-level web design course that is promoting CSS (and I’m assuming, standards-based) design techniques. Only so many doing this that I’m aware of… Good work!

4. Chad Feb 18

   David,
   Thanks for stopping by and for the feedback.

   * This project is indeed for focusing only on the CSS. We discuss why the markup in the Zen Garden is less than ideal for real world approaches due to it’s verbosity, excess spans, extra divs, etc. Semantic markup is addressed in other projects and through lectures.

   * As far as the progression goes, I find it easier to at least get the type close to the intended target, because if left default, assigning padding, margins and dimensions and placement is difficult to judge. Your point is taken though about the focus on details, it may very well be needed to go back and address the smaller things with a more fine approach on a second pass once the placement is done.

   * Curriculum is difficult to shape quickly, yes, but the curriculum usually (at least in my case), only dictates that topics be covered… i.e. CSS must be taught in a certain class. It doesn’t however, state that CSS must be taught using a particular dogma or set of tools. It does amaze me to learn of examples of students taking web design classes that don’t focus on standards, instead using horrible JavScript rollovers, tables and image maps as viable web design tools. What a waste of time, money and bandwidth for all those involved.

5. Vika Feb 19

   Thenks. Very cool post becouse I only begining

6. CSS Perk Apr 6

   Wow, great assignment. I used to mess around like that just on my own so I could learn more. It works great and you discover quickly what works and what doesn’t. Sounds like you’re a great teacher. Keep it up.

7. Taina P. // Sitegrinder May 5

   Wow, that is such a beautiful and helpful website. I think it’s a great tactic, on your part, to teach CSS through the aid of CSS Zen Garden. I’m checking out the submitted entries and they are mind-blowingly beautiful.

   I might try to create one myself. Thanks for the link!

8. Web Apps May 5

   Once you get the hang of CSS, there is no other way to go.

9. marc May 26

   Hello,
   Very nice article for CSS designing….

   Thanks
   Marc

10. Search Engine Jun 3

    Great way of motivating people to learn a great skill. Hats off to you

11. Betsy E. Beatty Dec 6

    I am experiencing a problem with viewing your blog correctlly in the most recent release of Opera. It looks ok in IE7 and Firefox though.Hope you have a really great day.

12. Jacquetta Ellerbee Dec 30

    Hi i read your blog often and thought i would say all the best for the New Year!

1. Friday Designer Resource Links | Web Design

Leave a reply