0
0
CSSmarkup~30 mins

Clamp function in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Responsive Text Size with CSS Clamp Function
📖 Scenario: You are creating a simple webpage where the heading text size adjusts smoothly between small and large screens. You want the text to be neither too small on big screens nor too large on small screens.
🎯 Goal: Build a webpage with a heading that uses the CSS clamp() function to set a responsive font size that changes between a minimum, preferred, and maximum size.
📋 What You'll Learn
Use semantic HTML5 structure with <header> and <h1> for the heading
Apply CSS to the heading using the clamp() function for font size
Ensure the font size is at least 1.5rem, scales with viewport width, and does not exceed 3rem
Include a viewport meta tag for responsive scaling
Make sure the page is accessible with good color contrast
💡 Why This Matters
🌍 Real World
Responsive text sizing is important for websites to look good and be readable on phones, tablets, and desktops.
💼 Career
Web developers use CSS clamp() to create flexible layouts that adapt to different screen sizes without complex media queries.
Progress0 / 4 steps
1
Create the HTML structure with a header and heading
Write the HTML skeleton with a <header> element containing an <h1> heading with the text Responsive Heading. Also include the <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, and <body> tags.
CSS
Need a hint?

Start with a basic HTML5 page structure. Put the heading inside a <header> tag.

2
Add the viewport meta tag for responsive design
Inside the <head> section, add a <meta> tag with name="viewport" and content="width=device-width, initial-scale=1.0" to enable responsive scaling on different devices.
CSS
Need a hint?

This meta tag helps the browser scale the page properly on phones and tablets.

3
Add CSS to style the heading with clamp() for font size
Inside the <head>, add a <style> block. Inside it, write CSS to select the h1 element and set its font-size to clamp(1.5rem, 5vw, 3rem). This means the font size will be at least 1.5rem, scale with 5% of the viewport width, but not exceed 3rem.
CSS
Need a hint?

The clamp() function takes three values: minimum, preferred, and maximum. Here, 1.5rem is minimum, 5vw is preferred scaling, and 3rem is maximum.

4
Add color and background for good contrast and accessibility
Inside the existing <style> block, add CSS to set the color of the h1 to #222222 (dark gray) and the background-color of the body to #f0f0f0 (light gray). This ensures good contrast and easy reading.
CSS
Need a hint?

Use simple colors with good contrast for readability. Dark text on light background is easier on eyes.