Improve Chart Accessibility with the figure Element HTML5 introduced the figure element and the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure. ..
Improve Accessibility of Audio Content with the audio Element HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript. The audio tag supports the controls attribute. This sh..
Make Screen Reader Navigation Easier with the nav Landmark The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next cha..
Make Screen Reader Navigation Easier with the header Landmark The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages. header shares the embedded landmark feature you saw with main, allowing assistive ..
Make Screen Reader Navigation Easier with the footer Landmark Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page. Camper Cat's training page is making good progress. Change the div he used t..
Wrap Content in the article Element article is another one of the new HTML5 elements that add semantic meaning to your markup. article is a sectioning element and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. Determining whether content can stand alone is usually a judgment call, but you can use a couple of simple tests...
Jump Straight to the Content Using the main Element HTML5 introduced several new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others. By default, a browser renders these elements similar to the humble div. However, using them where appropriate gives additional meaning to your ..
Use Headings to Show Hierarchical Relationships of Content Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for..
Add a Text Alternative to Images for Visually Impaired Accessibility You've likely seen an alt attribute on an img tag in other challenges. alt text describes the image's content and provides a text-alternative for it. An alt attribute helps in cases where the image fails to load or can't be seen by a user. Search engines also use it to understand what an image contains to include it in search r..
Make Motion More Natural Using a Bezier Curve This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear and ease-out cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this. The animation-timing-function automatically loops at every keyframe when the animation-iter..
Use a Bezier Curve to Move a Graphic A previous challenge discussed the ease-out keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out keyword (for the blue element) and linear keyword (for the red element) is demonstrated. Similar animation progressions to the ease-out keyword can be ach..
Learn How Bezier Curves Work The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves. In CSS animations, Bezier curves are used with the cubic-bezier function. The shap..
Change Animation Timing with Keywords In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive. There are a ..
Animate Multiple Elements at Variable Rates In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the same goal by manipulating the animation-duration of multiple elements. In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To..
Animate Elements at Variable Rates There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules. To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the tw..
Make a CSS Heartbeat using an Infinite Animation Count Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge. The one-second long heartbeat animation consists of two animated pieces. The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and ..
Animate Elements Continually Using an Infinite Animation Count The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example: animation-iteration-count: 3; In this case the animation will sto..
Animate Elements Continually Using an Infinite Animation Count The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example: animation-iteration-count: 3; In this case the animation will sto..
Create Visual Direction by Fading an Element from Left to Right For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen. In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule. Target the element with the id of ball and add ..
Create Movement Using CSS Animation When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement. As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the las..
Modify Fill Mode of an Animation That's great, but it doesn't work right yet. Notice how the animation resets after 500ms has passed, causing the button to revert back to the original color. You want the button to stay highlighted. This can be done by setting the animation-fill-mode property to forwards. The animation-fill-mode specifies the style applied to an element when the animation has fin..
Use CSS Animation to Change the Hover State of a Button You can use CSS @keyframes to change the color of a button in its hover state. Here's an example of changing the width of an image on hover: img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } } Note that ms stands for milliseconds, where 1000ms is equal to 1s. Use CSS @keyframes to chang..
Learn How the CSS @keyframes and animation Properties Work To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most impo..
Create a Graphic Using CSS By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners. You will create a round, transparent ..
Create a More Complex Shape Using CSS and HTML One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the ::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before pseudo-element is used to add a re..
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis Given that the skewX() function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis. Skew the element with the id of top -10 degrees along the Y-axis by using the transform property.
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree. The following code skews the paragraph element by -32 degrees along the X-axis. p { transform: skewX(-32deg); } Skew the element with the id of bottom by 24 degrees along the X-axis by us..
Use the CSS Transform scale Property to Scale an Element on Hover The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements. Here's an example to scale the paragraph elements to 2.1 times..
Use the CSS Transform scale Property to Change the Size of an Element To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page: p { transform: scale(2); } Increase the size of the element with the id of ball2 to 1.5 times its original size.
Create Texture by Adding a Subtle Pattern as a Background Image One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. T..