[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:mobile-first-and-the-viewport":35,"course-tree":167},{"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":119,"quiz":5,"exercises":143,"published_at":5,"updated_at":158,"prev":159,"next":163},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport","\u003Ch2 id=\"mobile-first-css-and-the-viewport-complete-guide\">Mobile-First CSS and the Viewport: Complete Guide\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: mobile-first CSS.\u003C\u002Fstrong> Most web traffic today comes from phones. Mobile-first means you write the styles for the smallest screen first, then add complexity for larger screens with \u003Ccode>min-width\u003C\u002Fcode> media queries. Together with the viewport meta tag, it is the foundation of every responsive website. In this lesson you will learn how the viewport works, why mobile-first produces simpler CSS, how to use modern viewport units, how to handle notches with safe-area insets, how to size touch targets, and how to avoid the most common responsive bugs.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>mobile-first design, viewport meta tag, width=device-width initial-scale=1, layout viewport vs visual viewport, min-width media queries, mobile-first vs desktop-first, svh lvh dvh units, 100vw horizontal scroll, safe-area-inset env(), viewport-fit cover, touch target size, WCAG 2.2 target size, pointer coarse, hover hover, progressive enhancement, device pixel ratio, responsive web design basics, mobile SEO, Core Web Vitals on mobile.\u003C\u002Fp>\u003Ch2 id=\"1-what-is-mobile-first\">1. What Is Mobile-First?\u003C\u002Fh2>\u003Cp>Mobile-first is a way of writing CSS and of planning content. You start with a single column layout that works on a small phone, then you use \u003Ccode>@media (min-width: ...)\u003C\u002Fcode> to enhance the layout when more space is available. The base CSS is the mobile design, and media queries only add. This is the opposite of desktop-first, where you design a complex layout and then remove or undo things with \u003Ccode>max-width\u003C\u002Fcode> queries.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Simpler CSS:\u003C\u002Fstrong> small screens get the least CSS and the simplest layout, which is usually faster on slow phones and networks.\u003C\u002Fli>\u003Cli>\u003Cstrong>Fewer overrides:\u003C\u002Fstrong> you add rules instead of undoing rules.\u003C\u002Fli>\u003Cli>\u003Cstrong>Content priority:\u003C\u002Fstrong> it forces you to decide what is really important.\u003C\u002Fli>\u003Cli>\u003Cstrong>Progressive enhancement:\u003C\u002Fstrong> every browser gets a working baseline, and capable browsers get more.\u003C\u002Fli>\u003Cli>\u003Cstrong>SEO:\u003C\u002Fstrong> search engines index the mobile version of a page first.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-the-viewport-meta-tag\">2. The Viewport Meta Tag\u003C\u002Fh2>\u003Cp>Without a viewport tag, a mobile browser pretends the screen is about 980px wide and then shrinks the page, so your media queries never match the real screen width. Always add this tag inside the head: \u003Ccode><meta name='viewport' content='width=device-width, initial-scale=1'>\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>width=device-width\u003C\u002Fcode>: the layout viewport equals the screen width in CSS pixels.\u003C\u002Fli>\u003Cli>\u003Ccode>initial-scale=1\u003C\u002Fcode>: no initial zoom.\u003C\u002Fli>\u003Cli>\u003Ccode>viewport-fit=cover\u003C\u002Fcode>: lets the page draw under notches and rounded corners. Combine it with safe-area insets.\u003C\u002Fli>\u003Cli>\u003Ccode>interactive-widget=resizes-content\u003C\u002Fcode>: changes how the on-screen keyboard affects the layout in supporting browsers.\u003C\u002Fli>\u003Cli>\u003Cstrong>Never\u003C\u002Fstrong> add \u003Ccode>user-scalable=no\u003C\u002Fcode> or \u003Ccode>maximum-scale=1\u003C\u002Fcode>. They block pinch zoom and fail accessibility rules, because people with low vision need to zoom.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-layout-viewport-visual-viewport-and-css-pixels\">3. Layout Viewport, Visual Viewport and CSS Pixels\u003C\u002Fh2>\u003Cp>The \u003Cstrong>layout viewport\u003C\u002Fstrong> is the area your CSS layout uses. The \u003Cstrong>visual viewport\u003C\u002Fstrong> is the part the user currently sees, and it changes when the user pinch-zooms or when the keyboard opens. A \u003Cstrong>CSS pixel\u003C\u002Fstrong> is not a physical pixel. A high density phone may have a device pixel ratio of 3, which means one CSS pixel is drawn with 3 by 3 device pixels. That is why a phone with a 1170 physical pixel width reports about 390 CSS pixels, and why you should serve sharper images to high density screens.\u003C\u002Fp>\u003Ch2 id=\"4-mobile-first-media-queries\">4. Mobile-First Media Queries\u003C\u002Fh2>\u003Cp>Write the base styles with no query, then use \u003Ccode>min-width\u003C\u002Fcode>:\u003C\u002Fp>\u003Cul>\u003Cli>Base: single column, full width.\u003C\u002Fli>\u003Cli>\u003Ccode>@media (min-width: 600px)\u003C\u002Fcode>: two columns.\u003C\u002Fli>\u003Cli>\u003Ccode>@media (min-width: 960px)\u003C\u002Fcode>: three columns, sidebar, larger spacing.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Choose breakpoints where your content starts to look bad, not only at device sizes. Use \u003Ccode>em\u003C\u002Fcode> or \u003Ccode>px\u003C\u002Fcode> consistently. You will study media queries in detail in the next lesson.\u003C\u002Fp>\u003Ch2 id=\"5-viewport-units-vh-svh-lvh-and-dvh\">5. Viewport Units: vh, svh, lvh and dvh\u003C\u002Fh2>\u003Cp>On phones the address bar and toolbars appear and disappear, so \u003Ccode>100vh\u003C\u002Fcode> can be taller than the visible area and push content out of sight. Modern units solve it:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>svh\u003C\u002Fcode>: small viewport height, the visible height when browser bars are shown. Safe for content that must always be visible.\u003C\u002Fli>\u003Cli>\u003Ccode>lvh\u003C\u002Fcode>: large viewport height, when bars are hidden.\u003C\u002Fli>\u003Cli>\u003Ccode>dvh\u003C\u002Fcode>: dynamic viewport height, updates while bars move. Great for full screen sections, but it can cause layout changes while scrolling.\u003C\u002Fli>\u003Cli>The same family exists for width and for logical directions: \u003Ccode>svw\u003C\u002Fcode>, \u003Ccode>lvw\u003C\u002Fcode>, \u003Ccode>dvw\u003C\u002Fcode>, \u003Ccode>svi\u003C\u002Fcode>, \u003Ccode>dvb\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>A common pattern is \u003Ccode>min-height: 100svh\u003C\u002Fcode> for a hero and \u003Ccode>min-height: 100dvh\u003C\u002Fcode> for an app shell.\u003C\u002Fp>\u003Ch2 id=\"6-the-100vw-trap\">6. The 100vw Trap\u003C\u002Fh2>\u003Cp>\u003Ccode>width: 100vw\u003C\u002Fcode> includes the vertical scrollbar width on desktop, so the element becomes wider than the visible area and creates horizontal scrolling. Prefer \u003Ccode>width: 100%\u003C\u002Fcode> on block elements. A block element is already full width by default, so you often do not need a width at all. Also avoid fixed pixel widths larger than small phones, and use \u003Ccode>max-width: 100%\u003C\u002Fcode> for images and media.\u003C\u002Fp>\u003Ch2 id=\"7-safe-area-insets-for-notches\">7. Safe Area Insets for Notches\u003C\u002Fh2>\u003Cp>When you use \u003Ccode>viewport-fit=cover\u003C\u002Fcode>, use \u003Ccode>env(safe-area-inset-top)\u003C\u002Fcode>, \u003Ccode>env(safe-area-inset-right)\u003C\u002Fcode>, \u003Ccode>env(safe-area-inset-bottom)\u003C\u002Fcode> and \u003Ccode>env(safe-area-inset-left)\u003C\u002Fcode> to keep buttons and bars away from notches and gesture bars. Always give a fallback, for example \u003Ccode>env(safe-area-inset-bottom, 0px)\u003C\u002Fcode>. Combine with \u003Ccode>max()\u003C\u002Fcode>: \u003Ccode>padding-bottom: max(1rem, env(safe-area-inset-bottom))\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"8-touch-targets\">8. Touch Targets\u003C\u002Fh2>\u003Cp>Fingers are less precise than a mouse. WCAG 2.2 requires at least 24 by 24 CSS pixels for a target (level AA) and recommends 44 by 44 pixels (level AAA). Many platform guidelines use 44 to 48 pixels. Add padding instead of only making text bigger, and keep space between targets so users do not tap the wrong one.\u003C\u002Fp>\u003Ch2 id=\"9-input-capabilities-pointer-and-hover\">9. Input Capabilities: pointer and hover\u003C\u002Fh2>\u003Cp>Screen width does not tell you how the user interacts. A tablet can be wide and touch only, and a small laptop window can have a mouse. Use \u003Ccode>@media (pointer: coarse)\u003C\u002Fcode> for touch and \u003Ccode>@media (hover: hover)\u003C\u002Fcode> for devices that can really hover. Wrap hover-only effects inside \u003Ccode>(hover: hover)\u003C\u002Fcode> so touch devices do not get sticky hover states. Use \u003Ccode>any-pointer\u003C\u002Fcode> and \u003Ccode>any-hover\u003C\u002Fcode> when the device has more than one input.\u003C\u002Fp>\u003Ch2 id=\"10-mobile-first-workflow\">10. Mobile-First Workflow\u003C\u002Fh2>\u003Col>\u003Cli>Write semantic HTML and read it without CSS. The reading order should make sense on a phone.\u003C\u002Fli>\u003Cli>Add the viewport meta tag, a box-sizing reset and base typography.\u003C\u002Fli>\u003Cli>Style the single column mobile layout.\u003C\u002Fli>\u003Cli>Resize the browser wider. When the layout looks stretched or empty, add a breakpoint.\u003C\u002Fli>\u003Cli>Enhance with grid, flexbox and larger spacing inside \u003Ccode>min-width\u003C\u002Fcode> queries.\u003C\u002Fli>\u003Cli>Test in DevTools device mode, then on real phones, with zoom and with keyboard.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"11-performance-on-mobile\">11. Performance on Mobile\u003C\u002Fh2>\u003Cul>\u003Cli>Ship less CSS and JavaScript to small screens. Do not hide large desktop-only images with display none, because they may still download. Use responsive images.\u003C\u002Fli>\u003Cli>Use system fonts or a small number of web fonts with \u003Ccode>font-display: swap\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Lazy load images below the fold.\u003C\u002Fli>\u003Cli>Keep the layout stable to protect the Cumulative Layout Shift score.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"12-common-mistakes\">12. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting the viewport meta tag.\u003C\u002Fli>\u003Cli>Blocking zoom with user-scalable=no.\u003C\u002Fli>\u003Cli>Writing desktop-first CSS and then fighting max-width overrides.\u003C\u002Fli>\u003Cli>Using 100vw and creating a horizontal scrollbar.\u003C\u002Fli>\u003Cli>Using 100vh for full screen sections on phones and cutting off content.\u003C\u002Fli>\u003Cli>Tiny tap targets placed close together.\u003C\u002Fli>\u003Cli>Hover-only menus and tooltips that cannot be used on touch screens.\u003C\u002Fli>\u003Cli>Testing only in a resized desktop window and never on a real device.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Add the viewport meta tag, write the small screen layout as your base, enhance with min-width queries, use svh, lvh and dvh instead of a risky 100vh, protect notches with safe-area insets, make touch targets large, and detect input with pointer and hover rather than guessing from width.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><meta name='viewport' content='width=device-width, initial-scale=1'>\n<style>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 1rem\u002F1.6 system-ui, sans-serif; }\n  .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }\n  header { background: #264653; color: #fff; padding: 1rem 0; }\n  .grid { display: grid; gap: 1rem; padding-block: 1.5rem; }\n  .card { background: #eef2f7; padding: 1rem; border-radius: 12px; }\n  @media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }\n<\u002Fstyle>\n<header><div class='container'><strong>Mobile-first page<\u002Fstrong><\u002Fdiv><\u002Fheader>\n<main class='container'>\n  <div class='grid'>\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>\n<\u002Fmain>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 14px; margin-bottom: 12px; border-radius: 8px; }\n\n  \u002F* Mobile-first: base = small screen, then add *\u002F\n  .mf { background: #2a9d8f; }\n  .mf::after { content: ' (base styles)'; }\n  @media (min-width: 600px) {\n    .mf { background: #e76f51; }\n    .mf::after { content: ' (600px and wider)'; }\n  }\n\n  \u002F* Desktop-first: base = large screen, then undo *\u002F\n  .df { background: #e76f51; }\n  .df::after { content: ' (base styles)'; }\n  @media (max-width: 599px) {\n    .df { background: #2a9d8f; }\n    .df::after { content: ' (599px and narrower, an override)'; }\n  }\n<\u002Fstyle>\n<div class='box mf'>Mobile-first with min-width<\u002Fdiv>\n<div class='box df'>Desktop-first with max-width<\u002Fdiv>\n<p>Resize the preview: both look the same, but the mobile-first CSS never has to undo anything.<\u002Fp>\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; }\n  .btn { min-height: 44px; min-width: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #0b5fff; color: #fff; font: inherit; margin: 0 8px 8px 0; }\n  @media (pointer: coarse) { .btn { min-height: 52px; } }\n  @media (hover: hover) { .btn:hover { background: #0847c4; } }\n  .hint::after { content: 'Fine pointer (mouse or trackpad)'; }\n  @media (pointer: coarse) { .hint::after { content: 'Coarse pointer (touch screen)'; } }\n  .hover::after { content: 'Hover is NOT available'; }\n  @media (hover: hover) { .hover::after { content: 'Hover is available'; } }\n<\u002Fstyle>\n<button class='btn'>Save<\u002Fbutton><button class='btn'>Share<\u002Fbutton>\n<p class='hint'>Primary input: <\u002Fp>\n<p class='hover'>Hover support: <\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font: 14px system-ui, sans-serif; padding: 12px; }\n  .bars { display: flex; gap: 12px; align-items: flex-end; height: 40vh; border-bottom: 2px solid #888; }\n  .bar { flex: 1; color: #fff; padding: 6px; border-radius: 6px 6px 0 0; }\n  .vh { height: 30vh; background: #264653; }\n  .svh { height: 30svh; background: #2a9d8f; }\n  .lvh { height: 30lvh; background: #e9c46a; color: #111; }\n  .dvh { height: 30dvh; background: #e76f51; }\n<\u002Fstyle>\n<div class='bars'>\n  <div class='bar vh'>30vh<\u002Fdiv>\n  <div class='bar svh'>30svh<\u002Fdiv>\n  <div class='bar lvh'>30lvh<\u002Fdiv>\n  <div class='bar dvh'>30dvh<\u002Fdiv>\n<\u002Fdiv>\n<p>On a phone with a retracting address bar, svh stays small, lvh stays large and dvh follows the bars. On desktop they are equal.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><meta name='viewport' content='width=device-width, initial-scale=1, viewport-fit=cover'>\n<style>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; padding: 16px 16px 90px; }\n  .tabbar {\n    position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-around;\n    background: #264653; color: #fff;\n    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));\n  }\n  .tabbar a { color: #fff; text-decoration: none; padding: 10px 14px; min-height: 44px; }\n<\u002Fstyle>\n<h2>Safe area example<\u002Fh2>\n<p>The bottom bar adds env(safe-area-inset-bottom) so it stays above the gesture bar on phones with viewport-fit=cover.<\u002Fp>\n<nav class='tabbar' aria-label='Tabs'><a href='#'>Home<\u002Fa><a href='#'>Search<\u002Fa><a href='#'>Profile<\u002Fa><\u002Fnav>\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; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }\n  header, footer { background: #264653; color: #fff; padding: 14px; }\n  .layout { display: grid; gap: 12px; padding: 12px; grid-template-areas: 'nav' 'main' 'aside'; }\n  nav { grid-area: nav; background: #e9c46a; padding: 12px; }\n  main { grid-area: main; background: #8ecae6; padding: 12px; }\n  aside { grid-area: aside; background: #ffb703; padding: 12px; }\n  @media (min-width: 700px) {\n    .layout { grid-template-columns: 180px 1fr; grid-template-areas: 'nav main' 'nav aside'; }\n  }\n  @media (min-width: 1000px) {\n    .layout { grid-template-columns: 200px 1fr 240px; grid-template-areas: 'nav main aside'; }\n  }\n<\u002Fstyle>\n<header>Header<\u002Fheader>\n<div class='layout'><nav>Nav<\u002Fnav><main>Main content first in the flow<\u002Fmain><aside>Aside<\u002Faside><\u002Fdiv>\n<footer>Footer<\u002Ffooter>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>var width = window.innerWidth;\nvar height = window.innerHeight;\n\nconsole.log('Layout viewport: ' + width + ' x ' + height + ' CSS pixels');\nconsole.log('Device pixel ratio: ' + window.devicePixelRatio);\n\nif (window.visualViewport) {\n  console.log('Visual viewport scale: ' + window.visualViewport.scale);\n}\n\nvar breakpoints = [\n  { name: 'base (mobile)', min: 0 },\n  { name: 'sm', min: 600 },\n  { name: 'md', min: 960 }\n];\n\nvar current = breakpoints[0];\nbreakpoints.forEach(function (bp) {\n  if (width >= bp.min) { current = bp; }\n});\n\nconsole.log('Active mobile-first breakpoint: ' + current.name);\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\u002Fmobile-first-and-the-viewport","Mobile-First CSS & the Viewport Meta Tag: Complete Guide","Learn mobile-first CSS and the viewport meta tag: min-width queries, svh dvh lvh units, safe-area insets, touch targets, pointer and hover queries, with live examples.",[58,67,71,75,79,83,87,91,95,99,103,107,111,115],{"id":59,"text":60,"level":12,"children":61},"mobile-first-css-and-the-viewport-complete-guide","Mobile-First CSS and the Viewport: 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-what-is-mobile-first","1. What Is Mobile-First?",[],{"id":72,"text":73,"level":12,"children":74},"2-the-viewport-meta-tag","2. The Viewport Meta Tag",[],{"id":76,"text":77,"level":12,"children":78},"3-layout-viewport-visual-viewport-and-css-pixels","3. Layout Viewport, Visual Viewport and CSS Pixels",[],{"id":80,"text":81,"level":12,"children":82},"4-mobile-first-media-queries","4. Mobile-First Media Queries",[],{"id":84,"text":85,"level":12,"children":86},"5-viewport-units-vh-svh-lvh-and-dvh","5. Viewport Units: vh, svh, lvh and dvh",[],{"id":88,"text":89,"level":12,"children":90},"6-the-100vw-trap","6. The 100vw Trap",[],{"id":92,"text":93,"level":12,"children":94},"7-safe-area-insets-for-notches","7. Safe Area Insets for Notches",[],{"id":96,"text":97,"level":12,"children":98},"8-touch-targets","8. Touch Targets",[],{"id":100,"text":101,"level":12,"children":102},"9-input-capabilities-pointer-and-hover","9. Input Capabilities: pointer and hover",[],{"id":104,"text":105,"level":12,"children":106},"10-mobile-first-workflow","10. Mobile-First Workflow",[],{"id":108,"text":109,"level":12,"children":110},"11-performance-on-mobile","11. Performance on Mobile",[],{"id":112,"text":113,"level":12,"children":114},"12-common-mistakes","12. Common Mistakes",[],{"id":116,"text":117,"level":12,"children":118},"key-takeaways","Key Takeaways",[],[120,124,127,130,133,136,139],{"id":121,"language":16,"code":122,"is_editable":123},530,"\u003Cmeta name='viewport' content='width=device-width, initial-scale=1'>\n\u003Cstyle>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 1rem\u002F1.6 system-ui, sans-serif; }\n  .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }\n  header { background: #264653; color: #fff; padding: 1rem 0; }\n  .grid { display: grid; gap: 1rem; padding-block: 1.5rem; }\n  .card { background: #eef2f7; padding: 1rem; border-radius: 12px; }\n  @media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }\n  @media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }\n\u003C\u002Fstyle>\n\u003Cheader>\u003Cdiv class='container'>\u003Cstrong>Mobile-first page\u003C\u002Fstrong>\u003C\u002Fdiv>\u003C\u002Fheader>\n\u003Cmain class='container'>\n  \u003Cdiv class='grid'>\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>\n\u003C\u002Fmain>",true,{"id":125,"language":16,"code":126,"is_editable":123},531,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { color: #fff; padding: 14px; margin-bottom: 12px; border-radius: 8px; }\n\n  \u002F* Mobile-first: base = small screen, then add *\u002F\n  .mf { background: #2a9d8f; }\n  .mf::after { content: ' (base styles)'; }\n  @media (min-width: 600px) {\n    .mf { background: #e76f51; }\n    .mf::after { content: ' (600px and wider)'; }\n  }\n\n  \u002F* Desktop-first: base = large screen, then undo *\u002F\n  .df { background: #e76f51; }\n  .df::after { content: ' (base styles)'; }\n  @media (max-width: 599px) {\n    .df { background: #2a9d8f; }\n    .df::after { content: ' (599px and narrower, an override)'; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='box mf'>Mobile-first with min-width\u003C\u002Fdiv>\n\u003Cdiv class='box df'>Desktop-first with max-width\u003C\u002Fdiv>\n\u003Cp>Resize the preview: both look the same, but the mobile-first CSS never has to undo anything.\u003C\u002Fp>",{"id":128,"language":16,"code":129,"is_editable":123},532,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .btn { min-height: 44px; min-width: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #0b5fff; color: #fff; font: inherit; margin: 0 8px 8px 0; }\n  @media (pointer: coarse) { .btn { min-height: 52px; } }\n  @media (hover: hover) { .btn:hover { background: #0847c4; } }\n  .hint::after { content: 'Fine pointer (mouse or trackpad)'; }\n  @media (pointer: coarse) { .hint::after { content: 'Coarse pointer (touch screen)'; } }\n  .hover::after { content: 'Hover is NOT available'; }\n  @media (hover: hover) { .hover::after { content: 'Hover is available'; } }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Save\u003C\u002Fbutton>\u003Cbutton class='btn'>Share\u003C\u002Fbutton>\n\u003Cp class='hint'>Primary input: \u003C\u002Fp>\n\u003Cp class='hover'>Hover support: \u003C\u002Fp>",{"id":131,"language":16,"code":132,"is_editable":123},533,"\u003Cstyle>\n  body { margin: 0; font: 14px system-ui, sans-serif; padding: 12px; }\n  .bars { display: flex; gap: 12px; align-items: flex-end; height: 40vh; border-bottom: 2px solid #888; }\n  .bar { flex: 1; color: #fff; padding: 6px; border-radius: 6px 6px 0 0; }\n  .vh { height: 30vh; background: #264653; }\n  .svh { height: 30svh; background: #2a9d8f; }\n  .lvh { height: 30lvh; background: #e9c46a; color: #111; }\n  .dvh { height: 30dvh; background: #e76f51; }\n\u003C\u002Fstyle>\n\u003Cdiv class='bars'>\n  \u003Cdiv class='bar vh'>30vh\u003C\u002Fdiv>\n  \u003Cdiv class='bar svh'>30svh\u003C\u002Fdiv>\n  \u003Cdiv class='bar lvh'>30lvh\u003C\u002Fdiv>\n  \u003Cdiv class='bar dvh'>30dvh\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>On a phone with a retracting address bar, svh stays small, lvh stays large and dvh follows the bars. On desktop they are equal.\u003C\u002Fp>",{"id":134,"language":16,"code":135,"is_editable":123},534,"\u003Cmeta name='viewport' content='width=device-width, initial-scale=1, viewport-fit=cover'>\n\u003Cstyle>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; padding: 16px 16px 90px; }\n  .tabbar {\n    position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-around;\n    background: #264653; color: #fff;\n    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));\n  }\n  .tabbar a { color: #fff; text-decoration: none; padding: 10px 14px; min-height: 44px; }\n\u003C\u002Fstyle>\n\u003Ch2>Safe area example\u003C\u002Fh2>\n\u003Cp>The bottom bar adds env(safe-area-inset-bottom) so it stays above the gesture bar on phones with viewport-fit=cover.\u003C\u002Fp>\n\u003Cnav class='tabbar' aria-label='Tabs'>\u003Ca href='#'>Home\u003C\u002Fa>\u003Ca href='#'>Search\u003C\u002Fa>\u003Ca href='#'>Profile\u003C\u002Fa>\u003C\u002Fnav>",{"id":137,"language":16,"code":138,"is_editable":123},535,"\u003Cstyle>\n  *, *::before, *::after { box-sizing: border-box; }\n  body { margin: 0; font: 16px system-ui, sans-serif; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }\n  header, footer { background: #264653; color: #fff; padding: 14px; }\n  .layout { display: grid; gap: 12px; padding: 12px; grid-template-areas: 'nav' 'main' 'aside'; }\n  nav { grid-area: nav; background: #e9c46a; padding: 12px; }\n  main { grid-area: main; background: #8ecae6; padding: 12px; }\n  aside { grid-area: aside; background: #ffb703; padding: 12px; }\n  @media (min-width: 700px) {\n    .layout { grid-template-columns: 180px 1fr; grid-template-areas: 'nav main' 'nav aside'; }\n  }\n  @media (min-width: 1000px) {\n    .layout { grid-template-columns: 200px 1fr 240px; grid-template-areas: 'nav main aside'; }\n  }\n\u003C\u002Fstyle>\n\u003Cheader>Header\u003C\u002Fheader>\n\u003Cdiv class='layout'>\u003Cnav>Nav\u003C\u002Fnav>\u003Cmain>Main content first in the flow\u003C\u002Fmain>\u003Caside>Aside\u003C\u002Faside>\u003C\u002Fdiv>\n\u003Cfooter>Footer\u003C\u002Ffooter>",{"id":140,"language":141,"code":142,"is_editable":123},536,"javascript","var width = window.innerWidth;\nvar height = window.innerHeight;\n\nconsole.log('Layout viewport: ' + width + ' x ' + height + ' CSS pixels');\nconsole.log('Device pixel ratio: ' + window.devicePixelRatio);\n\nif (window.visualViewport) {\n  console.log('Visual viewport scale: ' + window.visualViewport.scale);\n}\n\nvar breakpoints = [\n  { name: 'base (mobile)', min: 0 },\n  { name: 'sm', min: 600 },\n  { name: 'md', min: 960 }\n];\n\nvar current = breakpoints[0];\nbreakpoints.forEach(function (bp) {\n  if (width >= bp.min) { current = bp; }\n});\n\nconsole.log('Active mobile-first breakpoint: ' + current.name);",[144,151],{"id":145,"title":146,"slug":147,"prompt":148,"starter_code":149,"expected_output":150,"language":16,"order_index":23},193,"Convert a Desktop-First Layout to Mobile-First","convert-desktop-first-to-mobile-first","The CSS below starts with the desktop layout and undoes it with max-width. Rewrite it mobile-first: the base styles must be a stacked single column, and a min-width: 700px query must create the row with a 240px sidebar.","\u003Cstyle>\n  .layout { display: flex; gap: 16px; }\n  .side { width: 240px; background: #e9c46a; padding: 12px; }\n  .main { flex: 1; background: #8ecae6; padding: 12px; }\n  @media (max-width: 699px) {\n    .layout { display: block; }\n    .side { width: auto; margin-bottom: 16px; }\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='layout'>\u003Caside class='side'>Sidebar\u003C\u002Faside>\u003Cmain class='main'>Main\u003C\u002Fmain>\u003C\u002Fdiv>","Base styles are stacked with no max-width query, and @media (min-width: 700px) adds display: flex and the 240px sidebar",{"id":152,"title":153,"slug":154,"prompt":155,"starter_code":156,"expected_output":157,"language":16,"order_index":12},194,"Fix the Horizontal Scroll and the Viewport","fix-horizontal-scroll-and-viewport","Add the correct viewport meta tag and remove the horizontal scrollbar caused by width: 100vw. Also replace the fixed 900px width with a flexible width that never exceeds 900px, and do not block user zoom.","\u003Cstyle>\n  body { margin: 0; font-family: system-ui, sans-serif; }\n  .hero { width: 100vw; background: #264653; color: #fff; padding: 24px; }\n  .content { width: 900px; background: #eef2f7; padding: 16px; margin: 0 auto; }\n\u003C\u002Fstyle>\n\u003Cdiv class='hero'>Hero\u003C\u002Fdiv>\n\u003Cdiv class='content'>Content\u003C\u002Fdiv>","A meta viewport tag with width=device-width, initial-scale=1 and no user-scalable=no, the hero without 100vw, and .content using width: min(100%, 900px) or max-width: 900px","2026-09-30T18:35:35+00:00",{"id":160,"slug":161,"title":162},134,"css-reset-and-normalize","CSS Reset & Normalize",{"id":164,"slug":165,"title":166},136,"media-queries","Media Queries",{"data":168},[169,489],{"id":23,"name":15,"slug":170,"icon":5,"icon_url":5,"short_description":171,"meta_title":172,"meta_description":173,"og_image":174,"locale":175,"subcategories":176},"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",[177,202,237,261,337,371,385,413,437,453],{"id":23,"name":178,"slug":179,"order_index":23,"topics":180},"HTML Fundamentals & Setup","html-fundamentals-setup",[181,184,187,190,194,198],{"id":12,"title":182,"slug":183,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":185,"slug":186,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":188,"slug":189,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":191,"title":192,"slug":193,"order_index":191,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":199,"title":200,"slug":201,"order_index":199,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":203,"slug":204,"order_index":12,"topics":205},"Text & Content Basics","text-content-basics",[206,210,214,217,221,225,229,233],{"id":207,"title":208,"slug":209,"order_index":207,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":211,"title":212,"slug":213,"order_index":211,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":51,"title":215,"slug":216,"order_index":51,"cornerstone":52,"reading_time_minutes":23},"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":218,"title":219,"slug":220,"order_index":218,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":226,"title":227,"slug":228,"order_index":226,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":234,"title":235,"slug":236,"order_index":234,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":238,"slug":239,"order_index":65,"topics":240},"Links, Media & Navigation","links-media-navigation",[241,245,249,253,257],{"id":242,"title":243,"slug":244,"order_index":242,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":246,"title":247,"slug":248,"order_index":246,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":250,"title":251,"slug":252,"order_index":250,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":254,"title":255,"slug":256,"order_index":254,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":258,"title":259,"slug":260,"order_index":258,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":191,"name":262,"slug":263,"order_index":191,"topics":264},"Structuring Content","structuring-content",[265,270,275,280,285,289,293,297,301,305,309,313,317,321,325,329,333],{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":281,"title":282,"slug":283,"order_index":284,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":286,"title":287,"slug":288,"order_index":266,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":290,"title":291,"slug":292,"order_index":271,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":294,"title":295,"slug":296,"order_index":276,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":298,"title":299,"slug":300,"order_index":281,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":302,"title":303,"slug":304,"order_index":286,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":306,"title":307,"slug":308,"order_index":290,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":310,"title":311,"slug":312,"order_index":294,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":314,"title":315,"slug":316,"order_index":298,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":318,"title":319,"slug":320,"order_index":302,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":322,"title":323,"slug":324,"order_index":322,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":326,"title":327,"slug":328,"order_index":326,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":330,"title":331,"slug":332,"order_index":330,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":334,"title":335,"slug":336,"order_index":334,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":207,"name":338,"slug":339,"order_index":195,"topics":340},"Forms & User Input","forms-user-input",[341,346,351,356,361,366],{"id":342,"title":343,"slug":344,"order_index":345,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":347,"title":348,"slug":349,"order_index":350,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":352,"title":353,"slug":354,"order_index":355,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":357,"title":358,"slug":359,"order_index":360,"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":362,"title":363,"slug":364,"order_index":365,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":367,"title":368,"slug":369,"order_index":370,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":211,"name":372,"slug":373,"order_index":199,"topics":374},"Graphics & Visuals","graphics-visuals",[375,380],{"id":376,"title":377,"slug":378,"order_index":379,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":381,"title":382,"slug":383,"order_index":384,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":51,"name":386,"slug":387,"order_index":207,"topics":388},"Multimedia","multimedia",[389,394,399,404,409],{"id":390,"title":391,"slug":392,"order_index":393,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":395,"title":396,"slug":397,"order_index":398,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":400,"title":401,"slug":402,"order_index":403,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":405,"title":406,"slug":407,"order_index":408,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":410,"title":411,"slug":412,"order_index":342,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":218,"name":414,"slug":415,"order_index":211,"topics":416},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[417,421,425,429,433],{"id":418,"title":419,"slug":420,"order_index":347,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":422,"title":423,"slug":424,"order_index":352,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":426,"title":427,"slug":428,"order_index":357,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":430,"title":431,"slug":432,"order_index":362,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":434,"title":435,"slug":436,"order_index":367,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":222,"name":438,"slug":439,"order_index":51,"topics":440},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[441,445,449],{"id":442,"title":443,"slug":444,"order_index":376,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":446,"title":447,"slug":448,"order_index":381,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":450,"title":451,"slug":452,"order_index":390,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":226,"name":454,"slug":455,"order_index":218,"topics":456},"Reference & Practice","reference-practice",[457,461,465,469,473,477,481,485],{"id":458,"title":459,"slug":460,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":462,"title":463,"slug":464,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":466,"title":467,"slug":468,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":470,"title":471,"slug":472,"order_index":191,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":474,"title":475,"slug":476,"order_index":195,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":478,"title":479,"slug":480,"order_index":199,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":482,"title":483,"slug":484,"order_index":207,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":486,"title":487,"slug":488,"order_index":211,"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":490,"meta_title":491,"meta_description":492,"og_image":5,"locale":175,"subcategories":493},"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.",[494,523,547,583,615,647,679,711,736,756],{"id":284,"name":495,"slug":496,"order_index":497,"topics":498},"UI Components","ui-components",0,[499,503,507,511,515,519],{"id":500,"title":501,"slug":502,"order_index":410,"cornerstone":52,"reading_time_minutes":199},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":504,"title":505,"slug":506,"order_index":418,"cornerstone":52,"reading_time_minutes":199},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":508,"title":509,"slug":510,"order_index":422,"cornerstone":52,"reading_time_minutes":207},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":512,"title":513,"slug":514,"order_index":426,"cornerstone":52,"reading_time_minutes":199},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":516,"title":517,"slug":518,"order_index":430,"cornerstone":52,"reading_time_minutes":199},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":520,"title":521,"slug":522,"order_index":434,"cornerstone":52,"reading_time_minutes":199},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":230,"name":524,"slug":525,"order_index":497,"topics":526},"CSS Fundamentals & Setup","css-fundamentals-setup",[527,531,535,539,543],{"id":528,"title":529,"slug":530,"order_index":23,"cornerstone":52,"reading_time_minutes":191},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":532,"title":533,"slug":534,"order_index":12,"cornerstone":52,"reading_time_minutes":191},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":536,"title":537,"slug":538,"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":540,"title":541,"slug":542,"order_index":191,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":544,"title":545,"slug":546,"order_index":195,"cornerstone":52,"reading_time_minutes":195},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":234,"name":548,"slug":549,"order_index":497,"topics":550},"Selectors & the Cascade","selectors-the-cascade",[551,555,559,563,567,571,575,579],{"id":552,"title":553,"slug":554,"order_index":199,"cornerstone":52,"reading_time_minutes":191},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":556,"title":557,"slug":558,"order_index":207,"cornerstone":52,"reading_time_minutes":191},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":560,"title":561,"slug":562,"order_index":211,"cornerstone":52,"reading_time_minutes":191},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":564,"title":565,"slug":566,"order_index":51,"cornerstone":52,"reading_time_minutes":199},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":568,"title":569,"slug":570,"order_index":218,"cornerstone":52,"reading_time_minutes":195},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":572,"title":573,"slug":574,"order_index":222,"cornerstone":52,"reading_time_minutes":195},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":576,"title":577,"slug":578,"order_index":226,"cornerstone":52,"reading_time_minutes":191},93,"CSS Specificity Explained","css-specificity-explained",{"id":580,"title":581,"slug":582,"order_index":230,"cornerstone":52,"reading_time_minutes":195},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":242,"name":584,"slug":585,"order_index":497,"topics":586},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[587,591,595,599,603,607,611],{"id":588,"title":589,"slug":590,"order_index":234,"cornerstone":52,"reading_time_minutes":195},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":592,"title":593,"slug":594,"order_index":242,"cornerstone":52,"reading_time_minutes":191},96,"CSS Backgrounds","css-backgrounds",{"id":596,"title":597,"slug":598,"order_index":246,"cornerstone":52,"reading_time_minutes":195},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":600,"title":601,"slug":602,"order_index":250,"cornerstone":52,"reading_time_minutes":195},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":604,"title":605,"slug":606,"order_index":254,"cornerstone":52,"reading_time_minutes":199},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":608,"title":609,"slug":610,"order_index":258,"cornerstone":52,"reading_time_minutes":195},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":612,"title":613,"slug":614,"order_index":269,"cornerstone":52,"reading_time_minutes":199},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":246,"name":616,"slug":617,"order_index":497,"topics":618},"Box Model & Spacing","box-model-spacing",[619,623,627,631,635,639,643],{"id":620,"title":621,"slug":622,"order_index":274,"cornerstone":52,"reading_time_minutes":207},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":624,"title":625,"slug":626,"order_index":279,"cornerstone":52,"reading_time_minutes":207},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":628,"title":629,"slug":630,"order_index":284,"cornerstone":52,"reading_time_minutes":199},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":632,"title":633,"slug":634,"order_index":266,"cornerstone":52,"reading_time_minutes":51},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":636,"title":637,"slug":638,"order_index":271,"cornerstone":52,"reading_time_minutes":195},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":640,"title":641,"slug":642,"order_index":276,"cornerstone":52,"reading_time_minutes":207},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":644,"title":645,"slug":646,"order_index":281,"cornerstone":52,"reading_time_minutes":207},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":250,"name":648,"slug":649,"order_index":497,"topics":650},"Typography & Text","typography-text",[651,655,659,663,667,671,675],{"id":652,"title":653,"slug":654,"order_index":286,"cornerstone":52,"reading_time_minutes":207},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":656,"title":657,"slug":658,"order_index":290,"cornerstone":52,"reading_time_minutes":207},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":660,"title":661,"slug":662,"order_index":294,"cornerstone":52,"reading_time_minutes":207},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":664,"title":665,"slug":666,"order_index":298,"cornerstone":52,"reading_time_minutes":207},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":668,"title":669,"slug":670,"order_index":302,"cornerstone":52,"reading_time_minutes":211},113,"Styling Links","styling-links-css",{"id":672,"title":673,"slug":674,"order_index":322,"cornerstone":52,"reading_time_minutes":207},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":676,"title":677,"slug":678,"order_index":326,"cornerstone":52,"reading_time_minutes":218},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":254,"name":680,"slug":681,"order_index":497,"topics":682},"Display, Position & Layout Basics","display-position-layout-basics",[683,687,691,695,699,703,707],{"id":684,"title":685,"slug":686,"order_index":330,"cornerstone":52,"reading_time_minutes":207},116,"Display & Inline-block","display-and-inline-block",{"id":688,"title":689,"slug":690,"order_index":334,"cornerstone":52,"reading_time_minutes":199},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":692,"title":693,"slug":694,"order_index":345,"cornerstone":52,"reading_time_minutes":199},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":696,"title":697,"slug":698,"order_index":350,"cornerstone":52,"reading_time_minutes":195},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":700,"title":701,"slug":702,"order_index":355,"cornerstone":52,"reading_time_minutes":199},120,"Centering Techniques","centering-techniques",{"id":704,"title":705,"slug":706,"order_index":360,"cornerstone":52,"reading_time_minutes":207},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":708,"title":709,"slug":710,"order_index":365,"cornerstone":52,"reading_time_minutes":211},122,"Website Layout Basics","website-layout-basics",{"id":269,"name":712,"slug":713,"order_index":497,"topics":714},"The Modern CSS Toolkit","the-modern-css-toolkit",[715,719,723,727,731,735],{"id":716,"title":717,"slug":718,"order_index":370,"cornerstone":52,"reading_time_minutes":211},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":720,"title":721,"slug":722,"order_index":379,"cornerstone":52,"reading_time_minutes":211},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":724,"title":725,"slug":726,"order_index":384,"cornerstone":52,"reading_time_minutes":207},131,"Native CSS Nesting","native-css-nesting",{"id":728,"title":729,"slug":730,"order_index":393,"cornerstone":52,"reading_time_minutes":207},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":732,"title":733,"slug":734,"order_index":398,"cornerstone":52,"reading_time_minutes":51},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":160,"title":162,"slug":161,"order_index":403,"cornerstone":52,"reading_time_minutes":211},{"id":274,"name":43,"slug":44,"order_index":497,"topics":737},[738,739,740,744,748,752],{"id":37,"title":38,"slug":39,"order_index":408,"cornerstone":52,"reading_time_minutes":51},{"id":164,"title":166,"slug":165,"order_index":342,"cornerstone":52,"reading_time_minutes":211},{"id":741,"title":742,"slug":743,"order_index":347,"cornerstone":52,"reading_time_minutes":211},137,"Responsive Images & Video","responsive-images-and-video",{"id":745,"title":746,"slug":747,"order_index":352,"cornerstone":52,"reading_time_minutes":51},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":749,"title":750,"slug":751,"order_index":357,"cornerstone":52,"reading_time_minutes":51},139,"Container Queries","container-queries",{"id":753,"title":754,"slug":755,"order_index":362,"cornerstone":52,"reading_time_minutes":226},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":279,"name":757,"slug":758,"order_index":497,"topics":759},"Transitions & Animation","transitions-animation",[760,764,768,772,776,780,784],{"id":761,"title":762,"slug":763,"order_index":367,"cornerstone":52,"reading_time_minutes":195},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":765,"title":766,"slug":767,"order_index":376,"cornerstone":52,"reading_time_minutes":191},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":769,"title":770,"slug":771,"order_index":381,"cornerstone":52,"reading_time_minutes":195},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":773,"title":774,"slug":775,"order_index":390,"cornerstone":52,"reading_time_minutes":195},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":777,"title":778,"slug":779,"order_index":395,"cornerstone":52,"reading_time_minutes":195},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":781,"title":782,"slug":783,"order_index":400,"cornerstone":52,"reading_time_minutes":195},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":785,"title":786,"slug":787,"order_index":405,"cornerstone":52,"reading_time_minutes":199},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]