The HSL Color Model

When you think about it, hexidecimal and rgb are not particularly easy to work with. Remembering that this much RED when combined with that much BLUE makes HOW much PURPLE isn’t especially intiuitive. Doing it in hexidecimal is even more annoying.

A much more human-friendly color model is HSL. And there is also HSLA, for adding alpha (opacity) values to your color.


Think of H, the H in HSL, as an anchor point. To get comfortable with that idea, consult a color wheel…

rgb color wheel


… remember the following points:

  1. A circle has 360 degrees.
  2. Red, Green, and Blue are spaced equally along the circle, in order.
  3. Therefore, each of the RGB “anchor points” are 120 degrees along the circle.
  4. Red, the starting point, is 0 degrees (and 360, which is the same thing)
  5. Green appears at 120 degrees.
  6. Blue appears at 240 degrees.


Saturation: Richness of Color

The saturation value, which refers to the richness of the color, is specified in percent. This ranges from 100% (full richness) to 0% (fully desaturated). Fully desaturated means that you will have some shade of grey, depending on which HUE and LIGHTNESS value you started with.


Lightness refers to the amount of light in a color. 50% is middle. At 0% lightness, the color will be pure black, regardless of hue. At 100% lightness, the color will be pure white, regardless of hue.


How to Think in HSL

Pick a Hue from 0 to 360 and with saturation at 100 and lighness at 50 and you’ll have the purest form of that color. Reduce the saturation and you move towards gray. Increasing the luminosity moves you towards white, decreasing it moves you towards black.


With a bit of practice, you will find that this color model is very easy to experiment with. 


Complementary Colors

To get the “opposite” (complementary) color, look to the other side of the wheel. In terms of numbers, subtract (or add) 180 degrees.

One way to remember the complementary color relationships is to make up a memorable sentence with words that start with the opposing colors. I use this one:

Buy Your GrandMother a Rum and Coke.

Using that sentence, you can get the opposite colors:

  1. Since Blue is 240, subtracting 180 = 60 (Yellow)
  2. Since Green is 120, adding 180 = 300 (Magenta)
  3. Since Red is 0, adding 180 gives us 180 (Cyan)

Finally, knowing these key points on the color wheel allows us to easily get the analogous colors (the ones beside or between the main colors).

For example, suppose we want to find the HUE value of ORANGE. Orange is made by combing red and yellow.

We know that yellow is the opposite of blue. Since blue is 240 degrees, subtracting 180 give us 60 degrees as the value for yellow.

To get the HUE value of orange, then, we pick a number between 0 (red) and 60 (yellow). The lower the number, the more we are approaching red; the higher the number the more we approach yellow.


CSS Grid “Layouts in Abstract” Exercise

First, download the required  files. 

Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition.

The task:

In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout you need to build.

There is a stylesheet called common-styles.html which just removes the dots on the list and does some basic formatting.

Put your styles for each exercise in the <style> area at the top of HTML.

Do the exercises in sequence: some build on what’s done in the previous exercise.


Example 1: 

Four rows, five columns.

  • Columns take all available space (i.e. between the BODY margins).
  • Font size determines height of rows
  • 1em space between items.

Example 2

  • Four rows, five columns
  • First column is 300px, other columns vary with browser width

Example 3

  • Seven rows, three columns
  • First and last columns are 300px, other columns vary with browser width.

Example 4

  • Three rows, seven columns. First row 3x the size of other rows.

Example 5

  • Three rows, seven columns. First item in row 1 covers four columns

Example 6

  • Three rows, seven columns. Last item in row 1 covers four columns

Example 7

  • First item in row 1 covers four rows

Example 8

  • First item in row 1 covers four rows and two columns

Example 9

  • Item number 1 appears at the end of row 2.

Example 10

  • Item number 1 takes up two rows and two columns from the right edge of the wrapper.

Example 11

  • Item number 1 takes up three columns in the middle of the entire wrapper.
  • Remember: no changes to the HTML.

Example 12

  • 3 columns, equal width.
  • 7 rows. Row 2 is 1/2 the height of row 1, and 1/3 the height of row 3.
  • That pattern continues with rows 4,5, & 6.
  • But the last row does not continue the pattern: the only thing determining its height will be the content itself.

Example 13

  • Two screenshots (one hanging off the edge)
  • Four columns. Each each an equal width, but each one never gets smaller than 200px. It can get bigger, however.
  • Hint: requires minmax()

Example 14

  • 4 rows, 5 columns.
  • Wrapper takes entire width and height of the page.

Example 15

  • Same layout as example 14, but item number is in top right of box.
  • Add 1rem of padding, too.

Example 16

  • Same layout as example 15, but text is in the horizontal and vertical center of the box



For layouts 20 – 23, use the file poem.html as your starting point.

Example 20

  • Style it like in the screenshot. Don’t worry that the text is different than in the screenshot.
  • Divide the items up such that they cover the entire page.
  • Make the number be in the top left corner and the text be in the bottom left corner.

Example 21

  • Lay it out like in the screenshot.

Example 22

  • Layout it out like in the screenshot
  • Modify the design so that the item number has a light background related to item background.
  • Have the number text centered vertically and horizontally in its box.

Exercises in Development

WordPress: Own Site Setup

For this exercise, please do the following:

  • get cheap hosting and a domain name (I recommend namecheap for both)
  • install WordPress from the host company control panel
  • set up an Automated Backup solution
  • set up Two Factor Authentication
  • set up a security solution like Wordfence or Succuri
  • install a Security Certificate (I recommend let’s encrypt, because it’s free)

WordPress Major Plugin Exercise

In this exercise, please make a new WordPress installation in MAMP and install the following plugins:

  • Contact Form 7
  • Polylang
  • MetaSlider
  • YARPP (Yet Another Related Posts Plugin)
  • TablePress
  • VideoThumbnails
  • MetaSlider

Contact Form 7

Make a page called Contact and put in it a Contact Form 7 form with the following features:

  • The form is put into DEMO MODE (so you’re not actually sending mail)
  • Name and email address are required
  • A subject field
  • A comments field
  • A drop down menu allows the user to choose from 5 different people the form will go to.
  • A quiz field (in place of a captcha) with one of four questions that load randomly and are easy to answer

When the form is submitted, make the “success” message at the bottom of the form say Thanks for your comments. We’ll get back to you as soon as possible.




With the polylang plugin installed, set your site name and description in English, French, and another language of your choice.

Feel free to use Google translate if you don’t know French, or another language.

Now make one short page. Set it as the home page of the site.

Into that home page, copy the English title and text of the article found on the following page: Godin Fifth Avenue LTD. Paste it into your article without formatting (the second row of the toolbar icons of the edit window has a button to remove formatting of text when pasting).

Now add the French translation of the title and article from this page: Godin Fifth Avenue LTD (fr)

Translate it into your “third” language. If you only know English, use Google Translate and get a machine translation of the text and the title.

Figure out how to add Langara Switching to your Main Menu. Then remove it from the Main Menu, and do it as a Widget instead—with flags!

Make sure that when you switch languages, your site title and description change too.

Finally, make sure that whatever language the user is in, the main menu will show a link to the Home page and to each of the geographic categories imported with your data.

Yet Another Related Posts Plugin (YARPP)

Download this WordPress site backup and import it into your test site. Choose IMPORT MEDIA in the process. Assign all posts to yourself. Delete the post with CONTACT in the title.

Use YARPP to add a YOU MIGHT ALSO LIKE section after each post.




The other plugins: I’m running to class now, so I will continue the exercise later.