[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:container-queries":35,"course-tree":171},{"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},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":123,"quiz":5,"exercises":147,"published_at":5,"updated_at":162,"prev":163,"next":167},139,"Container Queries","container-queries","\u003Ch2 id=\"css-container-queries-component-based-responsive-design\">CSS Container Queries: Component-Based Responsive Design\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS container queries.\u003C\u002Fstrong> A media query asks how wide the screen is. A container query asks how wide the parent of a component is. That is a big difference for reusable components: the same card can be placed in a wide main area, a narrow sidebar or a modal, and it adapts to the space it really gets. In this lesson you will learn container-type, named containers, @container rules, container query units, style queries, the side effects of containment and how to combine container queries with media queries.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS container queries, @container rule, container-type inline-size, container-name, container shorthand, cqi cqw units, style queries, container style custom property, component-based responsive design, media queries vs container queries, reusable card component, container query range syntax, nested containers, size containment, layout containment, scroll-state container queries, container queries browser support, design system components.\u003C\u002Fp>\u003Ch2 id=\"1-the-problem-with-media-queries\">1. The Problem with Media Queries\u003C\u002Fh2>\u003Cp>Media queries depend only on the viewport. If a product card switches to a horizontal layout at 700px viewport width, it will also switch when it is placed in a 250px wide sidebar on a large screen, where it does not fit. The designer has to write extra rules for every place where the card is used. Container queries move the decision into the component.\u003C\u002Fp>\u003Ch2 id=\"2-defining-a-container\">2. Defining a Container\u003C\u002Fh2>\u003Cp>Mark the parent element as a query container with \u003Ccode>container-type\u003C\u002Fcode>:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>inline-size\u003C\u002Fcode>: the container can be queried by its inline size (width in horizontal writing). This is what you need in almost every case.\u003C\u002Fli>\u003Cli>\u003Ccode>size\u003C\u002Fcode>: both width and height can be queried. It requires explicit sizes for both dimensions, because the container can no longer get its size from its content. Use it rarely.\u003C\u002Fli>\u003Cli>\u003Ccode>normal\u003C\u002Fcode>: the default. The element is not a size container, but it can still be a style query container.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Give it a name with \u003Ccode>container-name: card\u003C\u002Fcode>, or use the shorthand \u003Ccode>container: card \u002F inline-size\u003C\u002Fcode>. Names let a query target one specific container when several containers are nested.\u003C\u002Fp>\u003Ch2 id=\"3-writing-an-at-container-rule\">3. Writing an @container Rule\u003C\u002Fh2>\u003Cp>\u003Ccode>@container (min-width: 400px) { .card { display: grid; grid-template-columns: 160px 1fr; } }\u003C\u002Fcode>. The rule applies to \u003Cstrong>descendants\u003C\u002Fstrong> of the container. An element cannot be styled by a query about its own size, so the container and the styled element must be different elements: a wrapper and the card inside it. Named version: \u003Ccode>@container card (min-width: 400px) { ... }\u003C\u002Fcode>. Without a name, the query uses the nearest ancestor that is a container of the right type.\u003C\u002Fp>\u003Ch3 id=\"range-syntax-and-conditions\">Range syntax and conditions\u003C\u002Fh3>\u003Cp>You can use \u003Ccode>min-width\u003C\u002Fcode>, \u003Ccode>max-width\u003C\u002Fcode>, \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>inline-size\u003C\u002Fcode>, \u003Ccode>block-size\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>, \u003Ccode>aspect-ratio\u003C\u002Fcode> and \u003Ccode>orientation\u003C\u002Fcode>, and the range syntax: \u003Ccode>@container (300px <= width < 600px)\u003C\u002Fcode>. Combine conditions with \u003Ccode>and\u003C\u002Fcode>, \u003Ccode>or\u003C\u002Fcode> and \u003Ccode>not\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"4-container-query-units\">4. Container Query Units\u003C\u002Fh2>\u003Cp>Inside a container you can size things relative to it:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>cqw\u003C\u002Fcode>, \u003Ccode>cqh\u003C\u002Fcode>: 1 percent of the container width and height.\u003C\u002Fli>\u003Cli>\u003Ccode>cqi\u003C\u002Fcode>, \u003Ccode>cqb\u003C\u002Fcode>: 1 percent of the container inline and block size. Prefer these logical units for writing-mode support.\u003C\u002Fli>\u003Cli>\u003Ccode>cqmin\u003C\u002Fcode>, \u003Ccode>cqmax\u003C\u002Fcode>: the smaller or larger of cqi and cqb.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Use them with \u003Ccode>clamp()\u003C\u002Fcode> for fluid padding, gap and font size that follow the component: \u003Ccode>padding: clamp(0.75rem, 4cqi, 2rem)\u003C\u002Fcode>. If there is no matching container, these units fall back to the small viewport units.\u003C\u002Fp>\u003Ch2 id=\"5-style-queries\">5. Style Queries\u003C\u002Fh2>\u003Cp>\u003Ccode>@container style(--theme: dark) { ... }\u003C\u002Fcode> applies styles when a container has a computed custom property with that value. It lets components change based on a state or a variant set by a parent, without adding classes to every child. Support is newer than size queries, so check browser support, use \u003Ccode>@supports\u003C\u002Fcode> when needed and keep a simple default. Newer additions such as scroll-state queries (for sticky, stuck and scrollable states) are emerging features, so treat them as progressive enhancement.\u003C\u002Fp>\u003Ch2 id=\"6-side-effects-of-container-type\">6. Side Effects of container-type\u003C\u002Fh2>\u003Cp>Setting \u003Ccode>container-type: inline-size\u003C\u002Fcode> applies containment to the element:\u003C\u002Fp>\u003Cul>\u003Cli>The container can no longer grow its width from its children. Give it a width from layout (block element, flex or grid item, or an explicit size).\u003C\u002Fli>\u003Cli>It becomes a containing block for absolutely and fixed positioned descendants and creates a stacking context and a new formatting context, similar to \u003Ccode>contain: layout\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Margins of children do not collapse through it.\u003C\u002Fli>\u003Cli>An inline element cannot be a size container. Use a block, flex, grid or inline-block element.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Because of this, do not turn every element into a container. Use containers where components need them, such as card wrappers, widgets and layout regions.\u003C\u002Fp>\u003Ch2 id=\"7-container-queries-with-nesting-and-layers\">7. Container Queries with Nesting and Layers\u003C\u002Fh2>\u003Cp>Native CSS nesting works well with container queries. Put the \u003Ccode>@container\u003C\u002Fcode> block inside the component rule so all rules for that component stay together. You can also place it inside an \u003Ccode>@layer\u003C\u002Fcode>. Remember that a nested \u003Ccode>@container\u003C\u002Fcode> inside \u003Ccode>.card\u003C\u002Fcode> still queries an ancestor, not the card.\u003C\u002Fp>\u003Ch2 id=\"8-container-queries-vs-media-queries\">8. Container Queries vs Media Queries\u003C\u002Fh2>\u003Cul>\u003Cli>Use \u003Cstrong>media queries\u003C\u002Fstrong> for page-level layout, such as the main grid and header, and for user preferences such as dark mode and reduced motion.\u003C\u002Fli>\u003Cli>Use \u003Cstrong>container queries\u003C\u002Fstrong> for components that appear in different places, such as cards, pricing tables, widgets, form rows and media objects.\u003C\u002Fli>\u003Cli>They work together: the page layout decides the width of each region, and the components adapt to that region.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-practical-patterns\">9. Practical Patterns\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Card layout:\u003C\u002Fstrong> stacked below 400px, image left from 400px.\u003C\u002Fli>\u003Cli>\u003Cstrong>Navigation in a sidebar:\u003C\u002Fstrong> icons only when narrow, icons and labels when wide.\u003C\u002Fli>\u003Cli>\u003Cstrong>Dashboard widget:\u003C\u002Fstrong> hide secondary values in small tiles.\u003C\u002Fli>\u003Cli>\u003Cstrong>Grid items as containers:\u003C\u002Fstrong> make each grid cell a container so the content adjusts to the cell, not to the screen.\u003C\u002Fli>\u003Cli>\u003Cstrong>Fluid typography inside components:\u003C\u002Fstrong> use cqi with clamp.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-browser-support-and-fallback\">10. Browser Support and Fallback\u003C\u002Fh2>\u003Cp>Size container queries have been supported in all current major browsers since 2023. For older browsers, write the mobile or default layout as the base styles, so the component still works, just without the wide layout. Use \u003Ccode>@supports (container-type: inline-size)\u003C\u002Fcode> if you need to give a different fallback.\u003C\u002Fp>\u003Ch2 id=\"11-debugging\">11. Debugging\u003C\u002Fh2>\u003Cul>\u003Cli>DevTools shows a container badge on elements with container-type, and you can inspect the matching queries.\u003C\u002Fli>\u003Cli>If a query does nothing, check that the parent has \u003Ccode>container-type\u003C\u002Fcode>, that the styled element is a descendant and not the container itself, and that the container has a real width.\u003C\u002Fli>\u003Cli>If the container collapses to zero width, it is probably an inline-level or shrink-to-fit element, so give it display block or a width.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"12-common-mistakes\">12. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting container-type, so the @container rule never matches.\u003C\u002Fli>\u003Cli>Trying to style the container itself in its own query.\u003C\u002Fli>\u003Cli>Making a shrink-to-fit element a size container and ending up with zero width.\u003C\u002Fli>\u003Cli>Using container-type: size and not setting the height.\u003C\u002Fli>\u003Cli>Making every element a container and creating unexpected stacking contexts.\u003C\u002Fli>\u003Cli>Naming containers inconsistently and querying the wrong one.\u003C\u002Fli>\u003Cli>Using container queries for page-level or preference decisions that belong to media queries.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Give the parent \u003Ccode>container-type: inline-size\u003C\u002Fcode> (and optionally a name), write \u003Ccode>@container\u003C\u002Fcode> rules for its descendants, use cqi units with clamp for fluid component sizes, know the containment side effects, keep media queries for page layout and preferences, and build a sensible base layout for browsers without support.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .card-wrap { container-type: inline-size; max-width: 700px; resize: horizontal; overflow: auto; border: 2px dashed #888; padding: 12px; }\n  .card { display: grid; gap: 12px; background: #eef2f7; padding: 12px; border-radius: 12px; }\n  .thumb { background: #219ebc; aspect-ratio: 4 \u002F 3; border-radius: 8px; }\n  .card h3 { margin: 0 0 6px; }\n  @container (min-width: 420px) {\n    .card { grid-template-columns: 160px 1fr; align-items: center; }\n  }\n<\u002Fstyle>\n<p>Drag the bottom right corner of the dashed box to resize it.<\u002Fp>\n<div class='card-wrap'>\n  <article class='card'><div class='thumb'><\u002Fdiv><div><h3>Container query card<\u002Fh3><p>Stacked when narrow, side by side from 420px of container width.<\u002Fp><\u002Fdiv><\u002Farticle>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  * { box-sizing: border-box; }\n  body { font: 16px system-ui, sans-serif; margin: 0; padding: 16px; }\n  .page { display: grid; gap: 16px; grid-template-columns: 1fr 240px; }\n  .main, .side { container: region \u002F inline-size; background: #fff; border: 1px solid #d0d7de; border-radius: 12px; padding: 12px; }\n  .product { display: grid; gap: 10px; background: #f1f5f9; padding: 10px; border-radius: 10px; }\n  .product .img { background: #e76f51; aspect-ratio: 16 \u002F 9; border-radius: 8px; }\n  @container region (min-width: 420px) {\n    .product { grid-template-columns: 140px 1fr; align-items: center; }\n  }\n<\u002Fstyle>\n<div class='page'>\n  <div class='main'><h3>Main (wide)<\u002Fh3><div class='product'><div class='img'><\u002Fdiv><div>Same component, wide layout<\u002Fdiv><\u002Fdiv><\u002Fdiv>\n  <aside class='side'><h3>Sidebar<\u002Fh3><div class='product'><div class='img'><\u002Fdiv><div>Same component, narrow layout<\u002Fdiv><\u002Fdiv><\u002Faside>\n<\u002Fdiv>\n<p>The same .product CSS adapts to each region with no extra page-level rules.<\u002Fp>\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; }\n  .wrap { container-type: inline-size; resize: horizontal; overflow: auto; width: 480px; max-width: 100%; border: 2px dashed #888; }\n  .tile { padding: clamp(0.75rem, 5cqi, 2.5rem); background: #264653; color: #fff; }\n  .tile h2 { margin: 0 0 0.5rem; font-size: clamp(1.1rem, 6cqi, 2.4rem); line-height: 1.1; }\n  .tile p { margin: 0; font-size: clamp(0.85rem, 3cqi, 1.15rem); }\n  .dots { display: flex; gap: 2cqi; margin-top: 3cqi; }\n  .dots span { width: 6cqi; height: 6cqi; border-radius: 50%; background: #e9c46a; }\n<\u002Fstyle>\n<p>Resize the dashed box: padding, font sizes and dots use container units.<\u002Fp>\n<div class='wrap'><div class='tile'><h2>cqi units<\u002Fh2><p>Everything scales with the container.<\u002Fp><div class='dots'><span><\u002Fspan><span><\u002Fspan><span><\u002Fspan><\u002Fdiv><\u002Fdiv><\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  .widget-host { container: widget \u002F inline-size; width: 560px; max-width: 100%; resize: horizontal; overflow: auto; border: 2px dashed #888; padding: 8px; }\n  .widget { display: grid; gap: 8px; grid-template-columns: 1fr; }\n  .stat { background: #e9c46a; padding: 12px; border-radius: 8px; }\n  .stat.extra { display: none; }\n  @container widget (min-width: 320px) { .widget { grid-template-columns: repeat(2, 1fr); } }\n  @container widget (min-width: 480px) { .widget { grid-template-columns: repeat(3, 1fr); } .stat.extra { display: block; } }\n  @container widget (width < 320px) { .stat { padding: 8px; font-size: 14px; } }\n<\u002Fstyle>\n<p>Resize the box: 1, 2 or 3 columns, and the extra stat appears when there is room.<\u002Fp>\n<div class='widget-host'><div class='widget'><div class='stat'>Users<\u002Fdiv><div class='stat'>Sales<\u002Fdiv><div class='stat extra'>Extra detail<\u002Fdiv><\u002Fdiv><\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  .theme-light { --tone: light; }\n  .theme-dark { --tone: dark; }\n  .panel { padding: 16px; border-radius: 12px; margin-bottom: 12px; background: #f1f5f9; color: #1b1b1f; }\n  @container style(--tone: dark) {\n    .panel { background: #1e222b; color: #eceff4; }\n  }\n<\u002Fstyle>\n<div class='theme-light'><div class='panel'>Panel inside --tone: light<\u002Fdiv><\u002Fdiv>\n<div class='theme-dark'><div class='panel'>Panel inside --tone: dark (style query)<\u002Fdiv><\u002Fdiv>\n<p>Style queries need a modern browser. In other browsers both panels keep the light default.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  * { box-sizing: border-box; }\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }\n  .cell { container: card \u002F inline-size; }\n  .card {\n    background: #eef2f7; border-radius: 12px; padding: 12px; display: grid; gap: 8px;\n    .pic { background: #2a9d8f; aspect-ratio: 16 \u002F 9; border-radius: 8px; }\n    h3 { margin: 0; font-size: 1rem; }\n    p { margin: 0; display: none; }\n    @container card (min-width: 280px) {\n      p { display: block; }\n      h3 { font-size: 1.25rem; }\n    }\n    @container card (min-width: 400px) {\n      grid-template-columns: 140px 1fr;\n      align-items: center;\n    }\n  }\n<\u002Fstyle>\n<div class='grid'>\n  <div class='cell'><article class='card'><div class='pic'><\u002Fdiv><div><h3>Card<\u002Fh3><p>Description appears when the cell is wide enough.<\u002Fp><\u002Fdiv><\u002Farticle><\u002Fdiv>\n  <div class='cell'><article class='card'><div class='pic'><\u002Fdiv><div><h3>Card<\u002Fh3><p>Description appears when the cell is wide enough.<\u002Fp><\u002Fdiv><\u002Farticle><\u002Fdiv>\n  <div class='cell'><article class='card'><div class='pic'><\u002Fdiv><div><h3>Card<\u002Fh3><p>Description appears when the cell is wide enough.<\u002Fp><\u002Fdiv><\u002Farticle><\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>function layoutFor(containerWidth) {\n  if (containerWidth >= 400) { return 'horizontal card with image on the left'; }\n  if (containerWidth >= 280) { return 'stacked card with description'; }\n  return 'compact stacked card without description';\n}\n\n[220, 300, 420, 640].forEach(function (width) {\n  console.log('Container ' + width + 'px -> ' + layoutFor(width));\n});\n\n\u002F\u002F In a real page you can watch a container like this:\n\u002F\u002F var observer = new ResizeObserver(function (entries) {\n\u002F\u002F   entries.forEach(function (entry) {\n\u002F\u002F     console.log(entry.contentRect.width);\n\u002F\u002F   });\n\u002F\u002F });\n\u002F\u002F observer.observe(document.querySelector('.cell'));\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Responsive Design","responsive-design",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"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":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],9,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcontainer-queries","CSS Container Queries: @container, container-type and cqi Units","Learn CSS container queries: container-type, container-name, @container rules, cqw and cqi units, style queries, nesting, media query comparison and reusable components.",[58,67,71,75,83,87,91,95,99,103,107,111,115,119],{"id":59,"text":60,"level":12,"children":61},"css-container-queries-component-based-responsive-design","CSS Container Queries: Component-Based Responsive Design",[62],{"id":63,"text":64,"level":65,"children":66},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",3,[],{"id":68,"text":69,"level":12,"children":70},"1-the-problem-with-media-queries","1. The Problem with Media Queries",[],{"id":72,"text":73,"level":12,"children":74},"2-defining-a-container","2. Defining a Container",[],{"id":76,"text":77,"level":12,"children":78},"3-writing-an-at-container-rule","3. Writing an @container Rule",[79],{"id":80,"text":81,"level":65,"children":82},"range-syntax-and-conditions","Range syntax and conditions",[],{"id":84,"text":85,"level":12,"children":86},"4-container-query-units","4. Container Query Units",[],{"id":88,"text":89,"level":12,"children":90},"5-style-queries","5. Style Queries",[],{"id":92,"text":93,"level":12,"children":94},"6-side-effects-of-container-type","6. Side Effects of container-type",[],{"id":96,"text":97,"level":12,"children":98},"7-container-queries-with-nesting-and-layers","7. Container Queries with Nesting and Layers",[],{"id":100,"text":101,"level":12,"children":102},"8-container-queries-vs-media-queries","8. Container Queries vs Media Queries",[],{"id":104,"text":105,"level":12,"children":106},"9-practical-patterns","9. Practical Patterns",[],{"id":108,"text":109,"level":12,"children":110},"10-browser-support-and-fallback","10. Browser Support and Fallback",[],{"id":112,"text":113,"level":12,"children":114},"11-debugging","11. Debugging",[],{"id":116,"text":117,"level":12,"children":118},"12-common-mistakes","12. Common Mistakes",[],{"id":120,"text":121,"level":12,"children":122},"key-takeaways","Key Takeaways",[],[124,128,131,134,137,140,143],{"id":125,"language":16,"code":126,"is_editable":127},558,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .card-wrap { container-type: inline-size; max-width: 700px; resize: horizontal; overflow: auto; border: 2px dashed #888; padding: 12px; }\n  .card { display: grid; gap: 12px; background: #eef2f7; padding: 12px; border-radius: 12px; }\n  .thumb { background: #219ebc; aspect-ratio: 4 \u002F 3; border-radius: 8px; }\n  .card h3 { margin: 0 0 6px; }\n  @container (min-width: 420px) {\n    .card { grid-template-columns: 160px 1fr; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003Cp>Drag the bottom right corner of the dashed box to resize it.\u003C\u002Fp>\n\u003Cdiv class='card-wrap'>\n  \u003Carticle class='card'>\u003Cdiv class='thumb'>\u003C\u002Fdiv>\u003Cdiv>\u003Ch3>Container query card\u003C\u002Fh3>\u003Cp>Stacked when narrow, side by side from 420px of container width.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Farticle>\n\u003C\u002Fdiv>",true,{"id":129,"language":16,"code":130,"is_editable":127},559,"\u003Cstyle>\n  * { box-sizing: border-box; }\n  body { font: 16px system-ui, sans-serif; margin: 0; padding: 16px; }\n  .page { display: grid; gap: 16px; grid-template-columns: 1fr 240px; }\n  .main, .side { container: region \u002F inline-size; background: #fff; border: 1px solid #d0d7de; border-radius: 12px; padding: 12px; }\n  .product { display: grid; gap: 10px; background: #f1f5f9; padding: 10px; border-radius: 10px; }\n  .product .img { background: #e76f51; aspect-ratio: 16 \u002F 9; border-radius: 8px; }\n  @container region (min-width: 420px) {\n    .product { grid-template-columns: 140px 1fr; align-items: center; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='page'>\n  \u003Cdiv class='main'>\u003Ch3>Main (wide)\u003C\u002Fh3>\u003Cdiv class='product'>\u003Cdiv class='img'>\u003C\u002Fdiv>\u003Cdiv>Same component, wide layout\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Caside class='side'>\u003Ch3>Sidebar\u003C\u002Fh3>\u003Cdiv class='product'>\u003Cdiv class='img'>\u003C\u002Fdiv>\u003Cdiv>Same component, narrow layout\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Faside>\n\u003C\u002Fdiv>\n\u003Cp>The same .product CSS adapts to each region with no extra page-level rules.\u003C\u002Fp>",{"id":132,"language":16,"code":133,"is_editable":127},560,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .wrap { container-type: inline-size; resize: horizontal; overflow: auto; width: 480px; max-width: 100%; border: 2px dashed #888; }\n  .tile { padding: clamp(0.75rem, 5cqi, 2.5rem); background: #264653; color: #fff; }\n  .tile h2 { margin: 0 0 0.5rem; font-size: clamp(1.1rem, 6cqi, 2.4rem); line-height: 1.1; }\n  .tile p { margin: 0; font-size: clamp(0.85rem, 3cqi, 1.15rem); }\n  .dots { display: flex; gap: 2cqi; margin-top: 3cqi; }\n  .dots span { width: 6cqi; height: 6cqi; border-radius: 50%; background: #e9c46a; }\n\u003C\u002Fstyle>\n\u003Cp>Resize the dashed box: padding, font sizes and dots use container units.\u003C\u002Fp>\n\u003Cdiv class='wrap'>\u003Cdiv class='tile'>\u003Ch2>cqi units\u003C\u002Fh2>\u003Cp>Everything scales with the container.\u003C\u002Fp>\u003Cdiv class='dots'>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":135,"language":16,"code":136,"is_editable":127},561,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .widget-host { container: widget \u002F inline-size; width: 560px; max-width: 100%; resize: horizontal; overflow: auto; border: 2px dashed #888; padding: 8px; }\n  .widget { display: grid; gap: 8px; grid-template-columns: 1fr; }\n  .stat { background: #e9c46a; padding: 12px; border-radius: 8px; }\n  .stat.extra { display: none; }\n  @container widget (min-width: 320px) { .widget { grid-template-columns: repeat(2, 1fr); } }\n  @container widget (min-width: 480px) { .widget { grid-template-columns: repeat(3, 1fr); } .stat.extra { display: block; } }\n  @container widget (width \u003C 320px) { .stat { padding: 8px; font-size: 14px; } }\n\u003C\u002Fstyle>\n\u003Cp>Resize the box: 1, 2 or 3 columns, and the extra stat appears when there is room.\u003C\u002Fp>\n\u003Cdiv class='widget-host'>\u003Cdiv class='widget'>\u003Cdiv class='stat'>Users\u003C\u002Fdiv>\u003Cdiv class='stat'>Sales\u003C\u002Fdiv>\u003Cdiv class='stat extra'>Extra detail\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":138,"language":16,"code":139,"is_editable":127},562,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .theme-light { --tone: light; }\n  .theme-dark { --tone: dark; }\n  .panel { padding: 16px; border-radius: 12px; margin-bottom: 12px; background: #f1f5f9; color: #1b1b1f; }\n  @container style(--tone: dark) {\n    .panel { background: #1e222b; color: #eceff4; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='theme-light'>\u003Cdiv class='panel'>Panel inside --tone: light\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='theme-dark'>\u003Cdiv class='panel'>Panel inside --tone: dark (style query)\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>Style queries need a modern browser. In other browsers both panels keep the light default.\u003C\u002Fp>",{"id":141,"language":16,"code":142,"is_editable":127},563,"\u003Cstyle>\n  * { box-sizing: border-box; }\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }\n  .cell { container: card \u002F inline-size; }\n  .card {\n    background: #eef2f7; border-radius: 12px; padding: 12px; display: grid; gap: 8px;\n    .pic { background: #2a9d8f; aspect-ratio: 16 \u002F 9; border-radius: 8px; }\n    h3 { margin: 0; font-size: 1rem; }\n    p { margin: 0; display: none; }\n    @container card (min-width: 280px) {\n      p { display: block; }\n      h3 { font-size: 1.25rem; }\n    }\n    @container card (min-width: 400px) {\n      grid-template-columns: 140px 1fr;\n      align-items: center;\n    }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='grid'>\n  \u003Cdiv class='cell'>\u003Carticle class='card'>\u003Cdiv class='pic'>\u003C\u002Fdiv>\u003Cdiv>\u003Ch3>Card\u003C\u002Fh3>\u003Cp>Description appears when the cell is wide enough.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Farticle>\u003C\u002Fdiv>\n  \u003Cdiv class='cell'>\u003Carticle class='card'>\u003Cdiv class='pic'>\u003C\u002Fdiv>\u003Cdiv>\u003Ch3>Card\u003C\u002Fh3>\u003Cp>Description appears when the cell is wide enough.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Farticle>\u003C\u002Fdiv>\n  \u003Cdiv class='cell'>\u003Carticle class='card'>\u003Cdiv class='pic'>\u003C\u002Fdiv>\u003Cdiv>\u003Ch3>Card\u003C\u002Fh3>\u003Cp>Description appears when the cell is wide enough.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Farticle>\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":144,"language":145,"code":146,"is_editable":127},564,"javascript","function layoutFor(containerWidth) {\n  if (containerWidth >= 400) { return 'horizontal card with image on the left'; }\n  if (containerWidth >= 280) { return 'stacked card with description'; }\n  return 'compact stacked card without description';\n}\n\n[220, 300, 420, 640].forEach(function (width) {\n  console.log('Container ' + width + 'px -> ' + layoutFor(width));\n});\n\n\u002F\u002F In a real page you can watch a container like this:\n\u002F\u002F var observer = new ResizeObserver(function (entries) {\n\u002F\u002F   entries.forEach(function (entry) {\n\u002F\u002F     console.log(entry.contentRect.width);\n\u002F\u002F   });\n\u002F\u002F });\n\u002F\u002F observer.observe(document.querySelector('.cell'));",[148,155],{"id":149,"title":150,"slug":151,"prompt":152,"starter_code":153,"expected_output":154,"language":16,"order_index":23},201,"Switch a Card Layout at 400px","switch-card-layout-at-400px","Make .card-wrap a size container. Inside it, the card should be stacked by default and become a two column grid (140px image, flexible text) when the container is at least 400px wide. Use @container, not @media.","\u003Cstyle>\n  .card-wrap { max-width: 700px; resize: horizontal; overflow: auto; border: 2px dashed #888; padding: 8px; }\n  .card { display: grid; gap: 12px; background: #eef2f7; padding: 12px; border-radius: 12px; }\n  .img { background: #219ebc; aspect-ratio: 4 \u002F 3; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card-wrap'>\u003Carticle class='card'>\u003Cdiv class='img'>\u003C\u002Fdiv>\u003Cdiv>\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Text content.\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Farticle>\u003C\u002Fdiv>","The .card-wrap has container-type: inline-size and an @container (min-width: 400px) rule sets .card to grid-template-columns: 140px 1fr",{"id":156,"title":157,"slug":158,"prompt":159,"starter_code":160,"expected_output":161,"language":16,"order_index":12},202,"Convert a Media Query Component to a Container Query","convert-media-query-to-container-query","The same .promo component is used in a wide main area and a narrow sidebar, but the @media rule switches both at the same viewport width. Convert the component so it adapts to its own container: give each region a container name and replace the media query with an @container rule at 360px.","\u003Cstyle>\n  .layout { display: grid; grid-template-columns: 1fr 220px; gap: 16px; }\n  .region { border: 1px solid #ccc; padding: 10px; border-radius: 10px; }\n  .promo { display: grid; gap: 8px; background: #ffe8a3; padding: 10px; border-radius: 8px; }\n  @media (min-width: 600px) {\n    .promo { grid-template-columns: 100px 1fr; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='layout'>\n  \u003Cdiv class='region'>\u003Cdiv class='promo'>\u003Cdiv>IMG\u003C\u002Fdiv>\u003Cdiv>Wide region promo\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Caside class='region'>\u003Cdiv class='promo'>\u003Cdiv>IMG\u003C\u002Fdiv>\u003Cdiv>Narrow region promo\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Faside>\n\u003C\u002Fdiv>",".region has container-type: inline-size (optionally container: region \u002F inline-size) and the media query is replaced by @container (min-width: 360px) so the narrow sidebar promo stays stacked","2026-09-30T18:35:36+00:00",{"id":164,"slug":165,"title":166},138,"fluid-typography-with-clamp","Fluid Typography with clamp()",{"id":168,"slug":169,"title":170},140,"responsive-navigation-pattern","Responsive Navigation Pattern",{"data":172},[173,493],{"id":23,"name":15,"slug":174,"icon":5,"icon_url":5,"short_description":175,"meta_title":176,"meta_description":177,"og_image":178,"locale":179,"subcategories":180},"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",[181,206,241,265,341,375,389,417,441,457],{"id":23,"name":182,"slug":183,"order_index":23,"topics":184},"HTML Fundamentals & Setup","html-fundamentals-setup",[185,188,191,194,198,202],{"id":12,"title":186,"slug":187,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":189,"slug":190,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":192,"slug":193,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":199,"title":200,"slug":201,"order_index":199,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":203,"title":204,"slug":205,"order_index":203,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":207,"slug":208,"order_index":12,"topics":209},"Text & Content Basics","text-content-basics",[210,214,218,221,225,229,233,237],{"id":211,"title":212,"slug":213,"order_index":211,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":215,"title":216,"slug":217,"order_index":215,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":51,"title":219,"slug":220,"order_index":51,"cornerstone":52,"reading_time_minutes":23},"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":226,"title":227,"slug":228,"order_index":226,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":234,"title":235,"slug":236,"order_index":234,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":238,"title":239,"slug":240,"order_index":238,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":242,"slug":243,"order_index":65,"topics":244},"Links, Media & Navigation","links-media-navigation",[245,249,253,257,261],{"id":246,"title":247,"slug":248,"order_index":246,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":250,"title":251,"slug":252,"order_index":250,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":254,"title":255,"slug":256,"order_index":254,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":258,"title":259,"slug":260,"order_index":258,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":262,"title":263,"slug":264,"order_index":262,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":195,"name":266,"slug":267,"order_index":195,"topics":268},"Structuring Content","structuring-content",[269,274,279,284,289,293,297,301,305,309,313,317,321,325,329,333,337],{"id":270,"title":271,"slug":272,"order_index":273,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":275,"title":276,"slug":277,"order_index":278,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":280,"title":281,"slug":282,"order_index":283,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":285,"title":286,"slug":287,"order_index":288,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":290,"title":291,"slug":292,"order_index":270,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":294,"title":295,"slug":296,"order_index":275,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":298,"title":299,"slug":300,"order_index":280,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":302,"title":303,"slug":304,"order_index":285,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":306,"title":307,"slug":308,"order_index":290,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":310,"title":311,"slug":312,"order_index":294,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":314,"title":315,"slug":316,"order_index":298,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":318,"title":319,"slug":320,"order_index":302,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":322,"title":323,"slug":324,"order_index":306,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":326,"title":327,"slug":328,"order_index":326,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":330,"title":331,"slug":332,"order_index":330,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":334,"title":335,"slug":336,"order_index":334,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":338,"title":339,"slug":340,"order_index":338,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":211,"name":342,"slug":343,"order_index":199,"topics":344},"Forms & User Input","forms-user-input",[345,350,355,360,365,370],{"id":346,"title":347,"slug":348,"order_index":349,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":351,"title":352,"slug":353,"order_index":354,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":356,"title":357,"slug":358,"order_index":359,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":361,"title":362,"slug":363,"order_index":364,"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":366,"title":367,"slug":368,"order_index":369,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":371,"title":372,"slug":373,"order_index":374,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":215,"name":376,"slug":377,"order_index":203,"topics":378},"Graphics & Visuals","graphics-visuals",[379,384],{"id":380,"title":381,"slug":382,"order_index":383,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":385,"title":386,"slug":387,"order_index":388,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":51,"name":390,"slug":391,"order_index":211,"topics":392},"Multimedia","multimedia",[393,398,403,408,413],{"id":394,"title":395,"slug":396,"order_index":397,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":399,"title":400,"slug":401,"order_index":402,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":404,"title":405,"slug":406,"order_index":407,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":409,"title":410,"slug":411,"order_index":412,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":414,"title":415,"slug":416,"order_index":346,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":222,"name":418,"slug":419,"order_index":215,"topics":420},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[421,425,429,433,437],{"id":422,"title":423,"slug":424,"order_index":351,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":426,"title":427,"slug":428,"order_index":356,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":430,"title":431,"slug":432,"order_index":361,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":434,"title":435,"slug":436,"order_index":366,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":438,"title":439,"slug":440,"order_index":371,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":226,"name":442,"slug":443,"order_index":51,"topics":444},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[445,449,453],{"id":446,"title":447,"slug":448,"order_index":380,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":450,"title":451,"slug":452,"order_index":385,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":454,"title":455,"slug":456,"order_index":394,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":230,"name":458,"slug":459,"order_index":222,"topics":460},"Reference & Practice","reference-practice",[461,465,469,473,477,481,485,489],{"id":462,"title":463,"slug":464,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":466,"title":467,"slug":468,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":470,"title":471,"slug":472,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":474,"title":475,"slug":476,"order_index":195,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":478,"title":479,"slug":480,"order_index":199,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":482,"title":483,"slug":484,"order_index":203,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":486,"title":487,"slug":488,"order_index":211,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":490,"title":491,"slug":492,"order_index":215,"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":494,"meta_title":495,"meta_description":496,"og_image":5,"locale":179,"subcategories":497},"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.",[498,527,551,587,619,651,683,715,743,760],{"id":288,"name":499,"slug":500,"order_index":501,"topics":502},"UI Components","ui-components",0,[503,507,511,515,519,523],{"id":504,"title":505,"slug":506,"order_index":414,"cornerstone":52,"reading_time_minutes":203},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":508,"title":509,"slug":510,"order_index":422,"cornerstone":52,"reading_time_minutes":203},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":512,"title":513,"slug":514,"order_index":426,"cornerstone":52,"reading_time_minutes":211},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":516,"title":517,"slug":518,"order_index":430,"cornerstone":52,"reading_time_minutes":203},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":520,"title":521,"slug":522,"order_index":434,"cornerstone":52,"reading_time_minutes":203},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":524,"title":525,"slug":526,"order_index":438,"cornerstone":52,"reading_time_minutes":203},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":234,"name":528,"slug":529,"order_index":501,"topics":530},"CSS Fundamentals & Setup","css-fundamentals-setup",[531,535,539,543,547],{"id":532,"title":533,"slug":534,"order_index":23,"cornerstone":52,"reading_time_minutes":195},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":536,"title":537,"slug":538,"order_index":12,"cornerstone":52,"reading_time_minutes":195},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":540,"title":541,"slug":542,"order_index":65,"cornerstone":52,"reading_time_minutes":65},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":544,"title":545,"slug":546,"order_index":195,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":548,"title":549,"slug":550,"order_index":199,"cornerstone":52,"reading_time_minutes":199},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":238,"name":552,"slug":553,"order_index":501,"topics":554},"Selectors & the Cascade","selectors-the-cascade",[555,559,563,567,571,575,579,583],{"id":556,"title":557,"slug":558,"order_index":203,"cornerstone":52,"reading_time_minutes":195},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":560,"title":561,"slug":562,"order_index":211,"cornerstone":52,"reading_time_minutes":195},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":564,"title":565,"slug":566,"order_index":215,"cornerstone":52,"reading_time_minutes":195},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":568,"title":569,"slug":570,"order_index":51,"cornerstone":52,"reading_time_minutes":203},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":572,"title":573,"slug":574,"order_index":222,"cornerstone":52,"reading_time_minutes":199},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":576,"title":577,"slug":578,"order_index":226,"cornerstone":52,"reading_time_minutes":199},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":580,"title":581,"slug":582,"order_index":230,"cornerstone":52,"reading_time_minutes":195},93,"CSS Specificity Explained","css-specificity-explained",{"id":584,"title":585,"slug":586,"order_index":234,"cornerstone":52,"reading_time_minutes":199},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":246,"name":588,"slug":589,"order_index":501,"topics":590},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[591,595,599,603,607,611,615],{"id":592,"title":593,"slug":594,"order_index":238,"cornerstone":52,"reading_time_minutes":199},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":596,"title":597,"slug":598,"order_index":246,"cornerstone":52,"reading_time_minutes":195},96,"CSS Backgrounds","css-backgrounds",{"id":600,"title":601,"slug":602,"order_index":250,"cornerstone":52,"reading_time_minutes":199},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":604,"title":605,"slug":606,"order_index":254,"cornerstone":52,"reading_time_minutes":199},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":608,"title":609,"slug":610,"order_index":258,"cornerstone":52,"reading_time_minutes":203},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":612,"title":613,"slug":614,"order_index":262,"cornerstone":52,"reading_time_minutes":199},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":616,"title":617,"slug":618,"order_index":273,"cornerstone":52,"reading_time_minutes":203},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":250,"name":620,"slug":621,"order_index":501,"topics":622},"Box Model & Spacing","box-model-spacing",[623,627,631,635,639,643,647],{"id":624,"title":625,"slug":626,"order_index":278,"cornerstone":52,"reading_time_minutes":211},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":628,"title":629,"slug":630,"order_index":283,"cornerstone":52,"reading_time_minutes":211},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":632,"title":633,"slug":634,"order_index":288,"cornerstone":52,"reading_time_minutes":203},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":636,"title":637,"slug":638,"order_index":270,"cornerstone":52,"reading_time_minutes":51},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":640,"title":641,"slug":642,"order_index":275,"cornerstone":52,"reading_time_minutes":199},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":644,"title":645,"slug":646,"order_index":280,"cornerstone":52,"reading_time_minutes":211},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":648,"title":649,"slug":650,"order_index":285,"cornerstone":52,"reading_time_minutes":211},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":254,"name":652,"slug":653,"order_index":501,"topics":654},"Typography & Text","typography-text",[655,659,663,667,671,675,679],{"id":656,"title":657,"slug":658,"order_index":290,"cornerstone":52,"reading_time_minutes":211},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":660,"title":661,"slug":662,"order_index":294,"cornerstone":52,"reading_time_minutes":211},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":664,"title":665,"slug":666,"order_index":298,"cornerstone":52,"reading_time_minutes":211},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":668,"title":669,"slug":670,"order_index":302,"cornerstone":52,"reading_time_minutes":211},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":672,"title":673,"slug":674,"order_index":306,"cornerstone":52,"reading_time_minutes":215},113,"Styling Links","styling-links-css",{"id":676,"title":677,"slug":678,"order_index":326,"cornerstone":52,"reading_time_minutes":211},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":680,"title":681,"slug":682,"order_index":330,"cornerstone":52,"reading_time_minutes":222},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":258,"name":684,"slug":685,"order_index":501,"topics":686},"Display, Position & Layout Basics","display-position-layout-basics",[687,691,695,699,703,707,711],{"id":688,"title":689,"slug":690,"order_index":334,"cornerstone":52,"reading_time_minutes":211},116,"Display & Inline-block","display-and-inline-block",{"id":692,"title":693,"slug":694,"order_index":338,"cornerstone":52,"reading_time_minutes":203},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":696,"title":697,"slug":698,"order_index":349,"cornerstone":52,"reading_time_minutes":203},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":700,"title":701,"slug":702,"order_index":354,"cornerstone":52,"reading_time_minutes":199},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":704,"title":705,"slug":706,"order_index":359,"cornerstone":52,"reading_time_minutes":203},120,"Centering Techniques","centering-techniques",{"id":708,"title":709,"slug":710,"order_index":364,"cornerstone":52,"reading_time_minutes":211},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":712,"title":713,"slug":714,"order_index":369,"cornerstone":52,"reading_time_minutes":215},122,"Website Layout Basics","website-layout-basics",{"id":273,"name":716,"slug":717,"order_index":501,"topics":718},"The Modern CSS Toolkit","the-modern-css-toolkit",[719,723,727,731,735,739],{"id":720,"title":721,"slug":722,"order_index":374,"cornerstone":52,"reading_time_minutes":215},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":724,"title":725,"slug":726,"order_index":383,"cornerstone":52,"reading_time_minutes":215},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":728,"title":729,"slug":730,"order_index":388,"cornerstone":52,"reading_time_minutes":211},131,"Native CSS Nesting","native-css-nesting",{"id":732,"title":733,"slug":734,"order_index":397,"cornerstone":52,"reading_time_minutes":211},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":736,"title":737,"slug":738,"order_index":402,"cornerstone":52,"reading_time_minutes":51},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":740,"title":741,"slug":742,"order_index":407,"cornerstone":52,"reading_time_minutes":215},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":278,"name":43,"slug":44,"order_index":501,"topics":744},[745,749,753,757,758,759],{"id":746,"title":747,"slug":748,"order_index":412,"cornerstone":52,"reading_time_minutes":51},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":750,"title":751,"slug":752,"order_index":346,"cornerstone":52,"reading_time_minutes":215},136,"Media Queries","media-queries",{"id":754,"title":755,"slug":756,"order_index":351,"cornerstone":52,"reading_time_minutes":215},137,"Responsive Images & Video","responsive-images-and-video",{"id":164,"title":166,"slug":165,"order_index":356,"cornerstone":52,"reading_time_minutes":51},{"id":37,"title":38,"slug":39,"order_index":361,"cornerstone":52,"reading_time_minutes":51},{"id":168,"title":170,"slug":169,"order_index":366,"cornerstone":52,"reading_time_minutes":230},{"id":283,"name":761,"slug":762,"order_index":501,"topics":763},"Transitions & Animation","transitions-animation",[764,768,772,776,780,784,788],{"id":765,"title":766,"slug":767,"order_index":371,"cornerstone":52,"reading_time_minutes":199},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":769,"title":770,"slug":771,"order_index":380,"cornerstone":52,"reading_time_minutes":195},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":773,"title":774,"slug":775,"order_index":385,"cornerstone":52,"reading_time_minutes":199},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":777,"title":778,"slug":779,"order_index":394,"cornerstone":52,"reading_time_minutes":199},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":781,"title":782,"slug":783,"order_index":399,"cornerstone":52,"reading_time_minutes":199},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":785,"title":786,"slug":787,"order_index":404,"cornerstone":52,"reading_time_minutes":199},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":789,"title":790,"slug":791,"order_index":409,"cornerstone":52,"reading_time_minutes":203},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]