Flexbox Cards Layout Lab

Easy
69
2
86.4% Acceptance

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:

  1. 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.

  2. 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>

  1. 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>

  2. In your CSS file, start by adding basic styling to the body.

  3. Style your 'container' element by setting its display property to flex.

  4. Apply the CSS 'gap' property on your 'container' element to include a space of 20px between the cards.

  5. Finally, target the 'card' class in your CSS file. Apply the necessary styling which includes setting width and height and changing the background color.