I'm back. I'm still struggling with keeping a good pace and for now I think I'm gonna hold myself to 2 hours of studying minimum on weekdays and 4 hours on weekends. Outside of those hours, I will still be reading different blogs and watch videos. I have weeks where I spend a lot of hours outside of work studying and coding then I crash. I crash because I am not sleeping regularly and for a better learning experience.

And with that, I am hoping this change is going to help me be consistent.

So I have taken a few HTML and CSS courses and followed some projects and even made my own. While I have learned a lot I want to get deeper into CSS and for the next few days, that's what I will be doing.

Today, it's all about the Box Model and the things that I missed:

The Box Model is a concept that states that every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

Sizing Inline Elements

Inline Elements are elements that are displayed inline and takes the width of the content they hold. They do not take the full width of the page unlike block elements. As such, they do not accept properties such as weight and height. They also do not accept the vertical margin top and bottom.

I wanted to know if there is a way we can size an inline element using CSS and I found 2 solutions:

1- Setting the width and height in HTML either directly or using inline CSS.

a) HTML
img src="sample.jpg" width="100px" height="100px"

b) Inline CSS
img src="sample.jpg" style="width:100px;height:100px;"

2- Setting the display of the elements as block or inline-block in CSS.

a) block will sit in a single line and you might need to tweak more if you want to other elements on the same line.

b) inline-block will sit multiple elements on the same line.

Using Border-Radius
I may have seen more but the only time I used border-radius, it was on all corders to slightly round them or to make a circle.

The shorthand property for border-radius goes top-left / bottom-right and top-right / bottom left

To see how this worked, I hopped on code pen and played and saw how I could use that property to make shapes.