Join Morten Rand-Hendriksen for an in-depth discussion in this video Marking up the holy grail layout in HTML, part of Advanced Responsive Layouts with CSS Flexbox.
- 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 the header, we have a…div with the class "site-branding,"…
Author
Released
7/30/2015This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content
Skill Level Intermediate
Duration
Views
Related Courses
-
WordPress: Building Responsive Themes
with Morten Rand-Hendriksen2h 55m Intermediate -
Building a Responsive Single-Page Design with Sass
with Ray Villalobos4h 55m Intermediate -
Creating a Responsive Web Experience
with Chris Converse1h 23m Intermediate
-
Introduction
-
Welcome1m 22s
-
-
1. What Is Flexbox?
-
What is Flexbox?2m 8s
-
-
2. Flexbox-Powered Menus
-
Creating a social media menu3m 17s
-
3. Responsive Card Layouts
-
Challenges with card layouts3m 48s
-
Marking up typical cards2m 14s
-
-
4. Holy Grail Layout
-
5. Handing Control to the User
-
Handing control to the user2m 33s
-
Sidebar position switching4m 23s
-
Animating content6m 2s
-
-
6. Putting It All Together
-
Putting it all together8m 17s
-
-
Next steps
-
Thank you1m 45s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Marking up the holy grail layout in HTML