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 […]
Category: CSS
When the user hovers over an icon font, the color of the icon is supposed to change (preferably to a thematically related color, such as the red color we’ve used for the widget titles or the photo accent border). To do this takes only a few lines of CSS: The key here is that we […]
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 […]
The icon fonts component of the exercise stipulated that you had to use icomoon. The reason for this is that you should not just automatically choose font-awesome. There are lots of things you can do with icomoon and similar services—like uploading your own icon files, or generating SVGs, etc—that you cannot do with font-awesome. So go to […]
Import the Fonts The exercise said to use google fonts: Merriweather for serifs, and Lato for sans-serif. While working out a layout, I will often include all the weights of the typeface. That way I can experiment to get the best treatment of type. Always remember, however, to go back into your document and edit […]
Main Document Structure I’ve written five separate articles on the various parts of this exercise that will take you through most of the building of this project. Here’s a link to the original exercise. Here and there, though, I use some code that I don’t cover in the articles: most of it’s for small formatting […]
Categories
Midterm: WordPress Page MockUp Exercise
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 […]
Categories
JavaScript Shakespeare Exercise
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 […]
Why Use Icon Fonts? A couple of significant reasons have contributed to the widespread use of icon fonts for interface graphics. First of all, an icon font is a single file—typically very small at that, because designers will make fonts that contain only the needed symbols. These will be stored in utf upper regions (font geek […]
One billion Internet years ago (2007 or 2008, to be precise), the innovative UK company Clearleft released a usability testing tool for OSX. The website for the product, SilverbackApp.com turned heads everywhere, owing to its then-really-novel use of the parallax animation technique. The effect is still in use on the current version of the site. In this, exercise, […]