How do I give an interesting crash course on web design?

May 20, 2008 3:03 AM

I have a duty to teach my fellow peers the basics of web design, and I intend to not bore them to death. Where do you recommend I start?

By web design I mean from basic web elements, compositions, typesettings, colors and coding stuff in no strict order, preferably in less than 10 hours. I'm going the valid XHTML/CSS path, of course. Target audience will be a few computer-literate undergraduates with prior exposure to HTML and WYSIWYG-based designing (though I intend to allow no WYSIWYG tools).

I'm thinking of starting from the box model, and continuing with semantics and then CSS rules. But I don't have much experience with the art part, nor really skilled in those areas myself. Does anyone have a suggestion on how to deliver all this and make it interesting? Should some parts be skipped? Should I just stick with tables and <font>s in the beginning? Any resources you'd recommended (preferably with little text, to be gentle on the ESLers)—slides, cheat sheets, or inspirational sites?

Thanks in advance for all answers!

posted by semi to computers & internet (15 comments total)

Seriously: iWeb (if you have access to a Mac). So easy and intuitive. You can teach it in about 45 minutes and then get to the much harder problems: how do you structure your data, how does marketing work, and what are the basics of good design.

Whichever program you decide: DO NOT FOCUS ON HTML. It will bore the hell out of your students and I expect more and more "drag and drop" programs to come out that make it unnessesary to know.

Yes, knowing HTML is helpful. Yes, HTML is the building block yadda yadda. Yes, HTML is essential for pro web designers. HOWEVER, in the classroom there are more important fights (see first paragraph) and you have extremely limited time to pursue those fights.

ALSO: whatever you do: don't make the classic technology teaching mistake of "showing off" by instructing your students on the dozen ways to do one thing. Choose the easiest way to do it. Teach them that way and move on. This protects you from overwhelming the less-experienced (and having to know everything for the more-experienced). Get your students to working on their own projects as soon as possible--that's where the best learning happens.

For example: I teach my students Flash in 45 min, then they build their own site over the next 2 hours with me answering q's. This solves the biggest problem in the tech classroom: what to do with a variety of experience levels.

But seriously, if your students are not going to be pro web designers, give them easy tools that they can use fast. They will love you for that (and the ones who want to go on, can go on later).
posted by Murray M at 3:57 AM on May 20, 2008

I'd suggest starting with the bare-bones HTML of the page; it should be really simple and you could make it a bit more interesting/interactive by customising it based on class feedback, e.g. create a CV/resume of a fictional character, getting them to choose the character and provide suitably daft info to put into a document skeleton.

From there you can cover colours, fonts and font-sizes without difficulty, showing some hideous (green Comic Sans on a pink background) and tasteful examples that can be achieved with a few lines of CSS. The cover simple use of margins to give some page margins and control spacing between paragraphs etc., maybe drop in a nice background image, wrap the whole page in a container div to constrain/decorate it, and so on.

You could then maybe add a photo, float it to one side and perhaps present it nicely using a fancy background image of a frame or something.

Beyond that point it gets tricky, as you have to cover the box model, multiple floats, clearing floats etc. to do a more complex layout. You could perhaps cover a simple two-column layout, but don't get bogged down in anything requiring hacks (just float one box left, one right, clear floats).

If you want to show a couple of simple JavaScript effects I'd suggest using jQuery to just make a message fade in or something; obviously you can't teach them JavaScript but could give a taster of its most superficial capabilities.

Focus on actually doing things, show the effect, and introduce things like selectors, classes and IDs along the way when they're needed to achieve something. Don't teach tables and font tags (they're no easier anyway), don't start with the box model (too offputting), and give yourself enough flexibility to cope with the class being faster or slower than expected.
posted by malevolent at 4:34 AM on May 20, 2008 [1 favorite]

Is this a lecture or an interactive class? If there's any way to make this happen, I would get the students on computers. That's how I used to teach webdev, and it was remarkably successful and fun.

I started them off with Notepad and a browser. I got them to create a very simple page. We gradually added more and more features to it, making it more and more complex and interesting. Students really got into changing the source file and hitting refresh.
posted by grumblebee at 4:56 AM on May 20, 2008

Lead them through the Maricopa Community College HTML tutorial.

It's the best introduction to HTML that I have seen.
posted by jayder at 5:48 AM on May 20, 2008

A few clarifying questions:

-What will you expect these students to be able to DO at the end of these 10 hours? What will they walk out knowing how to do?

-Will this be you standing in the front of the room and demonstrating? Or will the students be on computers?
posted by jeanmari at 5:54 AM on May 20, 2008

Seconding basic HTML with a text editor. I have taught this from 6th to 8th graders (and I'd say over the course of 10 hours, too) and had them doing proper CSS by the end of it.

Collaborative tools such as SubEthaEdit are also very handy - you could hand out pre-printed snippets of code to your students, and watch as they try to get them into the correct order.

Also, I would say it is very important that you explain design over function. Create a functional XHTML document with the necessary information first, and then rely on CSS for the prettification.
posted by jim.christian at 6:06 AM on May 20, 2008

Should I just stick with tables and s in the beginning?

It's been said already, but no, for the love of god, no. Why teach them this out-moded way of thinking which will be harder to unlearn? (Many professional web designers are still struggling to do just that.)

The css cheat sheet is a good resource they can take home:
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/

Looks like there are others:
http://www.ilovejackdaniels.com/cheat-sheets/
Though I haven't used them. Bet the HTML one would be useful as well.

You might want to check out "Transcending CSS" by Andy Clarke. He's got some pretty good examples that use standard compliant XHTML and CSS, and overall, very striped down code. I can see a few of his examples being a good single piece to show. Also a great book to recommend to them.

As for how not to bore them, Murray M.'s system has the right idea. Get them to the point where they have a finished "product" as quickly as possible. The sooner they have something they can look at as accomplished, the more interested they will be. That doesn't mean quickly glossing over important things, but choosing exercises that are simple enough to get through without struggling much.
posted by [insert clever name here] at 6:38 AM on May 20, 2008

I'd start by discussing what HTML is, and from an early stage mention that HTML is for content/structure, CSS for appearance. Get that split in their heads early (you could even mention Javascript for behaviour), and it should make things easier - no need to explain font tags etc.

Start with the basics, stuff that makes sense. i.e. tags. Need html, head and body.

Briefly explain DOCTYPE etc., but basically start them off with XHTML 1.0, and suggest they just copy and paste your example head into their body.

Note the way in which CSS is linked to, so you can refer to using CSS later to style the document. Just show them one way, and come back to the pros and cons of other ways later on.

Explain the concept of divs and ps. The latter should be easy. Explain h1 (etc.) tags.

At this stage, get them to write a simple document, with a few headings and paragraphs, that validates.

(You could even get them to create their own biography - you can add in pictures etc. and link to each others if you have hosting. Having a project to work on throughout the course of this 10 hours would make everything fit together better than an abstract concept of ideas. They could have three divs. - name, education, other. Then you could later experiment with positioning and floats etc.).

Introduce links and images. Get some content on the page, which you can play with later.

Then start with basic CSS. Background colours, fonts, borders etc. Just so that their page is more visually interesting (and so that when they start on positional stuff, they can see where the elements are, and what space they take up). This is also probably a good time to introduce the box model (correct version).

Introduce id and class, and the cascade. Get them to play around with this. Try and get across how the cascade is more efficient etc. than manually targeting each and every element.

Move into positional CSS - as they can now see they effects of what they do on screen, they'll be able to get it more quickly. Use extremes at first - massive padding, margin, etc. to get your point across.

By now, I reckon they've pretty much covered the basics. I think it's important for them to have a good grasp of these before they start delving deeper into various questions (em or px etc? Fixed or fluid etc.?), as it will help them appreciate the issues.

Essentially, start with the building blocks and get some content up there quickly.
posted by djgh at 6:41 AM on May 20, 2008

I would second the advice that you should not teach bad habits. Perhaps mention that there's the old-and-busted way of building web pages, but you are teaching the new hotness.

Early in the talk, briefly cover how HTML is supposed to be written properly (closing tags, structural tags, etc). It's possible that your students know enough to get a web page up, but not enough to build it right. Show them the validator. Be prepared to expand this section on the fly. Talk about the difference between IDs and classes.

I wouldn't start getting into CSS until I felt they understood the HTML well enough. Show them the CSS Zen Garden, which powerfully illustrates how exactly the same underlying HTML can be styled in completely different ways. Perhaps pick out a few particular examples beforehand that are strong contrasts.

The box model is important. Floats are important. Position is everything. Selectors are important. I'd illustrate how the same common two-column design can be achieved using floats and using positioning, and discuss the pros and cons of each. Discuss the units (em, px, pt), why to use one or the other. Discuss liquid vs fixed vs semi-liquid layouts and pros and cons of each. At least mention things like descendant selectors, attribute selectors, etc, so the more interested students know to look into that. Stuff like colors and type effects are important too, but more intuitive (IMO) and don't need as much attention.

If you really want to get fancy, talk about grids. Talk about how the best-practice in assigning classes/ids has been to use meaningful names, and how Blueprint CSS kind of violates that.
posted by adamrice at 7:12 AM on May 20, 2008

I will be working with them on the computers. I don't know if a few (like 2–3) students can be called a class. There will be very little variety of experience. The point of this crash course is to enable them to tackle projects on their own, on the level of simple to not-so-complex client-side web design (no JavaScript, Flash, etc.)

Re. suggestions to have actual projects to work on: that's a neat idea, thank you! There's a real-world one ready, actually, and it's pretty simple (an e-newsletter) it should make a good example.
posted by semi at 7:15 AM on May 20, 2008

Seconding jeanmari's questions. If you are lecturing, hopefully you will be able to show examples of good and bad design on a screen in front of the room.

If your students will be working on a computer and following along with your examples, then here are some tips:

- Allow more time than you would think for them to type in code. I'm continually surprised by how long it takes some people to type in the simplest things. And just because they are "computer literate" doesn't mean they type fast, or that they even know how to run Notepad. Sigh...

In fact, if possible, your examples should have most of the unimportant parts already typed in, depending on how far along you are in your class. So the early examples don't have anything, later examples have all the major elements already there (html, title, head and body tags) and the student fills in the parts that you are currently discussing. Or make sure your examples build on each other, but this takes a lot of prep work on your part, unless you have access to a textbook that you can copy from.

- If you can get them using a text editor with some syntax highlighting, YAY! This will help immensely during class. I like UltraEdit, but there are a million of them out there. I think these are better than Notepad for classroom situations, because it's a lot easier to say "Look at the tag highlighted in green on line 27", than to say "Find line 27" ... wait while they count ... then "look at that part that has the less than sign followed by the letters i,m,g" and by then someone has lost their place and is asking their neighbor where you are, and pretty soon everybody is lost and you have to repeat yourself again and again.

- Use Firefox with the Web Developer extension, so you can easily show them which tags go with which screen elements, and turn on and turn off tag displays. Very awesome, although be careful not to get caught up in teaching how to use the tool rather than web design.

- Make sure your examples work. Know them inside and out so you can correct errors in your students' code.

- My favorite HTML/CSS books lately are from Sitepoint: The Art and Science of CSS and The Principles of Beautiful Web Design. Both are intended for folks who may be good programmers, but not necessarily good designers.

don't make the classic technology teaching mistake of "showing off" by instructing your students on the dozen ways to do one thing.

Oh my god, yes, YES, YES!!!! Be concise, be succinct, and avoid just running off at the mouth. Nobody cares how you did things two or ten years ago, nobody cares that there are ten million ways to do the same thing. Give them the best practice and be done with it.
posted by SuperSquirrel at 7:31 AM on May 20, 2008

Learn by example. Give them a project to build over the course of the class, like a very small personal webpage.

This is a *great* beginner HTML + CSS book -- very brief, has a ready-made project in it: Creating a Web Page with HTML: Visual QuickProject Guide (Paperback). It was the first thing I used to teach myself HTML and I'm an advance web designer at this point. It's a little on the old side (2004) but I think the very basics of html & css haven't changed too much in the last four years.
posted by MaddyRex at 7:57 AM on May 20, 2008

Do: div/span, box model, classes/ids, basic CSS, floating/clearing.

Don't re-teach them HTML, don't try to teach them everything about CSS. Show them a color picker, which they can use to get complements, etc, like this one. Show them the common fonts that they can use. Remind them to use proper whitespace. They should then be able to design an "e-newsletter" with reasonable competence, and will have the framework to learn more things. If your students are smart, there's no reason they'd need 10 hours of teaching for this stuff, but they could certainly use 10 hours of practice. For yourself, make sure you're ready to deal with lots of messed up floating issues.
posted by beerbajay at 8:22 AM on May 20, 2008

A few additional, and more specific, thoughts.

Teach them a few tricks and common pitfalls. Things like margin-collapse and the fact that floated elements don't have height (these two points will save a lot of grief). How to use an absolute-positioned element inside a relative-positioned element. Use 1px colored borders on everything to make the structure visible (Firebug can do this for you, I think, or you can hand-code it).

Also, while it's outside of HTML/CSS, you should introduce them to the concept of includes (PHP, Apache, whatever), because it makes maintaining >1 web page so much more efficient.
posted by adamrice at 8:34 AM on May 20, 2008

FYI.. SitePoint is giving away a free Photoshop for web book for 30 days.
posted by nimsey lou at 5:28 PM on May 20, 2008