In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files. There are three sections to this page: a header, a main area, and a footer. The font used thoughout is the Google font Old Standard TT. If this is a lab exercise and not a test, […]
Category: CSS
Photos from this exercise came from Flickr, under Creative Commons licence. Thank you to the following individuals for making such beautiful work available. Jérôme Lemaire Taddie88 Sebastian Krieger Etienne Eric Prunier Guido D´Elia Otero Vlad Fiscutean Thomas Hawk Domi Thomas Hawk txmx 2 Thomas Hawk go elsewhere go elsewhere Thomas Hawk Mr J. Shaft Arq, […]
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 […]
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
Flex Table Sort Exercise
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 […]
Categories
FlexBox Layout Exercise: Holy Grail Layout
In the early days of web design, many people proposed solutions for a type of layout that became known as the holy grail layout. The idea was that the layout would have the following characteristics: it would have a header, a footer, and a middle three-column section the footer would stick to the bottom of the page […]
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 […]