

Beginners Guide to HTML/CSS - adangit
http://learn.shayhowe.com/html-css/terminology-syntax-intro/

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

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

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

~~~
borski
You mean expert sex change, right? ;)

------
stillawesome
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!

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

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

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

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

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

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

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

------
sequoia
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. :)

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

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

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

~~~
sequoia
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! :)

~~~
yogsototh
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).

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

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

------
kyberias
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?

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

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

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

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

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

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

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

~~~
yeswecan
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 <em> inside a
<p> as well as just an <a> inside an <li>).

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

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

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

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

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

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

~~~
monsterix
Makes a lot of sense.

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

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

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

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

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

------
ebr4him
Basic guide to CSS syntax:
<http://procssorapp.com/help/topics/syntax/index.html>

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

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

Thanks for this beginners guide. It is very helpful!

------
ypodim
I wish I had this guide 4 years ago :(

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

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

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

~~~
ypodim
What would be more "beginner" than that?

~~~
ceol
_"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.

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

------
mebert
Great design and extremely helpful!

------
sarahs
What a wonderfully designed guide!

------
tabaflaba
No one uses the strong tag.

~~~
natep
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...](http://stackoverflow.com/questions/649305/alternative-to-the-html-
bold-tag)

~~~
tabaflaba
HTML 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
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?

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

------
jmdalton
Excellent resource!!!

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

