5 MINDBLOWING CSS Tips and Tricks for better responsiveness and modern css solutions for typical problems with CSS ONLY.
👉 Become a Member to Support our Channel:
You will learn elegant solutions for everyday css problems and productive shorthands for responsive web design, How to implement modern css features like min() clamp() or the aspect-ratio property. How to achieve responsive padding, and responsive font-sizes with CSS only and without media queries. You will also learn about accessibility and many modern css features.
BEGINNERS START HERE:
👌 Get our HTML & CSS Course here:
Checkout our website for more:
👉
Host Your Own Website With Hostinger:
👉
✌️ And get a huge discount with our code: CODING2GO
#cssonly #csstricks #webdevelopment
RELATED CONCEPTS YOU SHOULD LEARN:
How to code an Accessible Navbar:
CSS Flexbox:
JavaScript:
Todo App Project:
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS ONLY
✔ CSS Solution without JavaScript
✔ Responsive Web Design
✔ CSS Tricks
✔ css tips
✔ css tips and tricks
✔ responsive css tricks
✔ modern css tricks
✔ modern css features
✔ css min() function
✔ how to use min function in css
✔ how to use clamp() function in css
✔ css clamp
✔ aspect-ratio property
✔ how to make images responsive
✔ how to make padding responsive
✔ how to make responsive font-size
👉 If you want to learn more get our CSS complete course here:
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
4:45 this is getting very spaghet ngl
Clamp
Min, std, max
2:02 this tip is gold. I was frustated because i found boring creating the same property for every screen
The video is well made. You are different from the majority that only want easy views.
10 mins of invaluable tips for devs of all backgrounds. I knew just 3 of these, and one partially, lol 😅
Useful tips. Thank you for making this video.
I don't know why but my container isn't centering?
What is the difference of using aria-hidden="true" or inert ?
It is very helpful
With Tailwind CSS, everything is perfect. I never use plain CSS.
Learnt a lot, thank you
Create Youtube video downloader website please
Great video
👍👍👍👍👍👍👍👍
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.
The dvh tip was amazing, thank you!!
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%)?
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.
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.)
Big!
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
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!
Thank you very much, Fabian 👍
Wow, really nice 🙂
Nice google
Can anyone suggest some videos on how to make a website responsive? I'm kind of stuck
Bro's explanation is great. easy and simple to understand.
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
make a detailed video on @media query
There's always a hidden CSS feature, there's always one!