Card Layout in HTML
Tags: tutorial, beginners, html, webdev
Published: 2020-02-11 04:45:20

In this post, we will create the HTML structure for a common user interface component called a Card.

This is the sixth post and video in a series on learning web development. You may need to check out the first post to learn how to get set up to begin coding:

{% link https://dev.to/5t3ph/learn-how-to-make-a-website-set-up-your-coding-environment-2oeo %}

You may watch the following video or follow along with the expanded transcript that follows.

{% youtube k6MFToyik9c %}

[*Review the source code* >](https://github.com/5t3ph/howtowebdev/tree/master/ep6-card-html)

To begin this lesson, open the [starter project](https://github.com/5t3ph/howtowebdev-starter) you began in episode 1, or [review the source files](https://github.com/5t3ph/howtowebdev/tree/master/ep5-blog-html) from episode 5.

In the Terminal, type the start command `npm run start` to run the project.

Let's copy our `semantic-layout.html` file and rename the copy: `card-layout.html`.

Go to the browser and after `localhost:3000` add `/card-layout.html`. It will look the same since we haven't changed any content.

Let's look at a preview of where we're headed today:

![preview of card layout](https://dev-to-uploads.s3.amazonaws.com/i/0b7s3vcrm6l2cgf79fan.png)

The card we'll create is a common use case for cards which is to display information about products you can buy. Product cards typically include a preview image of the product, the price, a short description, and an "Add to Cart" or "Buy Now" button.

First, let's update the `<title>` tag to "Products | [Your Name]'s Widget Store" to designate that this is the Products page of your fantastic new online store.

```html
<title>Products | [Your Name] Widget Store</title>
```

Then, update the `<h1>` to be the store name, "[Your Name]'s Widget Store".

```html
<h1>[Your Name]'s Widget Store</h1>
```

Within the `<main>` tag, we'll add a new `<h2>` as the first item, with the text "Products".

```html
<main>
  <h2>Products</h2>

```

We'll then adjust the `<h2>` within the `<article>` to be an `h3` and this `article` will become our first card, so let's change the `h3` to say "Whizzbang Widget". You can leave the `<p>` tag and content to serve as the product description.

```html
<article>
  <h3>Whizzbang Widget</h3>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.</p>
</article>
```

Next up, we need to add the price. There are several ways we could semantically add the price, including within the title. As we learned in the last lesson, we have tags available for text emphasis, so let's add an `<em>` tag at the end of the `h3` and add our price: "$25". 

```html
<article>
  <h3>Whizzbang Widget <em>$25</em></h3>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.</p>
</article>
```

You can save and check out how it looks. 

We chose `em` in this instance because the default browser style of the `h3` is already bold, so if we had used the `strong` tag we would not see a visual difference.

Users need a way to purchase our products, so let's add a link that says "Add to Cart". To do this, add an `<a>` tag with the attribute of `href` set to simply "#". 


```html
<article>
  <h3>Whizzbang Widget <em>$25</em></h3>
  <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.</p>
  <a href="#">Add to Cart</a>
</article>
```

This is a convention that by default will reload the same page, so for creating layouts quickly, it is useful so that we have a valid link even when we don't have the place to link to created yet.

The last part of the card we need to add is the image. We'll add this as the first item in the card, so add `<img>` tag prior to the `h2` within the article. Then for the source, use `https://placeimg.com/320/240/tech` which will give us a random technology-related image sized to 320px wide by 240px tall. 

```html
<article>
  <img src="https://placeimg.com/320/240/tech">
  <h3>Whizzbang Widget <em>$25</em></h3>

```

Save, and check it out.

If you remember from our previous lesson, we need to also add an `alt` attribute to the image, so let's add it with the text "Preview of Whizzbang Widget".

```html
<img src="https://placeimg.com/320/240/tech" alt="Preview of Whizzbang Widget">
```

You may be wondering what distinguishes this as a card, and the answer is that we need to apply some additional style to begin to visually see this as a card.

![unstyled html card](https://dev-to-uploads.s3.amazonaws.com/i/mhjjx228ow3ews8u697i.png)

We are 2 lessons away from learning CSS, which is the styling language for HTML, but temporarily we will do three quick things that will help you see this as a card layout.

First, let's wrap the `article` with a `section` tag to give it a bit of semantic separation. We'll also add an attribute called `style` with the value `display: flex; justify-content: space-between;`

```html
<section style="display: flex; justify-content: space-between;">
  <article>
    <img src="https://placeimg.com/320/240/tech" alt="Preview of Whizzbang Widget">
    <h3>Whizzbang Widget <em>$25</em></h3>
    <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame
      snaps
      jelly-o.
    </p>
    <a href="#">Add to Cart</a>
  </article>
</section>
```

Second, we'll also add a `style` attribute to the `article` with the value `width: 320px; padding: 20px; border: 1px solid #c9c9c9;`.

```html
<article style="width: 320px; padding: 20px; border: 1px solid #c9c9c9;">
``` 

Finally, copy the entire `article` and paste it twice, one after the other, so you have 3 total articles. Make sure they are all within the `section` tag. Save, and check it out!

![styled card layout](https://dev-to-uploads.s3.amazonaws.com/i/0b7s3vcrm6l2cgf79fan.png)

There, now it visually makes sense why we've categorized this as a card layout!

On your own, you may want to update the `h3` within our copied cards so that you have different widget products represented as well as various prices.

**Next up in Episode 6:** Introduction to Web Accessibility