Using HTML5 and CSS3

A guided walk-through of how to upgrade a site using HTML5 and CSS3
Course info
Rating
(749)
Level
Beginner
Updated
Dec 2, 2011
Duration
2h 12m
Table of contents
Description
Course info
Rating
(749)
Level
Beginner
Updated
Dec 2, 2011
Duration
2h 12m
Description

This course tackles the topic of HTML5 and CSS3 with the perspective of upgrading an existing site. A realistic approach is demonstrated that explains how and why to modify existing HTML tags to use HTML5 features. Tips and tricks provided to ensure a consistent user experience across multiple browsers.

About the author
About the author

J. Michael Palermo IV is a Microsoft Developer Evangelist based out of Phoenix, AZ

More from the author
Microsoft Design Principles
Intermediate
1h 6m
6 Dec 2013
CSS3
Beginner
2h 46m
6 Mar 2012
Section Introduction Transcripts
Section Introduction Transcripts

An Accelerated Overview of HTML5 and CSS3
Hi, this is Michael Palermo. I'm very excited to join you in this journey on How to Upgrade Your Site with HTML5 and CSS3. This module will serve as an introduction. With regard to the module objectives, I highly recommend that you pay attention here and see if this course or this module is right for you. We are going to begin with a course overview, a look at if you meet the profile. We'll have an accelerated discussion of HTML5 and CSS3. We're going to explore what the upgrade scenario is and then we're going to conclude with a summary of all the things that we've learned about so far. Let's tackle first, are you right for this course. The profile of the course candidate would be one who's not afraid of web design or web development as of today. And it really doesn't matter what programming platform you're with, as long as you understand the basic necessities such as angle brackets in HTML or your dangers with CSS or you understand Script or can at least copy and paste it from the internet and bring it to your site. As long as you have an idea of what roles these serve, then you fit the profile of the course candidate. Now you're going to want to know, are you interested in this course.

Semantic Tags
Hi, this is Michael Palermo. In this course, How to Upgrade Your Site with HTML5 & CSS3, we're going to now examine the use of semantic tags, why you care, and how you should use them in your site. For our module objectives, we're going to consider the following. First, what is missing from HTML5? Now this is actually a positive spin and you'll see why in a minute, but there is something that you will be glad is not there. Why we should use semantics, why you should even care, we're going to have a demonstration of how you can upgrade perhaps some older content to use semantic tags, followed by a summary of everything that we've done so far. So first, what's missing from HTML5?

Audio, Video, and Canvas
Hi, this is Michael Palermo. In this video course on How to Upgrade Your Site with HTML5 and CSS3, this module is going to focus on Enhancing the User Experience with Audio, Video, and Canvas. With regard to the module objectives, they are as follows. First, we're going to have an overview of the user experience in a browser today and in times of old, and what's leading really to these HTML5 enhancements. Then we'll consider three of those enhancements. First, a demonstration of audio, next a demonstration of video, and then we're also going to demonstrate canvas, which is, therefore, perhaps simple or complex animations. Then we're going to demonstrate how these things could be used in an upgrade scenario. This upgrade scenario is going to be continued in the following modules. After that, we'll have a summary to discuss the things that we did cover in this module, and lessons learned.

New Form Inputs
Hi, this is Michael Palermo. In this video course on How to Upgrade Your Site with HTML5 and CSS3, this module is going to focus on collecting data from the user with New Form Inputs. These are the new form inputs introduced in HTML5. The Module Objectives are as follows. First we're going to have a brief overview of HTML forms, somewhat of a history of what we've had to do, and what's led to the new input types in HTML5 today, which leads us right into a demonstration of those new HTML5 form inputs, followed by how they can be implemented in our upgrade scenario. Finally we'll have a brief summary that explains what we've learned.

CSS3
Hi, this is Michael Palermo, and in this video course on How to Upgrade Your Site with HTML5 & CSS3, the focus of this entire module will be on the use of Cascading Style Sheets in its third version or CSS3. Our module objectives are as follows. First we'll have a brief overview of CSS and what CSS3 really means. Then we'll have a demonstration of some new styling definitions. These categories here, Fonts, Color enhancements, Rounded corners, Shadowing, and Transformations will be the focus in this particular module. They do not represent all the new CSS3 features, but a sampling of what's possible and how easy it is to add it to an existing site. In fact, all of these demonstrations will be done using the upgrade scenario that we've been building on from module to module. Then we'll conclude with a summary of all the things that we've learned so far.

User Experience Across Multiple Browsers
Hi, this is Michael Palermo. In this course, How to Upgrade Your Site with HTML5 and CSS3, in this final module we're going to consider the user experience across multiple browsers. Our module objectives are as follows. We want to understand the challenge of developing for multiple browsers, and especially when we're introducing new features, the big question is how is it going to act in other browsers with various versions. We're going to demonstrate what fallbacks are, we're also going to learn about feature detection and see demonstrations of that, and we're going to demonstrate the lessons learned in our ongoing upgrade scenario. Then this module concludes with a summary, which also has a summary of the entire course.