Flexbox Cards Layout Lab
In this lab, you'll apply your knowledge of HTML and CSS to construct a simple cards layout. The ultimate goal is to create a container enclosing three card elements that are systematically arranged in a row with stylistic details, using CSS flexbox to handle the layout and positioning of elements.
Concepts
- HTML: The foundation of any webpage, you'll utilize it to structure your content.
- CSS Flexbox: A layout model that allows you to swiftly produce flexible layouts on the web.
- Class attribute: It’s a powerful attribute in HTML which lets you style the same type of elements at once.
Steps
These steps will guide you to create a stunning card layout:
-
Start by creating a basic HTML structure. The HTML document should have a
<head>
section where you'll link your CSS file, and a<body>
where the content goes. -
In the
<body>
of your HTML, create a<div>
element with a class of 'container'. This envisioned element will contain the card elements.
<div class="container"> ... </div>
-
Inside the 'container' create three additional div elements all with the class 'card'.
This way,
<div class="container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>
-
In your CSS file, start by adding basic styling to the
body
. -
Style your 'container' element by setting its display property to flex.
-
Apply the CSS 'gap' property on your 'container' element to include a space of 20px between the cards.
-
Finally, target the 'card' class in your CSS file. Apply the necessary styling which includes setting width and height and changing the background color.