HTML 5

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

COURSES 2

WATCH Alyssa Nicoll's COURSE

Create Graphics with HTML Canvas

Create Graphics with HTML Canvas

It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology calle...

7 lessons

WATCH Damon Bauer's COURSE

Create an SVG Icon System

Create an SVG Icon System

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are p...

11 lessons

Generate multiple HTML components from an array with the "for loop" in TwigJS

In this lesson, we transform a series of TwigJS "includes" into a clean "for loop". We store our content into an array and let the loop generate one HTML component for each entry.

Simon Vrachliotis
1:19

Make your HTML components dynamic with the "with" keyword in TwigJS

In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.

Simon Vrachliotis
1:29

Create reusable HTML components with the "include" tag in TwigJS

In this lesson, we take a repeating block of HTML and turn it into a dynamic, reusable TwigJS component. The "include" tag allows us to generate multiple instances of the component, each with their...

Simon Vrachliotis
1:09

Browse all HTML 5 lessons.

showing All 24 lessons...

Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart

Add strokes to circles using HTML Canvas

Add click interaction to HTML Canvas using JavaScript events

Draw circles in HTML Canvas using .arc

Specifying Height and Width on the Canvas Element

Add color to graphics using HTML Canvas

Draw in HTML Canvas

Generate multiple HTML components from an array with the "for loop" in TwigJS

Make your HTML components dynamic with the "with" keyword in TwigJS

Create reusable HTML components with the "include" tag in TwigJS

Embed SVG Directly In Markup with the “Use” Tag

P

Load an External SVG Inside a “Use” Tag

P

Add an SVG as an Embedded Background Image

Add an SVG Sprite as a Background Image

P

Add an SVG as a Background Image

Include an SVG with an Image Tag

P

Using the tabindex attribute for keyboard accessibility

Accessible modal dialogs

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

Intro to ARIA

What is the Accessibility Tree?

Headings and semantic structure for accessible web pages

Building Forms with Accessibility in Mind

Accessible Icon Buttons

html5 tutorial about Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart

Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart

5:03 html5

You might think that drawing a piece of a pie possible with the .arc method. However, in this lesson, you'll see why that is impossible. Instead we must draw a pie piece with the .arcTo canvas method.

.arcTo takes x1, y1, x2, y2 and radius to draw a nifty arc shape. You then must use the moveTo and lineTo methods to complete the beautiful piece of a pie. As a bonus, the clearRect method is used to demonstrate clearing the canvas!

html5 tutorial about Add strokes to circles using HTML Canvas

Add strokes to circles using HTML Canvas

2:49 html5

In this lesson we will look at the dangers of not closing your circles. So we’ll have to learn to build the habit of always closing our paths.

We also cover giving circles stroke, along with specifying strokes styles such as lineWidth, strokeStyle, and fillStyle.

html5 tutorial about Add click interaction to HTML Canvas using JavaScript events

Add click interaction to HTML Canvas using JavaScript events

5:40 html5

Being able to draw shapes is cool and all, but we want to add interactivity to our graphics!
In this lesson, we will learn how to add 'click' handlers to our canvas elements using the addEventListener method.

html5 tutorial about Draw circles in HTML Canvas using .arc

Draw circles in HTML Canvas using .arc

3:55 html5

Circles are one of the most difficult and prestigious shapes to achieve in Canvas. No circle method is provided, instead, we must utilize the .arc method to achieve circle happiness.

The .arc method however is a bit funny, it doesn’t use degrees like we’re used to, instead it uses radians. So in this lesson we’ll also learn how we can use some maths to be able to enter the familiar degrees.

html5 tutorial about  Specifying Height and Width on the Canvas Element

Specifying Height and Width on the Canvas Element

1:39 html5

Let's take a look at a bug you can run across, by not specifying height and width of your HTML canvas element.
We will look at giving the canvas element a height and width property inline.
We’ll also look at how we can alternatively give canvas those height and width properties right in our Javascript.

html5 tutorial about Add color to graphics using HTML Canvas

Add color to graphics using HTML Canvas

2:54 html5

Black is getting awfully boring, let’s add some color to our shapes.

We can use the fillStyle method on our context to add colors. In this lesson we will look at how we can pass color names, hex values, and rgba values as strings to fillStyle to add colors to our graphics.

We’ll also show why the order of where you call methods on context matters.

html5 tutorial about Draw in HTML Canvas

Draw in HTML Canvas

2:53 html5

It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called Canvas that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations!

In this course, we will learn the basics of using Canvas. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.

html5 tutorial about Generate multiple HTML components from an array with the "for loop" in TwigJS

Generate multiple HTML components from an array with the "for loop" in TwigJS

1:19 html5

In this lesson, we transform a series of TwigJS "includes" into a clean "for loop". We store our content into an array and let the loop generate one HTML component for each entry.

html5 tutorial about Make your HTML components dynamic with the "with" keyword in TwigJS

Make your HTML components dynamic with the "with" keyword in TwigJS

1:29 html5

In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.

html5 tutorial about Create reusable HTML components with the "include" tag in TwigJS

Create reusable HTML components with the "include" tag in TwigJS

1:09 html5

In this lesson, we take a repeating block of HTML and turn it into a dynamic, reusable TwigJS component. The "include" tag allows us to generate multiple instances of the component, each with their own custom content.

html5 tutorial about Embed SVG Directly In Markup with the “Use” Tag

Embed SVG Directly In Markup with the “Use” Tag

1:49 html5 PRO

In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

html5 tutorial about Load an External SVG Inside a “Use” Tag

Load an External SVG Inside a “Use” Tag

1:38 html5 PRO

Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.

Note: The SVG must be hosted on the same domain as the requested page.

Some older/less feature complete browsers don’t support this functionality. If you only care about the latest browsers, you can get away with not using a JavaScript polyfill (but you should still provide some sort of fallback). However, the svgxuse polyfill can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

html5 tutorial about Add an SVG as an Embedded Background Image

Add an SVG as an Embedded Background Image

2:52 html5

Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

html5 tutorial about Add an SVG Sprite as a Background Image

Add an SVG Sprite as a Background Image

4:11 html5 PRO

Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.

This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.

However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.

html5 tutorial about Add an SVG as a Background Image

Add an SVG as a Background Image

1:32 html5

Learn how to set an SVG as the background image of an element. Background images can be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon.

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on :hover), this could be a good option for you.

html5 tutorial about Include an SVG with an Image Tag

Include an SVG with an Image Tag

1:06 html5 PRO

Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

html5 tutorial about Using the tabindex attribute for keyboard accessibility

Using the tabindex attribute for keyboard accessibility

5:09 html5

You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keyboards and screen readers. For more on using tabindex in practice, check out my focus management lesson.

html5 tutorial about Accessible modal dialogs

Accessible modal dialogs

11:41 html5

Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the native HTML5 dialog element and experimental inert attribute (with polyfills) and JavaScript focus management. We'll explore how to make a DIV or non-modal dialog into a modal one to contrast the differences. Finally, we'll expose accessibility information for NVDA, Voiceover, JAWS and other screen readers.

For more details on creating accessible dialog content, check out this great article by Marco Zehe, Advanced ARIA Tip #2: Accessible Modal Dialogs: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

Used in this lesson:

html5 tutorial about How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

12:24 html5

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

html5 tutorial about Intro to ARIA

Intro to ARIA

8:09 html5

What is this thing called ARIA? In this lesson, you'll learn about about WAI-ARIA, a.k.a. Accessible Rich Internet Applications, the W3C spec for specifying accessibility information in HTML and SVG. I cover the basics of applying ARIA roles, states and properties, helpful information for creators of user-interface widgets and component libraries. But it's important to note that you might not need ARIA at all! Before using it, it's important to educate yourself on what ARIA does and doesn't do for you.

html5 tutorial about What is the Accessibility Tree?

What is the Accessibility Tree?

4:29 html5

Coding for accessibility? You should get familiar with the accessibility tree, a structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers. There are multiple tools for visualizing this tree; in this lesson we'll look at Chrome and Microsoft Edge. For more on Accessibility APIs, refer to this amazing article by Leonie Watson. For a how-to on setting up the Chrome Accessibility Inspector, visit bit.ly/chrome-a11y.

html5 tutorial about Headings and semantic structure for accessible web pages

Headings and semantic structure for accessible web pages

7:01 html5

Webpages are more than simply how they look. By coding with headings, landmarks and semantic HTML, you can expose a rich document outline to users of assistive technologies, as well as search engines.

html5 tutorial about Building Forms with Accessibility in Mind

Building Forms with Accessibility in Mind

7:02 html5

Are you building a website or web application that takes user input? Then it's important for you to watch this demo. Learn how to create more accessible forms using basic HTML form labels, fieldsets and legends. You'll even learn a bit about what makes Safari's developer tools pretty awesome.

html5 tutorial about Accessible Icon Buttons

Accessible Icon Buttons

3:42 html5

Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?