Decided to finish the remaining required sections in Codecademy today as I am very eager to get to the ruby curriculum. So, without further ado ...
The Box Model
Every element/content rendered on a webpage has several boxes around it. That is the box model, a series of boxes inside one another so that it can easily be displayed and positioned in a certain way.
The first box is the content box which uses width and height to manipulate its size.
That is inside...
The second box which is the padding box. The amount of space between the content box and the third box.
That is inside...
The third box of border. This is the thickness and style of the border surrounding the first two boxes.
That is inside...
The last box of margin. The amount of space between the border and another content box.
Each box has certain properties it uses
Content box
width (max and min width)
height (max and min height)
Uses values such as px, em, and rem
min/max width and min/max height are used to ensure the content box does not shrink or grow past a certain point. This is important since there are various screen size devices that can display your webpage/app. Using min/max will ensure your content is visually appealing no matter what device is used.
Padding box
padding-top
padding-bottom
padding-left
padding-right
Uses values such as px, em, and rem
Border box
border-top
border-bottom
border-left
border-right
border-width
border-style
border-color
Uses values such as px, em, and rem, color, style
The best way to write is to combine width, style, and color
Ex. border: 2px solid black;
Margin box
margin-top
margin-bottom
margin-left
margin-right
Uses values such as px, em, and rem
A nice trick with margin is to use auto for the horizontal values. This will automatically center your content to the screen size.
Ex. margin: 0 auto;
Another property to be mindful of is the box-sizing property with the value border-box. Applying that to the whole HTML document will make sure everything is rendered correctly. This will not add border thickness and padding to your content box.
Positioning and Display
The position property takes certain values such as...
relative - Using relative along with properties top, bottom, left, and right will allow you to move your content around the page. A great way to overlap your content.
absolute - Using absolute positions the content exactly where you want it and removes it from the normal flow of the HTML document.
fixed - Using fixed will make your content visible even when scrolling down the page as it is relative to the viewport.
Certain elements are either inline elements or block elements natively. Luckily with the display property we can manipulate how they behave with the values inline, block, and inline-block.
Flex Box
Understanding flex box is crucial to making websites/app responsive. Mastering flex box will make your job a lot easier down the road. I would encourage everyone to spend extra time in learning/understanding flex box.
Using display: flex; will allow you to use justify content which allows you to move content effortlessly from the left side of the screen to the center to the right side (which is known as the main axis). Or maybe you want space evenly around your content, using space-around takes the remaining space and evenly distributes it. It is truly wonderful how something so simple can do so much.
Using align-items allows you to move the content up and down (cross axis) its container.
Flex grow and flex shrink magically grows or shrinks designated content when adjusting the screen size.
When the screen gets too small and you want the content to keep its dimensions using flex wrap will move your content to the next line.
I cannot reiterate enough how important learning flex box is. Using multiple tutorials is necessary to making sure it sticks to memory.
Top comments (0)