The short CSS guide that makes you say: “Ahhhhh… that’s why!”. In this tutorial, we'll discuss Essential Keys to Crack CSS
Let’s start from the assumption that every HTML element when it is rendered inside the DOM is rendered as a box. Then you can start adding content or some style to make it look fancier. In the beginning, this is how our boxes actually look for the browser:
The blue rectangle represents the content size, which could be specified by the height or width property or could fit on the size of the children.
The _green _rectangle is the padding, which pushes all the elements contained in the box towards the inside. Internal spacing.
The _light orange _rectangle is the border of the box.
The _dark orange _rectangle is the external margin, it pushes the elements around the box further away.
These 4 dimensions, combined together, represent the physical space that our box occupies: _height/width + padding + border + margin = actual space. _However,This CSS box model is not so intuitive.
Learn the CSS Z-Index property, stacking order, and 3 common reasons why your z-index might not be working.
Learn how to make a portfolio website using HTML and CSS. We will create this using CSS Flexbox and CSS grid. It will be fully responsive as well.
If right run a search for "CSS Grid and Flexbox," you'll find mostly articles or videos with the title "CSS Grid VS Flexbox". These articles and videos assume one is better than the other. However, the truth is that both are great and one isn't better than the other. In this article, I'm gonna show you what both are capable of, things that make them different, and why you should use them together to make your web page look amazing.