Basics about CSS Box Model.

Vaibhav Desai — Thu, 24 Dec 2020 09:21:56 +0000

What is CSS box model ?

Whenever a website is loaded on the browser,the rendering engine loads the elements of the document in a rectangular box content which is set as per the standards of the CSS box model.
Sounds boring? May be this can help.... It can also be said as it loads the contents as per the rules which are been defined for it specifically & when defining those rules there are certain restrictions that are meant to be kept in mind.
Still tough to digest?
OK for now just remember there are certain set of instructions that are meant to be followed.That Sounds Great 😉

So what is inside CSS box model?

As you can see in the above image there are number of things that are part of the CSS Box Model.

Lets start the Catalog inside-out:

Content
Padding
Border
Margin

What is Content Area ?

Here the content i.e., Images,Videos,Text & etc. Which is real and integral part of the website element is shown.
You can give desired height & width to the content box and not just this you can even add background image or background color as per your choice.
By default the box-sizing property is set to content-box.
you can use: width, min-width, max-width, height, min-height, and max-height properties as per your requirement.

What is Padding?

The padding area is bounded by the padding edge & extends the content area to include the element's padding.
In simpler terms this helps you beautify the visual appearance by adding some spacial adjustments.
You can use: padding-top, padding-right, padding-bottom, padding-left and some other shorthand padding properties to manage thickness of padding as you desire.

What is Border Area ?

Border Box is where you tell the browser how you want the border of the content to look.
the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties - You can also manage background color and image accordingly with some additional shorthand properties.

What is Margin ?

Margin can be understood as margins that we draw on the page to separate the contents of the page.
In same manner in CSS Box Model we use margin to separate content from the other contents of that Element.
The size of the margin area is set with margin-top, margin-right, margin-bottom, margin-left and some other shorthand margin properties.
If you over see margin are being shared between two different boxes that's called as margin collapsing.
This happens when the margins are not clearly defined and need to be defined clearly.

Best Practices for beginner to start Web Development.

Vaibhav Desai — Tue, 01 Dec 2020 17:41:37 +0000

Are you a complete beginner to Web-Development don't know how to start? What could be the best practice in order to master the skills?.....Just note these points and you'll make the best from this.

1.Component library using HTML.

What's component library???Confused??..
Let's Break-in,
Component library is like a blueprint of all the essential design/Style required for your project.But how is this useful?

Component library of HTML will have all the essential designs for your project leading to which you will also be able to complete your work faster as the entire components are present at one place you just need to arrange them as per the idea you have.

And not just this also Remember to use the Right tags at the Right place.

Understand the essence of tags like div,section,ol,ul,meta & etc

where,when & how to use the tags is the most essential thing?

The Right practice from the beginning will be fruitful for the rest of your journey

2.Practice CSS

CSS is something that won't come to you in a day you'll need to practice it to master it.
But How?still worried!!!

Sit back let me help..
Remember the component library you made...Yes!Yes!Yes!
Just repeat this process for CSS as well the same way you did it in HTML,this will not just help you understand things but also allow you to experiment without hampering the real project.

3.You don't need to be a great designer

When you are starting the journey always remember you need not be a very good designer always things will come to you with time,When you are a beginner Learn to follow Symmetry ...

But you Should be that Capable enough to replicate the designs using HTML&CSS if shown in front of you..

And make this a practice try to replicate designs that's how you'll master HTML and CSS.

4.Learn to use Github & Inspect Element

Understand how to use github as it is the best tool you can have to store your code and keep the track of all changes made rolled-back with add on to inspect element where you can edit and make changes on the webpage and see how they reflect as per your desire or ain't...All this without even disturbing the original code

5.Make Projects

Most of the time as a beginner you tend to make mistakes by just watching a course or reading a doc. This is passive learning!

You feel you know things but when you start doing things that's when you realize you are not knowing enough and again run back to those videos.

That's a pretty bad practice..But there is alternative..

Learn things take down notes read about them..then try to make dummy projects ,whenever you feel stuck refer your notes implement them ..if you miss something search for it and add it to your notes implement it and always be open to constructive criticism and suggestions.

HAPPY LEARNING

DEV Community: Vaibhav Desai