In order to use the power of Flex for this exercise, it is very important to remember one thing: because Flexbox is all about the relationship between parent and child elements, we need the tbody to be included in this table. The “sort” will involve shuffling the order of the tr elements inside the tbody. […]
First of all, please download this file and double click it to unpack it. In this exercise, you will make a sortable table using your knowledge of CSS Flexbox and the JavaScript classList method. You can use the Internet or your notes. I would recommend the CSS Tricks Guide to Flexbox and the Mozilla Developer Network’s […]
Note 2023: webp is now a well-established format. However, the use of the picture element, as discussed here, can be used to serve a newer format like AVIF, while providing a fallback to browsers that do not support that format. The technique is identical to the one discussed here. The largest contributor to file size […]
In this exercise, we’ll go over how to add a custom controller to an HTML5 video element, while making sure we don’t disadvantage users without JavaScript. First, please download these files. Unzip the package and open the folder up in your code editor. You will see that I’ve given you an index file, and css, […]
Two common ways to put video into a webpage are using a hosted service like YouTube or using the HTML5 video element. There are advantages to each method, which we’ll discuss in each section. Using YouTube or Vimeo Using YouTube, Vimeo or other services is easy, as they will supply the code to embed in […]
For this exercise, you will produce a basic layout and wire up a very basic interactivity. You will code all the HTML & CSS. First of all, download the image you need for the exercise. I am not specifying the font, but you must chose one that looks as close as possible to what’s […]
Finally, let’s figure out what to do with respect to browsers which don’t support Flex—or support it badly. Test In A Range of Browsers First of all, let’s get a screenshot of the likely suspects. Here’s a link to a range of screenshots generated using the crossbrowsertesting.com service. I’m not sure how long these links stay […]
Now we need to hide some stuff. This will largely involve the adding, removing or (better yet) toggling of classes. We’ll use jQuery here. Search for google hosted jquery. For the widest browser support, copy the link to the latest version 1 stream of the jQuery library. Add it as the src attribute to a script […]
In this exercise, you will build an HTML, CSS, & JavaScript mockup of a magazine-style WordPress theme called Midterm: Here is the first batch of files you need (20MB). This folder has an index file with most of the markup already done. Feel free to add more. Also in this folder is an images folder—the index […]
To prepare for this exercise, please do all the exercises at try.jquery.com. Then download the files you need for this exercise. In the downloaded package, you will find a single HTML file, a folder with a single image in it, and a single JavaScript file containing two arrays (one containing Shakespearean adjectives, and one containing […]