Creating a Basic Hero Section
Learn How to Create a Simple Hero Section Using HTML
In this chapter, students will learn how to create a very basic Hero Section using simple HTML with inline CSS. This beginner-friendly approach avoids complexity and focuses on understanding the basics.
Chapter Goal
- Understand what a hero section is
- Write basic HTML structure
- Use inline CSS for styling
- Create a simple banner-style hero section
What is a Hero Section?
A Hero Section is the top visible area of a website. It usually contains:
- A main heading
- A short description
In this chapter, we will create a simple hero banner using only one <div>.
Step 1: Create a Basic HTML File
Create a new file named index.html.
<html>
<head>
</head>
<body style="margin:0px;">
</body>
</html>
margin:0px removes the default space around the page.
Step 2: Add the Hero Section
Inside the <body> tag, add the following code:
<div style="background-color:dodgerblue; color:white; padding:50px;">
<h1>Welcome to ABC Interiors</h1>
<p>Let's create your perfect home</p>
</div>
Explanation
- background-color:dodgerblue – sets blue background
- color:white – makes text white
- padding:50px – adds space inside the box
Final Output Code
This is the complete final code for this chapter.
<html>
<head>
</head>
<body style="margin:0px;">
<div style="background-color:dodgerblue; color:white; padding:50px;">
<h1>Welcome to ABC Interiors</h1>
<p>Let's create your perfect home</p>
</div>
</body>
</html>
View Output
- Save the file
- Open index.html in a browser
- You will see a blue hero section at the top
Beginner Notes
- Inline CSS is used only for learning purposes
- Don’t worry about design perfection
- We will improve this step by step in future chapters
Practice Task
- Change the background color
- Change the heading text
- Increase or decrease the padding value
Chapter Summary
- What a hero section is
- How to use inline CSS
- How to create a simple hero banner