If you had to break web development down into 5 topics to teach children...

[xvszero]

What would you choose and what would be your approach?

I may have an opportunity to teach some after school computer enrichment classes to kids, ranging from 5th to 8th grade. It would be six 1 hour sessions, so I couldn't really do much hardcore teaching, basically it'd just be giving a taste. It's up to me to come up with the curriculum so I'm thinking of narrowing it down to something simple like "website development" and then taking 5 days for 5 topics, and using the 6th day to just let them keep working on their websites and finish everything up.

This would be a pretty good learning opportunity for me too, as I'm currently in grad school studying to be a teacher and I've been thinking about being an elementary computer teacher.

I'm thinking something like...

1. graphics
2. mark-up language (HTML)
3. client side language (JavaScript?)
4. server side language (PHP)
5. databases (MySQL)

Does that sound about right? Keep in mind these are children and I don't have much time with them, so I'd be keeping it very, very basic.

Also I don't think I get a budget for this, so I'd be using free software. Any ideas there? Right now at home I use the Gimp for graphics, and the Wamp server for PHP/MySQL. I guess that would pretty much cover everything I'm planning on teaching?

[xvszero]

Oh, and I want to do some hands-on tutorials with the kids. I'm planning on setting these up myself, but does anyone know of any offhand I could look at for inspiration? I'm talking really step by step stuff that assumes the users don't have much background knowledge, and lets them actually make changes and see results within the tutorial itself...

[Declan1991]

I'd cut the graphics, and possibly the database, and focus on HTML, CSS, and PHP, and perhaps a very slight bit of JavaScript, just to show that it's there. I would also encourage that you show good accessible techniques towards the end, for example, simple semantics like having headers in <hx> tags and navigation in lists etc. I would also be tempted to show them how the web can be used without a keyboard, or mouse, or in a text-only browser etc.

[tirna]

I would initially leave out "Graphics" as well (asuming you mean graphic design etc).

I was originally taught in your remaining order and would advise the same:

1 - HTML/CSS

2 - Javascript

3 - PHP/database connectivity for web pages.

I would also encourage the kids not be taught to use tables (especially nested tables) for web page lay out but instead be taught to use appropriate html elements (semantically correct) and css to layout web page content.

[xvszero]

Well I have to meet with the organizers first and see what the details are but I think this is more to get kids interested in "computers" (and you know, keep them off the streets after class) than it would be to teach WEB DEVELOPMENT (they can get into that in high school), I just sort of narrowed it down to web development myself. And I think a lot of kids are interested in the artistic elements of graphic design more than they would be just straight up text/code, so it seems like spending a day on that would be pretty beneficial and give them a fuller scope for the various elements of putting together a basic web page.

I know when I was making my first web pages long before any formal education, I was using MS Paint all the time. I didn't even know there were better options, but I did know that I wanted very specific graphics on my sites...

I can't believe I forgot CSS though, that definitely has to be in there somewhere. Hmm. At first I was worried about filling up 6 classes but honestly, now I'm like... IT'S SO LITTLE TIME!!! But I think it's ok to just touch on a bunch of stuff, and give them resources to follow up more on their own if interested.

[Declan1991]

With that, I might revise slightly. You could teach a graphics manipulation programme one day (GIMP is free so I'd go with that), basic HTML and CSS another, as well as a mention of places with free hosting along with suitable caveats. I wouldn't bother with a server-side language because that probably won't be much good to them, but JavaScript for an hour would be a good introduction to programming. The most important thing I'd say though, is that you give them the opportunity to learn more. For example, you could show them how they could work through w3schools tutorials on JavaScript (probably by doing a few with them), which would mean if that interested them they could continue. The same with HTML, graphics.
You'd probably want a word processor there as well. While I use plain text a lot (Vim and Emacs), Open Office (since it's free) would be far more helpful to them, allowing them to complete projects if necessary etc.
My final advise to you would be to plenty of choice. If they are getting sick of grey-scaling pictures, move on. It mightn't be a bad idea to ask on day one, is there anything you'd like to learn, and if you feel it's feasible, you could do it later. Also, try to get them used to figuring things out on their own. For example, rather than learning off by heart that you click a certain button to bold text, learn to go to the appropriate menu to find button.

[spotted zebra]

GIMP is great for free image manipulation. I would recommend Notepad++ on windows for text manipulation, i really like it. if you are going for really free like linux you don't even have to worry about it, gedit is probably my favorite code editing program.

as for the actual class i would say spend a decent amount of time on HTML because kids are visual and if they can see a result they are much more likely to become interest. whereas if they are coding php or javascript it is, in general, more coding (kids would think boring text work) and less appearance (kids thinking ooohhh aaahhh). you have to get them hooked with html and let them ask or go searching for more functionality and power, e.g. php and javascript.

free hosting sites will be a huge plus and when they publish their site no matter how amateur it will be the sense of accomplishment for them will leave them craving more. you may also want to stress that the internet is dangerous and not to post personal info on it.

good luck sir this sounds like a really cool project. what age group are you teaching?

[handcraftedweb]

6 days? I'd forget about anything server side (save that for the advanced class) and just focus on client side stuff. Just HTML and graphics. Trying to insert PHP in HTML when you don't really know HTML will make their heads spin. I wouldn't mess with JavaScript in the first week either. They need to have a decent grasp of HTML before they can think about embedding other languages within it.

...Mike

[Inga.]

That course layout might be a bit ambitious for a 6 hours course with children. One hour per day will probably be more like 40 minutes after starts and stops, question, computer problems and so on. I used to run teaching sessions with adults and there were always a lot of delays and such.

Contrary to the other advice, I'd definitely keep the graphic design portion in (not how to make graphics per se, but how to understand the concept of designing a site). Design is the most important step in site creation.

For graphics, maybe download a bunch of stock photos, images, backgrounds, etc. and put them in a folder on the network for them to use. I don't think it is possible for them to go from never having used a graphics program to making all of their own graphics during one class session anyway. And, even if they did know how to make graphics already, a one hour session isn't enough to do that and listen to your talk too.

This way, if you use the stock images, you can teach the importance of design and they can understand the very basics of using a graphics program. They can do a layout of some sort in Gimp (or whatever you use) by copy/pasting the images onto a canvas to create a rough mock-up of the look they want. All this would require is that you show them how to copy/paste files onto a canvas and how to move images on layers and input filler into a layer (and this gives a taste of the power of a graphics program). You can give them a class email or online document with links to tutorials and to the program you go with if they choose to dig deeper. On the subsequent days, they can print the mockup they made and work toward reproducing it as you go through the other steps.

My only other input is to have a topic for their site ready for them already given your very limited time. Having them decide their own can eat up a lot of class time. For the topic, maybe something all kids like to talk about- themselves! Maybe a page that says about them and has links to their friend's pages and to their socialnetwork pages and so on.