HTML5 Fundamentals

In HTML5 Fundamentals, you will learn all about the new and updated markup along with the associated JavaScript APIs that make up the modern web.
Course info
Rating
(611)
Level
Beginner
Updated
Mar 3, 2017
Duration
3h 47m
Table of contents
Course Overview
Introduction
Finding Parts of the Page
Working with User Input
Music & Video (without Plugins)
Drawing Shapes, Charts, and More
Drag and Drop
Description
Course info
Rating
(611)
Level
Beginner
Updated
Mar 3, 2017
Duration
3h 47m
Description

HTML5 is a big and broad topic that has evolved much over the years. In this course, HTML5 Fundamentals, you'll learn about HTML5 from the new and updated markup to the associated JavaScript APIs that help make up the modern web. After gaining perspective on the breadth, scope, and history of HTML5 you learn about native selection, web forms, media, drawing, and drag and drop APIs. As you go through this course, you'll learn how to deal with out-of-date browsers and how you can detect browser capabilities so your web apps take advantage of all that HTML5 has to offer. After watching this course, you will have learned how to deal with out-of-date browsers and how you can detect browser capabilities so your web apps take advantage of all that HTML5 has to offer.

About the author
About the author

Craig Shoemaker is a developer, instructor, writer, podcaster, and technical evangelist of all things awesome.

More from the author
jQuery: Getting Started
Beginner
1h 40m
Jun 3, 2015
More courses by Craig Shoemaker
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello and welcome to HTML5 Fundamentals. This is Craig Shoemaker, and I'm glad you're here. As for me, I've worked as a professional developer for over 15 years specializing in the web. I've produced a number of courses here on Pluralsight, written for CODE Magazine and MSDN Magazine, and also for Wiley Publishing. Further, I'm a former ASP. NET MVP and the host of Polymorphic Podcast. And I've been both skydiving and bungee jumping, and I can tell you skydiving is more fun! HTML5 is a big and broad topic that has evolved much over the years. In this course, you'll learn about the intersection of new markup and JavaScript APIs that make up what we now know and love as HTML5. To help grant perspective, you'll learn about the history of HTML5 and what that means for the future. You'll learn about different areas of the API such as selection, media, canvas, forms, and drag and drop. You'll learn how you can get reliable information regarding browser support and how to easily detect if specific features are available in your user's browsers. And since we live in an ever-changing environment, you'll also learn about polyfills and fallbacks and how they can help you work with not yet implemented features today. So I look forward to spending this time with you during the next six modules to learn all about HTML5. So let's dive in together and learn all about HTML5.

Introduction
Well hello and welcome to HTML5 Fundamentals. This is Craig Shoemaker, and I'm excited about what you're about to learn in this course. HTML5 has had quite a journey over the last few years, and so during our time together, I'm going to help you see how using HTML5 can make a huge impact on your web application development. To start things off, I'd like to show you a demo of the application that we'll use where you can see the code and see the results of all that you'll be doing here in HTML5. The website that's before you represents the code that's available for download with this course. And every page of the site has all that you need at your fingertips in order to understand exactly what's going on. So the home page here has sections here for every single module that exists in the course. And when you go into a specific area, we'll go into Finding Parts of the Page, you'll notice that you can see a preview of the markup that we'll be working with, as well as the markup itself. So instead of having to inspect element or view source of the page, you can go to the Markup tab and see the markup of the page that we're working with, as well as with any CSS and, of course, the most important parts, any JavaScript. So each one of these pages will have all the code that you'll be learning about available running within the website that you can download as part of this course. Now as we work with each page, I'll open up the Developer Tools, and as we work with each command, you'll be able to see the result here in the console, and it's interactive as well so you can see the results right here on the page. So even though I'm running full-screen, this is just a basic regular everyday website. But it's all tailored specifically for your learning here in HTML5 Fundamentals. So now let's talk in depth about what you'll be learning in each one of the modules of the course.

Finding Parts of the Page
In this module, you'll learn all about the Selection API that's now available within HTML5. In the past, traditional DOM selection left something to be desired. The API is limited, and it lacks some of the basic functions needed to be truly useful. In fact, the meteoric success of libraries like jQuery initially came from the need to be able to select against the DOM in an easy, reliable, and speedy fashion. Well, in HTML5, there's a host of new selectors that make it not only easy to work with the DOM but also super-fast. So let's begin working with the Selection API. But, first, I want to show you how to set up the sample code for this course.

Working with User Input
Hello and welcome back to HTML5 Fundamentals. In this module, we turn our attention toward working with user input. User input forms are a significant aspect of web applications. So let's take a look at now what's available in the browser. Now as I stated previously, new functionality found in HTML5 comes in the form of new elements, new attributes of existing elements, and new JavaScript APIs. And we'll see each of these emerge in this module.

Music & Video (without Plugins)
Welcome to the Music and Video module of HTML5 Fundamentals. In this module, you'll learn how to add media support to your applications using the native media players. We'll take a look at what's included in the media APIs and how to work with them, plus I'll show an overview of browser support for the different media types. HTML5 media consists of at least three parts. First, the native media element. This is the audio or video tag used in your HTML markup to host a media file. Next are the different media types. There are scores of options available to you when it comes to encoding and packaging media. So I'll briefly cover how these are supported by the major browsers of the day. Lastly, there's the Speech API. Have you ever wanted your application to respond to speech? Well, this is the API to do it. Now the Speech API is out of the scope for this fundamentals course. But as we move on, let's go ahead and touch on browser support and media types.

Drawing Shapes, Charts, and More
Drawing Shapes, Charts, and more. In this module, you'll learn the basics of the Canvas API, and together we'll cover what you can and can't do and a little bit about what you should and shouldn't do when it comes to using the canvas. You'll learn how to draw paths and shapes, use transformations, learn to manipulate the canvas with state management, create dynamic charts, and even extract a thumbnail image from a running video. Now before we begin discussing the canvas, let's contrast two different types of images. The first is a vector image. When you think of vector images, you can think of the type of image often associated with Adobe Illustrator where the image is made up of a set of instructions of how to draw the image. And this is all rendered on the fly when the image is displayed. Vectors are often used to form relatively simple shapes or compositions of shapes that make a larger image. One of the benefits of a vector image is that you can scale the image to any size that you want without losing resolution. Here you can see how the smaller image is just as crisp as the larger one. Now another type of image that you encounter is a raster image. Raster images are like JPEGs or PNGs or GIFs. These are images with a set dimension where every pixel within the defined space of the image has a designated color. Raster images have many advantages. In fact, the web is built on these types of images. But one of the drawbacks is that as you increase the size of the raster as shown here on the right, you begin to see that the image loses fidelity as the dimensions are stretched beyond the original intent of the image. So rasters, though, are great for pictures where you need to have explicit control over the color of each pixel in the image. Now when you think of HTML5 canvas, we're talking about rasterized images supported within the dynamic drawing surface.

Drag and Drop
Welcome back to HTML5 Fundamentals. This is Craig Shoemaker, and thanks for joining me for this module on drag and drop. In this module, you'll learn the basics of drag and drop, learn about the event pipeline and restrictions of drag and drop operations, and learn how the browsers deal with the drag and drop data internally. Now the drag and drop functionality is driven passed off of events, so let's dive in to each one of these events now.