Learn How to Make a Website with Steph (7 Part Series)
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:
You may watch the following video or follow along with the expanded transcript that follows.
To begin this lesson, open our project in VSCode.
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:
Go to the browser and after
/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>
<main> tag, we'll add a new
<h2> as the first item, with the text "Products".
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.
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