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.

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

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.