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.
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:
The Introduction to Web Development course was recorded in 2014 and authored by Brian Holt.
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.
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.
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.
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.
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
CSS3 Color & Opacity
CSS3 Text: Selection & Columns
CSS3 Text: @font-face & Shadows
Advanced CSS3 Animations
Coming soon in Part 3
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