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 […]
Category: CSS
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 […]
Categories
Hamburger Menu Exercise Solution
I’m going to assume that you probably didn’t have any problems with the layout components of the Hamburger Menu Exercise, so I’m not covering that part of the exercise here. If you did have layout or font icon issues, come see me, and we can go through any areas of difficulty. In other words, this page focusses […]
Categories
Exercise: SVG Data CSS
In this exercise, we will investigate another way of including interface graphics in your site. We are going to generate a number of SVG images and then convert them into css-accessible data. This will allow us to download all our images inline in our stylesheet and include them via the css background-image property. For browsers […]
Categories
Menu Exercise: Hamburger 1
For this exercise, you will build a common design pattern: a top-hidden navigation scheme. You will also work more with icon fonts and @font-face. First of all, please download the files you need for the exercise. Text CleanUp The file you’ve downloaded is for an imaginary politics website. This page is discussing a famous work […]