How to Create Cards with CSS Flexbox - Responsive Web Design Tutorial

In this tutorial, we create two responsive card layouts with CSS Flexbox.

We look at how to structure our individual cards, as well as how to layout multiple cards inside their parent flex container.

We'll also learn how to make our card layout mobile responsive without using CSS media queries. This is achieved by setting an absolute width on our child flex items and setting the "flex-wrap" value to "wrap" on the parent container.

Finally, we'll learn how to use negative margins to overlap an image on the edge of a card.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

00:00 Introduction
00:58 Setting up our first card section
02:39 Writing the HTML for our first card
03:56 Styling our first card with CSS
07:20 Creating hover states for our button and card
09:49 Laying out multiple cards
10:56 Making our cards layout responsive
12:27 Setting up the HTML for our second card layout
13:56 Styling our second card layout with CSS
16:28 Re-using our Flexbox layout classes
17:27 Summary

• How to Create a CSS Flexbox Sidebar and Content Layout - https://www.youtube.com/watch?v=DtaSNnHky2w
• How to Make One Flex Item Full-Width - https://www.youtube.com/watch?v=M1yD8GVpLnQ
• How to Overlap Flex Items with CSS Flexbox - https://www.youtube.com/watch?v=S_zoG4ZelW0
• Create a Simple Responsive Footer with CSS Flexbox - https://www.youtube.com/watch?v=JkjMS2diuXs
Web design
Be the first to comment