[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:math-functions-calc-min-max-clamp":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,394,418,454,486,518,550,582,610,638],{"id":155,"name":366,"slug":367,"order_index":368,"topics":369},"UI Components","ui-components",0,[370,374,378,382,386,390],{"id":371,"title":372,"slug":373,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":375,"title":376,"slug":377,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":379,"title":380,"slug":381,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":383,"title":384,"slug":385,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":387,"title":388,"slug":389,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":391,"title":392,"slug":393,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":101,"name":395,"slug":396,"order_index":368,"topics":397},"CSS Fundamentals & Setup","css-fundamentals-setup",[398,402,406,410,414],{"id":399,"title":400,"slug":401,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":403,"title":404,"slug":405,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":407,"title":408,"slug":409,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":411,"title":412,"slug":413,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":415,"title":416,"slug":417,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":105,"name":419,"slug":420,"order_index":368,"topics":421},"Selectors & the Cascade","selectors-the-cascade",[422,426,430,434,438,442,446,450],{"id":423,"title":424,"slug":425,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":427,"title":428,"slug":429,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":431,"title":432,"slug":433,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":435,"title":436,"slug":437,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":439,"title":440,"slug":441,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":443,"title":444,"slug":445,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":447,"title":448,"slug":449,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":451,"title":452,"slug":453,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":455,"slug":456,"order_index":368,"topics":457},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[458,462,466,470,474,478,482],{"id":459,"title":460,"slug":461,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":463,"title":464,"slug":465,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":467,"title":468,"slug":469,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":471,"title":472,"slug":473,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":475,"title":476,"slug":477,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":479,"title":480,"slug":481,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":483,"title":484,"slug":485,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":487,"slug":488,"order_index":368,"topics":489},"Box Model & Spacing","box-model-spacing",[490,494,498,502,506,510,514],{"id":491,"title":492,"slug":493,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":495,"title":496,"slug":497,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":499,"title":500,"slug":501,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":503,"title":504,"slug":505,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":507,"title":508,"slug":509,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":511,"title":512,"slug":513,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":515,"title":516,"slug":517,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":519,"slug":520,"order_index":368,"topics":521},"Typography & Text","typography-text",[522,526,530,534,538,542,546],{"id":523,"title":524,"slug":525,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":527,"title":528,"slug":529,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":531,"title":532,"slug":533,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":535,"title":536,"slug":537,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":539,"title":540,"slug":541,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":543,"title":544,"slug":545,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":547,"title":548,"slug":549,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":551,"slug":552,"order_index":368,"topics":553},"Display, Position & Layout Basics","display-position-layout-basics",[554,558,562,566,570,574,578],{"id":555,"title":556,"slug":557,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":559,"title":560,"slug":561,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":563,"title":564,"slug":565,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":567,"title":568,"slug":569,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":571,"title":572,"slug":573,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":575,"title":576,"slug":577,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":579,"title":580,"slug":581,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":583,"slug":584,"order_index":368,"topics":585},"The Modern CSS Toolkit","the-modern-css-toolkit",[586,590,594,598,602,606],{"id":587,"title":588,"slug":589,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":591,"title":592,"slug":593,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":595,"title":596,"slug":597,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":599,"title":600,"slug":601,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":603,"title":604,"slug":605,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":607,"title":608,"slug":609,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":611,"slug":612,"order_index":368,"topics":613},"Responsive Design","responsive-design",[614,618,622,626,630,634],{"id":615,"title":616,"slug":617,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":619,"title":620,"slug":621,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":623,"title":624,"slug":625,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":627,"title":628,"slug":629,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":631,"title":632,"slug":633,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":635,"title":636,"slug":637,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":639,"slug":640,"order_index":368,"topics":641},"Transitions & Animation","transitions-animation",[642,646,650,654,658,662,666],{"id":643,"title":644,"slug":645,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":647,"title":648,"slug":649,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":651,"title":652,"slug":653,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":655,"title":656,"slug":657,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":659,"title":660,"slug":661,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":663,"title":664,"slug":665,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":667,"title":668,"slug":669,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":671},{"id":591,"title":592,"slug":593,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":81,"cornerstone":52,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":754,"quiz":5,"exercises":778,"published_at":5,"updated_at":793,"prev":794,"next":795},"\u003Ch2 id=\"css-math-functions-calc-min-max-and-clamp\">CSS Math Functions: calc(), min(), max() and clamp()\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS clamp().\u003C\u002Fstrong> CSS math functions let the browser calculate values while the page is running. You can mix units, respond to the viewport and set safe limits, all without JavaScript or extra media queries. In this lesson you will learn calc(), min(), max() and clamp(), the newer round(), mod() and trigonometric functions, fluid typography, responsive containers and the mistakes that break a calculation.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS calc function, CSS min function, CSS max function, CSS clamp fluid typography, responsive font size clamp, clamp vs media queries, fluid spacing, calc with CSS variables, calc 100vh minus header, min(100% - 2rem, 1100px), container width min, CSS round function, CSS mod function, CSS trigonometric functions, sin cos in CSS, pow sqrt hypot, dvh and svh units, container query units cqi, typed arithmetic, fluid design without media queries.\u003C\u002Fp>\u003Ch2 id=\"1-why-use-css-math-functions\">1. Why Use CSS Math Functions?\u003C\u002Fh2>\u003Cp>Plain values are fixed. Math functions let you mix relative and absolute units, for example \u003Ccode>100% - 240px\u003C\u002Fcode>, and set limits such as a font that grows with the screen but never becomes too small or too big. They reduce the number of media queries and make layouts fluid by default.\u003C\u002Fp>\u003Ch2 id=\"2-calc\">2. calc()\u003C\u002Fh2>\u003Cp>\u003Ccode>calc()\u003C\u002Fcode> performs addition, subtraction, multiplication and division with mixed units.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Spaces around + and - are required.\u003C\u002Fstrong> \u003Ccode>calc(100% - 20px)\u003C\u002Fcode> is valid, \u003Ccode>calc(100%-20px)\u003C\u002Fcode> is not.\u003C\u002Fli>\u003Cli>For multiplication, at least one side must be a number without a unit: \u003Ccode>calc(10px * 3)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>For division, the right side must be a number: \u003Ccode>calc(100% \u002F 3)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>You can nest calc() and use parentheses: \u003Ccode>calc((100% - 2rem) \u002F 3)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>You can use variables: \u003Ccode>calc(var(--space) * 2)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>You can add lengths and percentages in width, height, margin, padding, position offsets, font-size and more.\u003C\u002Fli>\u003Cli>Inside other math functions you can skip the word calc: \u003Ccode>min(100% - 2rem, 1100px)\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-min\">3. min()\u003C\u002Fh2>\u003Cp>\u003Ccode>min(a, b, ...)\u003C\u002Fcode> returns the smallest value, so it acts as a \u003Cstrong>maximum limit\u003C\u002Fstrong>. Example: \u003Ccode>width: min(100%, 600px)\u003C\u002Fcode> means the element is never wider than 600px but can be narrower on small screens. It replaces the old pair \u003Ccode>width: 100%; max-width: 600px;\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"4-max\">4. max()\u003C\u002Fh2>\u003Cp>\u003Ccode>max(a, b, ...)\u003C\u002Fcode> returns the largest value, so it acts as a \u003Cstrong>minimum limit\u003C\u002Fstrong>. Example: \u003Ccode>font-size: max(1rem, 2vw)\u003C\u002Fcode> never goes below 1rem. Another use: \u003Ccode>padding: max(1rem, env(safe-area-inset-left))\u003C\u002Fcode> keeps space on phones with notches.\u003C\u002Fp>\u003Ch2 id=\"5-clamp\">5. clamp()\u003C\u002Fh2>\u003Cp>\u003Ccode>clamp(minimum, preferred, maximum)\u003C\u002Fcode> holds a value between two limits. It is the same as \u003Ccode>max(minimum, min(preferred, maximum))\u003C\u002Fcode>. The preferred value is usually a mix of viewport units and a fixed unit: \u003Ccode>clamp(1rem, 0.8rem + 1vw, 1.5rem)\u003C\u002Fcode>. The order matters: minimum first, preferred in the middle and maximum last.\u003C\u002Fp>\u003Ch3 id=\"fluid-typography-that-respects-zoom\">Fluid typography that respects zoom\u003C\u002Fh3>\u003Cp>Never use only \u003Ccode>vw\u003C\u002Fcode> for font size, because users who zoom the page will not see the text grow, which fails accessibility rules. Always include a rem part in the preferred value, for example \u003Ccode>font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem)\u003C\u002Fcode>. Also keep the maximum size at no more than about two and a half times the minimum so the text still scales with browser zoom.\u003C\u002Fp>\u003Ch3 id=\"other-fluid-uses\">Other fluid uses\u003C\u002Fh3>\u003Cul>\u003Cli>Spacing: \u003Ccode>padding-block: clamp(2rem, 6vw, 6rem)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Container: \u003Ccode>width: clamp(320px, 90%, 1100px)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Grid columns: \u003Ccode>grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))\u003C\u002Fcode> so a column never overflows on narrow screens.\u003C\u002Fli>\u003Cli>Gap and border radius that grow with the screen.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-units-to-combine-with-math-functions\">6. Units to Combine with Math Functions\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>rem\u003C\u002Fcode> and \u003Ccode>em\u003C\u002Fcode>: scale with font size and user settings.\u003C\u002Fli>\u003Cli>\u003Ccode>vw\u003C\u002Fcode> and \u003Ccode>vh\u003C\u002Fcode>: viewport width and height.\u003C\u002Fli>\u003Cli>\u003Ccode>dvh\u003C\u002Fcode>, \u003Ccode>svh\u003C\u002Fcode>, \u003Ccode>lvh\u003C\u002Fcode>: dynamic, small and large viewport height, better than vh on mobile browsers with toolbars.\u003C\u002Fli>\u003Cli>\u003Ccode>cqi\u003C\u002Fcode> and \u003Ccode>cqw\u003C\u002Fcode>: container query units, based on the parent container size.\u003C\u002Fli>\u003Cli>\u003Ccode>ch\u003C\u002Fcode>: width of the zero character, perfect for readable line length such as \u003Ccode>max-width: min(65ch, 100%)\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"7-newer-math-round-mod-rem\">7. Newer Math: round(), mod(), rem()\u003C\u002Fh2>\u003Cp>Modern browsers support stepped value functions.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>round(nearest, 37px, 10px)\u003C\u002Fcode> gives 40px. Strategies are \u003Ccode>nearest\u003C\u002Fcode>, \u003Ccode>up\u003C\u002Fcode>, \u003Ccode>down\u003C\u002Fcode> and \u003Ccode>to-zero\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>mod(17px, 5px)\u003C\u002Fcode> gives 2px and follows the sign of the divisor.\u003C\u002Fli>\u003Cli>\u003Ccode>rem(17px, 5px)\u003C\u002Fcode> gives 2px and follows the sign of the dividend.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Use them for pixel snapping, repeating patterns and stepped sizes. Always check support and use \u003Ccode>@supports\u003C\u002Fcode> with a fallback.\u003C\u002Fp>\u003Ch2 id=\"8-trigonometric-and-exponential-functions\">8. Trigonometric and Exponential Functions\u003C\u002Fh2>\u003Cp>CSS also has \u003Ccode>sin()\u003C\u002Fcode>, \u003Ccode>cos()\u003C\u002Fcode>, \u003Ccode>tan()\u003C\u002Fcode>, \u003Ccode>asin()\u003C\u002Fcode>, \u003Ccode>acos()\u003C\u002Fcode>, \u003Ccode>atan()\u003C\u002Fcode>, \u003Ccode>atan2()\u003C\u002Fcode>, \u003Ccode>pow()\u003C\u002Fcode>, \u003Ccode>sqrt()\u003C\u002Fcode>, \u003Ccode>hypot()\u003C\u002Fcode>, \u003Ccode>log()\u003C\u002Fcode>, \u003Ccode>exp()\u003C\u002Fcode>, \u003Ccode>abs()\u003C\u002Fcode> and \u003Ccode>sign()\u003C\u002Fcode>. They let you place items on a circle, create wave effects and compute sizes from diagonal distances, all in CSS. Support is newer than for calc, min, max and clamp, so treat them as progressive enhancement.\u003C\u002Fp>\u003Ch2 id=\"9-math-with-css-variables\">9. Math with CSS Variables\u003C\u002Fh2>\u003Cp>Store numbers in variables and calculate the rest: \u003Ccode>--size: 4; width: calc(var(--size) * 1rem);\u003C\u002Fcode>. For a unitless number that must become a length, multiply by one unit: \u003Ccode>calc(var(--n) * 1px)\u003C\u002Fcode>. Do not write \u003Ccode>var(--n)px\u003C\u002Fcode>, because it is not valid.\u003C\u002Fp>\u003Ch2 id=\"10-practical-recipes\">10. Practical Recipes\u003C\u002Fh2>\u003Cul>\u003Cli>Full height minus header: \u003Ccode>min-height: calc(100dvh - var(--header-h))\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Centered container with gutters: \u003Ccode>width: min(100% - 2rem, 1100px); margin-inline: auto;\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Sidebar plus fluid content: \u003Ccode>width: calc(100% - 260px)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Equal columns with gap: \u003Ccode>width: calc((100% - 2 * 16px) \u002F 3)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Responsive hero heading: \u003Ccode>font-size: clamp(2rem, 1.2rem + 3vw, 4rem)\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"11-browser-support\">11. Browser Support\u003C\u002Fh2>\u003Cp>calc(), min(), max() and clamp() are supported in all modern browsers. round(), mod(), rem() and the trigonometric functions are newer, so wrap them in \u003Ccode>@supports\u003C\u002Fcode> and place a simpler declaration before them as a fallback.\u003C\u002Fp>\u003Ch2 id=\"12-common-mistakes\">12. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Missing spaces around + and -, for example \u003Ccode>calc(100%-20px)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Dividing by a value with a unit, for example \u003Ccode>calc(100% \u002F 2px)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Adding a number to a length, for example \u003Ccode>calc(10px + 2)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Putting the arguments of clamp() in the wrong order.\u003C\u002Fli>\u003Cli>Using only vw for font size and breaking browser zoom.\u003C\u002Fli>\u003Cli>Using max() when you wanted min(). Remember: min() sets an upper limit, max() sets a lower limit.\u003C\u002Fli>\u003Cli>Forgetting that percentages depend on the parent, so the result may not be what you expect in height.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Use calc() to mix units, min() to cap a value, max() to give a floor and clamp() to keep a value between both limits. Combine rem with viewport units for accessible fluid typography, use variables to keep formulas readable, and treat round(), mod() and trigonometry as progressive enhancements.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { display: flex; gap: 0; margin-bottom: 12px; }\n  .side { width: 200px; background: #264653; color: #fff; padding: 12px; box-sizing: border-box; }\n  .main { width: calc(100% - 200px); background: #e9c46a; padding: 12px; box-sizing: border-box; }\n  .gap { padding: calc(1rem + 4px) calc(2 * 12px); background: #8ecae6; }\n<\u002Fstyle>\n<div class='row'><div class='side'>200px fixed<\u002Fdiv><div class='main'>calc(100% - 200px). Resize the preview.<\u002Fdiv><\u002Fdiv>\n<div class='gap'>padding: calc(1rem + 4px) calc(2 * 12px)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 12px; margin-bottom: 12px; box-sizing: border-box; }\n  .a { width: min(100%, 420px); background: #2a9d8f; }\n  .b { width: max(50%, 240px); background: #e76f51; }\n  .c { width: min(100% - 2rem, 600px); margin-inline: auto; background: #264653; }\n<\u002Fstyle>\n<div class='box a'>min(100%, 420px): never wider than 420px<\u002Fdiv>\n<div class='box b'>max(50%, 240px): never narrower than 240px<\u002Fdiv>\n<div class='box c'>min(100% - 2rem, 600px): centered with side gutters<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; margin: 0; }\n  h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); margin: 0 0 8px; line-height: 1.1; }\n  p { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); max-width: 65ch; line-height: 1.6; }\n  section { padding-block: clamp(1rem, 4vw, 3rem); background: #eef2f7; padding-inline: clamp(1rem, 4vw, 3rem); }\n<\u002Fstyle>\n<section>\n  <h1>Fluid heading with clamp()<\u002Fh1>\n  <p>Resize the preview. The heading and the spacing grow smoothly between a minimum and a maximum, and the rem part keeps browser zoom working.<\u002Fp>\n<\u002Fsection>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  .container { width: min(100% - 2rem, 1000px); margin-inline: auto; }\n  .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-block: 24px; }\n  .card { background: #f1f5f9; padding: 16px; border-radius: 12px; }\n  .readable { max-width: min(65ch, 100%); }\n<\u002Fstyle>\n<div class='container'>\n  <p class='readable'>Container width uses min(), the grid never overflows because minmax uses min(100%, 220px).<\u002Fp>\n  <div class='cards'>\n    <div class='card'>One<\u002Fdiv><div class='card'>Two<\u002Fdiv><div class='card'>Three<\u002Fdiv><div class='card'>Four<\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --header-h: 56px; --cols: 3; --gap: 12px; }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  header { position: sticky; top: 0; height: var(--header-h); background: #264653; color: #fff; display: flex; align-items: center; padding: 0 16px; }\n  .hero { min-height: calc(100dvh - var(--header-h)); display: grid; place-items: center; background: linear-gradient(135deg, #8ecae6, #219ebc); padding: 16px; }\n  .row { display: flex; gap: var(--gap); width: 100%; max-width: 600px; }\n  .row div { width: calc((100% - (var(--cols) - 1) * var(--gap)) \u002F var(--cols)); background: #fff; padding: 16px; text-align: center; border-radius: 8px; }\n<\u002Fstyle>\n<header>Header (56px)<\u002Fheader>\n<section class='hero'><div class='row'><div>1<\u002Fdiv><div>2<\u002Fdiv><div>3<\u002Fdiv><\u002Fdiv><\u002Fsection>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; background: #264653; padding: 12px; margin-bottom: 10px; }\n  .r { width: 37px; height: 37px; }\n  @supports (width: round(nearest, 37px, 10px)) {\n    .r { width: round(nearest, 37px, 10px); height: round(up, 31px, 10px); }\n    .p { width: calc(pow(2, 5) * 1px * 4); }\n    .t { transform: rotate(calc(sin(30deg) * 90deg)); width: 160px; }\n  }\n  .r { background: #e76f51; }\n<\u002Fstyle>\n<div class='r'><\u002Fdiv>\n<div class='box p'>pow(2, 5) * 4px = 128px wide<\u002Fdiv>\n<div class='box t'>sin(30deg) * 90deg = 45deg<\u002Fdiv>\n<p>If you see no change, your browser does not support these functions yet. The fallback stays in place.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>function fluidClamp(minPx, maxPx, minViewport, maxViewport) {\n  var slope = (maxPx - minPx) \u002F (maxViewport - minViewport);\n  var intercept = minPx - slope * minViewport;\n  var rem = function (px) { return (px \u002F 16).toFixed(3); };\n  return 'clamp(' + rem(minPx) + 'rem, ' + rem(intercept) + 'rem + ' + (slope * 100).toFixed(3) + 'vw, ' + rem(maxPx) + 'rem)';\n}\n\nconsole.log('Body text: ' + fluidClamp(16, 20, 320, 1200));\nconsole.log('Heading: ' + fluidClamp(32, 64, 320, 1200));\nconsole.log('Section padding: ' + fluidClamp(16, 96, 320, 1200));\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":583,"slug":584},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fmath-functions-calc-min-max-clamp","CSS Math Functions: calc(), min(), max(), clamp() Explained","Master CSS math functions: calc, min, max, clamp, round, mod and trigonometry. Build fluid typography, responsive containers and flexible spacing with live examples.",[686,694,698,702,706,710,722,726,730,734,738,742,746,750],{"id":687,"text":688,"level":12,"children":689},"css-math-functions-calc-min-max-and-clamp","CSS Math Functions: calc(), min(), max() and clamp()",[690],{"id":691,"text":692,"level":57,"children":693},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":695,"text":696,"level":12,"children":697},"1-why-use-css-math-functions","1. Why Use CSS Math Functions?",[],{"id":699,"text":700,"level":12,"children":701},"2-calc","2. calc()",[],{"id":703,"text":704,"level":12,"children":705},"3-min","3. min()",[],{"id":707,"text":708,"level":12,"children":709},"4-max","4. max()",[],{"id":711,"text":712,"level":12,"children":713},"5-clamp","5. clamp()",[714,718],{"id":715,"text":716,"level":57,"children":717},"fluid-typography-that-respects-zoom","Fluid typography that respects zoom",[],{"id":719,"text":720,"level":57,"children":721},"other-fluid-uses","Other fluid uses",[],{"id":723,"text":724,"level":12,"children":725},"6-units-to-combine-with-math-functions","6. Units to Combine with Math Functions",[],{"id":727,"text":728,"level":12,"children":729},"7-newer-math-round-mod-rem","7. Newer Math: round(), mod(), rem()",[],{"id":731,"text":732,"level":12,"children":733},"8-trigonometric-and-exponential-functions","8. Trigonometric and Exponential Functions",[],{"id":735,"text":736,"level":12,"children":737},"9-math-with-css-variables","9. Math with CSS Variables",[],{"id":739,"text":740,"level":12,"children":741},"10-practical-recipes","10. Practical Recipes",[],{"id":743,"text":744,"level":12,"children":745},"11-browser-support","11. Browser Support",[],{"id":747,"text":748,"level":12,"children":749},"12-common-mistakes","12. Common Mistakes",[],{"id":751,"text":752,"level":12,"children":753},"key-takeaways","Key Takeaways",[],[755,759,762,765,768,771,774],{"id":756,"language":16,"code":757,"is_editable":758},495,"\u003Cstyle>\n  body { margin: 0; font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { display: flex; gap: 0; margin-bottom: 12px; }\n  .side { width: 200px; background: #264653; color: #fff; padding: 12px; box-sizing: border-box; }\n  .main { width: calc(100% - 200px); background: #e9c46a; padding: 12px; box-sizing: border-box; }\n  .gap { padding: calc(1rem + 4px) calc(2 * 12px); background: #8ecae6; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\u003Cdiv class='side'>200px fixed\u003C\u002Fdiv>\u003Cdiv class='main'>calc(100% - 200px). Resize the preview.\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='gap'>padding: calc(1rem + 4px) calc(2 * 12px)\u003C\u002Fdiv>",true,{"id":760,"language":16,"code":761,"is_editable":758},496,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 12px; margin-bottom: 12px; box-sizing: border-box; }\n  .a { width: min(100%, 420px); background: #2a9d8f; }\n  .b { width: max(50%, 240px); background: #e76f51; }\n  .c { width: min(100% - 2rem, 600px); margin-inline: auto; background: #264653; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box a'>min(100%, 420px): never wider than 420px\u003C\u002Fdiv>\n\u003Cdiv class='box b'>max(50%, 240px): never narrower than 240px\u003C\u002Fdiv>\n\u003Cdiv class='box c'>min(100% - 2rem, 600px): centered with side gutters\u003C\u002Fdiv>",{"id":763,"language":16,"code":764,"is_editable":758},497,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; margin: 0; }\n  h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); margin: 0 0 8px; line-height: 1.1; }\n  p { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); max-width: 65ch; line-height: 1.6; }\n  section { padding-block: clamp(1rem, 4vw, 3rem); background: #eef2f7; padding-inline: clamp(1rem, 4vw, 3rem); }\n\u003C\u002Fstyle>\n\u003Csection>\n  \u003Ch1>Fluid heading with clamp()\u003C\u002Fh1>\n  \u003Cp>Resize the preview. The heading and the spacing grow smoothly between a minimum and a maximum, and the rem part keeps browser zoom working.\u003C\u002Fp>\n\u003C\u002Fsection>",{"id":766,"language":16,"code":767,"is_editable":758},498,"\u003Cstyle>\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  .container { width: min(100% - 2rem, 1000px); margin-inline: auto; }\n  .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-block: 24px; }\n  .card { background: #f1f5f9; padding: 16px; border-radius: 12px; }\n  .readable { max-width: min(65ch, 100%); }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Cp class='readable'>Container width uses min(), the grid never overflows because minmax uses min(100%, 220px).\u003C\u002Fp>\n  \u003Cdiv class='cards'>\n    \u003Cdiv class='card'>One\u003C\u002Fdiv>\u003Cdiv class='card'>Two\u003C\u002Fdiv>\u003Cdiv class='card'>Three\u003C\u002Fdiv>\u003Cdiv class='card'>Four\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":769,"language":16,"code":770,"is_editable":758},499,"\u003Cstyle>\n  :root { --header-h: 56px; --cols: 3; --gap: 12px; }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  header { position: sticky; top: 0; height: var(--header-h); background: #264653; color: #fff; display: flex; align-items: center; padding: 0 16px; }\n  .hero { min-height: calc(100dvh - var(--header-h)); display: grid; place-items: center; background: linear-gradient(135deg, #8ecae6, #219ebc); padding: 16px; }\n  .row { display: flex; gap: var(--gap); width: 100%; max-width: 600px; }\n  .row div { width: calc((100% - (var(--cols) - 1) * var(--gap)) \u002F var(--cols)); background: #fff; padding: 16px; text-align: center; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cheader>Header (56px)\u003C\u002Fheader>\n\u003Csection class='hero'>\u003Cdiv class='row'>\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fsection>",{"id":772,"language":16,"code":773,"is_editable":758},500,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; background: #264653; padding: 12px; margin-bottom: 10px; }\n  .r { width: 37px; height: 37px; }\n  @supports (width: round(nearest, 37px, 10px)) {\n    .r { width: round(nearest, 37px, 10px); height: round(up, 31px, 10px); }\n    .p { width: calc(pow(2, 5) * 1px * 4); }\n    .t { transform: rotate(calc(sin(30deg) * 90deg)); width: 160px; }\n  }\n  .r { background: #e76f51; }\n\u003C\u002Fstyle>\n\u003Cdiv class='r'>\u003C\u002Fdiv>\n\u003Cdiv class='box p'>pow(2, 5) * 4px = 128px wide\u003C\u002Fdiv>\n\u003Cdiv class='box t'>sin(30deg) * 90deg = 45deg\u003C\u002Fdiv>\n\u003Cp>If you see no change, your browser does not support these functions yet. The fallback stays in place.\u003C\u002Fp>",{"id":775,"language":776,"code":777,"is_editable":758},501,"javascript","function fluidClamp(minPx, maxPx, minViewport, maxViewport) {\n  var slope = (maxPx - minPx) \u002F (maxViewport - minViewport);\n  var intercept = minPx - slope * minViewport;\n  var rem = function (px) { return (px \u002F 16).toFixed(3); };\n  return 'clamp(' + rem(minPx) + 'rem, ' + rem(intercept) + 'rem + ' + (slope * 100).toFixed(3) + 'vw, ' + rem(maxPx) + 'rem)';\n}\n\nconsole.log('Body text: ' + fluidClamp(16, 20, 320, 1200));\nconsole.log('Heading: ' + fluidClamp(32, 64, 320, 1200));\nconsole.log('Section padding: ' + fluidClamp(16, 96, 320, 1200));",[779,786],{"id":780,"title":781,"slug":782,"prompt":783,"starter_code":784,"expected_output":785,"language":16,"order_index":23},183,"Fluid Heading and Spacing with clamp()","fluid-heading-and-spacing-clamp","Make the h1 grow from 2rem to 4rem and the section padding from 1rem to 4rem using clamp(). The preferred value must contain a rem part so browser zoom still works.","\u003Cstyle>\n  section { background: #eef2f7; }\n  h1 { font-size: 2rem; margin: 0; }\n\u003C\u002Fstyle>\n\u003Csection>\u003Ch1>Responsive heading\u003C\u002Fh1>\u003Cp>Resize the preview to test.\u003C\u002Fp>\u003C\u002Fsection>","h1 uses clamp(2rem, ... rem + ... vw, 4rem) and the section padding uses clamp(1rem, ..., 4rem)",{"id":787,"title":788,"slug":789,"prompt":790,"starter_code":791,"expected_output":792,"language":16,"order_index":12},184,"Full Height Layout Minus the Header","full-height-minus-header","The header is 64px tall. Make the main area at least as tall as the rest of the screen using calc() and dvh. Store the header height in a variable and use it in both places.","\u003Cstyle>\n  body { margin: 0; font-family: system-ui, sans-serif; }\n  header { background: #264653; color: #fff; height: 64px; display: flex; align-items: center; padding: 0 16px; }\n  main { background: #e9c46a; padding: 16px; }\n\u003C\u002Fstyle>\n\u003Cheader>Header\u003C\u002Fheader>\n\u003Cmain>Main content\u003C\u002Fmain>","A --header-h variable is used for the header height and main uses min-height: calc(100dvh - var(--header-h))","2026-09-30T18:26:43+00:00",{"id":587,"slug":589,"title":588},{"id":595,"slug":597,"title":596}]