Category: CSS

As suggested by Chris Coyer on CSS Tricks. Classic Typographic Scale: 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 96

This exercise follows on from the first part of the Guitar Mania web design exercise. Our client has decided she wants some revisions to the design. Go to the following URL and look at the page that is there: https://kevinmc.ca/guitarmania2014. Your task in this exercise is to take what we did in the previous one and […]

Please download the files for this exercise. In this exercise, we will explore ways we can establish vertical rhythm on a page by being aware of the font-sizes, line-heights, and margin values of our text. We will first do the exercise using pixel units, because they are easier to wrap our brains around. However, pixel […]

In this exercise, we will make a couple of basic grid systems in order to build an understanding of how they work. The first one, which will be a fixed width grid, is basically a simplified version of the most famous web grid system, Nathan Smith’s 960 Grid System (https://960.gs). First of all, make a […]

For this exercise, build a page that looks like the one in this screenshot. Save that file as albumsales1.html. Click on the image to see it full size. You only need to build the first two tables. Take the text from the image, or make up the band names and album titles. Note the striping of alternate […]

In this exercise, we’re going to build a simple horizontal menu to illustrate a potentially frustrating aspect about using floated elements. The HTML Imagine that you have a header, an H1, and a UL with a class of “menu-top” at the top of your site. The HTML would look something like this: Some Basic CSS […]

The Theory The CSS float property is used to create layouts where content would flow around elements (typically pictures). In years past, in fact, entire site layouts would be done with floats. Fortunately, we now have dedicated layout modes like display:grid and display:flex, so the use of floats as a full layout tool has greatly […]

Using Floats For Two-Column Layouts This exercise will help you understand how to make a two-column website layout using the CSS float property. If you need a quick refresher on the float property, read this. This exercise will hopefully also reinforce your understanding of HTML paths and the CSS Box Model. First of all, please download […]