WaSP InterACT

I’d love to get some discussion going around this question, to help improve courses in the future even more. As a further question, what teaching methods worked for you best in getting around these difficulties?

Chris, this is a great question.  I have so much to say about this, but I want to start with the basics: file structure.

I have found that the younger web students have a really tough time learning how to organize their files and link relatively from one file to another.

I have found that having students literally draw out their file structure (in a tree format) is the place to start.  Then for each segment of the link (../) for example, they would explain that this takes us from the folder that we are in, to the next higher folder.

I got the idea of taking this approach from the Head First books on HTML and CSS.  There are many more areas that students struggle with, so I look forward to continuing the conversation!

This is a great tip Zac, and something I should add to my course. I have the Head First CSS and HTML book too - it’s awesome.

I’ve got another one: layout design and white space.  Design oriented students get this without any effort, but many students don’t understand the use of white space.

For example, they make a horizontal navigation bar and there is not padding for each link. 

I have tried to teach more grid design to help with this, or have them look at examples of site with good use of white space, and they seem to get it temporarily, but as soon as they go to design something new they seem to forget.

Thoughts on this?

Separating the semantics from the visual design is a hard ask for new learners, but even harder is teaching how this isn’t a limit on visual design itself. The technical aspects of XHTML/CSS/JS aren’t hard. It’s explaining how to use them in a best-practice way that’s hard.

@Matt,

Yes, I agree that mentally separating markup from presentation is a tough thing to understand at first.  I find with my students I have to separate the two, early on, into two separate activities.

First we discuss the content, it’s hierarchy, and the appropriate markup: including tags, ids, and classes.

Then we discuss the how we want it to look.  This leads into a discussion of how to accomplish this with the markup we have.  I have noticed that when I don’t tell them about going back and adding in markup as hooks for CSS, they are able to accomplish a lot with minimal and appropriate markup.  This is easiest when they have a solid, separated, understanding from the beginning.  Tough to do later on…

Zac Gordon - 24 March 2009 03:08 AM

Chris, this is a great question.  I have so much to say about this, but I want to start with the basics: file structure.

I have found that the younger web students have a really tough time learning how to organize their files and link relatively from one file to another.

I have found that having students literally draw out their file structure (in a tree format) is the place to start.  Then for each segment of the link (../) for example, they would explain that this takes us from the folder that we are in, to the next higher folder.

I got the idea of taking this approach from the Head First books on HTML and CSS.  There are many more areas that students struggle with, so I look forward to continuing the conversation!

Zac, I agree that teaching students how to organize their files is important. I’d also include a lesson on “best practices” for naming files and folders, as well as CSS classes and IDs, images, and other media assets. A thoughtful choice of names can help organize work and save a lot of time when editing web pages later on.

CSS, in particular, benefits from structural rather than presentational naming. Presentational naming describes the position of page elements in a particular layout - for example, “left-column” or “center column.” These kinds of names are confusing outside the context of that layout. Structural naming relates the information to the document’s structure rather than its presentation - for example, “sidebar” or “main-content.” It describes what the page element actually does, instead of its location. The result is code that can be reformatted for various media without changing the markup. And it makes future updates or redesigns much easier.

@Bradamante - Yes!  Standard names for CSS is a huge ones.

Something I like to do is have students look through a web gallery and make a little table of the names that web designers use for the most common ids, and classes.  Then we discuss what conventions we should have.

Microformats is about two steps after that, but certainly related.

Good idea! I habitually “View Source” on better designed websites and encourage students to do so.

Ideally, there would be a robust metadata system in place that would make it easy to identify and locate everything. (Of course, metadata has naming problems too.) However, there is an absence of a good, universal metadata framework that is understood by all operating systems and that can be embedded into most file types. Hence, the importance of “best practices” for naming files and other web assets.

Most students that I’ve taught want to do design from the beginning. I have found that one should always start with the barest minimum of HTML and then introduce CSS. If one covers the full HTML standard first, students will inevitably start using presentational attributes and elements.

I.e. leave the academic overview of the full standard for a later class, introduce CSS right away and students will understand separation of design and content from day one.

@Lars - Ditto on that point!  It is bad news to try to teach too much HTML without making it look nice.  I tend to start with a little graphic design/layout design, cover the header tags, paragraphs, links, and images then jump into CSS. 

After a little styling, I’ll come back to lists, divs, classes and ids.  That introduces more advanced CSS selectors next.  Good call on that though.

I’m not sure what is the hardest to teach.  I’m currently in my last week (thank god) of an online degree from a certain college, and my classmates designs are just horrific. 

As our last assignment, we have to make a portfolio for ourselves.  After going through 2 years of design classes, including JavaScript, CSS, HTML and Photoshop, the portfolio sites that I saw created were downright terrible.

85% of my classmates used tables to design the site, while the rest used all Flash - I was the only one to use CSS.  I noticed on a few websites, an XHTML declaration, but the tags throughout the design where capitalized and not escaped correctly.  So, it’s obvious not many people learned even the basics.  It’s sad to see so many people spending so much money, and I really know they won’t be getting anywhere if they continue designing how they do now.

The worst part is that the teacher encourages it!  Granted, the teacher cannot say “that sucks” or, “this needs to be completely changed” but, I think there needs to be a line drawn where feelings of students takes a backseat to honesty about design & technical skills.  So, to answer the discussion question, I think the aspect that is hardest to teach is the fundamentals.  Fundamentals of page layout, of color schemes, of doctypes, of CSS & XHTML, and fundamentals of page structure.

@dbauer - I think that your experience is one of the biggest motivating experiences for the Interact project.  As someone who has taken and taught classes, it is tough to be in a situation where you feel that the standards are not being met. 

Where did you learn how to approach web design the way you did, if it wasn’t from the teacher?

Zac Gordon - 16 April 2009 01:28 PM

@dbauer - I think that your experience is one of the biggest motivating experiences for the Interact project.  As someone who has taken and taught classes, it is tough to be in a situation where you feel that the standards are not being met. 

Where did you learn how to approach web design the way you did, if it wasn’t from the teacher?

Zac,

I certainly hope not everyone has to go through this.  I actually took classes at a vocational high school that taught me the basics of web design, and I just started teaching myself.  Since that point, about 4 years ago, I have taught myself everything - anything that I’ve covered in college has literally been review.  There are just so many books, blogs & websites out there, just waiting to be had.  That’s where I have found I’d say ~80% of my knowledge.

Zac Gordon - 15 April 2009 03:44 PM

@Lars - Ditto on that point!  It is bad news to try to teach too much HTML without making it look nice.  I tend to start with a little graphic design/layout design, cover the header tags, paragraphs, links, and images then jump into CSS. 

After a little styling, I’ll come back to lists, divs, classes and ids.  That introduces more advanced CSS selectors next.  Good call on that though.

I also take this approach and it usually works a treat. What I do find though is that at university level students are often coming in with some experience already. Usually this is not standards based and mostly self taught. So my hardest thing to teach is how to UN-learn bad habbits and open mindedness to other ways of working from what they have prior experience of.

@Dave

I just started teaching at the higher ed level for the first time last semester and can relate.  This is especially tough if the class is not meant to teach the basics, but the basics that the students have are outdated.

What approach do you take to “re-educating” folks?