DEV Community: Mahesh Patidar

Box Model in CSS:- "Boxes - Boxes rectangular Boxes Everywhere 😅"

Mahesh Patidar — Thu, 28 Oct 2021 04:11:59 +0000

The first thing you need to understand is that, Everything you see on a web page is made up of rectangles boxes.

on a website, you will see all the content is just a combination of boxes, Arranged on top to, on next to, bottom, or nested in each other.

Header, nav, footer everything made up with boxes. Usually, we called it HTML elements instead of rectangles boxes.

𝘉𝘰𝘹𝘦𝘴 - 𝘉𝘰𝘹𝘦𝘴 𝘳𝘦𝘤𝘵𝘢𝘯𝘨𝘶𝘭𝘢𝘳 𝘉𝘰𝘹𝘦𝘴 𝘌𝘷𝘦𝘳𝘺𝘸𝘩𝘦𝘳𝘦 😅

Take a look below 👇

Code added by me to see all the boxes 👇

* {
 outline: 2px solid #ffb400 !important;
}

What is the Box model in CSS?

Whenever you create an HTML element it is wrapped around in a box, and we are able to modify it using CSS.

this box is built with several different layers such as margin, padding, border, and content.

and with the help of CSS, we can manipulate the size, position, and properties of these boxes.

It is used to develop the design and structure of a web page.

Layers of Box Model:-

Content Area
Padding
Border
margin

Let's talk about each Layer of Box model.

✔ Content Area:-

The content area contains the real content which is put inside HTML elements such as text, image, etc.

The width and height properties define the width and height of the content box.

Also, you can define the width and height of content with other properties such as,

max-width, min-width, max-height, and min-height set constraints and not a fixed size.

if we didn't define height and width then it will calculate based on content, But we have also the option to set fixed height and width with the given properties.

take a look below 👇

Output -

✔ Padding:-

Padding in CSS refers to the space between the border and the element content.

To set padding on top, right, bottom, and left. we have properties such as

padding-top
padding-right
padding-bottom
padding-left

The padding shorthand defines all four sides of an element in one declaration.

p {
   padding:20px;
}

✔ Border:-

The border in CSS is between the margin and padding components of the box model.

Usually, we see the border around buttons like this 👇

the border shorthand property takes three inputs:

- border size
- border-style : solid/ dashed
- border-color

button {
     border: 2px solid #ffb400;
}

List of border styles we can use 👇

// Detect dark theme var iframe = document.getElementById('tweet-1433301171343544327-158'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1433301171343544327&theme=dark" }

✔ margin:-

margin is nothing but space between the box and surrounding boxes.

To set the margin on the top, right, bottom, and left. we have properties such as

margin-top
margin-right
margin-bottom
margin-left

The margin shorthand defines all four sides of an element in one declaration.

div {
  margin: 30px;
}

The size of the box is calculated like this:

𝐓𝐨𝐭𝐚𝐥 𝐖𝐢𝐝𝐭𝐡 = width + padding-left + padding-right + border-left + border-right.

𝐓𝐨𝐭𝐚𝐥 𝐇𝐞𝐢𝐠𝐡𝐭 = height + padding-top + padding-bottom + border-top + border-bottom.

the way the default box model calculates the width and height of elements add so many problems because in total width and height padding and border also added.

🤜 To solve this issue another property was introduced known as box-sizing.

What is box-sizing?

The CSS box-sizing sets the way the total width and height of HTML elements should be calculated.

Values you can specify:-

content-box
border-box

✔ content-box -

By adding content-box nothing will change because it is the default behavior of the box-sizing property.

If you set Width, padding, and border like this 👇

✔ border-box -

Border box is the best choice, it says the content box shrinks to add padding and border.

if you add 300px width to box and 20px padding and 3px border.

all of this together becomes 300 because the content box shrinks to add padding and border.

𝐓𝐢𝐩: border-box is the best choice for designing layouts and managing the sizes of HTML elements.

No need to set this property for each element individually.

box-sizing Reset Method

html {
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

if you're not familiar with inheritance and global reset,

then take reference from this blog to understand the above code.

https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

😍 We learned enough theory let's see it in an action.

notice the difference in the size of both elements in code and after inspecting the element.

codepen 👇

Key Points -

always prefer border-box.
Use the Browser tool to see the exact calculated size of an element.
Use global reset for ease of work.

Conclusion -

ok, that's it, we covered all the most important parts of the box model.😍

Thanks for stopping and checking these resources, I'm sure it's going to help you at some point in time.

If you enjoyed reading then don't forget to share with other Devs too😇.

Let's connect with me on

Cheat Sheets that always save my time during web development 🚀

Mahesh Patidar — Fri, 22 Oct 2021 17:00:02 +0000

During Coding I often forget exact properties and at that time searching on google take time at least for me ( because I don't know about you 😁😅).

So I always prefer cheatsheets because in 90% of cases I got my answer from them.

So today I'm going to share a list of top cheatsheets that save my time during development.

1. HTML Cheatsheet -

This Cheat Sheet contains useful code examples and developer tools, markup generators, and more on a single page.

This is a helpful quick guide for those who already know how to work with these languages.

2. CSS Cheatsheet -

This Cheat Sheet contains the CSS properties, text-shadow generators, color picker, and some common code snippets.

3. Grid Layout -

This one is not only a time saver but it is really a lifesaver because whenever I'm working with grid layout, most of the time I need a cheat sheet.

4. FlexBox -

Another visual-based cheat sheet for CSS flexbox, this one contains all the flexbox properties with visual examples.

5. JavaScript -

This Cheat Seet contains useful code examples on a single page. Find code for JS loops, variables, objects, data types, strings, events, and many other categories.

6. JavaScript -

This cheat sheet contains basic to advanced concepts. ES6+, simple explanations, DOM API, Event loop, functions, array, object, Type and so much more.

7. React -

This single cheat sheet contains various code examples to boost your react development.

8. Git -

This cheat sheet contains a list of handy git commands to make your life easier!

Conclusion -

Cheat Sheets are best for taking quick references and boosting productivity. I hope you found this article useful and you enjoyed the reading.

Let's connect with me on

I wasted 2 months in tutorial hell😖😫

Mahesh Patidar — Wed, 20 Oct 2021 10:30:01 +0000

As I started learning to code, I was stuck in tutorial hell. It felt like, I am learning a lot of the stuff. I have mastered CSS and JS.

After Creating a lot of projects while watching tutorials. One day I decided to create a project of my own, and the biggest myth busted 😫.

I came to know that I don't know anything so I started another course and then the same happens until I discovered that I was in tutorial hell.

WTF is Tutorial Hell?

Tutorial hell is when you continuously watch tutorials one after another and you feel like, you are learning a lot of things.

But when you start doing something your own, you found out you're even not able to solve a basic coding problem.

The problem with tutorial hell?

You get fake confidence.
Fake feeling of growth.

Quote by Albert Einstein -

" insanity is doing the same thing over and over again and expecting different results. "

There is nothing wrong with using tutorials to learn new things. You just need to stop that desire of starting a new tutorial as soon as you finish the one you were working on.

When you complete a tutorial, try to recreate the same code using only your memory. You will probably be stuck in a few things so rewatch/reread and again start the solving problem.

How to Break tutorial hell?

Learn the Basics
take Proper Notes
Start With a Small problem
Be consistent
Teach others
Build Projects

Deep Dive 👇

1. Learn Basics -

Don't try to jump into advanced stuff without learning enough basics.

Core Fundamentals >>>> frameworks

2. take proper Notes -

Notes are the best way to revise your learning because we humans are never able to remember all the things.

Note the key points.

3. Start with a small problem -

Always start with small coding problems, do not try to solve big problems because you get demotivated easily in the beginning.

Coding is all about solving problems so always break your problem into small sub-problem.

4. Be consistent -

Do not try to learn everything in one or two months. be consistent with your learning soon you will see Great results.

5. Teach others -

teaching is the best way to Recalling back what we have learned.

6. Build Projects -

The more you code, The better you become 💛, Don't just watch the tutorials, practice what you learn.

Conclusion -

If you are able to relate to this article that you are in tutorial hell. Use the given techniques to escape from tutorial hell.

I hope you enjoyed reading

Let's connect with me on

Confused About rem and em units in CSS?

Mahesh Patidar — Wed, 13 Oct 2021 16:32:35 +0000

rem and em units in CSS is creating confusion for beginners,

Most beginners don't understand the correct meaning of both units and then use them without thinking much and it creates lots of problems for them.

em and rem both are known as relative units in CSS.

You've probably been using em and rem units now for a while already, but still, you might be confused about which unit is best in which scenario.

What is em?

An em value is equal to the computed font size of the parent of that element. example if font size of parent element is 20 px then 1em is equal to 20px.

if the font size is not specified in the parent element then it will look continues up until the root element.

Root element font size is provided by the browser and by default it is 16px.

in this case, 1em is equal to 16px.

compounding effect of em -

check the below challenge, and then jump on the answer and understand how em works.

// Detect dark theme var iframe = document.getElementById('tweet-1445427836320247810-353'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1445427836320247810&theme=dark" }

We have three divs, container, parent, and child and respectively are specified font-size 1em, 3em, and 2em.

font-size of container is 1em eqaul to 16px.
font size of parent is 3em means 3 * 16px ( parent font-size) so it becomes 48px now.
font size of child is 2em means 2 * 48px ( size of parent element) so it becomes 96px now.

the final size of the child becomes 96px, 😅 power of compounding.

check live example 👇

let's see this in action 👇

What is rem?

While em is relative to the font size of its direct or nearest parent, rem is only relative to the Html (root) font size.

by default, it is 16px until we didn't specify in the Html element.

rem value is not much convenient when it comes to specifying such as

1rem = 16px

But what if we want to use 10px than we need to calculate the rem value which is equal to 0.625rem.

To solve this problem we have one trick, specify the Html element font size as 62.5%.

than our 1rem becomes 10px and now we are able to calculate size easily.

Which is better?

There’s no better unit really, and it all depends on your personal choice. Some people like to use rem units for consistency and scalability,

while some like to use em units in places where the influence of nearby parent elements would make sense.

I personally use rem more than em but be careful with both, em becomes a trouble when you don't understand the relation between parents and child,

and we already see the example of compounding effect in em. so I like to say use rem more often than em.

If you want to calculate the accurate size in rem and em, then pxtoem website is pretty useful.

Conclusion -

Trying both units and understanding the use cases is most important. I would like to suggest you play with both units and understand both of them.

Let's Connect -

✔ Twitter
✔ Linkedin

How to Create Beautiful Gradients with CSS

Mahesh Patidar — Sun, 03 Oct 2021 16:52:02 +0000

Let's start this blog with a confession, I wrote this detailed thread for Twitter then I decided to turn it into the blog and upload it here too.

I'm writing this blog because I found learning gradient a little bit difficult in my early days. there are different types of gradients available and we mostly end up using a basic linear-gradient, but the gradient is far more powerful than you think.

In this, I'm going to cover all the basics and most important concepts of the gradient.

in the next blog, I will share some real-world examples and more advanced usage of gradients.

What is the gradient?

CSS gradient allows you to create a smooth gradient between two colors, right up to impressive mixing and multiple gradients.

Gradient makes the background more attractive than a solid color.

We all know about Instagram but did you notice that the Instagram logo is also a gradient.

The genius is in its simplicity.✨

Types of gradients?

There is three gradient function in CSS.

Linear Gradient
Radial gradient
Conic gradient

Let's talk about each type in more detail.✨

Linear Gradient -

A linear gradient starts at one point and changes along a straight line to the endpoint.

The direction of the linear gradient can be up/down, left/right, or diagonal.

To create a linear gradient you must define at least two-color.

Basic linear gradient -

To create the most basic gradient you just need to specify two-color. Two colors are the minimum required but you can have color as much as you want.

Without specifying angle will consider top-to-bottom.

Example👇

Changing the direction of Gradient -

The values are "to top", "to bottom", "to left", and "to right" used to change direction.

even we're free to use both the horizontal side (left or right), and the vertical side (top or bottom) after "to".

Example 👇

Angle for changing direction -

We Are free to use an angle unit to specify the direction of the gradient.

The values are equivalent -

to top - 0deg,
to bottom - 180deg,
to left - 270deg,
to right - 90deg.

you can also use other angle units.

Color stop -

One thing we didn't talk about as of now is "color-stop". Color stops are the colors you want to render smooth transitions among.

A color-stop value, followed by one or two optional stop positions. in percentage or in length.

Radial gradient -

A radial gradient starts from a central point and radiates outwards towards the outer endpoint.

Before we move further let's discuss some key terms -

Size
Shape
Position
color-stop ( Same as linear one )

Let's dive deeper 👇

✔ size -

The size influences the ending shape of the gradient by taking the shape value you determined and instructing the gradient where to end.

closest-side
closest-corner
farthest-side
farthest-corner ( default one )

Detailed explanation 👇

✔ Shape -

This determines the shape of the gradient, and because we’re talking about radial gradients,

they’re limited to being circular in nature. our shapes will be between an ellipse or a circle.

✔ Position -

This works the same way it does on background-position, So, keywords like “top,” “right,” “left,” and “center” will work here. You can even use a combination like, “top center.”

We can also specify an exact position using a numeric value, including the percentage. Default is center center.

Basic Radial gradient -

To create the most basic gradient you just need to specify two-color. Two colors are the minimum required but you can have color as much as you want.

All others are default values because we are just specifying colors.

shaping of radial gradient -

we already discussed shape and we have 2 values an ellipse or a circle.

Let's see an example of both 👇

Sizing of radial gradients -

we already discussed all the sizing values, let's see one or two values in the example.

for better understanding play with all values.

example 👇

Changing Position -

We already talked about the positioning of the gradient.

A radial gradient doesn’t have to start at the default center. It can specify a certain point.

example 👇

Conic gradient -

A conic gradient has a center point in your box and starts from the top and goes around in a 360-degree circle.

The conic-gradient function accepts the position and angle arguments. By default, the angle is 0 degrees which starts at the top, in the center

Above we already talked about position or angle, so let's see some examples.

👇👇

basic conic gradient -

As like linear and radial gradients, all we need to create a conic gradient are two colors.

Positioning -

Easy gradient generators 👇

⚡ https://gradientgenerator.com

⚡ https://cssgradient.io

⚡ https://colordesigner.io/gradient-generator

This is my first blog post and I would like to read your feedback as well as criticism.