Web Development Project: Hero Section
Project: Create a Hero Section
Now that you know how to use HTML attributes and simple styles, let's improve the top of your web page by creating a clean and beautiful hero section.
A hero section is the large heading area at the top of many modern websites. In this project, you will add a styled heading and a short description to your existing HTML page.
This hero section adds background color, padding, and centered text using the style attribute:
Welcome to My Page
Hello! My name is Liam. This is my very first web page.
Example
<div style="background-color:lightblue; padding:50px; text-align:center;">
<h1>Welcome to My Page</h1>
<p>Hello! My name is <b>Liam</b>. This is my very first web page.</p>
</div>
Try it Yourself »
Here, the style attribute controls the look of the hero section:
background-colorsets the background colorpaddingadds space inside the boxtext-aligncenters the text
Next, you will learn how to add comments inside your HTML code - useful for notes and reminders that do not appear on the page.
