Since posting the original exercise, I have made a few changes to the look of the page, so if you download the completed version, do not be surprised that some features are different from those described in the exercise. First, download the slim minified version of jQuery and add a link to it just before […]
Category: HTML
Categories
Flex Table Sort Solution
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. […]
In this exercise you will make a Mobile-First layout. First, please download the starter files. Included with these files is a ScreenShots.pdf file. To view the screenshots adequately, open that file in Preview and go View > Zoom To Fit. You will edit the index.html file (and make a stylesheet file) to create a responsive […]
In this exercise, we will make a MOBILE-FIRST grid-based layout. The first step in the mobile-first method is realizing that by default most elements are already mobile friendly (as long as we scale our images). For that reason, we should put any styles that are common to all our responsive states in the main part […]
Categories
Image Placeholder Services
A useful tool when creating mockups are the many image placeholder services on the web. They give random photos at the sizes you specify. Some will let you choose categories, etc I use placekitten.com a lot. Another is lorempixel.com. With both, to get a random image in your page, you put in code for an image but for the […]
For this exercise, please download these files. In this exercise, we’re going to add the SIZES attribute. Make a new HTML page and add the following code to it. Make sure the path to the images is correct. If the folder name in the download is different, make adjustments. We’ll discuss these values in class.
Responsible Responsive Design: SRCSet In this exercise, please use the Firefox or Firefox Developer Edition browser: Chrome very aggressively caches images, which will make the demonstration appear to not work as described. To begin, please download these files. A basic strategy that evolved to deal with different screen widths is the now-classic img {max-width:100%} responsive image style. However, […]
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 […]
Categories
HTML5 Video Custom Controller
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, […]
Categories
HTML Video Embedding
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 […]