From the course: CSS: Combining Grid and Flexbox

Unlock the full course today

Join today to access over 24,400 courses taught by industry experts.

Webpage header with hero section

Webpage header with hero section - CSS Tutorial

From the course: CSS: Combining Grid and Flexbox

Start my 1-month free trial Buy for my team

Webpage header with hero section

“

- [Instructor] Let's start this project by working from the top down and begin on the hero section of the page. This is a pretty basic area of the site. It introduces the viewer to our business and has a call to action button easily available. We will create visual interests by utilizing eye-catching imagery. This is what the site currently looks like. What we want to do is we want to transform this section into a more proper layout. I've overlaid the grid elements on the completed version so you can see the grid that we'll be building. We're going to go ahead and separate out the various sections of the page at the small screen. As the page gets larger, we will transform our grid to have more columns so we can precisely control the layout of the various elements. Let's jump into the code and see how we can create this. To begin with, I've added the HTML for the hero area. I'm using a header element that contains an…

Contents