Creating a Site Using HTML5 Hi, and welcome to this Pluralsight course titled Practical HTML5. My name is Gill Cleeren, you can contact me via twitter via @gillcleeren. As the title of this course implies, this is a course aimed at teaching you all the aspects of HTML5. But in a very practical way. Along the way, we will be building a website which uses the most commonly used features of HTML5. So by the end of the course, we'll end up with a fully working website that you can use as a starting point for your own HTML5 endeavors. In this very first module, titled Creating a Site Using HTML5, we'll be exploring some basic topics around HTML5. To be more precise about what will be covered in this module, let's take a look at the outline first. As mentioned, the course is very practical so we will be building a site with HTML5 together. I think it's a very good idea to start by exploring what we will be working towards. So I'm going to show you the end result first. I'll then give you a high level overview of what HTML5 really is and why it is such an important thing for the web today and tomorrow. After that somewhat more theoretical part, we'll start creating our site. I'm going to start by building the skeleton for a couple of pages. When we reach the end of this first module, we'll have an understanding of what HTML5 brings to the table. We'll already have a couple of pages created in a somewhat rough first version. We will of course, continue working on the site in the following modules to make it more polished.
Adding Style and Layout with CSS3 Hi, and welcome to module four of this Pluralsight course named Practical HTML5. My name is Gill Cleeren and you can follow me on Twitter via @GillCleeren. So far in this course, we have created a number of pages. But they don't always look really good yet. If styled them with CSS a bit in module two, when we focus mostly on using CSS for the layout. In this fourth module, we're going to prompt back to CSS and mainly we are going to add quite a few style changes using the new options added in CSS3. Now, CSS3 has quite a few interesting additions, and again, these will make our lives as web developers easier. It contains many new things for which we needed to perform some weird tricks in the past, or maybe use an external library. We are going to start the module again in the usual way, by looking at the outline, that is. As we can see, the outline is pretty short. We're going to spend most of our time looking at what is new in CSS3, part of HTML5. Secondly, we are going to change our layout a bit, since CSS3 also has new features to perform page layout. By the end of this module, Joe's Coffee Store site will again look much better. We will also have better layout added in places. For example, some pages will use the new, multi-column layout, courtesy of CSS3. So, a better looking site by the end of the module, can't wait. Lets dive straight in.
Drawing More Graphical Elements with SVG Hi, and welcome to the last module of this Pluralsight course named Practical HTML5. My name is Gill Cleeren and you can follow me on Twitter via @gillcleeren. In module six, we have discussed both support for audio and video in HTML5, as well as adding rich graphics, using the Canvas. As we have seen there, the Canvas is capable of quite a lot of interesting features. However, it is pixel-based, which means that if you want to make your graphics scale out, it'll be a manual job for you to do. If you're after scalable graphics for your site, you can take a look at SVG, scalable vector graphics. SVG is the focus of this last module. As set, this module focuses entirely on SVG. We'll start first with the exploration of the SVG feature, and we'll add some SVG graphics to our site. Next, we'll take a look at the support for animations in SVG. So, at the end of this chapter, we'll have added more graphical aspects to our site. In the previous module, as you remember, we have created a bar chart, using the Canvas. In this chapter, we'll add a bar chart as well, but this time using SVG. And next we'll add some animations in this bar chart as well, of course again using SVG.