While looking at our Photoshop mockup, we write start writing HTML to describe what we are looking at. We are of course using HTML5 whenever it makes sense to staying as absolutely semantic as possible. For example we use the <time> element for the publication date of the <article>, because, you know, that’s smart and semantic.
We touch on using Zen Coding a little, and jump over to CodePen because it has it built in. Also, command clicking in Sublime Text 2 is awesome.
We use HTML comments (for now) to signify closing tags that are far apart from their opening counterpart. e.g.
<div class='page-wrap'>
... lots of space
<div><!-- END div.page-wrap -->For our titles, we use some real titles from the live website so we’re working with some real content.
I am getting this error:
“No video with supported format or MIME type found issue”
Hey Chris, how you get auto update Chrome? Browser addon or Sublime special action?
I like the way you set active menu item from body class.
CodeKit
Some of the videos keeps crashing and stopping :((
And i cant download the video either.
Try refreshing the page and clicking the button “Download Video File”. Otherwise you can report issues directly to me at [email protected].
I’m going to bury this in an effort to keep comment threads directly about the content.
There’s a ST2 package called “AutoFileName” (https://github.com/BoundInCode/AutoFileName) that autocompletes the filename for you…very handy
Chris, do you use the Apple keyboard that comes with whatever Mac(s) you use? Have you ever considered purchasing a third party one? The amount of typos I’ve seen you make in your screencasts over the years is incredible! ;)
I use the Microsoft Ergonomic Keyboard because I have RSI problems.
I sure do make a lot of typos. Part of it may be the whole screencasting bit (the pressure is on!). Do you find it very distracting? If you had to guess do you think you make more or less when you develop?
Ah, I’m no stranger to RSI problems, but fortunately none of mine have been long-lasting. Obviously you need to be careful with that kind of stuff, especially when you play instruments as well!
I don’t find it at all distracting – except for when you miss a $ symbol on a variable and you spend a few minutes trying to figure out what the problem is, but that’s an error we all make from time-to-time. It’s actually humorously infuriating when that kind of thing happens during a screencast!
I would say I make considerably less typos when I’m coding, but I have been situations where I’ve been making a lot and a change of keyboard has helped greatly. I haven’t been under pressure though – as you say – by talking and recording a screencast at the same time.
Hey Chris,
There is a cool trick within Zen coding that allows you to tab through a whole section of nav links to type the anchor text. Also may work with class names. So instead of moving the cursor or clicking to type “home” “snippets” etc… you just hit tab and type…tab and type… pretty cool and I find it very useful.
Any reason why you didn’t wrap the CSS-Tricks in an h1 or have the main nav in a ul?
I like to save the h1 tag for article titles. I think in a perfect world what I should have done is have it output a h1 tag on the homepage, but just a link on any other page. Then somehow style it so it’s visually no different.
I know of a guy who actually uses screen readers who says navigation in lists is actually worse.
In the SEO world, the H1 tag is like a religious debate. I think it’s at least worth mentioning that H1s are still seen as a MINOR ranking factor for search engines. Obviously, CSS-Tricks can get away with murder in SEO, but if you’re building a brand new site, it’s worth it to consider how you’re using H1 tags.
Chris made a good choice here to reserve H1s for article titles. It makes sense semantically and it also helps Google understand the content a little better. If every page had an H1 of “CSS-Tricks,” sure, every page is technically a “CSS-Trick,” but that doesn’t help any one, human or machine.
But I’m also going to contradict myself here and say, in terms of SEO, it REALLY doesn’t matter. I’ve seen people in the SEO world make clients give every page a unique, keyword-stuffed H1 tag and it made me cry. The impact is very insignificant.
You’re right that it’s like a religious debate, and as with religious debates, there are too many people with absolutist positions. Semantically, it would probably make sense to have CSS Tricks as an h1 on the homepage, because essentially the function of the homepage is to be the intro to the site.
I must admit, I do find it strange that there is no h1 on the front page of CSS Tricks, although, of course, there is absolutely no consequence to this in practical terms.
Hey Chris — I’ve been reading lately that all section tags need to contain an h1 as part of the HTML5 page outline. I noticed you aren’t doing that here. Just wondering what your thoughts are on the subject. It’s one of the more confusing aspects of HTML5.
Ok….I will be corrected here…but isn’t one of the main benefits of using an HTML5 doctype is that we get access to more advanced document outlining techniques…I thought that the top of the document should be an h1…and then each section and article can again also have an h1 tag because they are considers new sections…so a proper outline will be maintained…That is to say if you were to run your document through an outliner your top level h1 would be correct and then your h1’s inside sections and articles would be considered sub headings and sub sub headings of the document but that they would still be main heading of their respective section or article.
Hi Chris,
I have a very innocent and maybe even stupid question but as it keeps bugging me, I need to ask…
I have noticed you use the class attribute almost always when using divs, I have come back specially back to this first HTML video to see that again & be sure.
What am I missing ? why use div class=”logo” why not use id ? are you planning to have another “logo” class somewhere else in the document ?
thanks
Here’s something you can read about that.
Thanks for mentioning ST2 shortcut of Cmd+Opt+period to close a tag (around 12:05)! I was wondering.
Now if I could only figure out how to highlight (and/or jump to) just the companion to either an opening or closing tag; it would save me such a lot of scrolling and cussing. Any ideas?
Enjoying this series, late as I am to the Lodge.