Practical HTML5

HTML5 has been around now for some time. But how do you get your head around all that comes with it? The answer is by doing. In this Practical HTML5 course, you can do exactly that by building a site from scratch, adding new HTML5, CSS3, and JavaScript features. The end result is a deeper understanding of how the various building blocks work together, and you'll have a working site as well!
Course info
Rating
(777)
Level
Beginner
Updated
Feb 24, 2015
Duration
4h 6m
Table of contents
Creating a Site Using HTML5
Adding Some Basic CSS and JavaScript
Navigation, Forms, and Validation
Adding Style and Layout with CSS3
Adding Functionality Using Built-in JavaScript Libraries
Using Video and Adding Graphical Elements with a Canvas
Drawing More Graphical Elements with SVG
Description
Course info
Rating
(777)
Level
Beginner
Updated
Feb 24, 2015
Duration
4h 6m
Description

This course is a very practical way to learn web development using HTML5, JavaScript, and CSS3. We start with an empty website at the beginning of module 1. With every module, new topics are introduced. Instead of showing how they work in a stand-alone demo, they are added directly to our site. The outcome is a fully-functioning site that includes all of the HTML5 topics covered in the course. The site provides an online storefront for a coffee shop named Joe's Coffee Store. Among many other features, your finished site includes support for the canvas, drag and drop, new input types, geolocation, SVG, CSS3, audio, media, and much more. To conclude, this course takes the practical approach: open an editor, follow along, and by the time the course is done you'll have the whole picture of how the different HTML5 building blocks work together and can help you in avoiding the use of plugins for your web development.

About the author
About the author

Gill Cleeren is a solution architect, author, and trainer in mobile and web technologies. He's also a Microsoft Regional Director and MVP. He lives in Tienen, Belgium.

More from the author
Data Binding in Xamarin.Forms
Beginner
2h 28m
May 3, 2019
More courses by Gill Cleeren
Section Introduction Transcripts
Section Introduction Transcripts

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 Some Basic CSS and JavaScript
Hi, and welcome to the second module of this Pluralsight course titled Practical HTML5. My name is Gill Cleeren and you contact me via Twitter by @gillcleeren. In first module of this course, we have created, using the new HTML5 tags a very basic site, with some simple pages in there. In this second module, we will improve the visuals of the site skeleton using CSS3, and we will also include some very simple JavaScript already to make the site a bit more interactive. The agenda for this module is pretty much what I have just mentioned. We will start by taking a short overview of CSS. Note that we'll have a full module on the new things in CSS3 later in this course. Next, again as a short introduction, we'll see how we can make our pages more interactive using JavaScript. The first target of this module therefore is understanding what CSS is, and what it can do for our site. Understanding how to include some very simple JavaScript to make the site more interactive, is target number two.

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.

Using Video and Adding Graphical Elements with a Canvas
Hi, and welcome to module 6 of this Pluralsight course named Practical HTML5. My name is Gill Cleeren and you can follow me on Twitter via @gillcleeren. In the previous module, we've done a lot of JavaScript, to use some of the new APIs included with HTML5. In this sixth module, well, we are going to explore some more novelties in the platform. And yes, for a large part of the functionality, we'll again be using JavaScript. This chapter focuses on two of the more visual aspects of HTML5, mainly playing audio and video as well as using the canvas. The agenda for this module does indeed confirm what I just said. We're going to kick off the module by looking at how we can include in our site some audio and video. This is now with HTML5 built into the platform. Now of course this makes the life of the developer, again, a lot easier. In the second part of this module, we are going to check out one of the most popular topics that comes with HTML5, the Canvas. As mentioned, we will be writing mostly JavaScript to work with that Canvas. So after this module where is our site going to end up? We are going to add some video files into our site and we're going to do that so that users with all kinds of browsers will be able to play back that video. We'll also be including a graph, completely custom drawn using a Canvas and of course, JavaScript code. As we can see, the visual part of our site is going to be getting a lot of nice improvements in this module. Let's get started with audio and video.

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.