From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Marking up the holy grail layout in HTML

Marking up the holy grail layout in HTML - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Marking up the holy grail layout in HTML

“

- In the exercise files for Chapter 4, under 04_02, you will find holy-grail.html, and holy-grail.css. These are the two files we will be working with to create our Flexbox based Holy Grail layout. Just like in the previous movies, we'll start by looking at the mark-up in holy-grail.html. And if you look from the top, you'll see this looks pretty much like the other demo pages. When we scroll down, there are a few notable differences. You'll see here, before we get to the header with the class "masthead," I've added a new div with the class "outer-wrap." And this div will wrap around all the content on the page, and will be the baseline that we're going to be using for our Flexbox based layout. Within "outer-wrap" we have three main sections: we have a header with the class "masthead," then we have a div with the class "content," and then, finally, we have a footer with the class "footer-area." Within each of these main content sections, we have further divisions. So, for instance, in…

Contents