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 […]
Category: HTML
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, […]
This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of css animation or transitions, and the use of multiple backgrounds. First, download the starter files and screenshots. Since this is an exercise, I have not sized the images down to the final size I would […]
Über-Emmet Time In this exercise, you will use the Emmet package in your favourite text editor. The goal is to produce the HTML for the layout pictured below (click the picture to see a much-expanded view). For images, use the picsum.photos image service. Similarly, use Emmet’s lorem+number functionality to generate all the text. The idea is […]