
An Advanced Guide to HTML and CSS - shay-howe
http://learn.shayhowe.com/advanced-html-css/
======
kapowaz
> One functionality of CSS often abused without awareness are selectors [...]
> How elements are selected within CSS affects performance, including how fast
> a page renders

This assertion used to be thrown around as one of the supporting arguments for
using OOCSS, but I'm sure I later read that it was largely debunked; the
performance implications were negligible and so it was just making CSS less
legible/maintainable for no real reward. Has that changed? Have you any recent
benchmarks to share?

~~~
nilliams
>> This assertion used to be thrown around as one of the supporting arguments
for using OOCSS.

I've never seen selector performance used as an argument for OOCSS.

>> ...and so it was just making CSS less legible/maintainable for no real
reward.

That's a pretty broad sweeping statement that I think you'd be very hard
pressed to back up. OOCSS is all about maintainability. Legibility is
debatable, but I've seen OOCSS examples that are just as legible, if not more
so, than old-school CSS (leaning more on tagname selectors/DOM structure - if
that is the opposing stand-point, sometimes it's hard to tell what OOCSS
dissenters are really arguing against).

~~~
kapowaz
> I've never seen selector performance used as an argument for OOCSS.

Harry Roberts is one of the most vociferous proponents of OOCSS, and he has
written about it a few times, notably here:
[http://csswizardry.com/2011/09/writing-efficient-css-
selecto...](http://csswizardry.com/2011/09/writing-efficient-css-selectors/)

> That's a pretty broad sweeping statement that I think you'd be very hard
> pressed to back up.

I'll admit it's an opinionated statement, but I don't think that in itself
makes it invalid. Opinions are certainly divided when it comes to how to
structure CSS selectors, and I am firmly in the camp that OOCSS is bad stuff.

I've had a half-baked article on the whys of an alternative structure to OOCSS
drafted for about 18 months now, so I guess it might be time to dust it down
and fully write it up.

------
kaolinite
Does anyone know of any guides or books for _really_ advanced HTML/CSS? I find
a lot of these guides target regular websites, which I have experience with,
whereas I'd love to know how to create much more advanced layouts (e.g. Gmail,
Grooveshark). Does anyone know where I can find information on that kind of
stuff?

~~~
pault
Last time I checked, gmail was still using tables for layout.

~~~
wmeredith
I would say that ignoring implementation dogma and going for the best solution
to a problem definitely falls under advanced development. It's certainly not
something you see coming from developers with a few flavor of the month
tutorials and maybe a site build or two under their belt.

~~~
saint-loup
Gmail uses tables for the list of mails, which makes sense, but there are also
tables for things like the logo. I'm not qualified to assess the work of the
team behind Gmail, but it's curious notheless.

------
prs
Beautiful implementation.

As stated elsewhere in the thread, it is work in progress, so do not be too
harsh of a critic.

Once all the lessons are up and a responsive layout is implemented, I believe
this to be a beautiful addition for beginners and advanced programmers.

P.S.: Reminds me a bit of <http://www.phptherightway.com> \- Maybe you can
borrow a few of the good ideas from that guide?

------
anonymouz
What is the deal with those orange buttons that hover on the right hand side
of the code snippets?

They look like they should be interacted with, but when I hover my mouse over
them they fade away. That's terribly irritating.

~~~
dominicrodger
I'm pretty sure they're just markers telling you what the code is an example
of, so they get out of your way when you hover over the code.

~~~
shay-howe
You're correct, thanks for the answer here.

Feedback has been hot and cool on them, still trying to decide if they are
worth it or not.

~~~
codegeek
Btw, Does not fade away in IE8 with hover.

~~~
mixmastamyk
IE8 can't do anything fancy.

------
sergiotapia
Lovely website! I always kick myself when I'm two weeks into a project and my
CSS is starting to get unwieldy.

Keeping CSS rules clean and well thought-out pays for itself in the long run,
I know this; yet - for some reason I don't follow my own advice. Hehe.

Edit: Another great website with no fluff and pure awesome content is
www.htmldog.com.

I learned about HTML and CSS there when I was a wee lad, helped me grok
floats.

~~~
fernly
I disagree on "Lovely" -- I find it hard to read. Dark-gray text on light-gray
background throws away several levels of contrast. I had to ctl-+ twice to get
a comfortable type size. And the wide blue nav-band on the left is just a
waste of space once you get past the second paragraph or so.

------
dfischer
Just going to throw this out there: <http://www.betterfrontend.com> \- been
working on this. It's open source.

------
guynamedloren
I can appreciate the layout, organization, and design of the site (as a
frontend developer myself, this is very well executed), but personally, I have
an _immensely_ difficult time learning from a structure like this:

 _< definition of a term that is difficult to grasp out of context>_

 _< loose context / example for said previously defined term with no real
world application>_

Stuff the whole thing with formal copy coupled with lorem ipsum placeholder
text, and I can't force myself to endure the boredom through the first lesson.
I have a similarly difficult time learning by reading textbooks (of which this
guide feels reminiscent). It just doesn't click for me, but it does seem to
work for many, many people.

------
stillalowbie
The first thing that the chapter regarding Performance and Organization takes
up is establishing a structure for your CSS. Whilst I'm well aware that the
approach made towards separation of similar classes into multiple files is a
good one, I've seen it argued that the usage of @import or linking multiple
stylesheets has a significant impact on performance. The guide even mentions
the important practice of combining all styles into one stylesheet in order to
avoid multiple http requests, but only later on, in a different section. I
don't think the first section does a good job at stressing this. It ought to
at least mention that some form of preprocessing should be present here, if
only to minify and combine the files. To me, it seems a bit counter-intuitive
that this first section of the guide could be interpreted incorrectly by a
newcommer (''I should separate everything and include it all in a nice, fancy
list of link tags!'')

Just some feedback. I must say that I feel like the guide so far is
representative of most of the gems I came across whilst trying to improve my
webdev, doing small-company websites on the side whilst studying, starting
with some basic HTML3/4 and CSS2 knowledge and working on 3-4 projects over
the course of 2 years. It's what I now wish I had known before diving into my
first project.

------
eranation
Looks great, and reading the first lessons shows it's also written well and
very useful.

One small question, why did you chose a non responsive layout? It is pretty
unreadable on mobile (at least for me). I'm sure it's work in progress, but
this is the first thing I've noticed.

Again, thank you for posting (and creating) I find it useful and looking
forward for the next chapters.

~~~
shay-howe
Making the guide responsive is an absolute must, and something I am looking to
do right away. For now I just wanted to get it out there and start collecting
feedback.

Thank you for the kind words!

------
ataleb52
This is truly awesome. What's even more awesome for me as a noob is to see
what the web design/dev community is like out there. People really and truly
care about educating others and sharing the knowledge they have...now imagine
if the people in every industry were as open and awesome?!

------
bhauer
Great work! The writing style is clear and easy to understand. Clearly a great
deal of work!

If I had my druthers, I'd bump up the contrast just a bit, especially in the
code blocks.

Also, just a minor thing: looks like you've used a[src...] in your attribute
selector examples when I believe you mean to have a[href...].

------
nicholassmith
The 'Learn Advanced HTML & CSS' button takes me to a password protected area,
I'm guessing that's non-standard behaviour?

Site looks really nice, not got much time to check the content whilst I'm at
work but I'll have a better look at it. It certainly seems very clear from the
quick scan I had.

~~~
shay-howe
Sorry about that Nicholas, the 'Learn Advanced HTML & CSS' button should be
good to go now. Thanks for the heads up!

Let me know what you think of everything once you've had a chance to further
check out.

------
SCAQTony
It use to be the old teaching the young, now it's the young teaching the old.
As an old guy I like it.

~~~
asciimo
Hear, hear. That's exactly the nature of my intended comment. There's a
disadvantage to being an old Web veteran, in that you tend toward the grooves
you have created over the years.

------
kellysutton
You lost me at the fade in.

~~~
goostavos
Shouldn't be so snobby. There's cool stuff inside!

~~~
mnicole
It's not that it fades in, it's that the way it does so loads the sidebar
information first, and then awkwardly displays all of the main information
staggered, but still quickly enough that the animation has no purpose. If
you're going to fade content in, do so in a manner that makes it a non-issue
for me to know which content is most important.

As it stands, the primary content page has no visual hierarchy. Everything is
the same size and loads at approximately the same exact time. On refresh,
sometimes everything under ul.breakout flashes first before hiding again. The
border-radius on the images is also giving them some awful-looking jagged
edges which appear to be coming from the filter property.

I haven't taken an extensive look at the current unlocked lessons, but as
someone with extensive CSS experience, these little things are what makes me
hesitant about the rest of the information contained therein. Additionally, as
others have pointed out, the palette is bland if not going to be hard for a
lot of people to see, so I don't think a little skepticism is snobby.

------
madoublet
In my opinion, the detailed positioning section should discuss flexbox as
well.

~~~
shay-howe
You're absolutely right!

Flexbox, along with regions and columns, is on the list of updates to be made
soon.

------
JohnHammersley
This looks great, and on first glance has a lot of useful tips. I'm pretty
sure I'll discover a lot of things I'm doing inefficiently, and hopefully this
will help me put them right.

Thanks for taking the time to put it together!

------
vitalique
The content seems just great - even in a current work-in-progress state it
reads like a solid, proper, well structured and thought out book and not just
like a typical set of more or less random posts on HTML/CSS. The presentation
wakes a grumpy rebel[1] in me, though =)

Also, I think that having the ability to play with some code and see results
right there on the site (e.g., tweak all the included numerous demos) would
bring even more awesomeness to the project.

Edit: formatting. (Thanks, saraid216, you are right.)

[1] <http://contrastrebellion.com/>

~~~
saraid216
The caret is not the greatest choice for footnote annotation, btw. I'd suggest
[1] or something. :P

------
alan_cx
I just want to praise you for it NOT looking like that awful look Win 8 is now
designed in. That style must have a name but I dont want to dirty my mind by
knowing it. ;)

Grumpy old git moans aside, what I really want to say is that layouts like
this are so, so easy to come up with on paper, as it were. Lets face it, there
is nothing new there at all. But making something so basic look so elegant is
the real art.

Yeah, there are nitpicks, but I'm sure you'll smooth those out. The bulk or
core is bang on.

As a lazy useless git, I wouldn't mind a template of it!!!!

Nice work.

~~~
mediumdeviation
The style is commonly referred to as "metro", inspired by the design of metro
signs. The idea is to reject skeuomorphism, and use large, clean typography to
deliver something that is 'digitally native'. You could think of it as a
direct rejection of Apple's adoption of decorative skeuomorphic designs that
bring things into the digital space which really don't belong here.

It's not exactly a bad idea, though it is possible to take things a little too
far. Certainty if you observe the trends in web designs recently sites appear
to be "flatter", less cluttered and more focused, without the Apple inspired
"Web 2.0" glossiness that has taken over from circa 2006 onwards

------
publicfig
This is such a great resource, thanks for this! I have been looking for a good
consolidation of some of the more advanced features just to keep around. Can't
wait to see this finished!

------
lquist
If there's a github repo attached to this, I'd love to contribute.

------
jenius
This is really awesome work Shay - I love your intro to html and css guide as
well, and have used it as a resource for many of my students (they loved it
too). Fantastic work. If you ever need help with any piece of this, I'd be
more than happy to pitch in.

I noticed one really strange thing - when you hover over any of the circles on
the homepage, all the ampersands change font. Never seen this before and I'm
sure it can be fixed quickly, just a heads up.

------
wyck
In all honesty this should be called a beginner or intermediate guide, no?

When I saw it I was thinking an advanced guide would cover some of the details
found here: <http://www.html5rocks.com> which I find somewhat hard to digest
(especially all new semantics).

In no way do I mean to be negative towards what you have done, it looks
awesome, I just expected something else.

------
Yaggo
[http://learn.shayhowe.com/advanced-html-css/detailed-css-
pos...](http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning)

"For this to work within Internet Explorer 6 [...] in Internet Explorer on an
Apple computer will also [...]"

Seriously, when was this written, in 2003? Totally irrelevant and makes
newcomers confused.

~~~
michaelochurch
I agree with you, but even in 2009, web developers had to worry about IE6. It
had enough of a market share, because so much of web browsing is at-work by
people who either aren't allowed or don't know to install a better browser.

------
carsonm
I've heavily used CSS and HTML for many years and I still learned a thing or
two in here. Great work Shay.

------
bhartman19
Yes being a newb all of shay's guides have been awesome and probably the best
guides out there today!

------
kmfrk
I already knew about the topics, but I still found the table introduction to
be incredibly useful. I haven't seen many who worked on creating beautiful,
semantic tables like this.

None of the guides online basically have tables with rounded borders.

------
chesh
This is a wonderful guide and concisely brings together all the key elements
you need to cover in web design, but without the being burdened by the huge
mass of material you see in beginner guides. Cheers!

------
thedjpetersen
This looks really nice! Any way that this could also get uploaded as a PDF?

~~~
shay-howe
I'd love to get this implemented, hopefully once all the lessons are posted.

~~~
brightghost
I recently spent the better part of a day trying to figure out this seemingly-
straightforward problem, so if you do go down this road I'd recommend a tool
called wkhtmltopdf: <http://code.google.com/p/wkhtmltopdf/>

------
wheaties
I thought image files were already in a compressed format and the gains would
only be seen for extremely large files (think MB in size.) Is this really
needed for mobile first design? Honest question.

~~~
stan_rogers
There's compressed and there's compressed. Two PNG-8 images may be
perceptually identical (or at least close enough that youd need to overlay and
switch between them to see the differences) but one has a 16-color palette and
occupies less than 1K (and may be neatly tucked into a stylesheet as a data
URI, saving a request) while the other is over 20K. Some JPEGs can barely take
4:1 compression, while others can stand 20:1 without artifacting. It depends
on the amount of detail and local contrast. (Oh, and killing any extraneous
EXIF data can save huge amounts of space without affecting compression.)

Is this really needed for mobile first design? I'd be inclined to say that
it's more important for mobile-first since data transfer tends to be slower
_and_ more expensive. Remember data caps, whether hard or soft, and overage
fees. Every byte you can save is worthwhile to a mobile user. Think of them as
the modern equivalent to a dial-up user whose host connection is a long-
distance number.

------
alfg
I love these guides. Even as an experienced front-end web developer, I always
learn something new and insightful as well as design patterns I can improve
on. Bookmarked.

Thank you for your contribution.

------
ajanuary
13px is too small for body text, but at least the page zooms okay.

------
FreshCode
I can't read the sidebar due to a lack of contrast:
<http://contrastrebellion.com/>

------
yannis
Thanks! Good layout and color scheme. I would suggest your code highlighter
has a touch of stronger colors for strings and divs.

~~~
shay-howe
Good call, thanks for the feedback!

------
bswinnerton
Really great guide. CSS is often rushed by backend coders, so it's nice to
have a formal guide like this.

------
saryant
This is the first time I've read about the image data URI technique. Is this a
common practice?

~~~
pbhjpbhj
I'd say spriting is a lot more common - <http://www.patternify.com/> uses the
URI technique, came up on HN today.

I've been using it for a few years for a vCard SVG image (that is probably
next to useless).

------
hashgowda
wiil you expose remaining tutorials from lesson 4 onwards

~~~
dangrossman
> New lessons will be posted each Monday until all ten lessons are available.

------
andrewcooke
fyi: it's all squashed to the left on chrome on linux w ghostery etc.

oh come on, this thread is being astroturfed. no valid hn post has 90% of
comments with nothing more than vacuous praise. please flag.

------
johnpolacek
Nice job Shay - Congrats!

------
jaredgeorge
Thank you!

------
bloggersway
Thanks for providing it.

------
vijayrj
Thank you!!

------
aacostarubio
Awesome Guideeee!!!!!!!

