by jergason on 1/31/12, 1:46 AM
I really wish they didn't link the w3schools at the bottom under resources. They are a spammy, and often incorrect, resource for learning HTML, CSS, and JavaScript. MDN has better docs, no ads, and no trying to sell you dubious "certifications."
by stillawesome on 1/31/12, 2:36 AM
I made this website for a course I am teaching at Code Academy (
http://codeacademy.org) in Chicago, IL. The website here is a work in progress and is being tested out in class. Thanks for all of the feedback so far, I will do my best to incorporate it. Please stay tuned for updates and more lessons to come!
by andrewfelix on 1/31/12, 2:45 AM
It is beautifully designed. But the language still may go over non-coder heads. For example; elements are defined as "designators that define objects within a page", this already assumes some knowledge. Believe it or not there are a lot of people who have no idea what an 'object' is in this context.
by sequoia on 1/31/12, 4:56 AM
by cgarvey on 1/31/12, 1:32 AM
I'm really not a fan of the "Design" of this. It looks pretty, but the "wall of text" approach feels overwhelming.
It feels like it's half guide and half reference, but not particularly excellent at either.
Also the organization of content seems way off to me. In the first lesson I learn about things like code validation and CSS resets, but I don't even learn about html list elements until lesson 9?
I think with a lot of reorganization and better 'chunking' this would be a lot better.
by kyberias on 1/31/12, 7:01 AM
What is the intended audience exactly? The language is tense ever for myself with 20 years of coding experience: "To put this into laymen terms, HTML determines the semantic structure of content on a web page..." How is 'semantic structure' a layman term?
by chefsurfing on 1/31/12, 1:00 AM
Great! However the pacing still feels dense. I think beginners reading this could use two things: 1. more frequent sectioning and 2. more examples. Bonus round would be giving the students a way to actively demonstrate their newly gained knowledge inline with the tutorial. Anyway, I think what you've got is fantastic.
by akdetrick on 1/31/12, 4:44 PM
"One principle of development is D.R.Y., also known as don’t repeat yourself. Within CSS this principle can speak volumes as it is easy to continually write the same styles over and over again. Don’t. CSS was designed in a way to allow you to cascade styles and use classes so that you easily apply and inherent styles."
This is wonderful, useful advice to beginners and seasoned developers alike. In fact, anyone who works with CSS, regardless of how they write it (raw, sass, less), should be force fed this advice. At the end of the day, CSS is a declarative cascading language, and you must leverage it as such in order to optimize code reuse, performance, maintainability, etc.
Aside from this tutorial being beautifully designed, the notes about semantics and best practices are enough to make me feel good about recommending it to anyone who wants to learn more about HTML & CSS.
by dkurth on 1/31/12, 2:50 AM
Minor nit: HTML comments go in <!-- this -->, not <-- this -->.
by dmlevi on 1/31/12, 2:22 PM
The flow of the site immediately sticks out in a great way. As a user the navigation bar for the lessons is easily understood.
Each lesson has its own key terms that can be used as a mini nav within the lesson which is helpful.
The code layout is simple and not overwhelming. Its nice to see long hand vs short hand
People can argue all day long about the right content but this seems to be a great start. Clearly the author has put much prep and time into considering this.
by hessenwolf on 1/31/12, 12:44 PM
I haven't read about css in ages, and I need to throw some together. I couldn't remember the syntax of the type, id and class selectors, specifically putting them together. You reference combining selectors, and then immediately give an example of "ul#social li a {". Does this mean list items and links within the ul with the id social? Or what?
tl;dr; The lesson is pretty poor. Sorry.
by CBizzle on 1/31/12, 3:18 AM
Can we fix the typos? "HTML comments wrap the context [sic] starting with <-- [sic] . . ." and "doctype deceleration [sic]".
by ChadMoran on 1/31/12, 1:46 AM
I guess?
It has a pretty small font size and for any modern monitor slides to the left and only takes up 50% or less of the page size.
Meh...
by brackin on 1/31/12, 7:40 AM
Great thing to do but it doesn't seem to teach much of the basics. I'm not a developer but learning the core concepts of Programming at the moment and I can see someone doing the same thing for HTML may not understand anything about tags if they have no experience at all.
by slace on 1/31/12, 4:09 AM
I wish this was up on github so everyone could contribute to it to build a better set of docs
by tomordonez on 1/31/12, 2:56 AM
This tutorial is awesome. I have been in a bunch of tutorials online and I found them pretty confusing. Shay's website not only has good content but the design make it easier to understand.
Thanks a lot.
Looking forward for the rest of the chapters
by Reltair on 1/31/12, 5:36 AM
I suggest adding interactive examples for each section where a user can type in some HTML to see what it does. This way it reinforces what they have just read, and it can be easier to learn when they are doing things hands-on.
by probitymike on 1/31/12, 3:09 AM
This is a great resource Shay! I wish someone would have built this accessible curriculum 18 months ago when I started learning HTML & CSS. This feedback on HN will only make it better.
by mwexler on 1/31/12, 2:38 PM
You certainly have a different definition of "beginner" than I do.
by jinsifus on 1/31/12, 7:07 AM
Looks clean/simple, lessons are well-organized, and the usage of white space / negative space is great. I don't get the font size comments. Command+Shift+'+' peoples.
by ebr4him on 1/31/12, 5:34 AM
by sopooneo on 1/31/12, 5:53 AM
"Semantic structure" is definitely not layman['s] terms.
by cumulus on 1/31/12, 10:19 AM
I am trying to learn HTML5. What are your favorite resources for this?
Thanks for this beginners guide. It is very helpful!
by ypodim on 1/31/12, 12:47 AM
I wish I had this guide 4 years ago :(
by vcabansag on 1/31/12, 3:04 AM
Wonderful layout and great content! Looking forward to the next lessons.
by coryl on 1/31/12, 12:27 AM
Well designed, but depends on what you call a "beginner".
by mebert on 1/31/12, 2:57 AM
Great design and extremely helpful!
by sarahs on 1/31/12, 1:17 PM
What a wonderfully designed guide!
by tabaflaba on 1/31/12, 2:48 AM
No one uses the strong tag.
by ericnakagawa on 1/31/12, 4:44 PM
How is this even relevant to hacker news visitors? I thought we were all leet.
by jmdalton on 1/31/12, 2:42 AM
Excellent resource!!!
by JuanCBenavides on 1/31/12, 2:05 AM
What language is this? Java?? j/k ;) A nice and concise guide that every beginner should get a hold off! In this case, the simpler, the better.
