Personal Refrence for Code

 FLEXBOX <! DOCTYPE html > < html lang = " en " > < head >     < meta charset = " UTF-8 " >     < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >     < meta http-equiv = " X-UA-Compatible " content = " ie=edge " >     < title > Flexbox Tutorial </ title >     < style >         . container {             height : 544 px ;             width : 100 % ;             border : 2 px solid black ;             display : flex ; /* Initialize the container as a flex box */                         /* Flex properties for a flex container */             /* flex-direction: row; (Default value of flex-direction is row) */             /* flex-direction: column;             flex-direction: row-reverse;             flex-direction: column-reverse; */                         /* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */            

 RESPONSIVE rem,em vw and vh <! DOCTYPE html > < html lang = " en " > < head >     < meta charset = " UTF-8 " >     < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >     < meta http-equiv = " X-UA-Compatible " content = " ie=edge " >     < title > Size units </ title >     < style >         html {             font-size : 25 px ;         }         . container {             width : 400 px ;             /* height: 344px; */             height : 100 vh ;             width : 100 vw ;             font-size : 10 px ;             border : 2 px solid red ;         }     h1 {         text-align : center ;     }     # first {         /* font-size: 3em;         padding: 3em; */     }     # second {         /* font-size: 3rem;         padding: 3rem; */     }         </ style > </ head > < body >     < div class = "