Why are the tutorials presented in reverse order? Surely this must scare new designers if I look at the first video and it says "CSS". The site needs to reverse the order with Part 0/1 at the top and 5 at the bottom.
The site looks like a mess! No visual hierarchy at all - a mess of full caps, bolding, non-bolding, lines, diamonds.
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.
You're not alone -- I also thing the site looks a mess. That font is terribly unreadable, and the particular line-height used seems to have been chosen precisely because it spaces the letters in such a way as to make indistinguishable from alphabet soup. I literally cannot concentrate on the preamble long enough to understand it.
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!
The website is very consistent and has a very clear visual hierarchy.
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.
Though it could have been said more constructively, I don't the the parent is completely wrong about the grouping of the elements. I find the diamonds a bit distracting because to my eyes it makes the right column a long string of different sized line lengths. If they just removed the diamonds I think it would be much clearer visually that the videos and text were grouped together.
I'd like to counter that my subjective impression is important when looking at a design.
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.
This site looks great, but if you want to get the basics of HTML/CSS, this is the best $20 you'll spend. Some of the Head First books are not the best, but this was the best resource for box model, table less HTML/CSS I've found. I went from having almost no knowledge of markup to being able to do anything I could imagine.
It looks like you had a link on “this” that got swallowed by HN. HN doesn‘t allow <a> tags in comments; you have to put the URL you want directly in the text, and it will be linked automatically.
This is well put together. Just a little nitpick though, HTML and CSS are part of the Web, not the Internet as a whole. If you're going to start teaching you might as well start at the beginning. Other than that it has a unique layout and the bold use of typography is pretty cool. It would be nice if the videos were accompanied below by the lesson in written form. The videos are high quality. Props!
Edit: Regarding my nitpick, I see that you start off with an actual introduction to the Internet, so I retract my nitpick. :)
Its not enough to know just html & css. Design is more different thing. If you have a nice idea and could sketch on the paper even ordinary web designer could implement that. Dont waste your time with these crap things. Just try be best painter, photographer or illustrator forget the html and other things, just sharpen your design skills.
I understand your sentiment but I know a lot of designers who, while they love what they do, are finding it harder to land non-web gigs. So for them, it may be necessary to learn html/css in order to keep making money at a job that's at least somewhat related to their existing skill set.
Wonderful. I feel like I learned HTML/CSS/JS from observing and guessing. Having an explanation would've been a hell of a lot easier.
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.
I think that Twitter Bootstrap is actually targeted toward the experienced front-end developer who needs to put together a prototype or other simple app quickly.
Videos are easy to digest, and considering the target audience is not web designers I think this is a great resource. I can point my friends to it when they ask what I do :)
Videos have their own specific advantages and disadvantages compared to text and illustrations. To declare them inferior is shortsighted and without reason.
