Welcome to Part 1 of this review of the Pluralsight course Introduction to HTML5 and CSS3 by Christopher Schmitt.

Christopher is Co-Lead of the Adobe Task Force for the Web Standards Project (WaSP), and is the author of numerous Web design and digital imaging books, including Adapting to Web Standards: CSS and Ajax for Big Sites and CSS Cookbook.

Introduction to HTML5 and CSS3

This course is the 4th course in the Front End Web Development learning path on Pluralsight.

It is originally a Frontend Masters course and still available from Front End Masters. Everyone can watch a free lesson on CSS3 Text: @font-face and Shadows.

It has had some negative comments on the Pluralsight discussion thread, but also some complimentary feedback so I give you my take on this.

In my previous experience, the quality of Front End Masters courses tends to vary more than Pluralsight courses. There are many excellent courses, and Kyle Simpson’s Advanced JavaScript and Estelle Weyl’s CSS3 In Depth are a couple of prime examples of this. There are also some mediocre courses available.

Also Front End Masters courses are meant to be master classes, i.e. aimed at bright professional web developers, not amateur wannabe web developers. At the time the course was recorded, both HTML5 and CSS3 were new and upcoming and the course was written for XHTML and CSS2.1 developers.

Also this is from the Pluralsight CEO:

https://twitter.com/1Marc/status/738603461806170113

The Introduction to Web Development course was recorded in 2014 and authored by Brian Holt.

HTML5 Design

XHTML vs. HTML

This course was originally published by Front End Masters in 2012, and this was when HTML5 was a new and upcoming thing, and XHTML was the latest standard for HTML.

We begin with a bit of a history lesson: where did XHTML go and why didn’t it catch on like it was supposed to?

Christopher cites an article from Opera (no longer online at opera.com but a backup is on github) saying 95% of websites did not validate XHTML. Because it is hard to maintain.

There’s a couple of jokes about IE6, and then he recommends reading microformats.org and buying the book Microformats Made Simple.

He tells a story about the BBC needing to stop using micro formats due to screen readers not working.

Chris mentions the rise of Web 2.0 and multimedia content.

He relates the web to architecture and quotes Frank Lloyd Wright:

“Take care of the luxuries and the necessities will take care of themselves.”

Building with HTML5

We see the markup for HTML 4.01 Transitional DTD and XHTML Transitional DTD, and Chris says we will never be able to memorise them (I don’t think I ever will either: too verbose and ugly).

We see how much simpler it is in HTML5. There’s an audience exercise to use the W3C markup validation service.

Chris gives some examples of how much more lenient HTML5 is compared with XHTML, such as allowing camel case tag names. Everything that was bad in 1999 is now good again.

He introduces some of the elements that were new to HTML5: HEADER, ASIDE, NAV, SECTION, FOOTER and gives explanations on the differences between <section>, <article> and <aside>.

The next question is what are divs for?

Marc Grabanski says:

“div has no meaning whatsoever, so there is nothing semantic about divs”

Bruce Lawson says:

“Like a semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it’s a div”

Chris shows some HTML5 rendering nicely in a newer version of Firefox, and then badly in an old version of Internet Explorer.

He introduces us to HTML5 Shiv  by John Resig and Modernizr. He explains why feature detection is better than browser detection.

HTML5 Audio & Video

Chris plays some music in a browser, then shows HTML5 audio support for Ogg Vorbis, MP3 and Wav across the different browsers.

Then we move onto HTML5 Video and see how much less markup is needed than in the olden days. After we hear the same music play again, there’s a slide with details on WIDTH and HEIGHT, video formats, the VIDEO element, and CONTROL attribute.

We see the popular codecs Ogg, H.264 and WebM. Chris mentions firefogg and VLC and handbrake. Chris describes VLC as “freaking awesome”.

He recommends Mark Pilgrim’s Dive Into HTML5 Video.

He explains that unlike Flash, HTML5 video players can be customized using CSS and don’t need any plugins.

HTML5 Video Captions

Chris begins by saying it is really difficult to do captioning in Flash, but much easier in HTML5.

Then we are played Cherry Chocolate Rain.

Chris introduces the jQuery plugin jCaps for video captioning, and then he explains a bit about SRT files.

He stresses that accessibility is a big thing on the web today.

HTML5 & Geolocation

We look at some examples: Google Maps, Twitter and see some code.

Christopher has written a jQuery Plugin that you can find here.

He also recommends the microformats hCard creator.

We end with the takeaways: a brief recap of some of the things covered here, and Christopher recommends the following books:

• Universal Design for Web Applications by Matt May and Wendy Chisholm
• Bulletproof Ajax by Jeremy Keith
• Designing with Progressive Enhancement by Filament Group
• Microformats Made Simple by Emily Lewis

 

Coming soon in Part 2

Empowering CSS3

CSS3 Color & Opacity

CSS3 Text: Selection & Columns

CSS3 Text: @font-face & Shadows

CSS3 Images

CSS3 Effects

Advanced CSS3 Animations

Coming soon in Part 3

CSS3 Workshop

How We Solve Problems
Exercise: Build an American Flag
American Flag: Layout
American Flag: Resets
American Flag: Data Attributes and Stripes
American Flag: Stars
American Flag: Wrap-up
Comments and Q&A