Don't Fear the Internet: Basic HTML & CSS for non-Web Designers
dontfeartheinternet.com
dontfeartheinternet.com
Probably because it's a WordPress site and the author didn't get around to adding
query_posts($query_string."&order=ASC");
And why is "the" in "don't fear the internet" underlined in white on the title text? Aside from gratuitous use of design elements, there is no reason to focus attention on a grammatical article (part of speech) unless they want to say that this is THE internet we're talking about! - which is very obvious and stupid. How many other internets are there?
I expected more from these "designers" - am I the only one who thinks this kind of design is completely unsuitable for the online medium? In print it would look pretty good, but my eyes just got assaulted - and I was really distracted and could not absorb any of the information on that page.
It's like @font-face and the new css styles are the "blink" tag of today.
It seems your subjective impression colored all your subsequent judgments about the site. What you are writing there in the first sentence just makes no sense at all, caps, bolding, lines and diamonds are all used consistently to create a clear visual hierarchy.
Don’t hate on it just because you don’t like the look of it.
I take one look at the site, and it repulsed me away from taking a look at the site contents further. That's what design does - it can attract you and make you obsess and salivate over it without you knowing why (like the design for the iphone for example), or it can make you look away as soon as you even get a glimpse at it.
I can handle different artistic styles - but just do it well. There is a visual hierarchy, but it serves to distract me instead of guiding me along the contents of the page.
I may sound really harsh - but that's because I value meaning and content over technical consistency. For example, the diamonds are used in an extremely consistent way - to mark the separation of content - BUT they clash against the white lines which serve a lower purpose - which one grabs your attention more? I don't know, they both look pretty loud.
Again, a very technical design - very consistent - but there is no use to having all these elements all over the page.
I suggest if they want to use diamonds, then make the white lines thinner. The diamonds mark distinction between pieces of "content" (ie different videos), whereas the white lines mark the distinction between title and descriptive text within a single video. I would postulate that the marker between content is more important than the marker between title/descriptive text, so therefore:
1) Have one diamond separating the videos
2) take the white lines, and make them thinner so they don't compete with the diamond markers.
That's what I meant by "visual hierarchy" - every visual element should have a priority - that leads you to think and absorb the content in a priority list.
And I agree about the video screencaps - what good is a big picture for a videocap if it's just repeating the title in a graphical way next to the title in the next column over? The coding principles of DRY also applies in design.
If the graphical element is considered important, then
1) keep the screenshot / video player that has the title as the videocap - use the <alt> tag to have the title show up in screenreaders for accessibility if people have browsers that can't display images.
2) REMOVE the title from the right hand column
3) just have the descriptive text in the right hand column.
Propagate this down the entire list of videos and that immediately cleans up the design a lot.
The other explanation I can think of is that this is a "look what I did over the weekend" project. The whole thing is very tongue and cheek so maybe it has some insider designer jokes - but that means we as hackers should not be parading it around as a good design.
The navigation elements aren't sufficiently distinguished from each other or the body text -- no, those diamonds are not a smart choice. And lastly, what is the purpose of showing those video placeholders for every single video when they all look identical? And the title is simply repeated right next to it!
Did you mean Head First HTML with CSS & XHTML, http://headfirstlabs.com/books/hfhtml/?
Edit: Regarding my nitpick, I see that you start off with an actual introduction to the Internet, so I retract my nitpick. :)
Unfortunately, most brilliant web designers are terrible at communication. Not all - I know there are at least several exceptions.
Look at Twitter Bootstrap for example. It's great, and I'm guessing it's made for non-web designers, or people who want to make something quickly. In the prior case, I can't imagine any design newbie understanding how to use it.