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: christianmontoya_practice.zip (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.
3 Trackbacks/Pingbacks
- Pingback: Christian Montoya » Teaching Web Design, part 3 on September 16, 2006
- Pingback: Spead the Word About Standards - Monday By Noon on September 25, 2006
- Pingback: Spread the Word About Standards - Monday By Noon on September 25, 2006
With only two weeks available, I think I would reserve any discussion of px for the last day, first training them to think relatively before introducing the idea that there might be any other way to think.
Definitely. I think I managed to avoid mentioning PX at all last Friday.
imported stylesheets, IE Conditional Comments, allowed hacks, media attributes. Semantics, FOUC, when CSS is loaded, styling text, styling images, headers, containers, footers, readability, which fonts are available on Mac, PC, Linux, IE WIN bugs, Opera Bugs. Better would be if they bought some real advance books like Bullet Proof Webesign from Cederholm or CSS Zen garden by D. Shea and Molly. It would help to get them more nosy
Well, they have "Head First with XHTML & CSS," which is supposed to be good (I've never looked at a CSS book). I definitely want to recommend more books to them, and I'll start with those.
I thought I would ask these since you're in Academia. Do your Lessons express the need for validation? Do others?
Valid XHTML is a requirement for all assignments in this course. It has been covered in lectures. The students might not know about the whole Pandora's Box of mime-types, but they at least know how to think in terms of well-formed, semantic markup. It's not the most ideal way to go but it's not up to me to change it.
I teach Web development including CSS and X/HTML (among other things) at a university here in the U.S. and I've had the same experience: students really want to start with visuals. They don't think in terms of semantic markup, but they do understand columns, headlines, images, typography and so on.
I've had some success just embracing this attitude and STARTING with the CSS, using exercises like the one you did in the second week. I then have them create several designs (a la Zen Garden) using the same XHTML. I've found that this gives the students an appreciation for the markup and lets them see the benefits of well-formed, simple markup. This usually makes them turn their backs on tables and other hard-coded HTML formatting.
It's also a really good idea to start the class off with something really fun–like the CSS exercise you did–cause that makes the students REALLY get interested and involved. I love your CSS exercise (but that poor lamb).
If you're looking for a good intro to CSS book…(shameless plug)…you might check out my new book, CSS: The Missing Manual. Lots of hands on tutorials, and covers CSS from soup to nuts. Good luck with the classes…and thanks for the posts.