Coder Himanshu

  Don't use hieght in px instead go for responsiveness Flexbox : Flexbox children goes for smallest possible value..even if you imcrease its sibling content it won't break and will go try fitting to the limit it is possible to get small This is the default bheaviour but we can change if we dont want it even if we add 100% or 1000px it will stull not break but will try to cover the maximum space possible and in the above case it is 50% width as it need to  give equal width to both Flexbox elements try to get miniumsize when possible and also if the box is limited they will shrink down to a djust and same when width is increased. If we increase the height of one element all will try to get the same height but if we reduce one element height then others remain same but that one will only get smaller   n

  pseudo element below is pseudo class Covers everything...with top bottom left right 0 Need to include content property <p></p> if we are using ::before this p than its not true that it is inserting before the p but instead it is inserting before the content of p. same is for ::after pseudo element pseudo element not works for img as they dont fit in content theory of css block covers entire space wherease inline dont cover Also, this pseudo elements are inline by default. you can change that to block level. Content property of pseudo element Add images Shows up quote Tooltip without a markup add the data-tool-tip bottom 100% made the tooltip go above the text Now to add the hover we made trnasform 0 and on hover we scale it Hoever, the origin is wrong so to make it grow from the text we do the below thing Make it a separtor Adding Font awesome after link Adding Counters

 Fetching data with react Query n    How to fetch it   Common pattern notice whuile using react query is that query fn is defined elsewhere  Handling error with react query React Query is awesome as it reduces 15 lines of data fetching using useeffect to just 3 lines  React Query Dev Tools 1)Import in app.js 2) before closing provider tag add this line    lowecase t  Query cache Query Cache is extremely important. When react query fetches the data for the first time. It caches the data. So,when we wil next go to the page again it will not show loading,,, again and instead it will show cached data. However, react query knows that the data mighnt be fresh so it will do a background ccheck and if new data has come than it will reload else it will keep the data as it is,,.. so no flikceringor loading everytime data has been fetched  Iniitally isLoading and isFetching both are true but at secodn time isLoading will be false Default cach...