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) */  ...

 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 ;       ...