Ü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 […]
Category: CSS
Categories
SASS Basics 2018
SASS, Syntactically Awesome Style Sheets, can save you tons of time and stress. Perhaps the main appeal of a CSS preprocessor like SASS is that it allows you to write CSS more concisely, with a lot less of the repetition that comes with “typical” CSS workflows. Preprocessors make CSS more like a programming language, allowing variables, functions, math, […]
Task 1 Guitarmania RWD Pt 2 When done task 1, show it to me. You can do this task in your original groups. Task 2 Download Gibson vs Fender Exercise 2, consult the screenshots, and build the page. The index page is more or less already marked up for you. Do this task on your […]
Categories
CSS Font Stacks & Type Sizes
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
Categories
Guitarmania RWD Pt 2
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 […]
Categories
Vertical Rhythm—Fela Kuti
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 […]
Categories
Basic CSS Grid Theory
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 […]
Categories
Tables Exercise 2013
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 […]
Categories
CSS Floats: “Clearfix”
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 Task Download the files you need for this exercise. Double-click the zip archive if it doesn’t decompress automatically. You will be left with a folder called GibsonHTMLExercise. Inside that folder is an index.html file, a folder of images, and a folder of additional pages (called, naturally enough, pages). Open the file screenshot.png. Your task is to make a web […]