Back to Unit 6

Unit 6 Website Development - Tutorial 4

4.2 Build an Image Card

First add the HTML in small steps. Then style the image card afterwards using small CSS chunks.

How To Use This Tutorial

Work through each step in order. Add the code shown, check the expected output, then move to the next step. The final code is visible at the bottom so you can compare your finished work.

Steps

  1. Create the project files
  2. Add the basic HTML page structure
  3. Link the external CSS file
  4. Add the main area HTML
  5. Add the image card section HTML
  6. Add the image HTML
  7. Add the card heading HTML
  8. Add the card paragraph HTML
  9. Add the card button link HTML
  10. Style the body
  11. Centre the card inside main
  12. Add height and padding to main
  13. Make the image card use flex
  14. Style the image card box
  15. Style the card image
  16. Style the card heading
  17. Style the card paragraph
  18. Style the card button link
  19. Add the card button hover effect
Step 1

Step 1 Create the project files

Where to put this code Create these files inside a new project folder. This step is not typed into the HTML file.

Code

image-card
|
|-- index.html
|-- style.css
`-- image.png

What this does

  • image-card is the project folder.
  • index.html will contain the webpage structure.
  • style.css will contain the CSS styling rules.
  • image.png is the image file used in the card.

Expected output

No webpage output yet.
Step 2

Step 2 Add the basic HTML page structure

Where to put this code Add this code into index.html.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Card</title>
</head>

<body>

</body>
</html>

What this does

  • DOCTYPE html tells the browser this is an HTML5 webpage.
  • head stores information about the webpage.
  • body is where the visible webpage content will go.

Expected output

The page is blank because no visible content has been added yet.
Step 3

Step 3 Link the external CSS file

Where to put this code Replace the current head section in index.html with this updated head section.

Code

<head>
    <meta charset="UTF-8">
    <title>Image Card</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

  • link connects the HTML file to another file.
  • rel tells the browser the linked file is a stylesheet.
  • href tells the browser the CSS file is called style.css.

Expected output

The page is still blank because no visible content has been added yet.
Step 4

Step 4 Add the main area HTML

Where to put this code Add the main tag inside the body tag in index.html.

Code

<main>

</main>

What this does

  • main creates the main content area.
  • main will hold the image card.

Expected output

The main area is empty, so there is still no visible content.
Step 5

Step 5 Add the image card section HTML

Where to put this code Add the section tag inside the main tag in index.html.

Code

<section class="image-card">

</section>

What this does

  • section creates a separate content section.
  • class gives the section a name so CSS can style it.
  • image-card is the class name for this component.

Expected output

The image card section is empty.
Step 6

Step 6 Add the image HTML

Where to put this code Add the img tag inside the image-card section.

Code

<img src="image.png" alt="Image icon">

What this does

  • img displays an image.
  • src tells the browser which image file to use.
  • alt describes the image for accessibility.

Expected output

Image icon
Step 7

Step 7 Add the card heading HTML

Where to put this code Add the h2 tag inside the image-card section, under the image.

Code

<h2>Image Card</h2>

What this does

  • h2 creates the card heading.
  • Image Card is placeholder heading text.

Expected output

Image icon

Image Card

Step 8

Step 8 Add the card paragraph HTML

Where to put this code Add the p tag inside the image-card section, under the h2 tag.

Code

<p>This card has an image at the top, text underneath and a button at the bottom.</p>

What this does

  • p creates paragraph text.
  • Paragraph text explains what the card is about.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Step 9

Step 9 Add the card button link HTML

Where to put this code Add the a tag inside the image-card section, under the paragraph.

Code

<a href="#">Read More</a>

What this does

  • a creates a clickable link.
  • href sets where the link goes.
  • # keeps the link on the same page for now.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 10

Step 10 Style the body

Where to put this code Add this code into style.css.

Code

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #eeeeee;
}

What this does

  • body selects the whole visible webpage.
  • margin-top removes the browser gap at the top.
  • font-family changes the font used on the page.
  • background-color changes the page background to light grey.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 11

Step 11 Centre the card inside main

Where to put this code Add this code into style.css under the body CSS.

Code

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

What this does

  • main selects the main content area.
  • display turns main into a flex container.
  • justify-content centres the card horizontally.
  • align-items centres the card vertically when main has height.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 12

Step 12 Add height and padding to main

Where to put this code Add these lines inside the existing main CSS rule in style.css.

Code

main {
    min-height: 100vh;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

What this does

  • min-height makes main at least the full height of the browser window.
  • 100vh means 100 percent of the viewport height.
  • padding adds space inside main.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 13

Step 13 Make the image card use flex

Where to put this code Add this code into style.css under the main CSS.

Code

.image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

What this does

  • .image-card selects the card section.
  • display turns the card into a flex container.
  • flex-direction places the content in a vertical stack.
  • gap adds space between each item.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 14

Step 14 Style the image card box

Where to put this code Add these style lines inside the existing .image-card CSS rule in style.css.

Code

.image-card {
    background-color: white;

    border-width: 2px;
    border-style: solid;
    border-color: #cccccc;

    border-radius: 12px;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 300px;
    text-align: center;
}

What this does

  • background-color changes the card background to white.
  • border creates a light grey border.
  • border-radius rounds the card corners.
  • padding adds space inside the card.
  • width sets the card width to 300 pixels.
  • text-align centres the text.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 15

Step 15 Style the card image

Where to put this code Add this code into style.css under the .image-card CSS.

Code

.image-card img {
    width: 100%;
    border-radius: 10px;
}

What this does

  • .image-card img selects only the image inside the image card.
  • width makes the image fill the card width.
  • border-radius rounds the image corners.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 16

Step 16 Style the card heading

Where to put this code Add this code into style.css under the .image-card img CSS.

Code

.image-card h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    color: #222222;
}

What this does

  • .image-card h2 selects only the heading inside the card.
  • margin removes extra spacing around the heading.
  • color changes the heading text to dark grey.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 17

Step 17 Style the card paragraph

Where to put this code Add this code into style.css under the .image-card h2 CSS.

Code

.image-card p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    color: #555555;
    line-height: 1.5;
}

What this does

  • .image-card p selects only the paragraph inside the card.
  • margin removes extra spacing around the paragraph.
  • color changes the paragraph text to grey.
  • line-height adds space between lines of text.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 18

Step 18 Style the card button link

Where to put this code Add this code into style.css under the .image-card p CSS.

Code

.image-card a {
    display: inline-block;

    padding-top: 12px;
    padding-right: 22px;
    padding-bottom: 12px;
    padding-left: 22px;

    background-color: #0b7a5c;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

What this does

  • .image-card a selects only the link inside the card.
  • display lets the link behave like a button.
  • padding adds space inside the button.
  • background-color changes the button background to green.
  • text-decoration removes the underline from the link.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More
Step 19

Step 19 Add the card button hover effect

Where to put this code Add this code into style.css under the .image-card a CSS.

Code

.image-card a:hover {
    background-color: #075c45;
}

What this does

  • .image-card a:hover selects the button when the mouse moves over it.
  • background-color changes the button background to dark green.
  • hover helps users see that the button is interactive.

Expected output

Image icon

Image Card

This card has an image at the top, text underneath and a button at the bottom.

Read More

Move your mouse over the button. It should turn dark green.

Final code

Final index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Card</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <section class="image-card">
            <img src="image.png" alt="Image icon">

            <h2>Image Card</h2>

            <p>This card has an image at the top, text underneath and a button at the bottom.</p>

            <a href="#">Read More</a>
        </section>
    </main>
</body>
</html>

Final style.css

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #eeeeee;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

.image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    background-color: white;

    border-width: 2px;
    border-style: solid;
    border-color: #cccccc;

    border-radius: 12px;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 300px;
    text-align: center;
}

.image-card img {
    width: 100%;
    border-radius: 10px;
}

.image-card h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    color: #222222;
}

.image-card p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    color: #555555;
    line-height: 1.5;
}

.image-card a {
    display: inline-block;

    padding-top: 12px;
    padding-right: 22px;
    padding-bottom: 12px;
    padding-left: 22px;

    background-color: #0b7a5c;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.image-card a:hover {
    background-color: #075c45;
}