welcome, today is more of a personal blog than coding.

Css(revision): Layout -- It is basically arranging elements in a specific way. Earlier we used to do it with float but now flex and grid are more used for layout.

Float is done by setting property display:float. It will make other inline/text elements wrap/float around the element. It is very difficult to manage complex layouts, also if we float all the children elements of a container, it will make the container collapse if height is not specified. Though solution to it is making container display:flow-root.

Flex is used for making 1-dimensional (horizontal or vertical layout). It has two axis main axis(horizontal) and cross axis(vertical). For container main properties are gap(takes length), justify-content(align direct child elements to main axis), align-items(align direct child elements to cross axis). For child elements/flex items align-self(to change align-items), flex (shorthand property which handle grow shrink bais) and order. There are other properties also but these are more than enough to do the work. I am avoiding going into details as I still not sure of some, I will have to practise more of it. Also use gap instead of margin.

Grid is used for making the 2-dimensional layout. Explaing it is more tricky without pics so leaving it here.

Personal:- Procrastination and laziness have ruined my life. So I decided to find a solution to it. One regarding procrastination was that every time I do it, I should reverse count 5,4,3,2,1 and start the project promising I will just do it for 5 min maximum probably. Somehow this trick has worked for me. Also deleting all apps like insta,twitter even youtube(though I have brave🤦‍♂️) helped me. Even a few seconds of scrolling keeps on going for an hour or more.