CSS Size Units in Depth: Unlocking the Power of px, %, vw, vh, em, and rem

Welcome to our MERN stack web development course!

In this video, we dive into CSS size units and their significance in creating responsive and flexible web designs. Discover the differences between pixels (px), percentage (%), viewport width (vw), viewport height (vh), em, and rem units. Learn how to effectively use these units to define element sizes, margins, padding, and more.

Checkout my Main Channel: @LoveBabbar

Understand the benefits of using relative units for responsive layouts and explore the power of viewport units for creating dynamic designs. Join us in this comprehensive tutorial to elevate your CSS skills and create visually stunning web pages.

Be sure to subscribe to our channel for more web development content and stay tuned for upcoming lessons

Tags: CSS, web development, MERN stack, CSS size units, px, %, vw, vh, em, rem, responsive design, CSS layout, web design, frontend development, CSS styling, coding tutorial, web development course, coding education, CSS tricks, web development tips, CSS techniques, web design units, CSS measurements

Grow with me here:
Main Channel: @LoveBabbar

My Telegram Group Link:
Love Babbar CODE HELP

My Discord Server Link:

Comment #BabbarBhai if you read this.

[MArslanTayyab]

Home works:
1):
Physical Pixels:
Physical pixels, also known as device pixels or hardware pixels, are the smallest physical units of a display.
logical pixel:
Logical pixels, also known as CSS pixels or reference pixels, are a unit of measurement used in web development and CSS. It is used to help web designers know about rendering web content across different devices.

2):
PPI (Pixels Per Inch):
PPI refers to the number of pixels (or dots) that are present within one inch of a digital image or display.
DPI (Dots Per Inch):
DPI, on the other hand, traditionally refers to the number of ink dots that can be printed within one inch on a physical medium, such as paper.

[educationkiduniya.]

26:12 for responsive websites to learn about media query, grid and flex box bhaiya bahut bahut dhanyawad ❤ for this amazing course

[ayushdubey]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.🙏🏼🙏🏼🙏🏼😇😇😇😄😄😄😃

[saritabegani]

PPI(pixel per inch ) is the no. Of pixel per inch . Higher the ppi higher will be the resolution of image on digital screen.

DPI(Dots per inch) is the no. of dots per inch. This term is used for printed image. A printed image with higher dpi will be more clear .

A good picture should have higher ppi before printing and higher dpi after printing.

2) Logical pixel :- Aslo know as device independent pixel. These provide consistent layout and sizing for different device . By defining UI elements, font sizes, and image dimensions in logical pixels, developers can achieve a consistent appearance across various screen sizes and resolutions. The logical pixel values are then translated into the appropriate number of physical pixels based on the device's pixel density.

Physical pixel :- They are the individual dots or points of light that make up the screen's resolution. These dots together help us in seeing the vedio, images etc.

3) Following are the things that should be in mind for making a responsive website :-
a) All the units should be relative like em, rem etc.
b)Use media queries.
c) use CSS techniques like flexbox or grid to rearrange and stack content.
d)It's crucial to test your website on various devices, browsers, and screen sizes to ensure it renders correctly and functions as intended.

[adityagoswami]

such a nice tutor we are unable to interact with him live so he himself ask question and answers them to clear the question that's the reason he teaches so nicely by the way answers to questions asked in this video are :
physical pixel: most basic size unit for digital images.
logical pixel: when an logo is viewed on a higher resolution device its size automatically adjusts according to the resolution this is due to logical pixel.
ppi: pixels per inch means the no. of pixels contained in one inch of the display.
dpi: dots per inch means the no. of dots the printer uses in one inch to print the image these terms are mostly used interchangably.
while using em with padding it is respective to the element's font size and not parent's font size.

[smit_XD]

13:31
Pixels per inch (PPI) refers to the number of pixels contained within each inch of a digital image.
DPI stands for Dots per Inch, referring to the number of ink droplets a printer will produce per inch while printing an image. The more dots of ink per inch the picture has, the more detail you will see when printed.

[Anonymousyr]

"To kaise hai saare k saare " ....firse aag lagane aa gye h babbar bhiya 🔥🔥🔥🔥

[tejashreedharmireddi]

got to know your channel yesterday. I gave a try watching one or two videos. Binged watching all the content you have made since then. Basics are so crucial part of any learning, but we often skip. You are doing GREAT sessions👍. Gonna recommend my friends and colleagues.

[vishalsunnycode]

Lecture aate hi notebook open hojati hai bhaiya...❤thanks bhaiya

[shashankkumarpandey]

on mdn i didn't understood em, but after watching your explanation it was clr, thanks

[sushantravate]

Wow, this video on CSS size units is incredibly informative! I've always been confused about which unit to use for different elements, but this video has really clarified things for me. The detailed explanations of px, %, vw, vh, em, and rem were extremely helpful.❤

[Engineering_student_]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.💓💓💓💓

[ashish-suem]

Home work:::
Physical pixels refer to the actual individual dots that make up a display screen, while logical pixels are a virtual measurement used for consistent layout and scaling in software development across different devices.
PPI refers to the number of pixels per inch on a digital display, while DPI refers to the number of dots per inch that a printer can produce. PPI is relevant for screens and displays, while DPI is relevant for printed materials.

[shauravbhatt]

Physical Pixel: Physical pixels are the actual dots of light on a screen that create images. They are the individual elements you can see on the screen.

Logical Pixel: Logical pixels are a virtual unit used in software to ensure consistent rendering across different devices. They help maintain visual consistency on screens with varying resolutions and pixel densities.

[aviralsinghal]

Thank you for being my mentor, Babbar Sir!
Lecture 18 Done!✅

[ShabbirYahya]

Love, i was literally confused till the date in these units after watched many videos.but, your explanation is smooth. Love ❤ to Love Babbar

[SazzadurRahmanAyan]

Homework:

1) The main difference between physical pixels and logical pixels is that physical pixels are the actual pixels on the screen, while logical pixels are an abstract unit of measurement that is used to represent the size of objects on the screen.

- Physical pixels are the actual pixels that make up a display. They are measured in terms of their physical dimensions, such as width and height. The number of physical pixels on a display is referred to as its resolution.
- Logical pixels are an abstract unit of measurement that is used to represent the size of objects on a display. They are not physically real, but are instead used to make it easier to develop and design user interfaces. Logical pixels are typically defined as being 1/96th of an inch in size.

2) PPI and DPI are both measures of resolution, but they refer to different things.

- PPI stands for Pixels Per Inch and refers to the number of pixels in one inch of a digital image. This is the resolution of the image on the screen, and it determines how sharp the image appears.
- DPI stands for Dots Per Inch and refers to the number of dots that a printer can print in one inch. This is the resolution of the printed image, and it determines how sharp the image appears on paper.

3) The best tool or framework we can use is actually depend on our specific needs and preferences. Though we are new to web development, we should start with HTML and CSS. Once we have a basic understanding of these two languages, then explore other options, such as CSS frameworks or JavaScript frameworks.

Here are some additional tips for creating a responsive website design:

- Use media queries to change the layout of the page based on the size of the device.
- Use flexbox or grid layout to create layouts that are flexible and can adapt to different screen sizes.
- Use responsive images to ensure that your images look good on all devices.

woow.. it is a interesting lecture. Thank you so much bhaia. Get well soon. Lots of love from Bangladesh. ❤

[BhaveshMulchandani]

Bhaiya, today's lecture was amazing and we learnt about CSS Size Units in Depth. Bhaiya, your teaching style is amazing for us. Everyone want you to upload lectures on regular basis like this. Thank You so much.

[MrKiranKumar]

I was watching apna college css tutorial but your video is very easy to understand than apna college.
Thank you so much bro ..i think i will be a software developer soon.

[mdamanhassan]

boht hi helpful video hai ye aaj tak kisi bhi channel pe aisa concept ni samjhaya gya aur even paid course main bhi pw ke ye ni batya gya amazing love babbar bhaiya thank you for this video