HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).
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.
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.
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...
showing All 17 lessons...
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.
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.
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.
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.
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/
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.
Learn how to set an SVG as the background image of an element. Background images can be resized by changing the
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.
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
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.
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
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.
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.
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.