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.
TIMESTAMPS:
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
WATCH NEXT:
• How to Create a CSS Flexbox Sidebar and Content Layout - • How to Create a CSS Flexbox Sidebar a...
• How to Make One Flex Item Full-Width - • How to Make One Flex Item Full-Width ...
• How to Overlap Flex Items with CSS Flexbox - • How to Overlap Flex Items with CSS Fl...
• Create a Simple Responsive Footer with CSS Flexbox - • Create a Simple Responsive Footer wit...
In questa pagina del sito puoi guardare il video online How to Create Cards with CSS Flexbox - Responsive Web Design Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Front End Beginners 12 novembre 2021, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 2,511 volte e gli è piaciuto 42 spettatori. Buona visione!
