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
You may watch the following video or follow along with the expanded transcript that follows.
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
Top comments (1)
Thanks Stephanie!