Cards

Dig into the browser’s layout models to make a simple, flexible informational design.

Goal

We’re going to walk through writing some HTML and CSS to generate an informational layout.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the cards repository.

Fork & clone the “cards” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up the project

After cloning the repo to your computer we need to create the default files.

  1. cards
  2. index.html
  3. css
  4. main.css
  1. Make a new index.html file in your cards folder.
  2. Make a folder named css in your cards folder.
  3. Make a new main.css in your css folder.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Add HTML boilerplate

Use the html5, viewport and css snippets.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Cards</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

</body>
</html>

  1. HTML snippets

    Create the boilerplate with html5, viewport & css

  2. Line G

    Don’t forget to attach the CSS file.

3 Add CSS boilerplate

Use the borderbox snippet.

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

The border-box system changes the browsers layout math to include the padding in the width—the default is more difficult to manage when making flexible, responsive websites.

  1. CSS snippets

    Create the boilerplate with borderbox

4 Write the card HTML

For the cards, an unordered list makes sense because the website is a list of space probes.

⋮
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

  <ul class="cards">

    <li>
      <img src="https://placehold.it/32x32" alt="">
      <strong>Voyager 1</strong>
      <dl>
        <dt>Launched:</dt>
        <dd><time datetime="1977-09-05">Sept. 5, 1977</time></dd>
        <dt>Destination:</dt>
        <dd>Jupiter & beyond</dd>
      </dl>
      <div>
        <a href="https://en.wikipedia.org/wiki/Voyager_1">Wikipedia</a>
      </div>
    </li>

    <!-- Copy and paste the above <li> here to make the second card -->

  </ul>

</body>
</html>

Copy the <li> tag you wrote above and paste it in the place of the comment. Change its details to reflect the “New Horizons” probe.

This is what you should see in your browser:

  1. Line F

    Add a class to the <ul> so we can style it directly.

  2. Line I

    We’re using an image placeholder service to make an image for us—that way we don’t have to go into Photoshop to create a new image.

    The 32x32 part is the pixel dimensions of the image we want. You can see more options on the PlaceHold.it website.

  3. Line J

    The <strong> tag makes semantic sense because the name of the probe is more important than the surrounding text.

  4. Lines Q–S

    There’s a semantically meaningless <div> tag here that we’re going to use as a CSS styling hook later.

5 Basic CSS styles

Let’s add some basic CSS style to make the website look a little nicer.

html {
  box-sizing: border-box;
  background-color: #f2f2f2;
  font-family: Georgia, serif;
  line-height: 1.5;
}

*, *::before, *::after {
  box-sizing: inherit;
}

This is what you should see in your browser:

  1. Lines C–E

    Adjust the background-color, font-family and line-height to make it look a little more pleasant.

6 Style the boxes

Next up we’ll style the card itself by adding some colours, borders, and sizes.

⋮
*, *::before, *::after {
  box-sizing: inherit;
}

.cards {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.cards li {
  display: inline-block;
  margin: 0 .5em 1em;
  max-width: 20em;
  padding: 1em;
  background-color: #fff;
  border: 3px solid #e2e2e2;
  border-radius: 10px;
}

This is what you should see in your browser when the window’s width is small:

And when the width is a little wider:

Notice how we’re taking advantage of the browser’s flow:

  • When there isn’t enough space the boxes stack on top of each other.
  • When there is enough space they fit beside each other on the same line.

This is because we’re using display: inline-block on the <li> tags.

  1. Lines G–I

    By using the developer tools I know that the <ul> has margin, padding, and list-style-type on it by default—this code will reset the defaults provided by the browser.

  2. Line L

    Use a child selector to get the <li> tags inside of .cards

  3. Line M

    The <li> tags are display: block by default, which makes them go on their own lines. This code will change them to inline-block allowing them to sit beside each other.

  4. Line N

    The margin property adds space outside of the box.

    This margin is composed of four values:

    1. top
    2. right
    3. bottom
    4. left

    Start at the top and work clockwise around the box.

  5. Line O

    Using max-width allows the boxes can scale up to only a certain size.

  6. Line P

    The padding property will add spacing inside the box.

    Padding can have four values like margin or only one value that will affect all four sides. (Margin does this too.)

  7. Line R

    The border property allows us to add a stroke around the outside of a box.

    Borders require three pieces of information:

    1. The thickness, usually in pixels.
    2. The style: solid, dotted, dashed, etc.
    3. The border’s colour.

  8. Line S

    The border-radius property allows us to round the corners of a box.

7 Centering the boxes

It would look a little better if the boxes were centred on the screen instead of flush-left.

⋮
*, *::before, *::after {
  box-sizing: inherit;
}

.cards {
  ⋮
  padding: 0;
  list-style-type: none;
  text-align: center;
}

.cards li {
  ⋮
  border: 3px solid #e2e2e2;
  border-radius: 10px;
  text-align: left;
}

This is what you should see in your browser when the window’s width is small:

And when the width is a little wider:

  1. Line J

    Because the <li> tags are inline-block we can use text-align: center, which works on all inline and inline-block elements.

    We need to put text-align: center on a parent element so that it affects all of its children.

  2. Line Q

    Because we set everything inside .cards to be centred that would affect all the text too, but we only want to center the boxes not the text—so we have to reset the interior of the boxes to text-align: left

8 Style the image and text

Let’s concentrate on the inside of the boxes by styling the small image and some of the text.

⋮
  border: 3px solid #e2e2e2;
  border-radius: 10px;
  text-align: left;
}

.cards img {
  display: block;
  margin: 0 auto 1rem;
}

.cards strong {
  display: block;
  margin-bottom: 1rem;

  font-size: 1.125rem;
}

.cards dl {
  margin-bottom: 1rem;
}

This is what you should see in your browser:

  1. Line H

    The display: block will put the image on its own line instead of beside the probe’s name.

  2. Line I

    The image will look better centred, but because the image is block text-align: center no longer works. Instead we can use automatic left and right margins.

  3. Lines M–N

    Adding margin to a <strong> tag doesn’t work by default because <strong> tags are inline—margins only work on block and inline-block

  4. Line T

    Add a little space after the <dl> to push the “Wikipedia” link further down.

9 Style the data list

Using the display property and some widths we can style the <dl> so that the <dt> and <dd> tags are on the same line.

⋮
.cards dl {
  margin-bottom: 1rem;
}

.cards dt {
  display: inline-block;
  width: 6em;
  font-style: italic;
}

.cards dd {
  display: inline-block;
  margin: 0;
  min-width: 9em;
}

This is what you should see in your browser:

  1. Line G

    Setting both the <dt> and <dd> tags to display: inline-block (overwriting the browser’s default block) will allow them to be on the same line.

  2. Line H

    By adding a width to the <dt> tag we can get a nice alignment of all the <dd> tags.

    The width is set in em units so that it can grow with the font size.

  3. Line O

    Adding a min-width to the <dd> tags will force the <dt> tag that follows onto its own line.

10 Style the links

Using display and a few other box properties we can make the <a> tags look like full buttons.

⋮
  margin: 0;
  min-width: 9em;
}

.cards div {
  text-align: center;
}

.cards a {
  display: inline-block;
  padding: .5em .75em;
  background-color: #ccc;
  border-radius: 4px;
  color: #000;
  text-decoration: none;
}

.cards a:hover {
  background-color: #333;
  color: #fff;
}

Test it in your browser to make sure it looks like the goal at the top.

  1. Line G

    Using the <div> that surrounds the <a> tag we can centre the link.

    • If we were to put text-align: center directly on the link only the text inside it would be affected—because text-align only targets children.
    • We can’t use auto margins because that only works on display: block elements, and we don’t want the link to stretch all the way across.

  2. Line K

    Adding display: inline-block to the <a> tag will allow us to add padding since padding doesn’t work well on inline elements.

  3. Line P

    It’s okay to remove the underline from links when they are distinctly separate from the body copy. In this case it’s okay because the link looks like a button.

  4. Line S

    Don’t forget to add a :hover state to the link.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

We don’t have an <h1> in this code because I feel like these cards are part of a larger website so the <h1> would probably be somewhere else on the page.

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.