Unit 6 Website Development - Tutorial 4

4.1 Build a Hero Section

First add the HTML in small steps. Then style the hero section 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

Create the project files
Add the basic HTML page structure
Link the external CSS file
Add the main area HTML
Add the hero section HTML
Add the hero heading HTML
Add the hero paragraph HTML
Add the hero button link HTML
Style the body
Make the hero use flex
Add size, spacing and centre text
Add the hero background and bottom border
Style the hero heading
Style the hero paragraph
Style the hero button link
Add the hero 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

hero-section
|
|-- index.html
`-- style.css

What this does

hero-section is the project folder for this tutorial.
index.html will contain the webpage structure.
style.css will contain the CSS styling rules.

Expected output

No webpage output yet. You have only created the files.

Step 2

Step 2 Add the basic HTML page structure

Where to put this code Add this code into index.html. This creates the starting HTML page.

Code

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

<body>

</body>
</html>

What this does

DOCTYPE html tells the browser that this is an HTML5 webpage.
html starts the webpage.
head stores information about the webpage.
title sets the text shown on the browser tab.
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>Hero Section</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

link connects the HTML file to another file.
rel tells the browser that the linked file is a stylesheet.
href tells the browser the name of the CSS file.
style.css will control how the webpage looks.

Expected output

The page is still blank because there is no visible content 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 of the webpage.
main will hold the hero section.

Expected output

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

Step 5

Step 5 Add the hero section HTML

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

Code

<section class="hero">

</section>

What this does

section creates a separate section of content inside main.
class gives the section a name so CSS can style it later.
hero is the class name used for the hero section.

Expected output

The hero section is empty, so there is still no visible text.

Step 6

Step 6 Add the hero heading HTML

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

Code

<h1>Welcome to Our Website</h1>

What this does

h1 creates the main heading inside the hero section.
Welcome to Our Website is placeholder text that students can replace later.

Expected output

Welcome to Our Website

Step 7

Step 7 Add the hero paragraph HTML

Where to put this code Add the p tag inside the hero section, under the h1 tag.

Code

<p>Explore useful information, featured content and key updates in one clear and simple place.</p>

What this does

p creates paragraph text inside the hero section.
Paragraph text explains what the website or page is about.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Step 8

Step 8 Add the hero button link HTML

Where to put this code Add the a tag inside the hero section, under the paragraph.

Code

<a href="#">Find Out 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.
Find Out More is the text shown on the link.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 9

Step 9 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;
}

What this does

body selects the whole visible webpage.
margin-top removes the browser gap at the top.
margin-right removes the browser gap on the right.
margin-bottom removes the browser gap at the bottom.
margin-left removes the browser gap on the left.
font-family changes the font used on the webpage.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 10

Step 10 Make the hero use flex

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

Code

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

What this does

.hero selects the section with the class name hero.
display turns the hero section into a flex container.
flex-direction controls the direction of the content inside the hero.
column places the heading, paragraph and link in a vertical stack.
justify-content centres the content vertically when the hero has height.
align-items centres the content horizontally.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 11

Step 11 Add size, spacing and centre text

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

Code

.hero {
    min-height: 400px;

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

    text-align: center;
}

What this does

min-height makes the hero section at least 400 pixels tall.
padding-top adds space inside the top of the hero.
padding-right adds space inside the right side of the hero.
padding-bottom adds space inside the bottom of the hero.
padding-left adds space inside the left side of the hero.
text-align centres the text inside the hero section.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 12

Step 12 Add the hero background and bottom border

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

Code

.hero {
    background-color: #ffe5e5;

    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: red;
}

What this does

background-color changes the hero background to pale red.
border-bottom-width sets the thickness of the bottom border.
border-bottom-style makes the bottom border a solid line.
border-bottom-color changes the bottom border colour to red.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 13

Step 13 Style the hero heading

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

Code

.hero h1 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-size: 48px;
    color: #8b0000;
}

What this does

.hero h1 selects only the h1 inside the hero section.
margin-top removes extra space above the heading.
margin-right removes extra space on the right of the heading.
margin-bottom removes extra space below the heading.
margin-left removes extra space on the left of the heading.
font-size makes the hero heading larger.
color changes the heading text to dark red.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 14

Step 14 Style the hero paragraph

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

Code

.hero p {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.5;
    color: #333333;
}

What this does

.hero p selects only the paragraph inside the hero section.
max-width stops the paragraph becoming too wide.
font-size makes the paragraph text slightly larger.
line-height adds space between lines of paragraph text.
color changes the paragraph text to dark grey.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 15

Step 15 Style the hero button link

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

Code

.hero a {
    display: inline-block;

    margin-top: 15px;

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

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

What this does

.hero a selects only the link inside the hero section.
display lets the link behave like a button.
margin-top adds space above the button.
padding adds space inside the button.
background-color changes the button background to red.
color changes the button text to white.
text-decoration removes the underline from the link.
border-radius rounds the button corners.
font-weight makes the button text bold.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

Step 16

Step 16 Add the hero button hover effect

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

Code

.hero a:hover {
    background-color: #8b0000;
}

What this does

.hero a:hover selects the hero button when the mouse moves over it.
background-color changes the button background to dark red on hover.
hover helps users see that the button is interactive.

Expected output

Welcome to Our Website

Explore useful information, featured content and key updates in one clear and simple place.

Find Out More

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

Final code

Final index.html

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

<body>

    <main>
        <section class="hero">
            <h1>Welcome to Our Website</h1>
            <p>Explore useful information, featured content and key updates in one clear and simple place.</p>
            <a href="#">Find Out 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;
}

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 400px;

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

    text-align: center;

    background-color: #ffe5e5;

    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: red;
}

.hero h1 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-size: 48px;
    color: #8b0000;
}

.hero p {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.5;
    color: #333333;
}

.hero a {
    display: inline-block;

    margin-top: 15px;

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

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

.hero a:hover {
    background-color: #8b0000;
}