A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality. Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so […]
If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises. If we have not yet covered a technique or tag yet in class, google it. Berlin Photo Gallery Go to this page and download the files and follow the setup instructions. This […]
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, […]
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 […]
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 […]
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.