Skip to content

Latest commit

 

History

History
432 lines (371 loc) · 13.5 KB

cards.md

File metadata and controls

432 lines (371 loc) · 13.5 KB
layout title desc hide_show_for_marks markbot_submit extra_tutorials markbot_notes goal fork steps
lesson
Cards
Dig into the browser’s layout models to make a simple, flexible informational design.
true
true
title url
Boxes & flows slide deck
/courses/web-dev-1/boxes-and-flows/
title url
Everything is a box
box-model
title url
Flow & display
flow-display
title url
Browser developer tools
browser-developer-tools
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.
before notes
We’re going to walk through writing some HTML and CSS to generate an informational layout.
label text
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!
title before folders after notes
Set up the project
After cloning the repo to your computer we need to create the default files.
label type
cards
folder
label indent
index.html
1
label type indent
css
folder
1
label indent
main.css
2
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.
label text
Naming conventions
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions).
title before code_lang code_file code lines notes
Add HTML boilerplate
*Use the `html5`, `viewport` and `css` snippets.*
html
index.html
<!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>
num text
7
Don’t forget to attach the CSS file.
label text
HTML snippets
Create the boilerplate with `html5`, `viewport` & `css`
title before code_lang code_file code notes after
Add CSS boilerplate
*Use the `borderbox` snippet.*
css
css/main.css
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }
label text
CSS snippets
Create the boilerplate with `borderbox`
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.
title before code_lang code_file code lines after
Write the card HTML
For the cards, an unordered list makes sense because the website is a list of space probes.
html
index.html
⋮ <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>
num fade
2-4
true
num text
6
Add a `class` to the `<ul>` so we can style it directly.
num text
9
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.](https://placehold.it/)
num text
10
The `<strong>` tag makes semantic sense because the name of the probe is more important than the surrounding text.
num text
17-19
There’s a semantically meaningless `<div>` tag here that we’re going to use as a CSS styling hook later.
num fade
26-27
true
**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:* ![](after-html.jpg)
title before code_lang code_file code lines after
Basic CSS styles
Let’s add some basic CSS style to make the website look a little nicer.
css
css/main.css
html { box-sizing: border-box; background-color: #f2f2f2; font-family: Georgia, serif; line-height: 1.5; } *, *::before, *::after { box-sizing: inherit; }
num fade
2
true
num text
3-5
Adjust the `background-color`, `font-family` and `line-height` to make it look a little more pleasant.
num fade
8-10
true
*This is what you should see in your browser:* ![](css-basics.jpg)
title before code_lang code_file code lines after
Style the boxes
Next up we’ll style the card itself by adding some colours, borders, and sizes.
css
css/main.css
⋮ *, *::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; }
num fade
2-4
true
num text
7-9
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.
num text
12
Use a child selector to get the `<li>` tags inside of `.cards`
num text
13
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.
num text
14
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.
num text
15
Using `max-width` allows the boxes can scale up to only a certain size.
num text
16
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.)
num text
18
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.
num text
19
The `border-radius` property allows us to round the corners of a box.
*This is what you should see in your browser when the window’s width is small:* ![](card-s.jpg) *And when the width is a little wider:* ![](card-l.jpg) **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.*
title before code_lang code_file code lines after
Centering the boxes
It would look a little better if the boxes were centred on the screen instead of flush-left.
css
css/main.css
⋮ *, *::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; }
num fade
2-4
true
num fade
8-9
true
num text
10
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.**
num fade
15-16
true
num text
17
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`
*This is what you should see in your browser when the window’s width is small:* ![](center-s.jpg) *And when the width is a little wider:* ![](center-l.jpg)
title before code_lang code_file code lines after
Style the image and text
Let’s concentrate on the inside of the boxes by styling the small image and some of the text.
css
css/main.css
⋮ 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; }
num fade
2-5
true
num text
8
The `display: block` will put the image on its own line instead of beside the probe’s name.
num text
9
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.
num text
13-14
Adding `margin` to a `<strong>` tag doesn’t work by default because `<strong>` tags are `inline`—margins only work on `block` and `inline-block`
num text
20
Add a little space after the `<dl>` to push the “Wikipedia” link further down.
*This is what you should see in your browser:* ![](spacing.jpg)
title before code_lang code_file code lines after
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.
css
css/main.css
⋮ .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; }
num fade
2-4
true
num text
7
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.
num text
8
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.
num text
15
Adding a `min-width` to the `<dd>` tags will force the `<dt>` tag that follows onto its own line.
*This is what you should see in your browser:* ![](dls.jpg)
title before code_lang code_file code lines after
Style the links
Using display and a few other box properties we can make the `<a>` tags look like full buttons.
css
css/main.css
⋮ 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; }
num fade
2-4
true
num text
7
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.
num text
11
Adding `display: inline-block` to the `<a>` tag will allow us to add `padding` since padding doesn’t work well on `inline` elements.
num text
16
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.
num text
19
Don’t forget to add a `:hover` state to the link.
**Test it in your browser to make sure it looks like the goal at the top.**