5 CSS Tips & Tricks for better Responsive Web Design

[@Shulkerkiste]

4:42 The _calc()_ function can be omitted because _clamp()_ supports calculations too.

[@PicSta]

Was about to mention the same, glad you did that already🙂

[@divi1223]

Oh cool, didn’t know

[@Islandstone89]

0:26 Relative padding 2:02 Responsive font-sizes 4:57 Responsive images 6:59 Dynamic viewport height (dvh) 8:20 HTML inert attribute

[@microdotmatrix]

important side-note regarding what you said in the last tip: when adding a transition property to an element, you should always try to avoid using your position/sizing properties. this is what your transform properties are for. like in the example given, do not apply your transition by targeting the property "right: -16px" to "right: 0px", instead use "transform: translateX(-16px)" to "transform: translateX(0)". use scale or rotate as well. your standard position and sizing attributes are calculated with CPU, while your transformation properties are done by GPU; adding transition properties to elements using transformation properties are GPU accelerated, while using the position/sizing and margin/padding values will cause layout re-flow, meaning the browser must recalculate these all of these values when one is changed, which can effect browser performance on the client. depending on where and how the effected value changes, and how many other elements use relative units to the one effected, this can cause a cascade of calculations and a lot of problems.

[@AronsDjurHandel]

To work around the issue of potentially poor cropping of images when using `object-fit: cover;` you can also use the element and pass multiple different image sources through the element for different screen sizes to reduce the amount of zooming of the object-fit on smaller screens and reduce load time of unnecessarily large images on mobile devices! But all in all these are good tips!

[@vishsingh7235]

I just used for the first time yesterday. Your suggestion is a really smart use case for it.

[@dontnowatimdoing446]

Omg this is amazing thank you! Subscribed and bell notification on!

[@retroklub_tv]

The dvh tip was amazing, thank you!!

[@lalitmeena5141]

Bro really deserve sabarscribe ❤

[@eazyhoon2124]

That inert attribute look good, and only now I found it? Thanks man

[@mateo-hm]

This videos are so nice and so helpful for me, soon I will have my web portfolio done and it will be much easier using these tricks, thanks!

[@canProg]

Very nice ! Thank you. Very clear and direct explanations.

[@giordano.araujo]

great value video 👍

[@RASTUDIO_0]

He is a big don of CSS... Thanks Fabian Sir... ❤❤❤❤❤❤❤❤

[@fernandobarros1911]

Thank you very much, Fabian 👍

[@vinodkumarw.bittiwar398]

Great 👍 dvh is new for me

[@lilrex2015]

What a great video. You earned yourself a sub sir

[@yahyamohamoud2954]

Bro's explanation is great. easy and simple to understand.

[@habibou3057]

Très utile, merci beaucoup 👍

[@zeinmayhoub11]

That was so helpful especially the dvh part which I had a problem with, Keep the great work ❤💪

[@adityapatil1361]

Nice video you can explain about inert attribute ❤

[@br1580]

Learnt a lot, thank you

[@CommanderBalok]

Useful tips. Thank you for making this video.

[@Dineshkumar-cz8ij]

I did not except this....Great😻

[@MuhammadAdnan2.0]

Perfect 👍 well explained quickly...

[@spip931]

Thank you for this video. I have a question : for tip number 1, how do you determine the 2 min values ​​(in this case 5em and especially 8%)?

[@petarkolev6928]

Wow, really nice 🙂

[@arifhaiman5]

It is very helpful

[@arab_memes]

Great tips and video 👍

[@VideosViraisVirais-dc7nx]

2:02 this tip is gold. I was frustated because i found boring creating the same property for every screen

[@VideosViraisVirais-dc7nx]

The left is for PC, and the right is for tiny screen. No more hardcode

[@gamingzonezone1]

Make a detailed video on css grid topic

[@mero.suwadi]

Great video

[@malikhanzalaasif]

Best tips

[@OpeyemiAkinlamilo-qu1ou]

Gold 🔥

[@crumblywing]

thanks for your share:)

[@graphnick-dev]

For better responsive sizes not based on the viewport, I recommend using container query units such as cqi. It uses the same clamp approach described, but you world need to add a container context on the parent using container-type: inline-size.

[@DjMacV]

wow dvh tip, fix my bug :D

[@TheMetalMag]

thank you

[@Zap_09]

Very nice video. But can you make an updated darkmode switch video. The one you have every time you you go to a different page it flashes white for a sec and the darkmode button doesn't work on the new page.

[@marcoiscoolies]

This is weird, but what is the browser being shown in the video with the resizing?

[@gamingzonezone1]

make a detailed video on @media query

[@sarvarbek_dev]

With Tailwind CSS, everything is perfect. I never use plain CSS.

[@space8143]

Ahaha😂😂😂 idiot

[@danielcastillotamayo]

you can now animate from display none with interpolate-size: allow-keywords, so you dont have to do all that workaround, which imo is too much boilerplate. Its almost at 70% in caniuse

[@VideosViraisVirais-dc7nx]

Clamp Min, std, max

[@renekomane]

What is the difference of using aria-hidden="true" or inert ?

[@dedse3]

There's always a hidden CSS feature, there's always one!

[@l0ad1ng55]

and I see this video after I finished my first big website…

[@lullkaz]

Me too....

[@m4adz766]

Thème name please ?

[@ElectricKota]

Nice video, I have some tips for you. For the mobile menu, avoid using JavaScript as it's unnecessary. Instead, use an input of type 'checkbox' to toggle the menu, and a label for it as a button. In CSS, use the Visibility property to hide it from the page, combined with opacity and transition to achieve the desired effect. For the heading, you can use @container queries if you have the heading only in part of the page. And pro tip: if you use REMS, set HTML to 10px; this makes calculations for setting your sizes easier. Don't forget to set up BODY to 1.5rem for elements that you forget to style, otherwise, they will appear small

[@Kpt.]

We need to change aria attributes dynamicly which are essencial for the accesibility. Edit; Also for your pro tip, i cannot test it right now but probably it is same as changing HTML font-size to 62.5%, so some cons for that: Potentially huge accessibility problems for anyone who changes their default font size Changing defaults is unexpected, so can confuse other developers (or even yourself in the future) Hard to maintain and even harder to remove later on Conflicts with third-party code Many engineering teams will look negatively on job applicants who use this in their code, because they are aware of the issues it can cause.

[@Shulkerkiste]

Most sites have a default size of 16px. In general, it's recommended not to set the default size to 10px, but instead use 1rem = 16px as normal.

[@ChuckWatson]

The checkbox hack is not totally accessible and not good with screen readers, it should be avoided. Also mucking up font size on the html element is not a good idea at all since it is not expected and can lead to unusual behavior.

[@konstantinosntamadakis9439]

Bro all your tips are not considered good accessibility practice, at least for the checkbox and html font sizes

[@mattwood8659]

This is how I've always done it to. Use a checkbox to toggle it open and close. Yiu don't want access for your content to be dependent on JavaScript. But I think it's okay to use JavaScript just for the accessibility part of it. Alot of acessability requires JavaScript anyway

[@alexanderleonidas3260]

Big!

[@anabi5158]

👍👍👍👍👍👍👍👍

[@Andrea-t4j5v]

how many sites don't take into consideration CLS for publicity banner and images.. I hate when the paragraphs shift up or down while I'm reading, every time one of those banner is loaded

[@mzvvz]

Nice google

[@HassanJanjua-lm9te]

Can anyone suggest some videos on how to make a website responsive? I'm kind of stuck

[@techpukhraj]

Create KZbin video downloader website please

[@waldemarnosinski6836]

I don't know why but my container isn't centering?

[@Bdjsisbsjsj]

Use display flex on parent element

[@groovebird812]

It is an illusion that all images of the page have the same dimensions or aspect ratio. You should not use this for the global img tag, instead use a class

[@enriqueruiz320]

😱

[@zaheerrhman]

Please add Hindi in the Video Track

[@mohammedAli7106]

make full tutorial for css sir

[@The-Great-Brindian]

10 mins of invaluable tips for devs of all backgrounds. I knew just 3 of these, and one partially, lol 😅

[@مازنالفار-ز1ز]

Do you have a project for a website with login, verification and permissions html css javascript node js

[@VideosViraisVirais-dc7nx]

4:45 this is getting very spaghet ngl

[@HunterZolomon]

Thanks, useful stuff. But I'd do it differently for 5. Tip 5: Instead of using 2 different buttons in 2 different places, use one toggle button on top of everything else that visually morphs between hamburger and X, but stays in the same spot. Simpler, cleaner and faster nav. (I realize you may be doing it to demonstrate the inert function, but I always felt a single toggle button works best.)

[@coding2go]

Thanks for sharing! It is a great solution

[@letmewatch.]

Could you show a demo code for this via codepen? 😬

[@LawJolla]

Variable padding is bad ui

[@WaqasAli-dq9wg]

Luftwaffe 😂

[@PicSta]

Tip #3 is where I'll disagree. Defining an aspect-ratio on an image tag, like for a CSS reset, is not a good choice. We usually have different images for different needs and purposes on our website. I'd rather style the IMG tags based on their specific section. A good example will be article images where you wish for all the same sizes, then a proper solution would look like so. section.someclassname img {...} So globally I wouldn't set this, but for a specific area it's an ideal problem solver.

[@coding2go]

Yes, we actually mean the same thing. I wouldn't use it for a css reset either. Only to maintain consistent dimensions within a specific section. I only used the img tag selector in the video because there was nothing else on the example website. On production level the selector would be different (depending on where the image is used). Hope that clarifies it ✌️

[@PicSta]

@@coding2go I think you wouldn't do that in a reset, but others might do that as they have seen it like this. Maybe next time you can explain it in a better contextual way. Of course, this is just constructive criticism, and take it easy, Fabian.

[@FarhanAli-s7u]

First. You can say "first reply on whole video" on this comment

[@dev.RobiulHassan]

please add bengali in audio track.

[@rudra9535]

thank you