`position:static;
position: relative;
position: absolute; //ekta containt er upor arekta content uthanor jnno

      top/bottom/left/right:0;

         relative unites
         ---------------
      1.EM-em multiplies his parent
      2.Rem-just like EM(HTML)
      3.Vh-100vh
      4.Vw-100vw
      5.%-relative his parent

display: flex;
display: grid;
display: block;

justify-items: start/center/end;

align-items: start/center/end; //display flex kore align item center korle shob kisu colum er majhe chole ase
justify-content: start/center/end; //display flex kore align item center korle shob kisu row er majhe chole ase

align-content: start/center/end;
justify-self:start/center/end;

text-align: center;

******flex******

flex{
flex-direction: row/column;
flex-wrap:wrap/nowrap;(automatic upor niche korte - by default nowrap thake)
flex-flow:column wrap;
row-gap:
justify-content:flex-start;
flex-end;
center;
space-around;
space-between;
space-evenly;
align-content:
justify-items:
align-items:stretch;
flex-start;
flex-end;
center;

flex-direction: column;
order:

//somanuoatik vabe jaiga nea nibe
flex-grow:1;
flex-shrink:0;

//kototuku jaiga nibe
flex-basis: 100px/70px; [min width er poriborte use hoi]

//3 property together
flex:flex-grow >> flex-shrink >>flex-basis ==== 0 >> 1 >> 100px

****grid****

display:grid;
grid-template-columns:(auto auto) // (1fr 2fr); //repeat(3,1fr) ****repeat(auto-fit,minmax(200px,1fr));
grid-template-rows:1fr 2fr;
grid-row-gap:2px;
grid-gap:
grid-template-areas:
grid-auto-rows:1fr;

grid-gap:3px;

grid-column-start:1; (specific kno element k boro choto korar jnno)
grid-column-end:-1;
or, grid-column:1/3; //auto/span 2;

grid-auto-flow:dense;
object-fit:cover;

****display grid order(upore niche korar jnno)
order:2
order:1

=======================================

• module create ng g m about_us --routing

*component create
ng g c "name"

*localhost=>
http://localhost:4200/home

*run=>

ng serve --port 4200

*loop=>

*loop from component obj=>

*loop use or img and text=>

{{i.name}}

*

*if/else=>

• =============new for if else=============

  @for (i of items; let j = $index; track j) {}
  @if(isShow[j] == true){}
  @else {}

  =============

  *card db component=>
  export const PRODUCTS_DB : any[]=[
  {image:'../../../assets/images/home/Olevs-8697-Tungsten-Steel-Copper-Dial-Ladies-Watch-Gold-1.jpg', name:'Bollard Lamp',nPrice:'$7.00',oPrice:'$12.00'},
  {image:'../../../assets/images/home/6JqNIG41Citz4GZwhiotfOYPxJXqIeexdj3ZHtIM.jpg', name:'Bollard Lamp',nPrice:'$7.00',oPrice:'$12.00'},
  
  ]
  then component.ts file a->

  export class InformationSecComponent {
  items: any[] = PRODUCTS_DB ;
  }

  *git update==>
  git add .
  git commit -m"test 1" /git commit -m "update from home"
  git push -u origin main /git push

  *page link up
  app-routing.module.ts=>module_name.module.ts
  module_name.module.ts

  =====================>
  *branch change
  git checkout boby/white-bg

  *branch create
  git checkout -b boby/white-bg

  *branch cheack
  git branch

  ======================>
  &::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: url("../../../../../public/images/360_F_333678091_tOcalp3NEz7oNgOSS8gXYtfH5Q4DPOV9.jpg")
  no-repeat center center;
  background-size: cover;
  z-index: 11;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  }

  =====
  ng g c single-order --standalone=true
  ng g m course-details --routing
  ng g c course-details

  =====
  h1 {
  font-size: calc($font-title) + 10px;
  text-align: center;
  margin-bottom: 6px;
  position: relative;
  &::after {
  content: "";
  position: absolute;
  width: 116px;
  border: 1px solid #4d4d4f;
  left: 55%;
  bottom: -2px;
  }
  }

  backend

  *generate module=>

  nest g module pages/users
  nest g service pages/users
  nest g controller pages/users2

  create react=>
  npx create-react-app react-project

  html create=>
  rafc
  `