OpenTube

5 CSS Tips & Tricks for better Responsive Web Design

Coding2GO

560,706 views

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:
@coding2go

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:
https://coding2go.com/products/html-c...

🟨 JavaScript Masterclass:
https://coding2go.com/products/javasc...

⚛️ React Course:
https://coding2go.com/products/react-...

Checkout our website for more:
👉 https://www.coding2go.com

#cssonly #csstricks #webdevelopment

RELATED CONCEPTS YOU SHOULD LEARN:

How to code an Accessible Navbar: Build Navbar Menus That Actually Work for ...
CSS Flexbox: CSS Flexbox Tutorial for beginners
JavaScript: How I would Learn JavaScript if I had to S...
Todo App Project: Build & Deploy a TODO APP with JavaScript

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

20 Comments

@coding2go Creator 2 months ago (edited) Pinned

Want to learn CSS in just 7 Days? Get my Full CSS Course here 👉 https://coding2go.com/products/html-css-masterclass

@Islandstone89 1 year ago

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

@Shulkerkiste 1 year ago

4:42
The calc() function can be omitted because clamp() supports calculations too.

@iamseaghan 10 months ago

me as a webdesigner for more than a decade already.. these are very useful for today's responsive web design. i struggled a lot ...

@microdotmatrix 1 year ago

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.

@Kolpixx 1 year ago

okay my brain exploded and I'll definitely forget 90% of the stuff but ty

@Boring-Opinion-8864 9 months ago

These tips are super practical, especially for anyone tired of juggling media queries for every little change. Using min(), clamp(), and aspect-ratio makes responsive design way cleaner and future proof. I love that it’s all CSS only because it keeps projects lightweight and easier to maintain. For people testing these tricks live, pairing them with a super simple static host like Tiiny Host is perfect—you can see changes instantly without messing with a full server setup. Definitely a must-watch for anyone looking to level up modern CSS skills.

@netstormuk 1 year ago

Mmmm the padding min function is a smart idea, thanks.

@ailerrmarquez 9 months ago

Responsive CSS feels like wizardry and hosting on Tiiny Host, Netlify, or Vercel keeps things smooth so you can focus on the fun.

@Andrea-t4j5v 1 year ago

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

@danrussell_official 2 months ago

You have such an amazingly clear way of explaining things. Thank you!

@FV_Om 2 weeks ago

Thank you very Much - it was really one of the most useful videos i have ever seen - thank you ver Much ❤❤❤

@graphnick-dev 1 year ago

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.

@PascalHorn 1 year ago

4:45 a calc() function is actually not necessary in min(), max() and clamp() because they have calculation integrated.
clamp(1.8rem, 7vw + 1rem, 5rem) will work like a charm. 😊

@eridsontrinidad6018 10 months ago

Thank you! You've forever changed the way I build sites

@snipkin 1 year ago

I've watched quite a few of your videos. All excellent with concise and clear instructions. Everything is explained fully and logically. For instance, this is the first time I have heard explained why you need a calculated middle value combining vw with rem in a clamp() function (to make the text zoomable in the browser). It's not often one learns so much in less than ten minutes! Thank you.

@j4mesxy 10 months ago

impressive video !

@jacuul6735 1 year ago

These are great tips, unless you work for a company and you don’t hit the exact marks in the figma design (“This says mobile should be 10px, but I see that it is 12px”) and have to go back to media queries with fixed padding/margins/width