[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-3d-transforms":6,"blog-categories":100,"course-tree":124},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":67,"quiz":5,"exercises":82,"published_at":5,"updated_at":91,"prev":92,"next":96},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms","\u003Ch2 id=\"what-are-css-3d-transforms\">What are CSS 3D transforms?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS 3D transforms\u003C\u002Fstrong> extend the 2D transform system with a third axis (Z), so elements can rotate in depth, move toward or away from the viewer and form real 3D objects like cards and cubes. With only CSS you can create flip cards, tilt effects, carousels, 3D buttons and product showcases.\u003C\u002Fp>\u003Cp>Focus keyword: \u003Cstrong>CSS 3D transforms\u003C\u002Fstrong>. Related trending keywords: \u003Cem>CSS perspective\u003C\u002Fem>, \u003Cem>transform-style preserve-3d\u003C\u002Fem>, \u003Cem>CSS flip card\u003C\u002Fem>, \u003Cem>CSS 3D cube\u003C\u002Fem>, \u003Cem>backface-visibility hidden\u003C\u002Fem>, \u003Cem>3D card tilt effect\u003C\u002Fem>, \u003Cem>rotateY hover animation\u003C\u002Fem>.\u003C\u002Fp>\u003Ch2 id=\"the-three-axes\">The three axes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>X axis\u003C\u002Fstrong>: horizontal (left to right). \u003Ccode>rotateX()\u003C\u002Fcode> tilts the element forward or backward like a laptop lid.\u003C\u002Fli>\u003Cli>\u003Cstrong>Y axis\u003C\u002Fstrong>: vertical (top to bottom). \u003Ccode>rotateY()\u003C\u002Fcode> turns the element like a revolving door.\u003C\u002Fli>\u003Cli>\u003Cstrong>Z axis\u003C\u002Fstrong>: depth (toward or away from you). \u003Ccode>translateZ()\u003C\u002Fcode> moves it closer or farther, and \u003Ccode>rotateZ()\u003C\u002Fcode> is the same as 2D \u003Ccode>rotate()\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3d-transform-functions\">3D transform functions\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>rotateX(a)\u003C\u002Fcode>, \u003Ccode>rotateY(a)\u003C\u002Fcode>, \u003Ccode>rotateZ(a)\u003C\u002Fcode>, \u003Ccode>rotate3d(x, y, z, a)\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>translateZ(d)\u003C\u002Fcode>, \u003Ccode>translate3d(x, y, z)\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>scaleZ(n)\u003C\u002Fcode>, \u003Ccode>scale3d(x, y, z)\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>perspective(d)\u003C\u002Fcode>: a function that applies perspective to a single element\u003C\u002Fli>\u003Cli>\u003Ccode>matrix3d(...)\u003C\u002Fcode>: 16 values that define any 3D transform\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"perspective-the-key-to-depth\">perspective: the key to depth\u003C\u002Fh2>\u003Cp>Without perspective, 3D rotation looks flat. The \u003Ccode>perspective\u003C\u002Fcode> property goes on the \u003Cstrong>parent\u003C\u002Fstrong> and sets how far the viewer is from the scene. Smaller values (like \u003Ccode>300px\u003C\u002Fcode>) give a dramatic, strong effect. Larger values (like \u003Ccode>1200px\u003C\u002Fcode>) give a subtle, natural look. The \u003Ccode>perspective-origin\u003C\u002Fcode> property moves the vanishing point (default \u003Ccode>50% 50%\u003C\u002Fcode>).\u003C\u002Fp>\u003Cp>Alternative: use \u003Ccode>transform: perspective(600px) rotateY(30deg)\u003C\u002Fcode> on the element itself. This is quick for single elements, but for groups of children the parent \u003Ccode>perspective\u003C\u002Fcode> property gives them a shared vanishing point.\u003C\u002Fp>\u003Ch2 id=\"transform-style-preserve-3d\">transform-style: preserve-3d\u003C\u002Fh2>\u003Cp>By default, children are flattened into the parent's plane. Setting \u003Ccode>transform-style: preserve-3d\u003C\u002Fcode> on the parent keeps children in true 3D space, which is required for cubes, carousels and flip cards with front and back faces. Note: some properties on the same element force flattening back to \u003Ccode>flat\u003C\u002Fcode>, including \u003Ccode>overflow\u003C\u002Fcode> (other than visible), \u003Ccode>opacity\u003C\u002Fcode> below 1, \u003Ccode>filter\u003C\u002Fcode>, \u003Ccode>clip-path\u003C\u002Fcode>, \u003Ccode>mask\u003C\u002Fcode> and \u003Ccode>mix-blend-mode\u003C\u002Fcode>. If your 3D scene collapses, check these first.\u003C\u002Fp>\u003Ch2 id=\"backface-visibility\">backface-visibility\u003C\u002Fh2>\u003Cp>When an element rotates past 90 degrees, you see its back. \u003Ccode>backface-visibility: hidden\u003C\u002Fcode> hides the back side, which is the standard trick for a flip card: two faces stacked together, the back one pre-rotated 180 degrees.\u003C\u002Fp>\u003Ch2 id=\"common-pattern-flip-card\">Common pattern: flip card\u003C\u002Fh2>\u003Cp>1) Wrapper with \u003Ccode>perspective\u003C\u002Fcode>. 2) Inner element with \u003Ccode>transform-style: preserve-3d\u003C\u002Fcode> and a transition. 3) Front and back faces absolutely positioned with \u003Ccode>backface-visibility: hidden\u003C\u002Fcode>. 4) Back face rotated \u003Ccode>rotateY(180deg)\u003C\u002Fcode>. 5) On hover or focus, inner rotates 180 degrees.\u003C\u002Fp>\u003Ch2 id=\"performance-and-accessibility-tips\">Performance and accessibility tips\u003C\u002Fh2>\u003Cul>\u003Cli>3D transforms are usually GPU accelerated, but many large 3D layers use memory. Keep scenes small.\u003C\u002Fli>\u003Cli>Do not hide essential content on the back of a card that only appears on hover. Touch and keyboard users need a way to flip it (use \u003Ccode>:focus-within\u003C\u002Fcode> or a button) and screen readers need readable text.\u003C\u002Fli>\u003Cli>Wrap heavy motion in \u003Ccode>@media (prefers-reduced-motion: no-preference)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Test text sharpness. Rotated text can look blurry on some displays.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"quick-summary\">Quick summary\u003C\u002Fh2>\u003Cp>To build with \u003Cstrong>CSS 3D transforms\u003C\u002Fstrong>: add \u003Ccode>perspective\u003C\u002Fcode> to the parent, use \u003Ccode>transform-style: preserve-3d\u003C\u002Fcode> for nested 3D, transform children with rotate and translateZ, and hide backs with \u003Ccode>backface-visibility\u003C\u002Fcode>.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .row { display: flex; gap: 50px; padding: 40px; font-family: system-ui, sans-serif; font-size: 12px; text-align: center; }\n  .scene { perspective: 500px; }\n  .plane { width: 110px; height: 110px; background: #3b82f6; color: #fff; display: grid; place-items: center; border-radius: 10px; transition: transform .6s; margin-bottom: 8px; }\n  .x:hover .plane { transform: rotateX(55deg); }\n  .y:hover .plane { transform: rotateY(55deg); }\n  .z:hover .plane { transform: rotateZ(45deg); }\n  .tz:hover .plane { transform: translateZ(120px); }\n<\u002Fstyle>\n<div class='row'>\n  <div class='scene x'><div class='plane'>rotateX<\u002Fdiv>hover<\u002Fdiv>\n  <div class='scene y'><div class='plane'>rotateY<\u002Fdiv>hover<\u002Fdiv>\n  <div class='scene z'><div class='plane'>rotateZ<\u002Fdiv>hover<\u002Fdiv>\n  <div class='scene tz'><div class='plane'>translateZ<\u002Fdiv>hover<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 240px; }\n  .flip { width: 220px; height: 140px; perspective: 800px; }\n  .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .2, .2, 1); }\n  .flip:hover .inner, .flip:focus-within .inner { transform: rotateY(180deg); }\n  .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; font-weight: 700; backface-visibility: hidden; -webkit-backface-visibility: hidden; }\n  .front { background: linear-gradient(135deg, #6366f1, #8b5cf6); }\n  .back { background: linear-gradient(135deg, #10b981, #06b6d4); transform: rotateY(180deg); }\n<\u002Fstyle>\n<div class='flip' tabindex='0'>\n  <div class='inner'>\n    <div class='face front'>Front: hover me<\u002Fdiv>\n    <div class='face back'>Back side<\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { background: #0f172a; margin: 0; }\n  .scene { width: 160px; height: 160px; perspective: 700px; margin: 70px auto; }\n  .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin 10s linear infinite; }\n  .face { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px system-ui, sans-serif; color: #fff; border: 2px solid rgba(255,255,255,.3); }\n  .front  { transform: translateZ(80px); background: #ef4444; }\n  .back   { transform: rotateY(180deg) translateZ(80px); background: #f59e0b; }\n  .right  { transform: rotateY(90deg) translateZ(80px); background: #10b981; }\n  .left   { transform: rotateY(-90deg) translateZ(80px); background: #3b82f6; }\n  .top    { transform: rotateX(90deg) translateZ(80px); background: #8b5cf6; }\n  .bottom { transform: rotateX(-90deg) translateZ(80px); background: #ec4899; }\n  @keyframes spin { to { transform: rotateX(360deg) rotateY(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .cube { animation: none; transform: rotateX(-25deg) rotateY(35deg); } }\n<\u002Fstyle>\n<div class='scene'>\n  <div class='cube'>\n    <div class='face front'>1<\u002Fdiv><div class='face back'>2<\u002Fdiv>\n    <div class='face right'>3<\u002Fdiv><div class='face left'>4<\u002Fdiv>\n    <div class='face top'>5<\u002Fdiv><div class='face bottom'>6<\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { display: grid; place-items: center; min-height: 260px; font-family: system-ui, sans-serif; }\n  .wrap { perspective: 900px; }\n  .tilt { width: 240px; height: 150px; border-radius: 16px; background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; display: grid; place-items: center; font-weight: 700; transition: transform .1s ease-out; box-shadow: 0 20px 40px rgba(0,0,0,.25); }\n<\u002Fstyle>\n<div class='wrap' id='wrap'><div class='tilt' id='tilt'>Move your mouse<\u002Fdiv><\u002Fdiv>\n<script>\n  var wrap = document.getElementById('wrap');\n  var tilt = document.getElementById('tilt');\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  wrap.addEventListener('mousemove', function (e) {\n    if (reduce) return;\n    var r = wrap.getBoundingClientRect();\n    var x = (e.clientX - r.left) \u002F r.width - 0.5;\n    var y = (e.clientY - r.top) \u002F r.height - 0.5;\n    tilt.style.transform = 'rotateY(' + (x * 24) + 'deg) rotateX(' + (-y * 24) + 'deg)';\n  });\n  wrap.addEventListener('mouseleave', function () { tilt.style.transform = 'none'; });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Transitions & Animation","transitions-animation",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"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":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],5,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-3d-transforms","CSS 3D Transforms: perspective, preserve-3d & Flip Card","Learn CSS 3D transforms: perspective, transform-style preserve-3d, rotateX\u002FY\u002FZ, translateZ, backface-visibility, flip cards and a 3D cube with live code.",[31,36,40,44,48,52,55,59,63],{"id":32,"text":33,"level":34,"children":35},"what-are-css-3d-transforms","What are CSS 3D transforms?",2,[],{"id":37,"text":38,"level":34,"children":39},"the-three-axes","The three axes",[],{"id":41,"text":42,"level":34,"children":43},"3d-transform-functions","3D transform functions",[],{"id":45,"text":46,"level":34,"children":47},"perspective-the-key-to-depth","perspective: the key to depth",[],{"id":49,"text":50,"level":34,"children":51},"transform-style-preserve-3d","transform-style: preserve-3d",[],{"id":53,"text":53,"level":34,"children":54},"backface-visibility",[],{"id":56,"text":57,"level":34,"children":58},"common-pattern-flip-card","Common pattern: flip card",[],{"id":60,"text":61,"level":34,"children":62},"performance-and-accessibility-tips","Performance and accessibility tips",[],{"id":64,"text":65,"level":34,"children":66},"quick-summary","Quick summary",[],[68,73,76,79],{"id":69,"language":70,"code":71,"is_editable":72},582,"html","\u003Cstyle>\n  .row { display: flex; gap: 50px; padding: 40px; font-family: system-ui, sans-serif; font-size: 12px; text-align: center; }\n  .scene { perspective: 500px; }\n  .plane { width: 110px; height: 110px; background: #3b82f6; color: #fff; display: grid; place-items: center; border-radius: 10px; transition: transform .6s; margin-bottom: 8px; }\n  .x:hover .plane { transform: rotateX(55deg); }\n  .y:hover .plane { transform: rotateY(55deg); }\n  .z:hover .plane { transform: rotateZ(45deg); }\n  .tz:hover .plane { transform: translateZ(120px); }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cdiv class='scene x'>\u003Cdiv class='plane'>rotateX\u003C\u002Fdiv>hover\u003C\u002Fdiv>\n  \u003Cdiv class='scene y'>\u003Cdiv class='plane'>rotateY\u003C\u002Fdiv>hover\u003C\u002Fdiv>\n  \u003Cdiv class='scene z'>\u003Cdiv class='plane'>rotateZ\u003C\u002Fdiv>hover\u003C\u002Fdiv>\n  \u003Cdiv class='scene tz'>\u003Cdiv class='plane'>translateZ\u003C\u002Fdiv>hover\u003C\u002Fdiv>\n\u003C\u002Fdiv>",true,{"id":74,"language":70,"code":75,"is_editable":72},583,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 240px; }\n  .flip { width: 220px; height: 140px; perspective: 800px; }\n  .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .2, .2, 1); }\n  .flip:hover .inner, .flip:focus-within .inner { transform: rotateY(180deg); }\n  .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; font-weight: 700; backface-visibility: hidden; -webkit-backface-visibility: hidden; }\n  .front { background: linear-gradient(135deg, #6366f1, #8b5cf6); }\n  .back { background: linear-gradient(135deg, #10b981, #06b6d4); transform: rotateY(180deg); }\n\u003C\u002Fstyle>\n\u003Cdiv class='flip' tabindex='0'>\n  \u003Cdiv class='inner'>\n    \u003Cdiv class='face front'>Front: hover me\u003C\u002Fdiv>\n    \u003Cdiv class='face back'>Back side\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":77,"language":70,"code":78,"is_editable":72},584,"\u003Cstyle>\n  body { background: #0f172a; margin: 0; }\n  .scene { width: 160px; height: 160px; perspective: 700px; margin: 70px auto; }\n  .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin 10s linear infinite; }\n  .face { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px system-ui, sans-serif; color: #fff; border: 2px solid rgba(255,255,255,.3); }\n  .front  { transform: translateZ(80px); background: #ef4444; }\n  .back   { transform: rotateY(180deg) translateZ(80px); background: #f59e0b; }\n  .right  { transform: rotateY(90deg) translateZ(80px); background: #10b981; }\n  .left   { transform: rotateY(-90deg) translateZ(80px); background: #3b82f6; }\n  .top    { transform: rotateX(90deg) translateZ(80px); background: #8b5cf6; }\n  .bottom { transform: rotateX(-90deg) translateZ(80px); background: #ec4899; }\n  @keyframes spin { to { transform: rotateX(360deg) rotateY(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .cube { animation: none; transform: rotateX(-25deg) rotateY(35deg); } }\n\u003C\u002Fstyle>\n\u003Cdiv class='scene'>\n  \u003Cdiv class='cube'>\n    \u003Cdiv class='face front'>1\u003C\u002Fdiv>\u003Cdiv class='face back'>2\u003C\u002Fdiv>\n    \u003Cdiv class='face right'>3\u003C\u002Fdiv>\u003Cdiv class='face left'>4\u003C\u002Fdiv>\n    \u003Cdiv class='face top'>5\u003C\u002Fdiv>\u003Cdiv class='face bottom'>6\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":80,"language":70,"code":81,"is_editable":72},585,"\u003Cstyle>\n  body { display: grid; place-items: center; min-height: 260px; font-family: system-ui, sans-serif; }\n  .wrap { perspective: 900px; }\n  .tilt { width: 240px; height: 150px; border-radius: 16px; background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; display: grid; place-items: center; font-weight: 700; transition: transform .1s ease-out; box-shadow: 0 20px 40px rgba(0,0,0,.25); }\n\u003C\u002Fstyle>\n\u003Cdiv class='wrap' id='wrap'>\u003Cdiv class='tilt' id='tilt'>Move your mouse\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cscript>\n  var wrap = document.getElementById('wrap');\n  var tilt = document.getElementById('tilt');\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  wrap.addEventListener('mousemove', function (e) {\n    if (reduce) return;\n    var r = wrap.getBoundingClientRect();\n    var x = (e.clientX - r.left) \u002F r.width - 0.5;\n    var y = (e.clientY - r.top) \u002F r.height - 0.5;\n    tilt.style.transform = 'rotateY(' + (x * 24) + 'deg) rotateX(' + (-y * 24) + 'deg)';\n  });\n  wrap.addEventListener('mouseleave', function () { tilt.style.transform = 'none'; });\n\u003C\u002Fscript>",[83],{"id":84,"title":85,"slug":86,"prompt":87,"starter_code":88,"expected_output":89,"language":70,"order_index":90},207,"Build a flip card with a keyboard-friendly trigger","build-flip-card","Finish the flip card. The wrapper needs perspective, .inner needs transform-style: preserve-3d and a transition, both faces need backface-visibility: hidden, and the back face must be pre-rotated by 180deg around Y. The card must flip on hover and on :focus-within.","\u003Cstyle>\n  .card { width: 200px; height: 120px; \u002F* TODO: perspective *\u002F }\n  .inner { position: relative; width: 100%; height: 100%; \u002F* TODO: preserve-3d + transition *\u002F }\n  .face { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; border-radius: 10px; \u002F* TODO: backface *\u002F }\n  .front { background: #4f46e5; }\n  .back { background: #059669; \u002F* TODO: rotateY(180deg) *\u002F }\n  \u002F* TODO: flip on hover and focus-within *\u002F\n\u003C\u002Fstyle>\n\u003Cdiv class='card' tabindex='0'>\u003Cdiv class='inner'>\u003Cdiv class='face front'>Front\u003C\u002Fdiv>\u003Cdiv class='face back'>Back\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","Hovering or focusing the card smoothly rotates it 180 degrees around the Y axis to reveal the green back face.",1,"2026-09-30T18:50:34+00:00",{"id":93,"slug":94,"title":95},142,"css-2d-transforms","CSS 2D Transforms: translate, rotate, scale, skew and transform-origin",{"id":97,"slug":98,"title":99},144,"css-keyframe-animations","CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property",{"data":101},[102,105,109,114,119],{"name":13,"slug":14,"description":103,"post_count":34,"subcategories":104},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":106,"slug":70,"description":107,"post_count":34,"subcategories":108},"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":110,"slug":111,"description":112,"post_count":90,"subcategories":113},"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.",[],{"name":115,"slug":116,"description":117,"post_count":90,"subcategories":118},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":120,"slug":121,"description":122,"post_count":90,"subcategories":123},"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":125},[126,447],{"id":90,"name":106,"slug":127,"icon":5,"icon_url":5,"short_description":128,"meta_title":129,"meta_description":130,"og_image":131,"locale":132,"subcategories":133},"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",[134,159,195,219,295,329,343,371,395,411],{"id":90,"name":135,"slug":136,"order_index":90,"topics":137},"HTML Fundamentals & Setup","html-fundamentals-setup",[138,141,144,148,152,155],{"id":34,"title":139,"slug":140,"order_index":90,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":90,"title":142,"slug":143,"order_index":90,"cornerstone":25,"reading_time_minutes":90},"HTML Introduction & History","html-introduction-and-history",{"id":145,"title":146,"slug":147,"order_index":145,"cornerstone":25,"reading_time_minutes":34},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":149,"title":150,"slug":151,"order_index":149,"cornerstone":25,"reading_time_minutes":34},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":24,"title":153,"slug":154,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":156,"title":157,"slug":158,"order_index":156,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":160,"slug":161,"order_index":34,"topics":162},"Text & Content Basics","text-content-basics",[163,167,171,175,179,183,187,191],{"id":164,"title":165,"slug":166,"order_index":164,"cornerstone":25,"reading_time_minutes":34},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":168,"title":169,"slug":170,"order_index":168,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":172,"title":173,"slug":174,"order_index":172,"cornerstone":25,"reading_time_minutes":90},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":176,"title":177,"slug":178,"order_index":176,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":180,"title":181,"slug":182,"order_index":180,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":184,"title":185,"slug":186,"order_index":184,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":188,"title":189,"slug":190,"order_index":188,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":192,"title":193,"slug":194,"order_index":192,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":145,"name":196,"slug":197,"order_index":145,"topics":198},"Links, Media & Navigation","links-media-navigation",[199,203,207,211,215],{"id":200,"title":201,"slug":202,"order_index":200,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":204,"title":205,"slug":206,"order_index":204,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":208,"title":209,"slug":210,"order_index":208,"cornerstone":25,"reading_time_minutes":90},17,"HTML Favicon Setup","html-favicon-setup",{"id":212,"title":213,"slug":214,"order_index":212,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":216,"title":217,"slug":218,"order_index":216,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":149,"name":220,"slug":221,"order_index":149,"topics":222},"Structuring Content","structuring-content",[223,228,233,238,243,247,251,255,259,263,267,271,275,279,283,287,291],{"id":224,"title":225,"slug":226,"order_index":227,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":229,"title":230,"slug":231,"order_index":232,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":234,"title":235,"slug":236,"order_index":237,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":239,"title":240,"slug":241,"order_index":242,"cornerstone":25,"reading_time_minutes":90},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":244,"title":245,"slug":246,"order_index":224,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":248,"title":249,"slug":250,"order_index":229,"cornerstone":25,"reading_time_minutes":90},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":252,"title":253,"slug":254,"order_index":234,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":256,"title":257,"slug":258,"order_index":239,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":260,"title":261,"slug":262,"order_index":244,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":264,"title":265,"slug":266,"order_index":248,"cornerstone":25,"reading_time_minutes":145},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":268,"title":269,"slug":270,"order_index":252,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":272,"title":273,"slug":274,"order_index":256,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":276,"title":277,"slug":278,"order_index":260,"cornerstone":25,"reading_time_minutes":90},77,"HTML Symbols","html-symbols",{"id":280,"title":281,"slug":282,"order_index":280,"cornerstone":25,"reading_time_minutes":90},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":284,"title":285,"slug":286,"order_index":284,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":288,"title":289,"slug":290,"order_index":288,"cornerstone":25,"reading_time_minutes":90},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":292,"title":293,"slug":294,"order_index":292,"cornerstone":25,"reading_time_minutes":90},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":164,"name":296,"slug":297,"order_index":24,"topics":298},"Forms & User Input","forms-user-input",[299,304,309,314,319,324],{"id":300,"title":301,"slug":302,"order_index":303,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":305,"title":306,"slug":307,"order_index":308,"cornerstone":25,"reading_time_minutes":90},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":310,"title":311,"slug":312,"order_index":313,"cornerstone":25,"reading_time_minutes":90},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":315,"title":316,"slug":317,"order_index":318,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":320,"title":321,"slug":322,"order_index":323,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":325,"title":326,"slug":327,"order_index":328,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":168,"name":330,"slug":331,"order_index":156,"topics":332},"Graphics & Visuals","graphics-visuals",[333,338],{"id":334,"title":335,"slug":336,"order_index":337,"cornerstone":25,"reading_time_minutes":145},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":339,"title":340,"slug":341,"order_index":342,"cornerstone":25,"reading_time_minutes":145},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":172,"name":344,"slug":345,"order_index":164,"topics":346},"Multimedia","multimedia",[347,352,357,362,367],{"id":348,"title":349,"slug":350,"order_index":351,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":353,"title":354,"slug":355,"order_index":356,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":358,"title":359,"slug":360,"order_index":361,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":363,"title":364,"slug":365,"order_index":366,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":368,"title":369,"slug":370,"order_index":300,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":176,"name":372,"slug":373,"order_index":168,"topics":374},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[375,379,383,387,391],{"id":376,"title":377,"slug":378,"order_index":305,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":380,"title":381,"slug":382,"order_index":310,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":384,"title":385,"slug":386,"order_index":315,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":388,"title":389,"slug":390,"order_index":320,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":392,"title":393,"slug":394,"order_index":325,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":180,"name":396,"slug":397,"order_index":172,"topics":398},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[399,403,407],{"id":400,"title":401,"slug":402,"order_index":334,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":404,"title":405,"slug":406,"order_index":339,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":408,"title":409,"slug":410,"order_index":348,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":184,"name":412,"slug":413,"order_index":176,"topics":414},"Reference & Practice","reference-practice",[415,419,423,427,431,435,439,443],{"id":416,"title":417,"slug":418,"order_index":90,"cornerstone":25,"reading_time_minutes":34},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":420,"title":421,"slug":422,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":424,"title":425,"slug":426,"order_index":145,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":428,"title":429,"slug":430,"order_index":149,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":432,"title":433,"slug":434,"order_index":24,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":436,"title":437,"slug":438,"order_index":156,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":440,"title":441,"slug":442,"order_index":164,"cornerstone":25,"reading_time_minutes":145},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":444,"title":445,"slug":446,"order_index":168,"cornerstone":25,"reading_time_minutes":90},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":448,"meta_title":449,"meta_description":450,"og_image":5,"locale":132,"subcategories":451},"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.",[452,481,505,541,573,605,637,669,697,725],{"id":242,"name":453,"slug":454,"order_index":455,"topics":456},"UI Components","ui-components",0,[457,461,465,469,473,477],{"id":458,"title":459,"slug":460,"order_index":368,"cornerstone":25,"reading_time_minutes":156},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":462,"title":463,"slug":464,"order_index":376,"cornerstone":25,"reading_time_minutes":156},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":466,"title":467,"slug":468,"order_index":380,"cornerstone":25,"reading_time_minutes":164},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":470,"title":471,"slug":472,"order_index":384,"cornerstone":25,"reading_time_minutes":156},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":474,"title":475,"slug":476,"order_index":388,"cornerstone":25,"reading_time_minutes":156},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":478,"title":479,"slug":480,"order_index":392,"cornerstone":25,"reading_time_minutes":156},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":188,"name":482,"slug":483,"order_index":455,"topics":484},"CSS Fundamentals & Setup","css-fundamentals-setup",[485,489,493,497,501],{"id":486,"title":487,"slug":488,"order_index":90,"cornerstone":25,"reading_time_minutes":149},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":490,"title":491,"slug":492,"order_index":34,"cornerstone":25,"reading_time_minutes":149},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":494,"title":495,"slug":496,"order_index":145,"cornerstone":25,"reading_time_minutes":145},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":498,"title":499,"slug":500,"order_index":149,"cornerstone":25,"reading_time_minutes":145},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":502,"title":503,"slug":504,"order_index":24,"cornerstone":25,"reading_time_minutes":24},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":192,"name":506,"slug":507,"order_index":455,"topics":508},"Selectors & the Cascade","selectors-the-cascade",[509,513,517,521,525,529,533,537],{"id":510,"title":511,"slug":512,"order_index":156,"cornerstone":25,"reading_time_minutes":149},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":514,"title":515,"slug":516,"order_index":164,"cornerstone":25,"reading_time_minutes":149},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":518,"title":519,"slug":520,"order_index":168,"cornerstone":25,"reading_time_minutes":149},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":522,"title":523,"slug":524,"order_index":172,"cornerstone":25,"reading_time_minutes":156},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":526,"title":527,"slug":528,"order_index":176,"cornerstone":25,"reading_time_minutes":24},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":530,"title":531,"slug":532,"order_index":180,"cornerstone":25,"reading_time_minutes":24},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":534,"title":535,"slug":536,"order_index":184,"cornerstone":25,"reading_time_minutes":149},93,"CSS Specificity Explained","css-specificity-explained",{"id":538,"title":539,"slug":540,"order_index":188,"cornerstone":25,"reading_time_minutes":24},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":200,"name":542,"slug":543,"order_index":455,"topics":544},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[545,549,553,557,561,565,569],{"id":546,"title":547,"slug":548,"order_index":192,"cornerstone":25,"reading_time_minutes":24},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":550,"title":551,"slug":552,"order_index":200,"cornerstone":25,"reading_time_minutes":149},96,"CSS Backgrounds","css-backgrounds",{"id":554,"title":555,"slug":556,"order_index":204,"cornerstone":25,"reading_time_minutes":24},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":558,"title":559,"slug":560,"order_index":208,"cornerstone":25,"reading_time_minutes":24},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":562,"title":563,"slug":564,"order_index":212,"cornerstone":25,"reading_time_minutes":156},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":566,"title":567,"slug":568,"order_index":216,"cornerstone":25,"reading_time_minutes":24},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":570,"title":571,"slug":572,"order_index":227,"cornerstone":25,"reading_time_minutes":156},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":204,"name":574,"slug":575,"order_index":455,"topics":576},"Box Model & Spacing","box-model-spacing",[577,581,585,589,593,597,601],{"id":578,"title":579,"slug":580,"order_index":232,"cornerstone":25,"reading_time_minutes":164},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":582,"title":583,"slug":584,"order_index":237,"cornerstone":25,"reading_time_minutes":164},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":586,"title":587,"slug":588,"order_index":242,"cornerstone":25,"reading_time_minutes":156},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":590,"title":591,"slug":592,"order_index":224,"cornerstone":25,"reading_time_minutes":172},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":594,"title":595,"slug":596,"order_index":229,"cornerstone":25,"reading_time_minutes":24},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":598,"title":599,"slug":600,"order_index":234,"cornerstone":25,"reading_time_minutes":164},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":602,"title":603,"slug":604,"order_index":239,"cornerstone":25,"reading_time_minutes":164},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":208,"name":606,"slug":607,"order_index":455,"topics":608},"Typography & Text","typography-text",[609,613,617,621,625,629,633],{"id":610,"title":611,"slug":612,"order_index":244,"cornerstone":25,"reading_time_minutes":164},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":614,"title":615,"slug":616,"order_index":248,"cornerstone":25,"reading_time_minutes":164},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":618,"title":619,"slug":620,"order_index":252,"cornerstone":25,"reading_time_minutes":164},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":622,"title":623,"slug":624,"order_index":256,"cornerstone":25,"reading_time_minutes":164},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":626,"title":627,"slug":628,"order_index":260,"cornerstone":25,"reading_time_minutes":168},113,"Styling Links","styling-links-css",{"id":630,"title":631,"slug":632,"order_index":280,"cornerstone":25,"reading_time_minutes":164},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":634,"title":635,"slug":636,"order_index":284,"cornerstone":25,"reading_time_minutes":176},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":212,"name":638,"slug":639,"order_index":455,"topics":640},"Display, Position & Layout Basics","display-position-layout-basics",[641,645,649,653,657,661,665],{"id":642,"title":643,"slug":644,"order_index":288,"cornerstone":25,"reading_time_minutes":164},116,"Display & Inline-block","display-and-inline-block",{"id":646,"title":647,"slug":648,"order_index":292,"cornerstone":25,"reading_time_minutes":156},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":650,"title":651,"slug":652,"order_index":303,"cornerstone":25,"reading_time_minutes":156},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":654,"title":655,"slug":656,"order_index":308,"cornerstone":25,"reading_time_minutes":24},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":658,"title":659,"slug":660,"order_index":313,"cornerstone":25,"reading_time_minutes":156},120,"Centering Techniques","centering-techniques",{"id":662,"title":663,"slug":664,"order_index":318,"cornerstone":25,"reading_time_minutes":164},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":666,"title":667,"slug":668,"order_index":323,"cornerstone":25,"reading_time_minutes":168},122,"Website Layout Basics","website-layout-basics",{"id":227,"name":670,"slug":671,"order_index":455,"topics":672},"The Modern CSS Toolkit","the-modern-css-toolkit",[673,677,681,685,689,693],{"id":674,"title":675,"slug":676,"order_index":328,"cornerstone":25,"reading_time_minutes":168},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":678,"title":679,"slug":680,"order_index":337,"cornerstone":25,"reading_time_minutes":168},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":682,"title":683,"slug":684,"order_index":342,"cornerstone":25,"reading_time_minutes":164},131,"Native CSS Nesting","native-css-nesting",{"id":686,"title":687,"slug":688,"order_index":351,"cornerstone":25,"reading_time_minutes":164},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":690,"title":691,"slug":692,"order_index":356,"cornerstone":25,"reading_time_minutes":172},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":694,"title":695,"slug":696,"order_index":361,"cornerstone":25,"reading_time_minutes":168},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":232,"name":698,"slug":699,"order_index":455,"topics":700},"Responsive Design","responsive-design",[701,705,709,713,717,721],{"id":702,"title":703,"slug":704,"order_index":366,"cornerstone":25,"reading_time_minutes":172},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":706,"title":707,"slug":708,"order_index":300,"cornerstone":25,"reading_time_minutes":168},136,"Media Queries","media-queries",{"id":710,"title":711,"slug":712,"order_index":305,"cornerstone":25,"reading_time_minutes":168},137,"Responsive Images & Video","responsive-images-and-video",{"id":714,"title":715,"slug":716,"order_index":310,"cornerstone":25,"reading_time_minutes":172},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":718,"title":719,"slug":720,"order_index":315,"cornerstone":25,"reading_time_minutes":172},139,"Container Queries","container-queries",{"id":722,"title":723,"slug":724,"order_index":320,"cornerstone":25,"reading_time_minutes":184},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":237,"name":16,"slug":17,"order_index":455,"topics":726},[727,731,732,733,734,738,742],{"id":728,"title":729,"slug":730,"order_index":325,"cornerstone":25,"reading_time_minutes":24},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":93,"title":95,"slug":94,"order_index":334,"cornerstone":25,"reading_time_minutes":149},{"id":8,"title":9,"slug":10,"order_index":339,"cornerstone":25,"reading_time_minutes":24},{"id":97,"title":99,"slug":98,"order_index":348,"cornerstone":25,"reading_time_minutes":24},{"id":735,"title":736,"slug":737,"order_index":353,"cornerstone":25,"reading_time_minutes":24},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":739,"title":740,"slug":741,"order_index":358,"cornerstone":25,"reading_time_minutes":24},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":743,"title":744,"slug":745,"order_index":363,"cornerstone":25,"reading_time_minutes":156},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]