Card Layout in HTML

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:

Learn How to Make a Website: Set up Your Coding Environment

Stephanie Eckles ・ Jan 20 '20 ・ 3 min read

#tutorial #beginners #codenewbie

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

Review the source code >

To begin this lesson, open the starter project you began in episode 1, or review the source files 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:

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.

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

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

<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".

<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.

<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".

<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 "#".

<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.

<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".

<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.

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;

<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;.

<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!

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

Comments

[John Peters]

Thanks Stephanie!