6 ms·
Beginners Guide to HTML/CSS
- coryl 15y agoWell designed, but depends on what you call a "beginner".
- ypodim 15y agoWhat would be more "beginner" than that?
- ceol 15y ago"As on [sic] overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance." "Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em." It's friendly to people who have prior experience, but I wouldn't give this to a fresh beginner. What's "content"? What about "objects"? I'd like a beginner's guide to introduce the reader by pointing out what each tag corresponds to on an actual web page so they can relate to it. It feels like a reference guide to HTML rather than an introduction.
- ypodim 15y agoI see your point. However, at that level CSS would be rather irrelevant it was my impression that the site meant to introduce CSS too. Anyway, not worth splitting hairs over this.
- probitymike 15y agoIt is both a reference guide and an introduction to HTML & CSS. This was built (initially) as a compliment to Shay's weekly lecture to the Code Academy. Most of our students in Code Academy are "fresh beginners" and have been going through Shay's class for the past four weeks, and they have been improving greatly from the first day of class. They are currently learning web development, so they are definitely picking key concepts for Shay's class to help with their front-end learning.
- ypodim 15y agoI wish I had this guide 4 years ago :(
- happypeter 15y agoI am the you four years ago I think, so I am luckier :)
- chefsurfing 15y agoGreat! 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.
- probitymike 15y ago"Bonus round would be giving the students a way to actively demonstrate their newly gained knowledge inline with the tutorial." Nailed it. The site is is the foundation of Shay's weekly lecture, and in class, we have students do exercises where they incorporate what they just learned. We also have students demo what they built to the class. The pacing is still a work in progress, we do our best to make sure that we aren't flying over the students heads too much, but we know we can do better.
- cgarvey 15y agoI'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.
- gggritso 15y agoOther complaints aside, I just wanted to say that I quite like the "wall of text" approach. Thinking back to the article on API documentation from Parse (http://blog.parse.com/2012/01/11/designing-great-api-docs/ http://blog.parse.com/2012/01/11/designing-great-api-docs/) I'll agree that having everything on one page, quickly accessible, is a good way to do. By breaking up the page with relevant headings and sub-headings the docs can be made much less daunting (as they are here). I'd be much more annoyed with having to click between pages too often.
- ChadMoran 15y agoI 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...
- capnrefsmmat 15y agoDo you want it to take up the full screen width? I find that reading incredibly long lines is difficult, because when you finish one line and move to the next, you lost track of your position. This is why systems like LaTeX default to wide margins and narrow columns. Now, as for the font size, it could definitely use some expansion.
- ChadMoran 15y agoIf it's not going to take up the full screen width it should at least be centered. It feels weird having 50% of the page to the right of the guide blank.
- jergason 15y agoI 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."
- ohgodthecat 15y agoI always link people to http://htmldog.com/ http://htmldog.com/ over w3schools but I don't know if they have the same issues. They do offer a better layout and design imo and seem to be fine for the beginner.
- moonchrome 15y agoGood god that site uses the same colors as Google ad-words I feel like it's a domain name placeholder, there's no emphasis on anything, everything is blue or light green and text is stretched in one long line (widescreen HD res). God, I feel confused looking at that site almost dizzy as my eyes try to find focus on the page - and I'm not exaggerating - this is the strangest design I've ever seen.
- Cushman 15y agoI have no idea why you're being downvoted for this, I had exactly the same experience. I was expecting it, and I still had to stop myself from hitting back reflexively.
- tung 15y agoWell that's a shame, since it's one of the most easily navigated, comprehensive yet concise HTML and CSS guide and reference sites I've ever used. I come back to it time and time again, and I can't say I've ever shared your sentiments.
- fady 15y agoi agree with you. they're much better resources out there. honestly, nothing compares to current books about subject, as i feel they give more depth to the why, when, how, etc. i think they better prepare for mastering the topic. have someone read these pages and then head over to an html spec and see if they understand what is being discussed or proposed :) edit: site is nice though.
- JuanCBenavides 15y agoWhat 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.
- stillawesome 15y agoI made this website for a course I am teaching at Code Academy (http://codeacademy.org 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!
- chubs 15y agoLooks fantastic, all i can say is: bigger fonts please, and don't give up finishing it! The world needs something better than w3schools, but simpler than MDN. You could be that.
- wyclif 15y agoI agree. The design sense is going in the right direction; it needs simpler descriptions and clearer writing so that people who really don't have any experience can understand the tutorial. As was mentioned above, n00bs probably won't know what an "object" is.
- probitymike 15y agoThis isn't a standalone resource yet. Shay uses this in class to explain all the key concepts in further detail. After each class, the students can back go back and reference these concepts. However, everything can be better, so we will make sure to make the language and the flow can work for anyone.
- philsheard 15y agoThis feedback thread could be a lesson all on its own for your class - some really useful feedback and it showsthat (markup rules aside) the presentation of information is a hugely subjective area and not something that's clear cut Good or Bad. That should be an encouragement for anyone getting started.
- underdown 15y agoHey Shay - Glad to see you on hacker news.
- jmdalton 15y agoExcellent resource!!!
- andrewfelix 15y agoIt 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.
- entangld 15y agoThey simplified the look without simplifying the information.
- jmilloy 15y agoAgreed. "To put this into laymen terms, HTML determines the semantic structure..." doesn't sound like laymen terms to me.
- probitymike 15y agoLike Shay mentioned below, this website is a work in progress and still being tested out, but right now the website is a supplement to what Shay teaches in class. Shay uses this in class and we mix in lecture, demoing, and lab work to help the Code Academy students understand the content. The students also use this to reflect back on what Shay has taught in the previous classes. As of now, this is the best standalone resource, but it is a couple weeks old, so we will definitely improve it.
- jmilloy 15y agoThat actually makes a big difference. As a supplement to what's taught in class, I think the language is probably appropriate as it is.
- tabaflaba 15y agoNo one uses the strong tag.
- natep 15y agoFalse. At the very least, Reddit uses the strong tag, and so I don't feel like scouring the web for more bold text. I did do one search, and it turns out other people recommend strong over b in most situations, like this person: http://stackoverflow.com/questions/649305/alternative-to-the-html-bold-tag http://stackoverflow.com/questions/649305/alternative-to-the...
- nazar 15y agoI read the arguments regarding the strong and b tags, and I tried to see a difference between the two but failed to do so. From the above link >If you want to stress importance of text, use strong. If you don't want to stress importance, use the b tag or use the font-weight:bold; style on the element or in the CSS. Am I missing something? I've been writing html for long enough time not to consider myself beginner but it still doesnt make sense to me.
- tabaflaba 15y agoHTML describes a document semantically and using tags like <b> and <strong> is bad practice. Styling, like what results from using <b> and <strong>, should be done via css.
- natep 15y agoWell, if that's what you meant, you should have said that, instead of making false claims about what people do and don't do. Now that we're back on track, If you're trying to make a semantic point in an article by emphasizing certain things, wouldn't you want that reflected in the HTML? Do screen readers do something special for bold-via-css or is the emphasis lost on the visually impaired?
- SquareWheel 15y agoI use <strong> over <b> if forced to use one, but I usually do a span with a font-weight instead.
- dkurth 15y agoMinor nit: HTML comments go in <!-- this -->, not <-- this -->.
- tomordonez 15y agoThis 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
- mebert 15y agoGreat design and extremely helpful!
- vcabansag 15y agoWonderful layout and great content! Looking forward to the next lessons.
- probitymike 15y agoThis 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.
- CBizzle 15y agoCan we fix the typos? "HTML comments wrap the context [sic] starting with <-- [sic] . . ." and "doctype deceleration [sic]".
- slace 15y agoI wish this was up on github so everyone could contribute to it to build a better set of docs
- monsterix 15y agoMakes a lot of sense.
- sequoia 15y agoI'm so mad I metacaptioned an image. http://i.qkme.me/35uqnl.jpg http://i.qkme.me/35uqnl.jpg Seriously tho, http://screencast.com/t/Qunx72f4rJC http://screencast.com/t/Qunx72f4rJC I know these aren't ready yet so they're deemphasized, but I'd like to be able to read them anyway. :)
- yogsototh 15y agoFirst, this kind of comment about the appearance of a website should be done by asking directly and nicely to the author. For example you can easily direct message him on twitter instead of polluting the HN comment thread which should always contain useful and informative comment. Second. I can read them pretty nicely on my computer. It is clear a lot of work was made to make this website very nice. Your comment is a bit harsh. Third, you are on HN, you should know how to read the code without being angry.
- sequoia 15y agoJudging by the position of my comment in the thread, it is not clear that everyone shares your view of it being merely thread pollution. I wasn't really mad, that comment was a play on this joke, which is fairly well known on the net: http://1389blog.com/pix/im-so-angry-i-made-a-sign.jpg http://1389blog.com/pix/im-so-angry-i-made-a-sign.jpg So what should I do, be mr serious and drone on like a broken record about accessibility? Is it so bad that I try to address the point in a whimsical way? If you think that telling someone to make a minor change to their text styles is harsh, read more comments here. It's not uncommon to see someone's entire business model questioned and torn apart in the comments; if the worst complaint is about text color, that's a good day! :) One thing you said does, in fact, really irritate me: "I can read them pretty nicely on my computer." This is not the standard by which accessibility is judged!! It doesn't matter if you can read fine in 7px grey on gray, that doesn't make it accessible. I'm not just pulling this stuff out of thin air, by the way. http://www.accesskeys.org/tools/color-contrast.html http://www.accesskeys.org/tools/color-contrast.html These are widely accepted best practices, and you should follow them if you care about people with abilities different than your own being able to use your site.
- ebr4him 15y agoBasic guide to CSS syntax: http://procssorapp.com/help/topics/syntax/index.html http://procssorapp.com/help/topics/syntax/index.html
- Reltair 15y agoI 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.
- sopooneo 15y ago"Semantic structure" is definitely not layman['s] terms.
- kyberias 15y agoWhat 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?
- probitymike 15y agoThe intended audience is for Code Academy students here in Chicago learning web development and user experience design. Shay uses this as a resource to guide the students through their learning.
- jinsifus 15y agoLooks 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.
- brackin 15y agoGreat 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.
- cumulus 15y agoI am trying to learn HTML5. What are your favorite resources for this? Thanks for this beginners guide. It is very helpful!
- hessenwolf 15y agoI 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.
- yeswecan 15y agoThat means all links under list items in the unordered list with the id "social", including non direct children (e.g. an <a> inside an <em> inside a <p> as well as just an <a> inside an <li>).
- sarahs 15y agoWhat a wonderfully designed guide!
- dmlevi 15y agoThe 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.
- mwexler 15y agoYou certainly have a different definition of "beginner" than I do.
- akdetrick 15y ago"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.
- ericnakagawa 15y agoHow is this even relevant to hacker news visitors? I thought we were all leet.