🔅 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);
}

🔅 CSS: Hover Effect

🔸 The :has pseudo selector (so called parent selector) selects an element based on whether it contains a particular child

In this example, we are selecting the container when it contains any hovered profiles

🔸 After this we select all the profiles that are not selected inside it using the :not pseudo selector

The combination of this helps us to select all the profiles that are currently not hovered, and configure a filter effect for them!

🔅 How to Plan Your Website

🌐 Author: Avery Swartz
🔰 Level: General

⏰ Duration: 1h 31m

🌀 You no longer need coding skills to build a website, but you do still need a plan. Learn how to determine what type of website to make and which goals to start tracking.

📗 Topics: Website Building, Web Design

📤 Join @webdev_trainings for more courses