Last request re: my students

[Black Max]

The community was tremendously helpful last month, when many of you posted encouraging and informative messages in a thread I started for my design students (troubled teens just barely scratching the surface of Web design). Here's my second and last request on their behalf.

Next week is their last week with me: end of term and exams are bringing everything to a screeching halt. They've mastered, more or less, the very basics of HTML and CSS, though they're still a bit shaky (they need more practice doing it over and over until it becomes natural). They know most of the basics about formatting text, adding background colors and images, etc. They have a hazy conception of block elements vs. inline, and they've just learned about CSS classes, though the idea is still new and not yet firm in their minds. They know nothing about divs or constructing basic layouts. (The class only meets twice a week, and I've had a good bit of turnover, so we haven't gotten as far as I would like.)

I've been following Paul's CSS skills tests with great interest, though my skills aren't up for solving his puzzles. I usually go through and figure out how the solution works. That led me to think about something similar (and far more simple) for the students. And wouldn't it be a lot cooler if it came from you rather than me? (They're a bit in awe of this place. )

Who's up for putting together a couple of simple little quizzies on this or that topic for the kids -- something that will test their skills without causing their heads to explode? I'm not asking for anything elaborate or time-consuming on your end, just something that might challenge them or stretch their abilities a bit with a particular concept or code element.

Any takers? I would really appreciate it.

[Dan Schulz]

As scary as it might sound, this could be a good time to introduce them to CSS rollovers. It'll help reinforce what they're learning about classes and IDs, while also giving them a nice "wow!" factor. Something that'll impress them and make them hunger to learn more.

You wouldn't need to fix anything fancy, like swapping images or anything like that. Just background or text colors could do for now.

[Black Max]

As scary as it might sound, this could be a good time to introduce them to CSS rollovers. It'll help reinforce what they're learning about classes and IDs, while also giving them a nice "wow!" factor. Something that'll impress them and make them hunger to learn more.

You wouldn't need to fix anything fancy, like swapping images or anything like that. Just background or text colors could do for now.

Actually, that's one of the things that's up next. Problem is, I might only have them for two more classes, and I want to do some "wrap-up" exercises. But if you want to whip up something quick and impressive for them, I'd be all over it.

If the budget gods are kind, I might be doing this with a new class for the summer term. Cross your fingers for me.

[Dan Schulz]

I already have. Problem is I don't remember which of my over 15,000 posts here on the forum it is.

[Black Max]

I already have. Problem is I don't remember which of my over 15,000 posts here on the forum it is.

You should create a wiki with your info.

[AlexDawson]

Dan, you can use an advanced search on this forum, just search by something you know is in the post and by your username

Max, perhaps you could get them to make a dropdown menu, it involves positioning, display, colors, text, rollovers, lists and such. It may seem like a big thing for new people to learn but they can see how an ordinary list can transform into something, plus of all the things you need to learn in Usability, navigation is probably next to content the most prority strict thing to gain insight too.

[Dan Schulz]

Alex, based on what he's told me via private message, that may be far too advanced for them. As for using the advanced search, there are things I posted here I've actually forgotten about.

(Max, care to show him the link I PM'd you to prove my point?)

[molona]

This is unfinished and it is just the very first test of a new website I am building, but since right now it is only CSS and HTML, you may want to show them the picture and they could try to build it or figure out how they would do it with their current skills.

http://www.xaris-web.com/canterano/Modelo3/

I used floating, but if you have them trying to use table (even if that's wrong) that would simplyfy the exercise. Of course, you can place a lorem ipsum and translate to English to create the links, but the site is very simple, right now, and it will be a real site in a month or so.

This way, they can see the real sites start easy. Of course, if you decide to copy this site, I would give you can take the pictures, or I can send them to you. Or I can create something similar for them to build.

[Black Max]

Molona, this is going to be a gorgeous site when you're done. As for having them replicate it, it's too far over their heads. Right now they don't even know tables exist, and I'm not going to tell them.

(For some reason the index.html portion of your link doesn't work. This does: http://www.xaris-web.com/canterano/Modelo3/ )

Dan, this is the link you sent me. It's a treasure trove.

http://www.sitepoint.com/forums/show...34&postcount=6

Alex, Dan suggested CSS rollovers, and I think that's a good project to go for the last two days. Today and tomorrow, I'll put together some little walkthrough for them to follow. Anyone want to pitch in?

[Dan Schulz]

Her index page has a .htm not a .html extension.

[Black Max]

Her index page has a .htm not a .html extension.

Arrghh, I didn't look, I just trimmed the index.html off and tried it that way.

[Dan Schulz]

Your post made me curious.

[Black Max]

For the curious: here's the rollover walkthrough I created for the kids. I used Listutorial's walkthrough as a template, but the changes are significant:

http://www.iraqtimeline.com/demos/rollovertut.html

It is very, very methodical. I know my kids, and they get confused fast. What do you think? Are there glaring errors or problems you see?

Think I could make money on a book: Basic Web Design for the ADD Student? You laugh (I did), but....

[Dan Schulz]

You don't need the DIV tag. You can just put the ID on the list itself (by the way, I prefer the word "menu" since it's easier and far more people understand it) and style it from there.

[Black Max]

You don't need the DIV tag. You can just put the ID on the list itself (by the way, I prefer the word "menu" since it's easier and far more people understand it) and style it from there.

I know, but I want them to get used to working with the DIV tag. This is a good opportunity for them to see how it works to "set apart" a particular element. From here on out, they can use this as a reference for future uses.

I like the word "menu" also. However, the book we're using for a reference text, the Head First HTML/Web Design book, calls them "lists." The kids are confused enough without me switching terms on them.

[Dan Schulz]

The best places to get them used to the DIV tag would be around the entire Web page, within the main content area, and the sidebars. Of course, they haven't yet reached the stage where they can deal with actual layouts, but when you do introduce them to the DIV, it should be as a logical grouping of sections, not as a generic wrapper that can be slapped around just any ole' HTML tag.

[Black Max]

The best places to get them used to the DIV tag would be around the entire Web page, within the main content area, and the sidebars. Of course, they haven't yet reached the stage where they can deal with actual layouts, but when you do introduce them to the DIV, it should be as a logical grouping of sections, not as a generic wrapper that can be slapped around just any ole' HTML tag.

Yeah, buddy, well, that's how I learned it, and look how well... uh... okay, I see your point.