Christian Montoya

Teaching Web Design, part 2

This past week, the flood gates opened: intro to CSS. Not CS:S or CSS, but CSS… the one I really like. We knew it would be tough. Introducing a fresh technology to students who know very little about computer science and still think far too visually when it comes to websites is never easy.

Our first project for the students is a small homepage, 3 to 5 pages in all. Last year we had it all as one assignment and too many students spent too little time on the CSS aspect (some even used tables for layout). This year we decided that in order to really get the students thinking in terms of markup and semantics, we should split the project in 2 parts; the first is to submit only the XHTML, without any visual design, and the second is to submit the full site with CSS.

The first part is due tomorrow night and we made it very clear to students that they would not be allowed to submit CSS files or use inline CSS to affect the appearance of their sites. Seemed simple enough. Imagine my surprise when students started asking things like, and I paraphrase: "since we can't use inline CSS, can we use font tags to change the font of our pages?" or "can I put my page/navigation bar in a table to get things side-by-side?" or "I set my background to black, how can I make the links another color without CSS?" or "I put align on my divs and the validator says that's not okay, how can I align the divs?"

All I can tell my students, and I do keep telling them, is to stop thinking about the appearance of their pages. Just put the content in, make sure the markup is right, and be done with it. No font tags. No tables. No colors. No align. I even showed them an example of a vanilla XHTML page so they would have an idea of what their assignments should look like. And still, I am petrified as to what they will turn in tomorrow. It is just so hard to get people to stop seeing the web as a purely visual medium, and even though we have touched upon device independence and machines like the GoogleBot, we really haven't been able to show them what that means. I may have to depend on blind people as my example to get them to stop thinking with their eyes. There used to be a very good demonstration on the web of a screenreader in action, but I can no longer find it. I would love to find it and show it to my students; it's an eye-opener.

So back to introducing CSS, I was in charge of the lesson plan for last friday's section, which just so happened to be an introduction to id's and classes, and colors and fonts in CSS. I also prepared an exercise for the students to do. It took me a long time to put this plan together, because I really had to think about what I could and couldn't present to my students. For one thing, I couldn't mention things like combining classes and id's, or using multiple classes, or even get into inheritance. And I definitely couldn't explain how id's are used with DOMscripting. I have a constant struggle against what I can't present to my students, because they are not yet at the level to understand the complex points and there is not enough time to get them there. We are basically teaching CSS in two weeks, and like I already told my students, you could not teach the entirety of CSS in one year. For friday's section, I stuck to simple examples, and I even used basic CSS without any shortcuts at all in my examples.

The fun part about preparing the section was the exercise; I decided that the best way to introduce CSS to these students was to have them write their own CSS, even if it was only for a short while, so they could ask questions and get familiar with it. What I ended up making was a sample page with a couple floats applied to put the content in columns and then I took this page and made a solution design with CSS. I then took a screenshot of this solution and put the CSS file away. In section I presented the sample page and the screenshot to the class and said, "you've seen all the examples and you have references where you can look up CSS properties, now make this sample document look like the screenshot."

Like I said, the flood gates opened, and it was fun. Students were caught up over a billion things; they made a lot of typos and confused rules, they didn't recognize the fonts I used (and I made the mistake of not giving them a list), they had trouble working with the one background image I used, and so on. Despite all these problems, the 15 minutes they spent working on it was very valuable, and I was able to answer a lot of questions students had. I can now say with confidence that all the students are at least slightly familiar with CSS files and will not be attempting them for the first time when they start the next phase of their projects.

One thing I haven't mentioned was that I made an advanced exercise for the students as well. The advanced exercise was about 9 "challenges" for anyone who already knew the basic things we were doing. It was actually rather unfair for me to make these challenges, especially since no one was able to complete them. To give you an idea of how unfair these challenges were, here is one of the solutions:

h3:hover~h3 { color:yellow; }

The exercise is packaged as a zip file which you can download here: (225 kb). Obviously this is creative-commons-attribution, so share if you like. The comments in the source should explain everything.

If I didn't mention it already, the past two sections that I have had the pleasure of teaching have been a lot of fun. If you happen to be looking to hire a professor to teach web design at your college or university, and you plan to pay this professor a hefty salary, and you are located in a nice place like Germany, then please, send me an e-mail. Thanks in advance.

Thank you for reading • Published on September 9th, 2006 • Please take a moment to share this with your friends