Join Morten Rand-Hendriksen for an in-depth discussion in this video Marking up typical cards, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- We have now moved on to Chapter Three,…which has its own set of exercise files…found under the Chapter Three folder,…and in this movie, 03_02.…In here, you will find the card-layout.html document…that has all the markup for the…example we're going to be working with.…When you look at this markup,…you'll see it looks a lot like the markup…from our previous Menus example.…In the body section, we start with a header,…with a class "masthead",…that's followed by a main area that…contains this div that just centers…the content on wider screens.…
Inside the div we have a section,…with the class "cards" and this is the section…that holds all the cards for us,…and then within that section,…we have a series of articles, each with a class card,…and these are going to be the actual cards.…The cards themselves are comprised of…an anchor or a link that wraps everything,…and within that link we have a figure tag…that contains an image,…and then we have a div with a class "card-content",…that contains heading two and a paragraph.…
This 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