Welcome to the final part of this review of the Pluralsight and Front End Masters 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. He is also the co-host on the Non Breaking Space Show.
Also in this series:
CSS3 Workshop
How Do We Solve Problems?
We hear that “it’s always a plumbing problem”
Our browsers limit our design
Christopher explains what a CSS Reset is, and tells a story about a job interview he had with Apple. This brings us on to building an American Flag in CSS, which he says is a really great test for your CSS skills.
Exercise: Build an American Flag
Here we see the audience members present their work on building the flag. I recommend skipping this because the audio is bad and the picture quality of viewing the project screen isn’t great either.
The takeaway from this lesson is there are many different ways to achieve this result with CSS.
American Flag: Layout
An audience member lists all the HTML4 element types he can remember (around 25 types). We then learn that in HTML4 there are a total of 91 different element types.
We see some examples of common HTML errors.
American Flag: Resets
We see some available CSS Resets:
Christopher uses The Cincinatti Enquirer as an example of poor use of CSS without regard to CSS Resets. Thankfully they’ve since redone their site and it looks much better now.
Christopher describes the normal flow as the default method of rendering a page, and moves onto the perils of absolute positioning.
He also mentions Relative Positioning, and this is used for the first step in creating our flag.
Next up is Attribute Selectors and Christopher highly recommends using these.
By the end of this lesson we have all of the stripes for our flag.
American Flag: Data Attributes and Stripes
Christopher recommends John Resig’s article on HTML5 Data Attributes.
He demonstrates a SXSW site for locating south by south west parties that was made using CSS3.
For cool effect, our flag needs to have subtle gradients. Again the code uses the vendor prefixes. It is actually very difficult to see any difference in this clip.
We are invited to visit the following sites and pages on CSS gradients:
There’s also a MSDN link for IE8 and below (my advice is don’t bother with this as hardly anyone uses those anymore).
For the stars on the flag, there is a font available from fontsquirrel.com that is useful, and Chris discusses how to only extract the one character that we need instead of the entire set.
American Flag: Stars
You might be interested in Blue Vinyl’s Seeing Stars font if you want a variety of designs.
This clip is heavily cut with several jumps, so it is quite difficult to follow.
Christopher runs through a ton of jQuery that he used.
We also see how to transform the stars, and learn that box-shadow has been applied as well.
Once the flag is complete, Christopher discusses adding fireworks to the background page for a 4th of July feel. This is a static image rather than animation, and is created by combining an image with an image mask.
The final result looks very good.
American Flag: Wrap-up
This is a discussion with the audience. Someone asks “Can I see this running in Internet Explorer?” and Chris answers “Er, no…Because I don’t have it installed on my Mac!”
Another audience member asks the question “Why not just use an image?”. Chris answers by talking about the LESS language.
If you’d like to learn more about LESS Shawn Wildermuth has made the course A Better CSS: LESS and SASS. There are also several Pluralsight courses on SASS.
He also describes a situation in which it would be quicker to update the look of website with CSS code than in Photoshop.
Christopher concludes with some useful websites including caniuse.com and css-tricks.com
Comments and Q&A
Now we see the American flag with animation and firework sound effects!
Chris talks about turning down the job with Apple, then he’s asked about HTML5 Shiv, and he says it’s baked into Modernizr.
He also discusses rounded corners in old versions of IE, and this reminds me of Kyle Simpson’s Browser Versions are Dead talk – TLDR; there comes a point where it’s simply not worth the effort involved.
A member of the audience makes a joke about Internet Explorer that reminds me of the Internet Explorer 7 Tax that the BBC reported soon after in 2012.
Christopher says think of HTML as the noun, CSS as the adjective, and JavaScript as the behaviour.
Course Verdict
The Front End moves really, really fast. When Christopher recorded this course in 2012, HTML5 and CSS3 we really new upcoming technologies.
Today, much of the code covered in this course is no longer best practice. Using the information in this review, these areas will hopefully be clear to you. If in doubt, I recommend referencing resources such as caniuse.com, Mozilla Developer Network, CSS Tricks and Programmers StackExchange.
Estelle’s CSS3 In Depth course is also beginning to date in some areas, but is a year newer and that year saw a lot of changes to the HTML5 and CSS3 specifications, which were in draft form at the time.
Also do not let the title of the course fool you into believing that it is a course for CSS newbies. If you are new to web design and development check out Scott Allen’s course below.
Another disappointment is the speed at which this course jumps around. Many topics which were only given 15 or 20 seconds, are deserving of much more attention than that in my opinion.
There is still value to be gained from watching Christopher’s course, at least for many. I learned several things and the course gave me a new perspective on the various ways that you can achieve the look that you want with HTML5 and CSS3. I would definitely be interested in watching another course from Christopher as long as it is new and up to date.
It is my hope that this review will point you to the areas of most interest yourself so that you can extract the maximum value from this course in the minimum amount of time.
Related Courses
Introduction to CSS by Scott Allen
Zombie Code Kill 