Project based Learning using HTML CSS JS - Day 16

Today's day 16 Goal is to Build and learn by creating a 6 content cards in Html & CSS from YT Tutorial.

HTML

how to create 6 divs in html?

1. Write the following code. shortcut div.cards*6

<div id="cards">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>

CSS

how to get black background in CSS?

1. Write the following code.

body{
    background-color: var(--bg-color);
    height: 100vh;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}

how to styling cards in css?

1. Write the following code.

#cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 916px;
    width: calc(100% - 20px);
}
.card {
  background-color: rgba(255, 255, 255, 0.1);
  height: 260px;
  width: 260px;
}

how to align items center in CSS?

1. Write the following code.

  align-items: center;

JavaScript

Conclusion

1. Create 6 divs in html.

2. Black background in CSS.

3. styling cards in css

4. align items center in CSS

My Code:

Source: YT

Author: Dheeraj.y