Project based Learning using HTML CSS JS - Day 14

Today's day 14 Goal is to Build and learn by creating a gradient loading bar in Html & CSS from YT Tutorial.

HTML

1. Create a div with class loader in HTML.

1. Write the following code.

<div class="loader">
    </div>

CSS

1. In CSS *asterisk means universal selector, which research the margin and padding.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. How do you justify content center in CSS?

1. Write the following code.

 justify-content: center;

3. How to use position property in css?

1. Relative position property is relative to viewport like fixed.

  position: relative;

4. How to create a loading bar in CSS?

1. Write the following code.

 width: 300px;
  height: 10px;
  background : aliceblue;

• important points to note here, height property only works when the position property is given to a class or ID.

5. How to give border radius in CSS?

1. Write the following code.

  border-radius: 3px;

JavaScript

-

Conclusion

1. Created a div with class loader in HTML.

2. History about * in CSS.

3. Justify content center in CSS.

4. Position property in CSS.

5. Create a loading bar in CSS.

6. Border radius in CSS.

My Code:

Source: YT

Author: Dheeraj.y