⌨️ Useful CSS grid cheat sheet

You’ve seen this many times. But practice makes perfect, right?

🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

🔅 CSS Clamp and font-size

p {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

🔰 5 CSS Tips & Tricks for better Responsive Web Design

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.