[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:media-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},136,"Media Queries","media-queries","\u003Ch2 id=\"css-media-queries-complete-guide\">CSS Media Queries: Complete Guide\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS media queries.\u003C\u002Fstrong> Media queries let your CSS react to the device and the user: screen size, orientation, resolution, input type and preferences such as dark mode or reduced motion. They are the main tool of responsive design. In this lesson you will learn the syntax, the modern range syntax, how to choose breakpoints, how to query user preferences, how to write print styles, and how to use media queries from JavaScript.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS media query syntax, min-width vs max-width, media query range syntax, responsive breakpoints 2026, content-based breakpoints, orientation landscape portrait, prefers-reduced-motion, prefers-color-scheme, prefers-contrast, prefers-reduced-data, hover and pointer media features, print stylesheet, matchMedia JavaScript, resolution and dppx, media query em vs px, media queries vs container queries, nested media queries, forced-colors.\u003C\u002Fp>\u003Ch2 id=\"1-media-query-syntax\">1. Media Query Syntax\u003C\u002Fh2>\u003Cp>A media query has an optional media type and one or more conditions in parentheses: \u003Ccode>@media screen and (min-width: 600px) { ... }\u003C\u002Fcode>. The rules inside apply only when the whole query is true.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Media types:\u003C\u002Fstrong> \u003Ccode>all\u003C\u002Fcode> (default), \u003Ccode>screen\u003C\u002Fcode>, \u003Ccode>print\u003C\u002Fcode>. Older types such as handheld and tv are obsolete.\u003C\u002Fli>\u003Cli>\u003Cstrong>Media features:\u003C\u002Fstrong> conditions such as \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>, \u003Ccode>orientation\u003C\u002Fcode>, \u003Ccode>aspect-ratio\u003C\u002Fcode>, \u003Ccode>resolution\u003C\u002Fcode>, \u003Ccode>hover\u003C\u002Fcode>, \u003Ccode>pointer\u003C\u002Fcode> and many preference features.\u003C\u002Fli>\u003Cli>\u003Cstrong>Logical operators:\u003C\u002Fstrong> \u003Ccode>and\u003C\u002Fcode> (all true), a comma (any true, works as or), \u003Ccode>not\u003C\u002Fcode> (negate the whole query) and \u003Ccode>only\u003C\u002Fcode> (hide the query from very old browsers).\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Example with a comma: \u003Ccode>@media (max-width: 500px), (orientation: portrait) { ... }\u003C\u002Fcode> applies when either condition is true.\u003C\u002Fp>\u003Ch2 id=\"2-min-width-and-max-width\">2. min-width and max-width\u003C\u002Fh2>\u003Cp>\u003Ccode>min-width: 600px\u003C\u002Fcode> means the viewport is 600px or wider. \u003Ccode>max-width: 599px\u003C\u002Fcode> means the viewport is 599px or narrower. For mobile-first CSS use \u003Ccode>min-width\u003C\u002Fcode> as your main tool. Mixing both is useful for a range, such as a rule that only applies to tablets.\u003C\u002Fp>\u003Ch2 id=\"3-range-syntax-modern\">3. Range Syntax (Modern)\u003C\u002Fh2>\u003Cp>Modern browsers support comparison operators, which are shorter and avoid off-by-one gaps: \u003Ccode>@media (width >= 600px)\u003C\u002Fcode>, \u003Ccode>@media (width < 600px)\u003C\u002Fcode> and \u003Ccode>@media (400px <= width <= 900px)\u003C\u002Fcode>. The range syntax also works with \u003Ccode>height\u003C\u002Fcode> and \u003Ccode>aspect-ratio\u003C\u002Fcode>. It removes the old trick of writing \u003Ccode>max-width: 599.98px\u003C\u002Fcode> to avoid overlaps with \u003Ccode>min-width: 600px\u003C\u002Fcode>, because \u003Ccode>width < 600px\u003C\u002Fcode> and \u003Ccode>width >= 600px\u003C\u002Fcode> never overlap.\u003C\u002Fp>\u003Ch2 id=\"4-choosing-breakpoints\">4. Choosing Breakpoints\u003C\u002Fh2>\u003Cp>Do not build for specific devices, because new sizes appear every year. Resize your layout and add a breakpoint \u003Cstrong>where the design breaks\u003C\u002Fstrong>: a line becomes too long, columns become too narrow or a gap looks empty. Typical starting values are 600px, 900px and 1200px, or 40em, 60em and 75em. Keep the number small, usually two to four. Use CSS variables for spacing, but remember that variables cannot be used inside the media query condition itself.\u003C\u002Fp>\u003Ch3 id=\"em-vs-px-in-media-queries\">em vs px in media queries\u003C\u002Fh3>\u003Cp>In media queries \u003Ccode>em\u003C\u002Fcode> and \u003Ccode>rem\u003C\u002Fcode> are based on the browser default font size (normally 16px), not on your CSS. When a user increases their default font size, em-based breakpoints trigger earlier, which gives larger text more room. This is one reason many teams prefer \u003Ccode>em\u003C\u002Fcode> breakpoints, for example \u003Ccode>@media (min-width: 40em)\u003C\u002Fcode>. Pick one unit and use it everywhere.\u003C\u002Fp>\u003Ch2 id=\"5-orientation-aspect-ratio-and-resolution\">5. Orientation, Aspect Ratio and Resolution\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>orientation: landscape\u003C\u002Fcode> or \u003Ccode>portrait\u003C\u002Fcode>: based on width versus height of the viewport.\u003C\u002Fli>\u003Cli>\u003Ccode>aspect-ratio\u003C\u002Fcode> and \u003Ccode>min-aspect-ratio\u003C\u002Fcode>: for example \u003Ccode>(min-aspect-ratio: 16\u002F9)\u003C\u002Fcode> for very wide windows.\u003C\u002Fli>\u003Cli>\u003Ccode>resolution\u003C\u002Fcode>: \u003Ccode>(min-resolution: 2dppx)\u003C\u002Fcode> matches high density screens, useful for sharper background images.\u003C\u002Fli>\u003Cli>\u003Ccode>height\u003C\u002Fcode>: \u003Ccode>(max-height: 500px)\u003C\u002Fcode> helps with short landscape phones.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-input-capability-queries\">6. Input Capability Queries\u003C\u002Fh2>\u003Cp>\u003Ccode>hover: hover\u003C\u002Fcode> and \u003Ccode>pointer: fine\u003C\u002Fcode> describe the primary input, while \u003Ccode>any-hover\u003C\u002Fcode> and \u003Ccode>any-pointer\u003C\u002Fcode> check every available input. Use them to add hover effects only where hovering is possible and to enlarge controls for touch.\u003C\u002Fp>\u003Ch2 id=\"7-user-preference-queries\">7. User Preference Queries\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>prefers-color-scheme: dark\u003C\u002Fcode>: the user wants a dark interface.\u003C\u002Fli>\u003Cli>\u003Ccode>prefers-reduced-motion: reduce\u003C\u002Fcode>: remove or shorten animations, parallax and autoplay movement.\u003C\u002Fli>\u003Cli>\u003Ccode>prefers-contrast: more\u003C\u002Fcode> or \u003Ccode>less\u003C\u002Fcode>: adjust borders and colors.\u003C\u002Fli>\u003Cli>\u003Ccode>prefers-reduced-data: reduce\u003C\u002Fcode>: skip large images, videos or web fonts when the user asks to save data (limited support).\u003C\u002Fli>\u003Cli>\u003Ccode>prefers-reduced-transparency: reduce\u003C\u002Fcode>: limited support, reduce blur and transparency.\u003C\u002Fli>\u003Cli>\u003Ccode>forced-colors: active\u003C\u002Fcode>: Windows high contrast mode. Avoid fighting it and keep borders visible.\u003C\u002Fli>\u003Cli>\u003Ccode>display-mode: standalone\u003C\u002Fcode>: the page runs as an installed web app.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"8-print-styles\">8. Print Styles\u003C\u002Fh2>\u003Cp>Use \u003Ccode>@media print\u003C\u002Fcode> to make pages print well: hide navigation, ads and buttons, use black text on white, set a readable size in points, avoid breaking inside cards with \u003Ccode>break-inside: avoid\u003C\u002Fcode>, and show link addresses with \u003Ccode>a[href]::after { content: ' (' attr(href) ')'; }\u003C\u002Fcode>. Test with the print preview in DevTools.\u003C\u002Fp>\u003Ch2 id=\"9-nesting-and-combining\">9. Nesting and Combining\u003C\u002Fh2>\u003Cp>You can combine queries with \u003Ccode>and\u003C\u002Fcode>, for example \u003Ccode>(min-width: 700px) and (orientation: landscape)\u003C\u002Fcode>. Media queries can be nested inside a rule in native CSS nesting, which keeps responsive rules next to the component. They can also be used in \u003Ccode><link media='...'>\u003C\u002Fcode>, \u003Ccode><source media='...'>\u003C\u002Fcode> and \u003Ccode>@import url() media-query\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"10-media-queries-in-javascript\">10. Media Queries in JavaScript\u003C\u002Fh2>\u003Cp>\u003Ccode>window.matchMedia('(min-width: 600px)')\u003C\u002Fcode> returns an object with a \u003Ccode>matches\u003C\u002Fcode> boolean and a \u003Ccode>change\u003C\u002Fcode> event. Use it to reset a mobile menu when the screen becomes wide, to swap content, or to check the user's color scheme. Prefer CSS whenever possible and use JavaScript only for behavior.\u003C\u002Fp>\u003Ch2 id=\"11-media-queries-vs-container-queries\">11. Media Queries vs Container Queries\u003C\u002Fh2>\u003Cp>A media query asks about the viewport or the device. A container query asks about the size of a parent element, which is better for reusable components. Use media queries for the page layout, such as the number of columns of the whole page, and for user preferences. You will learn container queries in a later lesson.\u003C\u002Fp>\u003Ch2 id=\"12-common-mistakes\">12. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Missing the viewport meta tag, so queries never match the real width.\u003C\u002Fli>\u003Cli>Writing \u003Ccode>min-width\u003C\u002Fcode> and \u003Ccode>max-width\u003C\u002Fcode> rules that overlap or leave a gap.\u003C\u002Fli>\u003Cli>Targeting devices instead of content.\u003C\u002Fli>\u003Cli>Using too many breakpoints.\u003C\u002Fli>\u003Cli>Putting a media query before the base rule it should override, so the base rule wins by order.\u003C\u002Fli>\u003Cli>Trying to use a CSS variable inside the query condition.\u003C\u002Fli>\u003Cli>Hiding hover content from touch users.\u003C\u002Fli>\u003Cli>Ignoring prefers-reduced-motion.\u003C\u002Fli>\u003Cli>Forgetting to test print output.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Write base styles first, then add min-width queries where the content needs them. Prefer range syntax, choose breakpoints by content, query user preferences and input capabilities, write a print stylesheet, and use matchMedia only for behavior that CSS cannot handle.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; margin: 0; padding: 16px; }\n  .banner { padding: 18px; color: #fff; background: #264653; border-radius: 10px; }\n  .banner::after { content: ' Base styles (mobile)'; }\n  @media (min-width: 600px) {\n    .banner { background: #2a9d8f; }\n    .banner::after { content: ' 600px and wider'; }\n  }\n  @media (min-width: 900px) {\n    .banner { background: #e76f51; }\n    .banner::after { content: ' 900px and wider'; }\n  }\n<\u002Fstyle>\n<div class='banner'>Current range:<\u002Fdiv>\n<p>Resize the preview to see the banner change at 600px and 900px.<\u002Fp>\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 { padding: 12px; margin-bottom: 10px; color: #fff; border-radius: 8px; background: #888; }\n  .a::after { content: ' (width < 400px is false)'; }\n  @media (width < 400px) { .a { background: #e76f51; } .a::after { content: ' (width < 400px is true)'; } }\n  .b::after { content: ' (width >= 500px is false)'; }\n  @media (width >= 500px) { .b { background: #2a9d8f; } .b::after { content: ' (width >= 500px is true)'; } }\n  .c::after { content: ' (400px <= width <= 800px is false)'; }\n  @media (400px <= width <= 800px) { .c { background: #264653; } .c::after { content: ' (400px <= width <= 800px is true)'; } }\n<\u002Fstyle>\n<div class='box a'>Range syntax A<\u002Fdiv>\n<div class='box b'>Range syntax B<\u002Fdiv>\n<div class='box c'>Range syntax C<\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 { padding: 14px; margin-bottom: 10px; color: #fff; background: #264653; border-radius: 8px; }\n  .o::after { content: ' orientation: portrait'; }\n  @media (orientation: landscape) { .o::after { content: ' orientation: landscape'; } }\n  .h::after { content: ' no hover support'; }\n  @media (hover: hover) and (pointer: fine) { .h::after { content: ' hover and fine pointer'; } }\n  .r::after { content: ' standard density screen'; }\n  @media (min-resolution: 2dppx) { .r::after { content: ' high density screen (2dppx or more)'; } }\n  .w::after { content: ' narrower than 16 \u002F 9'; }\n  @media (min-aspect-ratio: 16\u002F9) { .w::after { content: ' very wide window (16 \u002F 9 or wider)'; } }\n<\u002Fstyle>\n<div class='box o'>Orientation:<\u002Fdiv>\n<div class='box h'>Input:<\u002Fdiv>\n<div class='box r'>Resolution:<\u002Fdiv>\n<div class='box w'>Aspect ratio:<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; background: #fff; color: #1b1b1f; }\n  .pulse { width: 80px; height: 80px; border-radius: 50%; background: #e76f51; animation: pulse 1.6s ease-in-out infinite; }\n  @keyframes pulse { 50% { transform: scale(1.25); } }\n  .card { margin-top: 20px; padding: 16px; border: 1px solid #ccc; border-radius: 12px; max-width: 320px; }\n\n  @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }\n  @media (prefers-color-scheme: dark) {\n    body { background: #12141a; color: #eceff4; }\n    .card { border-color: #3b4252; }\n  }\n  @media (prefers-contrast: more) { .card { border: 3px solid currentColor; } }\n<\u002Fstyle>\n<div class='pulse'><\u002Fdiv>\n<div class='card'>This page reacts to reduced motion, dark mode and high contrast settings of your system.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n  nav { background: #264653; padding: 10px; margin-bottom: 12px; }\n  nav a { color: #fff; margin-right: 12px; }\n  .card { border: 1px solid #ccc; padding: 12px; margin-bottom: 12px; border-radius: 8px; }\n\n  @media print {\n    nav, .no-print { display: none; }\n    body { font-size: 12pt; color: #000; background: #fff; }\n    .card { break-inside: avoid; border-color: #000; }\n    a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }\n  }\n<\u002Fstyle>\n<nav><a href='#'>Home<\u002Fa><a href='#'>Docs<\u002Fa><\u002Fnav>\n<div class='card'>Article card with a <a href='https:\u002F\u002Fexample.com\u002Fguide'>useful link<\u002Fa>.<\u002Fdiv>\n<button id='p' class='no-print'>Print this page<\u002Fbutton>\n<script>\n  document.getElementById('p').addEventListener('click', function () { window.print(); });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  header { background: #264653; color: #fff; padding: 14px; }\n  .wrap { display: grid; gap: 12px; padding: 12px; }\n  .card { background: #eef2f7; padding: 16px; border-radius: 10px; }\n  @media (min-width: 560px) { .wrap { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 900px) { .wrap { grid-template-columns: repeat(3, 1fr); padding: 24px; gap: 20px; } }\n  @media (min-width: 700px) and (orientation: landscape) { header { padding: 10px 14px; } }\n  @media (max-height: 420px) { header { position: static; } }\n<\u002Fstyle>\n<header>Combined queries<\u002Fheader>\n<div class='wrap'>\n  <div class='card'>1<\u002Fdiv><div class='card'>2<\u002Fdiv><div class='card'>3<\u002Fdiv>\n  <div class='card'>4<\u002Fdiv><div class='card'>5<\u002Fdiv><div class='card'>6<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>var queries = {\n  wide: '(min-width: 900px)',\n  dark: '(prefers-color-scheme: dark)',\n  reducedMotion: '(prefers-reduced-motion: reduce)',\n  touch: '(pointer: coarse)'\n};\n\nObject.keys(queries).forEach(function (name) {\n  var mql = window.matchMedia(queries[name]);\n  console.log(name + ' -> ' + queries[name] + ' matches: ' + mql.matches);\n  mql.addEventListener('change', function (event) {\n    console.log(name + ' changed, matches now: ' + event.matches);\n  });\n});\n\nconsole.log('Resize the preview or change system settings to see change events.');\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",[],[],[],8,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fmedia-queries","CSS Media Queries: Syntax, Breakpoints, Range Syntax and Print","Learn CSS media queries: syntax, min-width and max-width, range syntax, breakpoints, orientation, prefers-color-scheme, prefers-reduced-motion, print styles and matchMedia.",[58,67,71,75,79,87,91,95,99,103,107,111,115,119],{"id":59,"text":60,"level":12,"children":61},"css-media-queries-complete-guide","CSS Media Queries: Complete Guide",[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-media-query-syntax","1. Media Query Syntax",[],{"id":72,"text":73,"level":12,"children":74},"2-min-width-and-max-width","2. min-width and max-width",[],{"id":76,"text":77,"level":12,"children":78},"3-range-syntax-modern","3. Range Syntax (Modern)",[],{"id":80,"text":81,"level":12,"children":82},"4-choosing-breakpoints","4. Choosing Breakpoints",[83],{"id":84,"text":85,"level":65,"children":86},"em-vs-px-in-media-queries","em vs px in media queries",[],{"id":88,"text":89,"level":12,"children":90},"5-orientation-aspect-ratio-and-resolution","5. Orientation, Aspect Ratio and Resolution",[],{"id":92,"text":93,"level":12,"children":94},"6-input-capability-queries","6. Input Capability Queries",[],{"id":96,"text":97,"level":12,"children":98},"7-user-preference-queries","7. User Preference Queries",[],{"id":100,"text":101,"level":12,"children":102},"8-print-styles","8. Print Styles",[],{"id":104,"text":105,"level":12,"children":106},"9-nesting-and-combining","9. Nesting and Combining",[],{"id":108,"text":109,"level":12,"children":110},"10-media-queries-in-javascript","10. Media Queries in JavaScript",[],{"id":112,"text":113,"level":12,"children":114},"11-media-queries-vs-container-queries","11. Media Queries vs Container Queries",[],{"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},537,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; margin: 0; padding: 16px; }\n  .banner { padding: 18px; color: #fff; background: #264653; border-radius: 10px; }\n  .banner::after { content: ' Base styles (mobile)'; }\n  @media (min-width: 600px) {\n    .banner { background: #2a9d8f; }\n    .banner::after { content: ' 600px and wider'; }\n  }\n  @media (min-width: 900px) {\n    .banner { background: #e76f51; }\n    .banner::after { content: ' 900px and wider'; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='banner'>Current range:\u003C\u002Fdiv>\n\u003Cp>Resize the preview to see the banner change at 600px and 900px.\u003C\u002Fp>",true,{"id":129,"language":16,"code":130,"is_editable":127},538,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { padding: 12px; margin-bottom: 10px; color: #fff; border-radius: 8px; background: #888; }\n  .a::after { content: ' (width \u003C 400px is false)'; }\n  @media (width \u003C 400px) { .a { background: #e76f51; } .a::after { content: ' (width \u003C 400px is true)'; } }\n  .b::after { content: ' (width >= 500px is false)'; }\n  @media (width >= 500px) { .b { background: #2a9d8f; } .b::after { content: ' (width >= 500px is true)'; } }\n  .c::after { content: ' (400px \u003C= width \u003C= 800px is false)'; }\n  @media (400px \u003C= width \u003C= 800px) { .c { background: #264653; } .c::after { content: ' (400px \u003C= width \u003C= 800px is true)'; } }\n\u003C\u002Fstyle>\n\u003Cdiv class='box a'>Range syntax A\u003C\u002Fdiv>\n\u003Cdiv class='box b'>Range syntax B\u003C\u002Fdiv>\n\u003Cdiv class='box c'>Range syntax C\u003C\u002Fdiv>",{"id":132,"language":16,"code":133,"is_editable":127},539,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { padding: 14px; margin-bottom: 10px; color: #fff; background: #264653; border-radius: 8px; }\n  .o::after { content: ' orientation: portrait'; }\n  @media (orientation: landscape) { .o::after { content: ' orientation: landscape'; } }\n  .h::after { content: ' no hover support'; }\n  @media (hover: hover) and (pointer: fine) { .h::after { content: ' hover and fine pointer'; } }\n  .r::after { content: ' standard density screen'; }\n  @media (min-resolution: 2dppx) { .r::after { content: ' high density screen (2dppx or more)'; } }\n  .w::after { content: ' narrower than 16 \u002F 9'; }\n  @media (min-aspect-ratio: 16\u002F9) { .w::after { content: ' very wide window (16 \u002F 9 or wider)'; } }\n\u003C\u002Fstyle>\n\u003Cdiv class='box o'>Orientation:\u003C\u002Fdiv>\n\u003Cdiv class='box h'>Input:\u003C\u002Fdiv>\n\u003Cdiv class='box r'>Resolution:\u003C\u002Fdiv>\n\u003Cdiv class='box w'>Aspect ratio:\u003C\u002Fdiv>",{"id":135,"language":16,"code":136,"is_editable":127},540,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; background: #fff; color: #1b1b1f; }\n  .pulse { width: 80px; height: 80px; border-radius: 50%; background: #e76f51; animation: pulse 1.6s ease-in-out infinite; }\n  @keyframes pulse { 50% { transform: scale(1.25); } }\n  .card { margin-top: 20px; padding: 16px; border: 1px solid #ccc; border-radius: 12px; max-width: 320px; }\n\n  @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }\n  @media (prefers-color-scheme: dark) {\n    body { background: #12141a; color: #eceff4; }\n    .card { border-color: #3b4252; }\n  }\n  @media (prefers-contrast: more) { .card { border: 3px solid currentColor; } }\n\u003C\u002Fstyle>\n\u003Cdiv class='pulse'>\u003C\u002Fdiv>\n\u003Cdiv class='card'>This page reacts to reduced motion, dark mode and high contrast settings of your system.\u003C\u002Fdiv>",{"id":138,"language":16,"code":139,"is_editable":127},541,"\u003Cstyle>\n  body { font: 16px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n  nav { background: #264653; padding: 10px; margin-bottom: 12px; }\n  nav a { color: #fff; margin-right: 12px; }\n  .card { border: 1px solid #ccc; padding: 12px; margin-bottom: 12px; border-radius: 8px; }\n\n  @media print {\n    nav, .no-print { display: none; }\n    body { font-size: 12pt; color: #000; background: #fff; }\n    .card { break-inside: avoid; border-color: #000; }\n    a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }\n  }\n\u003C\u002Fstyle>\n\u003Cnav>\u003Ca href='#'>Home\u003C\u002Fa>\u003Ca href='#'>Docs\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv class='card'>Article card with a \u003Ca href='https:\u002F\u002Fexample.com\u002Fguide'>useful link\u003C\u002Fa>.\u003C\u002Fdiv>\n\u003Cbutton id='p' class='no-print'>Print this page\u003C\u002Fbutton>\n\u003Cscript>\n  document.getElementById('p').addEventListener('click', function () { window.print(); });\n\u003C\u002Fscript>",{"id":141,"language":16,"code":142,"is_editable":127},542,"\u003Cstyle>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; }\n  header { background: #264653; color: #fff; padding: 14px; }\n  .wrap { display: grid; gap: 12px; padding: 12px; }\n  .card { background: #eef2f7; padding: 16px; border-radius: 10px; }\n  @media (min-width: 560px) { .wrap { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 900px) { .wrap { grid-template-columns: repeat(3, 1fr); padding: 24px; gap: 20px; } }\n  @media (min-width: 700px) and (orientation: landscape) { header { padding: 10px 14px; } }\n  @media (max-height: 420px) { header { position: static; } }\n\u003C\u002Fstyle>\n\u003Cheader>Combined queries\u003C\u002Fheader>\n\u003Cdiv class='wrap'>\n  \u003Cdiv class='card'>1\u003C\u002Fdiv>\u003Cdiv class='card'>2\u003C\u002Fdiv>\u003Cdiv class='card'>3\u003C\u002Fdiv>\n  \u003Cdiv class='card'>4\u003C\u002Fdiv>\u003Cdiv class='card'>5\u003C\u002Fdiv>\u003Cdiv class='card'>6\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":144,"language":145,"code":146,"is_editable":127},543,"javascript","var queries = {\n  wide: '(min-width: 900px)',\n  dark: '(prefers-color-scheme: dark)',\n  reducedMotion: '(prefers-reduced-motion: reduce)',\n  touch: '(pointer: coarse)'\n};\n\nObject.keys(queries).forEach(function (name) {\n  var mql = window.matchMedia(queries[name]);\n  console.log(name + ' -> ' + queries[name] + ' matches: ' + mql.matches);\n  mql.addEventListener('change', function (event) {\n    console.log(name + ' changed, matches now: ' + event.matches);\n  });\n});\n\nconsole.log('Resize the preview or change system settings to see change events.');",[148,155],{"id":149,"title":150,"slug":151,"prompt":152,"starter_code":153,"expected_output":154,"language":16,"order_index":23},195,"Build a Three Breakpoint Grid","three-breakpoint-grid","Make the .cards container one column by default, two columns from 600px and four columns from 1000px using mobile-first min-width media queries. Keep a 16px gap.","\u003Cstyle>\n  .cards { display: grid; gap: 16px; }\n  .card { background: #8ecae6; padding: 16px; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='cards'>\u003Cdiv class='card'>1\u003C\u002Fdiv>\u003Cdiv class='card'>2\u003C\u002Fdiv>\u003Cdiv class='card'>3\u003C\u002Fdiv>\u003Cdiv class='card'>4\u003C\u002Fdiv>\u003Cdiv class='card'>5\u003C\u002Fdiv>\u003Cdiv class='card'>6\u003C\u002Fdiv>\u003Cdiv class='card'>7\u003C\u002Fdiv>\u003Cdiv class='card'>8\u003C\u002Fdiv>\u003C\u002Fdiv>","Base grid has one column, @media (min-width: 600px) uses 2 columns and @media (min-width: 1000px) uses 4 columns",{"id":156,"title":157,"slug":158,"prompt":159,"starter_code":160,"expected_output":161,"language":16,"order_index":12},196,"Write a Print Stylesheet","write-print-stylesheet","Add an @media print block that hides the nav and the button, sets body text to black on white at 12pt, prevents the article from breaking across pages, and prints the URL after each link.","\u003Cstyle>\n  body { font-family: system-ui, sans-serif; background: #f1f5f9; color: #334; }\n  nav { background: #264653; padding: 10px; }\n  nav a { color: #fff; }\n  article { background: #fff; padding: 16px; }\n\u003C\u002Fstyle>\n\u003Cnav>\u003Ca href='#'>Home\u003C\u002Fa>\u003C\u002Fnav>\n\u003Carticle>\u003Ch1>Guide\u003C\u002Fh1>\u003Cp>Read \u003Ca href='https:\u002F\u002Fexample.com\u002Fdocs'>the docs\u003C\u002Fa> for more.\u003C\u002Fp>\u003C\u002Farticle>\n\u003Cbutton>Subscribe\u003C\u002Fbutton>","A @media print block with nav and button set to display: none, body font-size 12pt with black text, article break-inside: avoid and a[href]::after showing attr(href)","2026-09-30T18:35:35+00:00",{"id":164,"slug":165,"title":166},135,"mobile-first-and-the-viewport","Mobile-First & the Viewport",{"id":168,"slug":169,"title":170},137,"responsive-images-and-video","Responsive Images & Video",{"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,217,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":51,"title":215,"slug":216,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":218,"title":219,"slug":220,"order_index":218,"cornerstone":52,"reading_time_minutes":23},9,"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":51,"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":218,"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":51,"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":218,"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":51,"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":51,"cornerstone":52,"reading_time_minutes":195},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":568,"title":569,"slug":570,"order_index":218,"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":218},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":51},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":51},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":51},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":724,"title":725,"slug":726,"order_index":383,"cornerstone":52,"reading_time_minutes":51},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":218},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":51},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":278,"name":43,"slug":44,"order_index":501,"topics":744},[745,746,747,748,752,756],{"id":164,"title":166,"slug":165,"order_index":412,"cornerstone":52,"reading_time_minutes":218},{"id":37,"title":38,"slug":39,"order_index":346,"cornerstone":52,"reading_time_minutes":51},{"id":168,"title":170,"slug":169,"order_index":351,"cornerstone":52,"reading_time_minutes":51},{"id":749,"title":750,"slug":751,"order_index":356,"cornerstone":52,"reading_time_minutes":218},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":753,"title":754,"slug":755,"order_index":361,"cornerstone":52,"reading_time_minutes":218},139,"Container Queries","container-queries",{"id":757,"title":758,"slug":759,"order_index":366,"cornerstone":52,"reading_time_minutes":230},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"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"]