Approaches to teaching web building

I’m involved in teaching MA web journalism students how to make websites. The aim of the initial module is for the students to build a simple website of five or six pages using simple html, pictures, audio and video. In the second semester they build a bigger group website, then go on to do a web portfolio site.

In the past I’ve  taught the students  Dreamweaver with a bit of photoshop. This was ok in the days when layout tables were acceptable, but trying to teach css layout using Dreamweaver (in layout view!) is near impossible. It’s fiddly, annoying and certainly not WYSIWYG! And in the last year I made a real effort to emphasise code view and how important it really is. I was suprised at how many students actually got it!

So now my new approach is this: Ditch Dreamweaver and write some code!

Here’s what I did:

• Start with the basics of notepad, simple html tags ( p, h1/h2/h3, a, ul, ol, li, img and a) and a browser – using the workflow of edit >save >refresh. The browser is your best tool!
• Add the doctype stuff for compliancy
• Introduce CSS for common tags ( body, p, h, ul, ol, li, a:link etc..)
• Use Firebug/notepad to edit CSS

So the aim is to write content using correct html markup and get accross the idea that design and content are two different things.

Dynamics

Now, who builds static sites anymore? It’s safe to say that the vast majority of new site builds are database driven. So without using a CMS, I found a way to demonstrate that content can be discreet and can be used in different ways throughout a website.

So here’s what I did:

• Introduced the students to dynamic content using php includes, exploring the benefits and explained paralells with a CMS.
• Used includes to include header, menu, content and footer files in a html page
• Divide content within content files into variables e.g. title, body, image
• Build pages using content variables
• Page design using photoshop, tips techniques, slicing, exportin
• Then I built a little framework to get the students started.

I think most of the students have gotten to grips with all this. Next semester I’ll introduce them to WordPress and hopefully their primer in basic php will be useful for modifying templates.

2 Responses to “Approaches to teaching web building”

1. Andy says:

   December 11, 2009 at 3:05 pm

   That sounds like great stuff. Starting with some hand coding of CSS and a bit of php will really make wordpress easier next semester and they will really start to get big impact for that simple input.
2. Hadrian Cawthorne says:

   December 11, 2009 at 5:04 pm

   Thanks!
   Have got undergraduates to deal with next semester and 1 hour per week teaching time per group!

   Approach will be:
   Basic html tags
   CSS
   Installing WordPress
   Using Worprdpress
   Modifying WP templates