A Full Guide to CSS UNITS!

💖 Show your support by checking out my courses!
developedbyed.com
-------------------------------------------------------------------------------------------------
CSS Units are quite hard to wrap your head around. In this episode we will look at the most popular CSS Units out there from px, rem, em, vh, vw and how they help in a responsive design in CSS. I am really happy to say that new changes are coming to this channel, focusing more on the fundementals of software and hardware engineering.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
📖Chapters
00:00 Channel Changes
01:30 Pixels
02:20 REM
03:20 62.5% Hack
04:25 Margin and Padding Gotchas
06:52 Ems
08:08 CH and paragraphs
09:00 Percentages
09:35 Images and sizing
10:58 VH and min height
11:32 VW and viewports
-------------------------------------------------------------------------------------------------
🎶 Dope music
C Y G N - Emotions chll.to/bfeb2b66
C Y G N - You chll.to/c89d5030
C Y G N - Beautiful chll.to/a9246a7a
#programming #css #webdevelopment

[@asyncrohan]

Hey brother , thanks a lot you are the best frontend teacher i have ever seen , i just wanna thank you because only because of you i learned css and mastered tailwindcss and thanks for this video too , i hope one day i will meet you and thank you face to face 😊

[@justpassingbylearning]

Your videos are the reason I got a career in web development. The projects in my portfolio were based on your videos. Thanks for all the hard work and great content. 5 years ago you helped me out in a large way but just doing what you love

[@developedbyed]

That’s amazing to hear! I’d love to see your work!

[@justpassingbylearning]

@@developedbyed if I still had my portfolio from then I would show you. I remember the ball one being a big hit during my interviews

[@tommy2naans]

Love this video, more classic ed content. Im glad you are going back to foundations.

[@4115steve]

I like the direction. It seems to many channels focus or react. I plan to use the JAM stack with astro and three JS.

[@bundesdavid]

I love to chill out in the back end and do funny stuff with databases and terminal and stuff. But to build something for others the frontend is just absolutely necessary. I'm not a fan of fronend development, but your channel makes it fun and chilled out for me. Thank You!
I am looking forward to other contents! Arduino and Unity are really cool topics :D

[@grim.reaper]

Ohh now I understand why different units are used 😭
Thank you so much!!

[@charllabuschagne2169]

Thanks Ed, always appreciate your content. Gems for this one is the :root hack and the ch units.

[@royrms4618]

nice video ed thank you,
whats the wallpaper used , i figured about love money rock n roll but it's not animated like yours

[@maksudulhaque3227]

He always looks so happy and cheerful. Make a tutorial on that I would say😂

[@maherylala2153]

Rick must be hell of a good dev

[@krayziekray9509]

Great video Ed. Do you have a plan to record updated videos for your Next.js course?

[@developedbyed]

Yes, every course will be updated regularly 👍

[@hjetwd]

the em unit is very mobile, dynamic. don't be afraid to use it. a good example of when em is perfect: you need to coding a button. the button has states - different colors and sizes. for the "big button" state, we just need to specify a larger font size, and everything else will increase automatically.:
.botton {
padding: .5em 1em;
margin-inline: .5em;
font-size: var(--botton-size, 1rem); /* REM only here */
border: .0625em solid black;
border-radius: .375em;

&.botton--small {
--botton-size: .75rem;
}
&.botton--large {
--botton-size: 1.25rem;
}
}
we just change css variable using hard rem, and all soft em change automatically. it was a simple example from real life, but if the button does not need to change the font size, but you need to change the other sizes - em will not help here =)) em gives us an additional opportunity to write less code where possible

[@raouftouati4711]

hi can you do a tutorial about image how they work inside the browser and how to control them with the css (sorry for my anglish) and thnks fot this tutorial

[@taylortoast2]

Can’t wait for the new content!

[@developedbyed]

Cheers Taylor! You are the ultimate hype man hahaha

[@thintzawhtun9676]

hey ed can u make role based access and permission tutorial for react?

[@WyzrdCat]

Hahahaha 💯 "Cmon man. Get a calculator" my thoughts exactly whenever I see this hack lmao

[@oynx.]

Hi can you tell me how can create animation like " paramount pictures Website loading stars " when it's load

[@BMikel]

Nasa tshirt is first that cought my eye😂 Cool

[@sivadhanushuppalapati4041]

hey bro, whats the font style you are using in VScode?

[@michaelcypher5958]

Thanks Ed

[@hagopboghossian6841]

Yeh, it's awesome if you are starting microcontroller programming tutorials 👍👌

[@dobrilbojilov8184]

Good video😉

[@utkarsh2126]

Hii, this is your Gorgeous friend from India❤

[@GustvandeWal]

Avoid using 100vw. At least know that it doesn't take into account the scrollbar that is visible on Windows. If not used with caution, every Windows visitor could be able to horizontally scroll your website about 17px.

[@WyzrdCat]

I think vw should almost always be overridden with dvw. Dvw accounts for scrollbars and shite

[@matteomorettoo]

Rick lol😅

[@bilalmalkoc]

Browser zoom is scaling all pixel values together, so no need to fight rem complexity.

[@RowafaEdits]

Can I edit your CZcams videos?

[@sillysquirrel9979]

thanks i hate it