Web Development 101
January 14, 2004 8:31 AM   Subscribe

Some people at my work are asking for "web development" training. We are a nonprofit that gives away computers, and a part of their job is to understand basic software capabilities, to tell grantees about it. (The grantees are schools and non-profits.) The people I work with are not trainers, they just need to be more informed than the basic user. If you were going to teach web development basics to an audience of former junior high teachers and fundraisers, where would you start?
posted by pomegranate to Computers & Internet (17 answers total)
I would buy a subscription to Safari and load up on the web development books.

It costs something like 14.99$ per month for 10 books that you can swap out every month if you want.
posted by bshort at 8:40 AM on January 14, 2004

Response by poster: All of the online courses I've found focus on a particular language/platform. I'm more interested in teaching them how to think about building, maintaining, and updating a site, how to design something that will actually be used, and common pitfalls in design, maybe even something basic about the positives and negatives of various add-ons, languages, etc. This class could be something already build, or I might have to design the curriculum myself.

By the way, I know NOTHING on the subject; that's why I'm asking the experts.
posted by pomegranate at 8:40 AM on January 14, 2004

i would start with <html> and end with </html>
posted by chrisroberts at 9:31 AM on January 14, 2004

Response by poster: Chris, you may be kidding, but I agree than in terms of languages, they only need to have an understanding of how HTML works. Since our grantees don't have much $$ or technical sophistication, they will more than likely design and build sites themselves using readily available software like Frontpage or something. (I know, most of you are gagging, but this ain't art - it's just to build a little web presence for a 4th grade class on a reservation in South Dakota or what have you.)
posted by pomegranate at 9:40 AM on January 14, 2004

Don't teach them HTML, it's a waste of their time and would make things harder then they have to be. Show them how to export HTML using a program they already know, like Microsoft Word. If you have the luxury of having Microsoft Frontpage or (a lot) better yet, Macromedia Dreamweaver, teach them the basic principles of linking and design with these tools. I think your time is better spent teaching design over HTML.
posted by banished at 9:45 AM on January 14, 2004

Have them read Don't Make Me Think - a great primer on usability and design.
posted by ao4047 at 9:55 AM on January 14, 2004

I think your time is better spent teaching design over HTML.

I disagree. I think that without a solid grounding in the basics all the design skills taught will be pretty much worthless.
posted by gyc at 10:14 AM on January 14, 2004

maybe you should ask them what they want when they say "web development training."
posted by andrew cooke at 11:00 AM on January 14, 2004

I think your time is better spent teaching design over HTML.

I also disagree, strongly.

People need to understand the basics of HTML and web servers, else they are going to be making pages with dead links, broken images as well as overwriting important files.

Before anyone mentions any sort of WYSIWIG application, you should get them to understand the concept of HTML as a markup language and they should be able to do basic editing of HTML source in a text editor. If they can't do this, they'll be helpless when whatever WYSIWIG editor they're using commits some evil act deep in the source.

They need to understand how to use FTP (or whatever file transfer utility is appropriate) to transfer files from their own computers to the web server. And to understand that distinction.

Give them the bare bones basics and have them play with that a bit. Make sure they understand the basic concepts that underlie everything. With that foundation they'll be in a position to use any tools that suit them. Frontpage, dreamweaver, vanilla HTML, CSS, whatever.

BTW, I say all this having worked for public schools and with teachers. Design in this context will usually mean that there's a nice background image and an unnumbered list.
posted by ursus_comiter at 11:12 AM on January 14, 2004

I recommend your local Adult Education program. Likely to have beginner's courses at low cost. Potentially free, if necessary. Then I'd recommend you get them using blogs, which is another low cost way to learn by doing. I used to teach Adult Ed. courses, and had a wide range of students. I found that people learned most by doing, more than by reading or listening, and they were more motivated when doing projects that were meaningful to them. I also found teachers to be some of the most difficult students. Good luck.
posted by theora55 at 11:36 AM on January 14, 2004

I think your time is better spent teaching design over HTML.

I'm adding my weight to the disagreement on this issue. You'll wind up with an organization full of people who can't fix a thing when the code doesn't work.

Learning web design without HTML is like studying architecture without engineering, physics without math, or literature without basic grammar. Without the fundamentals, the cool stuff winds up just being crap.
posted by oissubke at 11:43 AM on January 14, 2004

Response by poster: So then what? Let's say we found a good online HTML course. Would that and "Don't Make Me Think" be good enough to get them started? By the way, I did ask what they're looking for and it's a) a survey of current tools, b) an understanding of HTML and it's context for the other tools, and c) design basics.

Thanks for y'alls help by the way.
posted by pomegranate at 12:02 PM on January 14, 2004

For next steps, my favorite answer is: Show them how to use view-source - as in, copy the source of a page they are interested in, and edit it and look at the results. Let them get their hands dirty by deconstructing the source of a page they know in a text editor, then viewing the rendered HTML in a browser. Instant gratification (or frustration), either way, I've found it's a fast way to demystify the whole thing for those who are apprehensive about HTML.
posted by kokogiak at 12:52 PM on January 14, 2004

Best answer: I teach web development/design/programming for a living. I think the HTML vs. GUI Editor debate comes down to an issue of time. How much learning time do these people have? Yes, it's MUCH better to learn what goes on under-the-hood. That way, even if they're working with Dreamweaver, they'll be able to understand why it works the way it does, what it's limitations are and how to get around them. But if they only have a few hours for training, they're better off learning a GUI tool, like Dreamweaver or GoLive. At least then they'll be able to crank out some web pages.

The great thing about learning web stuff is that, though there is a lot to learn, you can learn in discreet chunks. After you learn each chunk, you have a useful skill. And you can even stop at chunk four and never go on to five. You'll still be useful. If you tackle five, you'll be more useful still.

Here's a list of stuff to learn. I recommend learning it in order (though this could be fudged around with a little bit). It would be rare for anyone to learn the entire list, but web people should definitely at least know a tiny bit about everything on it, so that they can talk in meaningful ways with their collaborators.

1. HTML coding (using a text editor and a browser)
2. Web graphics (using photoshop/imageready or fireworks)
3. Cascading style sheets (using a text editor and a browser)
4. Javascript (using a text editor and a browser)
5. A GUI tool, like Dreamweaver (which will allow you to create HTML, CSS and Javascript content without having to muck around with code)
6. Flash design & animation
7. Flash Actionscript programming
8. XML
The above is about as far as most designers ever get (and most don't even make it to the end of the list). This is all front end (client) technology. The rest of the web involves backend (sever) technology. Here's some that you could learn if you want to move on to the next level. Even a designer should understand what these things are:
9. A CGI language, like Perl, Coldfusion, Server-side Java, PHP or ASP
10. Databases/SQL (Oracle or MYSQL)
11. Web commerce solutions

The list could go on and on, and I'm sure some people here might disagree with some of my specific choices or might want to insert some others. But anyone who learned all these things would be pretty valuable. And it is a reasonable amount of stuff for one person to learn, if he has enough time.
posted by grumblebee at 2:37 PM on January 14, 2004 [2 favorites]

I've made money teaching introductory HTML to high school kids and corporate types, and here's the progression that I used:

(1) Introduce markup. Take a piece of plain text like:

"The quick brown fox jumped over the lazy dog."

And ask people what they would normally do if they wanted to emphasize a word from it.... say, lazy. You'll get answers like underline it, boldface it, and italicize it (along with "draw stars next to it" and "highlight it in flourescent yellow"). So you show them:

"The quick brown fox jumped over the <b>lazy</b> dog."

Do it for underlining and italicizing too.

(2) Yes, I usually used physical markup first, since the concept of a semantic document is sometimes really foreign to people at first. But often I did introduce semantic markup at this by explaining that since they had come up with so many ways to emphasize text, maybe that said something -- people have their own ways of indicating emphasis. And that the people who designed HTML understood this, and understood HTML might even be read out loud rather than displayed. So they came up with the "emphasis" (<em> ) tag -- a flexible solution. A browser might have a default setting for how to indicate emphasis (and indeed, Explorer and Mozilla both choose italicising), but this makes it possible for an experienced web developer to override that and use highlighting for emphasis instead. Or for an experienced web user who decides he likes underlining better to use that. Or for a screen reader (a voice browser for the visually impaired) to simply speak louder -- a distinction that isn't as readily translated by the i,b, and u tags.

(3) Introduce the a number of the other inline elements, starting with the hyperlink. Definitely also introduce the image, and perhaps spend some time on how it can align/float with the flow of a paragraph of text. Pick a few others, like strong and code. Don't do span yet.

(4) Ask people to consider how most documents are organized. Sure, all documents are made up of text and graphics at heart, but how do we arrange them? This might take some thinking on their part and hints from you, depending on the crowd. Anyway, this is how you introduce paragraphs (they usually get this one), headers, lists, and semantic tables. Introduce body and html at this point so they can get correct documents. Make sure they understand the distinction between inline and block elements.

That's what I consider introductory HTML. Intermediate topics include the head tag and its children, and then basic css (used to redefine tag display properties), and then div and span tags, along with classes and ids. Advanced topics include forms if they need it for some reason, and then depending on your preference, choose which to teach first: complex CSS selectors and CSS positioning or table-based layout. But you definitely need to teach people both.

Then there's server and client side scripting, of course, and learning to use tools like Fireworks and Imageready and Dreamweaver and (*shudder*) FrontPage, but what I meant to outline above is what I've come to think works as a natural progression for learning to work with markup well.
posted by weston at 8:01 PM on January 14, 2004

posted by Pericles at 2:10 AM on January 15, 2004

I'd give them Jeff Veen's "Art and Science of Web Design" and Jesse James Garrett's "Elements of User Experience: User-Centered Design for the Web" and then teach them how to find good XHTML references on the web and how to use Google well in general.

The big concepts are the hardest part, and the technical references are always going to be more up to date on the web than in any class, so they can go and find out how to apply your lessons when they're on their own.
posted by anildash at 12:37 AM on January 16, 2004

« Older Rip Clips from DVDs   |   How do I separate my pharmacy school application... Newer »
This thread is closed to new comments.