Important tags

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=>
 <span *ngFor="let i of [1,2,3,4,5]">
   <i style="color: orange;" class="fa fa-star" aria-hidden="true"></i>
 </span>

*loop from component obj=>
  <div class="card" *ngFor="let i of products">

*loop use or img and text=>
  <img [src]="i?.image" alt="">
  {{i.name}}

*<ng-container *ngFor="let i of items; let count=index">

*if/else=>
  <div *ngIf="count<items.length-1" class="card">
  <div [class]="count < items.length-1 ? 'card':'card_4'">

* <ng-container *ngFor="let i of items; let count=index">
  <div [class]="count < items.length-1 ? 'card':'card_4'">

=============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