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."
I made this website for a course I am teaching at Code Academy (<a href="http://codeacademy.org" rel="nofollow">http://codeacademy.org</a>) 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!
It is beautifully designed. But the language still may go over non-coder heads. For example; elements are defined as <i>"designators that define objects within a page"</i>, 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.
I'm so mad I metacaptioned an image.
<a href="http://i.qkme.me/35uqnl.jpg" rel="nofollow">http://i.qkme.me/35uqnl.jpg</a><p>Seriously tho, <a href="http://screencast.com/t/Qunx72f4rJC" rel="nofollow">http://screencast.com/t/Qunx72f4rJC</a> I know these aren't ready yet so they're deemphasized, but I'd like to be able to read them anyway. :)
I'm really not a fan of the "Design" of this. It looks pretty, but the "wall of text" approach feels overwhelming.<p>It feels like it's half guide and half reference, but not particularly excellent at either.<p>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?<p>I think with a lot of reorganization and better 'chunking' this would be a lot better.
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?
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.
"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."<p>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.<p>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.
The flow of the site immediately sticks out in a great way. As a user the navigation bar for the lessons is easily understood.<p>Each lesson has its own key terms that can be used as a mini nav within the lesson which is helpful.<p>The code layout is simple and not overwhelming. Its nice to see <i>long hand vs </i>short hand<p>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.
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?<p>tl;dr; The lesson is pretty poor. Sorry.
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.
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
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.
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.
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.