Beginners Guide to HTML/CSS | Hacker News Reader

Beginners Guide to HTML/CSS

learn.shayhowe.com

490 pointsadangit75 comments

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 always link people to 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.

Good 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.

I 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.

Well 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.

i 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.

If w3schools has a use-case it's a quick reference which fairly exclusive from buying and reading new books or trying to parse specs

Sadly w3schools has some serious SEO-mojo enough to win out for a lot of search queries for basic reference in html/css/javascript. At least we can be thankful experts-exchange has seemingly gone away.

You mean expert sex change, right? ;)

This site/curriculum was built for our Code Academy (http://codeacademy.org) students currently learning web development and user experience design. Most of our students are beginners, and have already gone through four weeks of Shay's HTML & CSS class. While they are not front-end experts, Shay has done a great job of guiding them through, and now this site will be even more helpful.

The purpose of this curriculum is not the be-all and end-all of all HTML & CSS learning resources, it is focused on created a pathway that students can use to measure their learning. We are definitely focused on improving the curriculum and providing alternative resources for students to the learn from all the other resources.

I wouldn't be where I am in my front-end development without all the free and paid resources online devoted to HTML & CSS, but it would have been really helpful to have something as organized as this to guide my development.

I agree with you completely! I personally really like this site, but I found myself wondering if the inclusion of w3schools in the references indicates that they are a sponsor/advertiser.

I would much rather see those seeking to learn more going to the real W3C wiki-based learn page (http://www.w3.org/wiki/HTML). I see from this discussion how passionate people can be about presentation and learning styles. Once you get beyond the learning phase I recommend sites like SitePoint (http://reference.sitepoint.com/html) and Mozilla's Developer Docs (https://developer.mozilla.org/en-US/docs). I use these sites all the time.

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!

Looks 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.

I 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.

This 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.

This 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.

Hey Shay - Glad to see you on hacker news.

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.

They simplified the look without simplifying the information.

Agreed. "To put this into laymen terms, HTML determines the semantic structure..." doesn't sound like laymen terms to me.

Like 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.

That actually makes a big difference. As a supplement to what's taught in class, I think the language is probably appropriate as it is.

I'm so mad I metacaptioned an image. http://i.qkme.me/35uqnl.jpg

Seriously tho, 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. :)

First, 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.

Judging 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 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 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.

It seems you are right. The low color contrast on a small disabled part of this website seems to be the major shared point of view.

Sincerely, it wasn't a personal attack. I am just sad a short comment about the look & feel make the top instead of a comment about the content.

Even if in the end, I tend to agree with you that this color contrast is a design error.

ps: Also, if you visit my website, you will see I am fully aware of accessibility and try to take a good care about it.

Agreed: my comment should not be the top comment; it's just one small critique. I just see this so frequently (low low contrast, hard to read text) as well as other accessibility issues on sites linked from hn that I started griping about it. FWIW I don't just gripe about it, sometimes I actually do something: https://github.com/addyosmani/todomvc/pull/37 :)

In the end I think it's important to remember that even if the content is the best thing in the world, that doesn't mean much if people can't read it. I'm probably just a curmudgeon but I've clicked links to posts where I saw the contrast and size and said "I'm not going to bother reading this. It is too hard and I don't care enough about this article to change my browser settings to correct the designer's mistakes." And many people don't have the skills to do so. Three cheers for agreement! :)

I know exactly this bad feeling when going to a website with great content and terrible design.

I am pretty sure you know about these, but just in case.

To address this problem I used readability from arc90. Now I use a solarized[^1] version of readable[^2].

Cheers :)

[^1]: http://ethanschoonover.com/solarized [^2]: http://goo.gl/jISPf => will go to http://readable.tastefulwords.com/ with solarized theme (my tiny contribution).

I agree with all the subsequent discussion, but I would add that I disagree that,

"this kind of comment about the appearance of a website should be done by asking directly and nicely to the author"

Given the site has been posted to a public forum, it's useful, both for the author and for other designers, to get a feel of how the community (read into that what you will) feels about a design, rather than simply one individual's private perception.

I also agree, however, that I personally don't see it as a major issue (I've included this statement to validate my original point - how meta...)

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.

Other 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/) 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.

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?

The 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.

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.

"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.

"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.

Minor nit: HTML comments go in , not <-- this -->.

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.

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.

That means all links under list items in the unordered list with the id "social", including non direct children (e.g. an <a> inside an inside a as well as just an <a> inside an <li>).

Can we fix the typos? "HTML comments wrap the context [sic] starting with <-- [sic] . . ." and "doctype deceleration [sic]".

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...

Do 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.

If 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.

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.

I wish this was up on github so everyone could contribute to it to build a better set of docs

Makes a lot of sense.

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.

You certainly have a different definition of "beginner" than I do.

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.

Basic guide to CSS syntax: http://procssorapp.com/help/topics/syntax/index.html

"Semantic structure" is definitely not layman['s] terms.

I am trying to learn HTML5. What are your favorite resources for this?

Thanks for this beginners guide. It is very helpful!

I wish I had this guide 4 years ago :(

I am the you four years ago I think, so I am luckier :)

Wonderful layout and great content! Looking forward to the next lessons.

Well designed, but depends on what you call a "beginner".

What would be more "beginner" than that?

"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.

I 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.

It 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.

Great design and extremely helpful!

What a wonderfully designed guide!

No one uses the strong tag.

False. 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...

I 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.

HTML describes a document semantically and using tags like and is bad practice. Styling, like what results from using and , should be done via css.

Well, 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?

I use over if forced to use one, but I usually do a span with a font-weight instead.

NY Times uses strong.

No one uses WBR.

Off the top of my head, Facebook uses to format link text. Eg

  <a href="http://28.media.tumblr.com/tumblr_lupq8leShl1qgxeuqo1_500.gif">
  <span>http://28.media.tumblr.com/</span>
  <wbr />
  <span class="word_break"></span>
  <span>tumblr_lupq8leShl1qgxeuqo1_500.</span>
  <wbr />
  <span class="word_break"></span>
  gif
  </a>

How is this even relevant to hacker news visitors? I thought we were all leet.

Excellent resource!!!

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.

Reply on news.ycombinator.com