Practices - Day1.Expanding cards

CSS

1. background-image: background-image: url('relative or absolute url path');
2. @import vs <link>:

• @import - It is CSS mechanism to include a style sheet. You can use it when you want to hide styles from older browsers, because @import can't be recognized by them. You can use it when you want to import style sheets into linked style sheets, in other words, you can use it in the css files that you linked in HTML file.
• <link> - It is the HTML mechanism. <link> is often more preferred over @import. It provides many useful attributes like rel, you can use rel to choose alternate stylesheet, rel="alternate stylesheet"

1. box-sizing

• content-box: This gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. width&height = content
• border-box: It tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. width&height = border + padding + content So when we write css, we often set all elements box-sizing property to be border-box to avoid strange behaviors.

  * {
    box-sizing: border-box;
  }

1. Flexbox: It is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. Set display: flex property and value to the container element then it will act as a flexbox. The elements inside the container(flexbox) are called flexbox items.

2. align-items: center & justify-content: center:

• align-items: It defines how flexbox items are aligned according to the cross axis.
  • align-items: center: Set it to the containter element then the flexbox items are aligned at the center of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be centered vertically.
• justify-content: It defines how flexbox items are aligned according to the main axis.
  • justify-content: center: Set it to the container element then the flexbox items are aligned at the center of the main axis.

1. vh & vw: Both of them are relative css units. vh means relative to 1% of the height of the viewport, vw means relative to 1% of the width of the viewport. Viewport = the browser window size. If the viewport is 50cm wide, 1vw = (1% * 50) cm = 0.5cm.

2. overflow: It defines how overflowing content on both horizontal and vertical axis is displayed.

• overflow: visible: The overflowing content is visible, while the element itself stays at the specified height.

• overflow: hidden: The overflowing content is hidden and can not be accessed.

• overflow: scroll: The overflowing content is accessible thanks to a vertical scrollbar.

• overflow: auto: The browser decides whether to display a vertical scrollbar or not.

1. background-size: cover: The keyword cover will resize the background image to make sure the element is fully covered.

2. border-radius: It defines the radius of the element's corners.

3. cursor: pointer: It sets the mouse cursor to pointer when hovering the element.

4. transition: Shorthand property for transition-property transition-duration transition-timing-function and transition-delay. Only transition-duration is required.

5. @media: The @media rule is used in media queries to apply different styles for different media types/devices. For example,
   

   @media (max-width: 480px) {
     .container {
       width: 100vw;
     }
     .panel: nth-of-type(4),
       .panel: nth-of-type(5) {
       display: none;
     }
   }
   

JavaScript

1. Document.querySelectorAll(): The Document method querySelectorAll() returns a static NodeList representing a list of the document's elements that match the specified group of selectors. For example,

   const panels = document.querySelectorAll(".panel");

1. Array.prototype.forEach(): The forEach() method executes a provided function once for each array element. Syntax: forEach((element) => {function})

2. EventTarget.addEventListener(): The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

3. Element.classList: The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

4. DOMTokenList: The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList and many others.

5. DOMTokenList.add(): The add() method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

6. DOMTokenList.remove(): The remove() method of the DOMTokenList interface removes the specified tokens from the list.

Code in: Github