[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:aspect-ratio-and-object-fit":35,"course-tree":163},{"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":115,"quiz":5,"exercises":139,"published_at":5,"updated_at":154,"prev":155,"next":159},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit","\u003Ch2 id=\"css-aspect-ratio-and-object-fit-responsive-media-made-easy\">CSS aspect-ratio and object-fit: Responsive Media Made Easy\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS aspect-ratio.\u003C\u002Fstrong> Images, videos and cards need consistent proportions across screen sizes. Before modern CSS we used the padding-top hack. Today \u003Ccode>aspect-ratio\u003C\u002Fcode> and \u003Ccode>object-fit\u003C\u002Fcode> solve this cleanly. In this lesson you will learn how to reserve space, prevent layout shift, crop images smartly and build avatars, thumbnails and video embeds.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>aspect-ratio 16\u002F9, aspect-ratio square, object-fit cover vs contain, object-position, padding-top hack, prevent layout shift, CLS Core Web Vitals, responsive images, width and height attributes, video embed responsive, avatar circle, card thumbnail, object-view-box, image cropping, loading lazy, picture element.\u003C\u002Fp>\u003Ch2 id=\"1-the-aspect-ratio-property\">1. The aspect-ratio Property\u003C\u002Fh2>\u003Cp>Aspect ratio is width divided by height. With \u003Ccode>aspect-ratio: 16 \u002F 9\u003C\u002Fcode>, a box keeps that shape whenever its width changes. You only need to define one dimension (usually width) and the browser calculates the other.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>aspect-ratio: 1 \u002F 1\u003C\u002Fcode> for squares (avatars, gallery tiles).\u003C\u002Fli>\u003Cli>\u003Ccode>aspect-ratio: 4 \u002F 3\u003C\u002Fcode> for classic photos.\u003C\u002Fli>\u003Cli>\u003Ccode>aspect-ratio: 16 \u002F 9\u003C\u002Fcode> for video and hero banners.\u003C\u002Fli>\u003Cli>\u003Ccode>aspect-ratio: 3 \u002F 4\u003C\u002Fcode> or \u003Ccode>9 \u002F 16\u003C\u002Fcode> for portrait images and stories.\u003C\u002Fli>\u003Cli>\u003Ccode>aspect-ratio: auto 16 \u002F 9\u003C\u002Fcode> uses the intrinsic ratio of an image when it has one, and 16 \u002F 9 as fallback before it loads.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"rules-and-limits\">Rules and limits\u003C\u002Fh3>\u003Cul>\u003Cli>Works when at least one of width or height is automatic. If you set both width and height, the ratio is ignored.\u003C\u002Fli>\u003Cli>Content can push the box taller than the ratio because of the default \u003Ccode>min-height: auto\u003C\u002Fcode>. Set \u003Ccode>min-height: 0\u003C\u002Fcode> or \u003Ccode>overflow: hidden\u003C\u002Fcode> if you need a strict box.\u003C\u002Fli>\u003Cli>It works on any box: div, img, video, iframe, canvas and grid items.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-the-old-padding-top-hack\">2. The Old padding-top Hack\u003C\u002Fh2>\u003Cp>Older code used \u003Ccode>padding-top: 56.25%\u003C\u002Fcode> on a wrapper and an absolutely positioned child to keep a 16:9 shape (9 divided by 16 is 0.5625). It is now legacy. Replace it with aspect-ratio and remove the extra wrapper.\u003C\u002Fp>\u003Ch2 id=\"3-the-object-fit-property\">3. The object-fit Property\u003C\u002Fh2>\u003Cp>Replaced elements (img, video, canvas) have their own intrinsic size. When you force a width and height, object-fit decides how the media fits inside the box:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>fill\u003C\u002Fcode> (default): stretches and distorts.\u003C\u002Fli>\u003Cli>\u003Ccode>contain\u003C\u002Fcode>: scales down to fit fully, keeps ratio, may show empty bars (letterbox).\u003C\u002Fli>\u003Cli>\u003Ccode>cover\u003C\u002Fcode>: fills the whole box, keeps ratio, crops the overflow. Best for thumbnails and hero images.\u003C\u002Fli>\u003Cli>\u003Ccode>none\u003C\u002Fcode>: no resizing, original size, cropped if larger.\u003C\u002Fli>\u003Cli>\u003Ccode>scale-down\u003C\u002Fcode>: the smaller result of none or contain.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-object-position\">4. object-position\u003C\u002Fh2>\u003Cp>\u003Ccode>object-position\u003C\u002Fcode> moves the media inside its box, like background-position. Default is \u003Ccode>50% 50%\u003C\u002Fcode> (centered). For portraits use \u003Ccode>object-position: top\u003C\u002Fcode> or \u003Ccode>50% 20%\u003C\u002Fcode> so faces are not cropped. Always choose a focal point for cover images.\u003C\u002Fp>\u003Ch2 id=\"5-aspect-ratio-and-object-fit-together\">5. aspect-ratio and object-fit Together\u003C\u002Fh2>\u003Cp>The perfect combination for cards is: \u003Ccode>img { width: 100%; aspect-ratio: 4 \u002F 3; object-fit: cover; }\u003C\u002Fcode>. Every card image gets the same shape, whatever the source size is. For avatars add \u003Ccode>border-radius: 50%\u003C\u002Fcode> and \u003Ccode>aspect-ratio: 1\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"6-preventing-layout-shift-cls\">6. Preventing Layout Shift (CLS)\u003C\u002Fh2>\u003Cp>When an image loads after text, the page jumps. This hurts the \u003Cstrong>Cumulative Layout Shift\u003C\u002Fstrong> score, one of Google Core Web Vitals. To prevent it:\u003C\u002Fp>\u003Cul>\u003Cli>Always add \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> attributes to images. Browsers use them to calculate an automatic aspect ratio before the file loads.\u003C\u002Fli>\u003Cli>Add \u003Ccode>img { max-width: 100%; height: auto; }\u003C\u002Fcode> in your reset so images stay responsive.\u003C\u002Fli>\u003Cli>Use \u003Ccode>aspect-ratio\u003C\u002Fcode> on containers for embeds, ads and lazy-loaded media.\u003C\u002Fli>\u003Cli>Use \u003Ccode>loading='lazy'\u003C\u002Fcode> on images below the fold and \u003Ccode>fetchpriority='high'\u003C\u002Fcode> on the main hero image.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"7-responsive-video-and-iframe-embeds\">7. Responsive Video and Iframe Embeds\u003C\u002Fh2>\u003Cp>Set \u003Ccode>width: 100%\u003C\u002Fcode> and \u003Ccode>aspect-ratio: 16 \u002F 9\u003C\u002Fcode> on the iframe or video. Remove the fixed height attribute or override it with \u003Ccode>height: auto\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"8-different-ratios-per-screen\">8. Different Ratios per Screen\u003C\u002Fh2>\u003Cp>Change the ratio with media queries or container queries, for example a wide 21 \u002F 9 hero on desktop and a taller 4 \u002F 5 hero on mobile. Combine with the \u003Ccode>picture\u003C\u002Fcode> element for art direction when crops must be different files.\u003C\u002Fp>\u003Ch2 id=\"9-accessibility-notes\">9. Accessibility Notes\u003C\u002Fh2>\u003Cul>\u003Cli>Cropping with cover can hide important content, so check focal points and keep alt text meaningful.\u003C\u002Fli>\u003Cli>Do not put text inside images that may be cropped.\u003C\u002Fli>\u003Cli>Decorative images should have an empty alt attribute.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-common-mistakes\">10. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Setting width, height and aspect-ratio together and wondering why the ratio is ignored.\u003C\u002Fli>\u003Cli>Using object-fit on a div (it only works on replaced elements like img and video).\u003C\u002Fli>\u003Cli>Forgetting width and height attributes on images and causing layout shift.\u003C\u002Fli>\u003Cli>Stretching images with object-fit fill.\u003C\u002Fli>\u003Cli>Using cover without choosing object-position for faces.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Use aspect-ratio to reserve and control shape, use object-fit to decide how media fills that shape, and use object-position to choose the focal point. Together they replace old hacks and improve performance and design consistency.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { width: 100%; max-width: 420px; color: #fff; display: grid; place-items: center; margin-bottom: 12px; }\n  .wide { aspect-ratio: 16 \u002F 9; background: #264653; }\n  .sq { aspect-ratio: 1 \u002F 1; width: 200px; background: #e76f51; }\n  .port { aspect-ratio: 3 \u002F 4; width: 160px; background: #2a9d8f; }\n<\u002Fstyle>\n<div class='box wide'>16 \u002F 9<\u002Fdiv>\n<div class='box sq'>1 \u002F 1<\u002Fdiv>\n<div class='box port'>3 \u002F 4<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 14px system-ui, sans-serif; padding: 16px; }\n  .row { display: flex; flex-wrap: wrap; gap: 12px; }\n  figure { margin: 0; }\n  img { width: 180px; height: 120px; background: #ddd; border: 2px solid #264653; }\n  .fill { object-fit: fill; }\n  .contain { object-fit: contain; }\n  .cover { object-fit: cover; }\n  .none { object-fit: none; }\n  .scale { object-fit: scale-down; }\n<\u002Fstyle>\n<div class='row'>\n  <figure><img class='fill' alt='fill' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>fill<\u002Ffigcaption><\u002Ffigure>\n  <figure><img class='contain' alt='contain' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>contain<\u002Ffigcaption><\u002Ffigure>\n  <figure><img class='cover' alt='cover' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>cover<\u002Ffigcaption><\u002Ffigure>\n  <figure><img class='none' alt='none' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>none<\u002Ffigcaption><\u002Ffigure>\n  <figure><img class='scale' alt='scale-down' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>scale-down<\u002Ffigcaption><\u002Ffigure>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }\n  .card { border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }\n  .card img { width: 100%; aspect-ratio: 4 \u002F 3; object-fit: cover; display: block; }\n  .card div { padding: 12px; }\n<\u002Fstyle>\n<div class='grid'>\n  <article class='card'><img alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='600' height='200'%3E%3Crect width='600' height='200' fill='%232a9d8f'\u002F%3E%3Ccircle cx='300' cy='100' r='80' fill='%23e9c46a'\u002F%3E%3C\u002Fsvg%3E\"><div>Wide source, 4 \u002F 3 card<\u002Fdiv><\u002Farticle>\n  <article class='card'><img alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='500'%3E%3Crect width='200' height='500' fill='%23264653'\u002F%3E%3Ccircle cx='100' cy='250' r='80' fill='%23e76f51'\u002F%3E%3C\u002Fsvg%3E\"><div>Tall source, same shape<\u002Fdiv><\u002Farticle>\n  <article class='card'><img alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23e63946'\u002F%3E%3Ccircle cx='150' cy='150' r='80' fill='%23f1faee'\u002F%3E%3C\u002Fsvg%3E\"><div>Square source, same shape<\u002Fdiv><\u002Farticle>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 14px system-ui, sans-serif; padding: 16px; display: flex; gap: 24px; align-items: center; }\n  .avatar { width: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #0b5fff; }\n  .top { object-position: top; }\n  .bottom { object-position: bottom; }\n<\u002Fstyle>\n<figure><img class='avatar top' alt='Top' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='400'%3E%3Crect width='200' height='200' fill='%23ffb703'\u002F%3E%3Crect y='200' width='200' height='200' fill='%23023047'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>object-position: top<\u002Ffigcaption><\u002Ffigure>\n<figure><img class='avatar bottom' alt='Bottom' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='400'%3E%3Crect width='200' height='200' fill='%23ffb703'\u002F%3E%3Crect y='200' width='200' height='200' fill='%23023047'\u002F%3E%3C\u002Fsvg%3E\"><figcaption>object-position: bottom<\u002Ffigcaption><\u002Ffigure>\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; max-width: 640px; }\n  .video { width: 100%; aspect-ratio: 16 \u002F 9; background: #000; color: #fff; display: grid; place-items: center; border-radius: 12px; }\n  iframe.video { border: 0; }\n  .legacy { position: relative; padding-top: 56.25%; background: #555; color: #fff; margin-top: 16px; }\n  .legacy span { position: absolute; inset: 0; display: grid; place-items: center; }\n<\u002Fstyle>\n<div class='video'>Modern: aspect-ratio 16 \u002F 9 (works for video, iframe, canvas)<\u002Fdiv>\n<div class='legacy'><span>Legacy padding-top: 56.25% hack<\u002Fspan><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .hero { width: 100%; background: linear-gradient(135deg, #8ecae6, #023047); color: #fff; display: grid; place-items: center; aspect-ratio: 4 \u002F 5; border-radius: 12px; }\n  @media (min-width: 600px) { .hero { aspect-ratio: 21 \u002F 9; } }\n<\u002Fstyle>\n<div class='hero'>4 \u002F 5 on mobile, 21 \u002F 9 on screens wider than 600px<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const ratios = [\n  { name: 'Square', w: 1, h: 1 },\n  { name: 'Photo', w: 4, h: 3 },\n  { name: 'Video', w: 16, h: 9 },\n  { name: 'Ultrawide', w: 21, h: 9 }\n];\n\nvar width = 640;\nratios.forEach(function (r) {\n  var height = Math.round(width * r.h \u002F r.w);\n  console.log(r.name + ' (' + r.w + '\u002F' + r.h + ') at ' + width + 'px wide = ' + height + 'px tall');\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Display, Position & Layout Basics","display-position-layout-basics",{"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",[],[],[],7,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Faspect-ratio-and-object-fit","CSS aspect-ratio & object-fit: Responsive Images and Video","Learn CSS aspect-ratio and object-fit: 16\u002F9 video boxes, square avatars, cover vs contain, object-position, CLS prevention and responsive image best practices.",[58,67,75,79,83,87,91,95,99,103,107,111],{"id":59,"text":60,"level":12,"children":61},"css-aspect-ratio-and-object-fit-responsive-media-made-easy","CSS aspect-ratio and object-fit: Responsive Media Made Easy",[62],{"id":63,"text":64,"level":65,"children":66},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",3,[],{"id":68,"text":69,"level":12,"children":70},"1-the-aspect-ratio-property","1. The aspect-ratio Property",[71],{"id":72,"text":73,"level":65,"children":74},"rules-and-limits","Rules and limits",[],{"id":76,"text":77,"level":12,"children":78},"2-the-old-padding-top-hack","2. The Old padding-top Hack",[],{"id":80,"text":81,"level":12,"children":82},"3-the-object-fit-property","3. The object-fit Property",[],{"id":84,"text":85,"level":12,"children":86},"4-object-position","4. object-position",[],{"id":88,"text":89,"level":12,"children":90},"5-aspect-ratio-and-object-fit-together","5. aspect-ratio and object-fit Together",[],{"id":92,"text":93,"level":12,"children":94},"6-preventing-layout-shift-cls","6. Preventing Layout Shift (CLS)",[],{"id":96,"text":97,"level":12,"children":98},"7-responsive-video-and-iframe-embeds","7. Responsive Video and Iframe Embeds",[],{"id":100,"text":101,"level":12,"children":102},"8-different-ratios-per-screen","8. Different Ratios per Screen",[],{"id":104,"text":105,"level":12,"children":106},"9-accessibility-notes","9. Accessibility Notes",[],{"id":108,"text":109,"level":12,"children":110},"10-common-mistakes","10. Common Mistakes",[],{"id":112,"text":113,"level":12,"children":114},"key-takeaways","Key Takeaways",[],[116,120,123,126,129,132,135],{"id":117,"language":16,"code":118,"is_editable":119},432,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .box { width: 100%; max-width: 420px; color: #fff; display: grid; place-items: center; margin-bottom: 12px; }\n  .wide { aspect-ratio: 16 \u002F 9; background: #264653; }\n  .sq { aspect-ratio: 1 \u002F 1; width: 200px; background: #e76f51; }\n  .port { aspect-ratio: 3 \u002F 4; width: 160px; background: #2a9d8f; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box wide'>16 \u002F 9\u003C\u002Fdiv>\n\u003Cdiv class='box sq'>1 \u002F 1\u003C\u002Fdiv>\n\u003Cdiv class='box port'>3 \u002F 4\u003C\u002Fdiv>",true,{"id":121,"language":16,"code":122,"is_editable":119},433,"\u003Cstyle>\n  body { font: 14px system-ui, sans-serif; padding: 16px; }\n  .row { display: flex; flex-wrap: wrap; gap: 12px; }\n  figure { margin: 0; }\n  img { width: 180px; height: 120px; background: #ddd; border: 2px solid #264653; }\n  .fill { object-fit: fill; }\n  .contain { object-fit: contain; }\n  .cover { object-fit: cover; }\n  .none { object-fit: none; }\n  .scale { object-fit: scale-down; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\n  \u003Cfigure>\u003Cimg class='fill' alt='fill' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>fill\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n  \u003Cfigure>\u003Cimg class='contain' alt='contain' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>contain\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n  \u003Cfigure>\u003Cimg class='cover' alt='cover' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>cover\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n  \u003Cfigure>\u003Cimg class='none' alt='none' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>none\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n  \u003Cfigure>\u003Cimg class='scale' alt='scale-down' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='400' height='200'%3E%3Crect width='400' height='200' fill='%23ff7a59'\u002F%3E%3Ccircle cx='200' cy='100' r='70' fill='%23ffffff'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>scale-down\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003C\u002Fdiv>",{"id":124,"language":16,"code":125,"is_editable":119},434,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }\n  .card { border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }\n  .card img { width: 100%; aspect-ratio: 4 \u002F 3; object-fit: cover; display: block; }\n  .card div { padding: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='grid'>\n  \u003Carticle class='card'>\u003Cimg alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='600' height='200'%3E%3Crect width='600' height='200' fill='%232a9d8f'\u002F%3E%3Ccircle cx='300' cy='100' r='80' fill='%23e9c46a'\u002F%3E%3C\u002Fsvg%3E\">\u003Cdiv>Wide source, 4 \u002F 3 card\u003C\u002Fdiv>\u003C\u002Farticle>\n  \u003Carticle class='card'>\u003Cimg alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='500'%3E%3Crect width='200' height='500' fill='%23264653'\u002F%3E%3Ccircle cx='100' cy='250' r='80' fill='%23e76f51'\u002F%3E%3C\u002Fsvg%3E\">\u003Cdiv>Tall source, same shape\u003C\u002Fdiv>\u003C\u002Farticle>\n  \u003Carticle class='card'>\u003Cimg alt='Sample' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23e63946'\u002F%3E%3Ccircle cx='150' cy='150' r='80' fill='%23f1faee'\u002F%3E%3C\u002Fsvg%3E\">\u003Cdiv>Square source, same shape\u003C\u002Fdiv>\u003C\u002Farticle>\n\u003C\u002Fdiv>",{"id":127,"language":16,"code":128,"is_editable":119},435,"\u003Cstyle>\n  body { font: 14px system-ui, sans-serif; padding: 16px; display: flex; gap: 24px; align-items: center; }\n  .avatar { width: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #0b5fff; }\n  .top { object-position: top; }\n  .bottom { object-position: bottom; }\n\u003C\u002Fstyle>\n\u003Cfigure>\u003Cimg class='avatar top' alt='Top' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='400'%3E%3Crect width='200' height='200' fill='%23ffb703'\u002F%3E%3Crect y='200' width='200' height='200' fill='%23023047'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>object-position: top\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003Cfigure>\u003Cimg class='avatar bottom' alt='Bottom' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='400'%3E%3Crect width='200' height='200' fill='%23ffb703'\u002F%3E%3Crect y='200' width='200' height='200' fill='%23023047'\u002F%3E%3C\u002Fsvg%3E\">\u003Cfigcaption>object-position: bottom\u003C\u002Ffigcaption>\u003C\u002Ffigure>",{"id":130,"language":16,"code":131,"is_editable":119},436,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; max-width: 640px; }\n  .video { width: 100%; aspect-ratio: 16 \u002F 9; background: #000; color: #fff; display: grid; place-items: center; border-radius: 12px; }\n  iframe.video { border: 0; }\n  .legacy { position: relative; padding-top: 56.25%; background: #555; color: #fff; margin-top: 16px; }\n  .legacy span { position: absolute; inset: 0; display: grid; place-items: center; }\n\u003C\u002Fstyle>\n\u003Cdiv class='video'>Modern: aspect-ratio 16 \u002F 9 (works for video, iframe, canvas)\u003C\u002Fdiv>\n\u003Cdiv class='legacy'>\u003Cspan>Legacy padding-top: 56.25% hack\u003C\u002Fspan>\u003C\u002Fdiv>",{"id":133,"language":16,"code":134,"is_editable":119},437,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .hero { width: 100%; background: linear-gradient(135deg, #8ecae6, #023047); color: #fff; display: grid; place-items: center; aspect-ratio: 4 \u002F 5; border-radius: 12px; }\n  @media (min-width: 600px) { .hero { aspect-ratio: 21 \u002F 9; } }\n\u003C\u002Fstyle>\n\u003Cdiv class='hero'>4 \u002F 5 on mobile, 21 \u002F 9 on screens wider than 600px\u003C\u002Fdiv>",{"id":136,"language":137,"code":138,"is_editable":119},438,"javascript","const ratios = [\n  { name: 'Square', w: 1, h: 1 },\n  { name: 'Photo', w: 4, h: 3 },\n  { name: 'Video', w: 16, h: 9 },\n  { name: 'Ultrawide', w: 21, h: 9 }\n];\n\nvar width = 640;\nratios.forEach(function (r) {\n  var height = Math.round(width * r.h \u002F r.w);\n  console.log(r.name + ' (' + r.w + '\u002F' + r.h + ') at ' + width + 'px wide = ' + height + 'px tall');\n});",[140,147],{"id":141,"title":142,"slug":143,"prompt":144,"starter_code":145,"expected_output":146,"language":16,"order_index":23},165,"Build a Uniform Thumbnail Grid","uniform-thumbnail-grid","Make all images in the gallery the same 1 \u002F 1 square using aspect-ratio and object-fit cover, even though their sources have different sizes.","\u003Cstyle>\n  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }\n  .gallery img { width: 100%; }\n\u003C\u002Fstyle>\n\u003Cdiv class='gallery'>\n  \u003Cimg alt='a' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='300' height='100'%3E%3Crect width='300' height='100' fill='tomato'\u002F%3E%3C\u002Fsvg%3E\">\n  \u003Cimg alt='b' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='100' height='300'%3E%3Crect width='100' height='300' fill='teal'\u002F%3E%3C\u002Fsvg%3E\">\n  \u003Cimg alt='c' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='200' height='200'%3E%3Crect width='200' height='200' fill='gold'\u002F%3E%3C\u002Fsvg%3E\">\n\u003C\u002Fdiv>","Images use aspect-ratio: 1 \u002F 1 and object-fit: cover so all tiles are equal squares",{"id":148,"title":149,"slug":150,"prompt":151,"starter_code":152,"expected_output":153,"language":16,"order_index":12},166,"Responsive Video Box","responsive-video-box","Turn the fixed size video placeholder into a responsive 16 \u002F 9 box that never exceeds 720px width and keeps its shape on small screens.","\u003Cstyle>\n  .video { width: 720px; height: 300px; background: #000; color: #fff; }\n\u003C\u002Fstyle>\n\u003Cdiv class='video'>Video placeholder\u003C\u002Fdiv>","Video box uses width: 100%, max-width: 720px and aspect-ratio: 16 \u002F 9 with no fixed height","2026-09-30T18:00:08+00:00",{"id":156,"slug":157,"title":158},120,"centering-techniques","Centering Techniques",{"id":160,"slug":161,"title":162},122,"website-layout-basics","Website Layout Basics",{"data":164},[165,485],{"id":23,"name":15,"slug":166,"icon":5,"icon_url":5,"short_description":167,"meta_title":168,"meta_description":169,"og_image":170,"locale":171,"subcategories":172},"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",[173,198,233,257,333,367,381,409,433,449],{"id":23,"name":174,"slug":175,"order_index":23,"topics":176},"HTML Fundamentals & Setup","html-fundamentals-setup",[177,180,183,186,190,194],{"id":12,"title":178,"slug":179,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":181,"slug":182,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":184,"slug":185,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":187,"title":188,"slug":189,"order_index":187,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":191,"title":192,"slug":193,"order_index":191,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":195,"title":196,"slug":197,"order_index":195,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":199,"slug":200,"order_index":12,"topics":201},"Text & Content Basics","text-content-basics",[202,205,209,213,217,221,225,229],{"id":51,"title":203,"slug":204,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":206,"title":207,"slug":208,"order_index":206,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":210,"title":211,"slug":212,"order_index":210,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":214,"title":215,"slug":216,"order_index":214,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":218,"title":219,"slug":220,"order_index":218,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":226,"title":227,"slug":228,"order_index":226,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":234,"slug":235,"order_index":65,"topics":236},"Links, Media & Navigation","links-media-navigation",[237,241,245,249,253],{"id":238,"title":239,"slug":240,"order_index":238,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":242,"title":243,"slug":244,"order_index":242,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":246,"title":247,"slug":248,"order_index":246,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":250,"title":251,"slug":252,"order_index":250,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":254,"title":255,"slug":256,"order_index":254,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":187,"name":258,"slug":259,"order_index":187,"topics":260},"Structuring Content","structuring-content",[261,266,271,276,281,285,289,293,297,301,305,309,313,317,321,325,329],{"id":262,"title":263,"slug":264,"order_index":265,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":267,"title":268,"slug":269,"order_index":270,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":272,"title":273,"slug":274,"order_index":275,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":277,"title":278,"slug":279,"order_index":280,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":282,"title":283,"slug":284,"order_index":262,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":286,"title":287,"slug":288,"order_index":267,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":290,"title":291,"slug":292,"order_index":272,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":294,"title":295,"slug":296,"order_index":277,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":298,"title":299,"slug":300,"order_index":282,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":302,"title":303,"slug":304,"order_index":286,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":306,"title":307,"slug":308,"order_index":290,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":310,"title":311,"slug":312,"order_index":294,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":314,"title":315,"slug":316,"order_index":298,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":318,"title":319,"slug":320,"order_index":318,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":322,"title":323,"slug":324,"order_index":322,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":326,"title":327,"slug":328,"order_index":326,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":330,"title":331,"slug":332,"order_index":330,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":334,"slug":335,"order_index":191,"topics":336},"Forms & User Input","forms-user-input",[337,342,347,352,357,362],{"id":338,"title":339,"slug":340,"order_index":341,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":343,"title":344,"slug":345,"order_index":346,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":348,"title":349,"slug":350,"order_index":351,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":353,"title":354,"slug":355,"order_index":356,"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":358,"title":359,"slug":360,"order_index":361,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":363,"title":364,"slug":365,"order_index":366,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":206,"name":368,"slug":369,"order_index":195,"topics":370},"Graphics & Visuals","graphics-visuals",[371,376],{"id":372,"title":373,"slug":374,"order_index":375,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":377,"title":378,"slug":379,"order_index":380,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":210,"name":382,"slug":383,"order_index":51,"topics":384},"Multimedia","multimedia",[385,390,395,400,405],{"id":386,"title":387,"slug":388,"order_index":389,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":391,"title":392,"slug":393,"order_index":394,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":396,"title":397,"slug":398,"order_index":399,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":401,"title":402,"slug":403,"order_index":404,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":406,"title":407,"slug":408,"order_index":338,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":214,"name":410,"slug":411,"order_index":206,"topics":412},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[413,417,421,425,429],{"id":414,"title":415,"slug":416,"order_index":343,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":418,"title":419,"slug":420,"order_index":348,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":422,"title":423,"slug":424,"order_index":353,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":426,"title":427,"slug":428,"order_index":358,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":430,"title":431,"slug":432,"order_index":363,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":218,"name":434,"slug":435,"order_index":210,"topics":436},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[437,441,445],{"id":438,"title":439,"slug":440,"order_index":372,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":442,"title":443,"slug":444,"order_index":377,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":446,"title":447,"slug":448,"order_index":386,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":222,"name":450,"slug":451,"order_index":214,"topics":452},"Reference & Practice","reference-practice",[453,457,461,465,469,473,477,481],{"id":454,"title":455,"slug":456,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":458,"title":459,"slug":460,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":462,"title":463,"slug":464,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":466,"title":467,"slug":468,"order_index":187,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":470,"title":471,"slug":472,"order_index":191,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":474,"title":475,"slug":476,"order_index":195,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":478,"title":479,"slug":480,"order_index":51,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":482,"title":483,"slug":484,"order_index":206,"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":486,"meta_title":487,"meta_description":488,"og_image":5,"locale":171,"subcategories":489},"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.",[490,519,543,579,611,643,675,696,724,752],{"id":280,"name":491,"slug":492,"order_index":493,"topics":494},"UI Components","ui-components",0,[495,499,503,507,511,515],{"id":496,"title":497,"slug":498,"order_index":406,"cornerstone":52,"reading_time_minutes":195},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":500,"title":501,"slug":502,"order_index":414,"cornerstone":52,"reading_time_minutes":195},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":504,"title":505,"slug":506,"order_index":418,"cornerstone":52,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":508,"title":509,"slug":510,"order_index":422,"cornerstone":52,"reading_time_minutes":195},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":512,"title":513,"slug":514,"order_index":426,"cornerstone":52,"reading_time_minutes":195},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":516,"title":517,"slug":518,"order_index":430,"cornerstone":52,"reading_time_minutes":195},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":226,"name":520,"slug":521,"order_index":493,"topics":522},"CSS Fundamentals & Setup","css-fundamentals-setup",[523,527,531,535,539],{"id":524,"title":525,"slug":526,"order_index":23,"cornerstone":52,"reading_time_minutes":187},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":528,"title":529,"slug":530,"order_index":12,"cornerstone":52,"reading_time_minutes":187},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":532,"title":533,"slug":534,"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":536,"title":537,"slug":538,"order_index":187,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":540,"title":541,"slug":542,"order_index":191,"cornerstone":52,"reading_time_minutes":191},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":230,"name":544,"slug":545,"order_index":493,"topics":546},"Selectors & the Cascade","selectors-the-cascade",[547,551,555,559,563,567,571,575],{"id":548,"title":549,"slug":550,"order_index":195,"cornerstone":52,"reading_time_minutes":187},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":552,"title":553,"slug":554,"order_index":51,"cornerstone":52,"reading_time_minutes":187},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":556,"title":557,"slug":558,"order_index":206,"cornerstone":52,"reading_time_minutes":187},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":560,"title":561,"slug":562,"order_index":210,"cornerstone":52,"reading_time_minutes":195},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":564,"title":565,"slug":566,"order_index":214,"cornerstone":52,"reading_time_minutes":191},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":568,"title":569,"slug":570,"order_index":218,"cornerstone":52,"reading_time_minutes":191},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":572,"title":573,"slug":574,"order_index":222,"cornerstone":52,"reading_time_minutes":187},93,"CSS Specificity Explained","css-specificity-explained",{"id":576,"title":577,"slug":578,"order_index":226,"cornerstone":52,"reading_time_minutes":191},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":238,"name":580,"slug":581,"order_index":493,"topics":582},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[583,587,591,595,599,603,607],{"id":584,"title":585,"slug":586,"order_index":230,"cornerstone":52,"reading_time_minutes":191},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":588,"title":589,"slug":590,"order_index":238,"cornerstone":52,"reading_time_minutes":187},96,"CSS Backgrounds","css-backgrounds",{"id":592,"title":593,"slug":594,"order_index":242,"cornerstone":52,"reading_time_minutes":191},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":596,"title":597,"slug":598,"order_index":246,"cornerstone":52,"reading_time_minutes":191},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":600,"title":601,"slug":602,"order_index":250,"cornerstone":52,"reading_time_minutes":195},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":604,"title":605,"slug":606,"order_index":254,"cornerstone":52,"reading_time_minutes":191},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":608,"title":609,"slug":610,"order_index":265,"cornerstone":52,"reading_time_minutes":195},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":242,"name":612,"slug":613,"order_index":493,"topics":614},"Box Model & Spacing","box-model-spacing",[615,619,623,627,631,635,639],{"id":616,"title":617,"slug":618,"order_index":270,"cornerstone":52,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":620,"title":621,"slug":622,"order_index":275,"cornerstone":52,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":624,"title":625,"slug":626,"order_index":280,"cornerstone":52,"reading_time_minutes":195},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":628,"title":629,"slug":630,"order_index":262,"cornerstone":52,"reading_time_minutes":210},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":632,"title":633,"slug":634,"order_index":267,"cornerstone":52,"reading_time_minutes":191},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":636,"title":637,"slug":638,"order_index":272,"cornerstone":52,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":640,"title":641,"slug":642,"order_index":277,"cornerstone":52,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":246,"name":644,"slug":645,"order_index":493,"topics":646},"Typography & Text","typography-text",[647,651,655,659,663,667,671],{"id":648,"title":649,"slug":650,"order_index":282,"cornerstone":52,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":652,"title":653,"slug":654,"order_index":286,"cornerstone":52,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":656,"title":657,"slug":658,"order_index":290,"cornerstone":52,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":660,"title":661,"slug":662,"order_index":294,"cornerstone":52,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":664,"title":665,"slug":666,"order_index":298,"cornerstone":52,"reading_time_minutes":206},113,"Styling Links","styling-links-css",{"id":668,"title":669,"slug":670,"order_index":318,"cornerstone":52,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":672,"title":673,"slug":674,"order_index":322,"cornerstone":52,"reading_time_minutes":214},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":250,"name":43,"slug":44,"order_index":493,"topics":676},[677,681,685,689,693,694,695],{"id":678,"title":679,"slug":680,"order_index":326,"cornerstone":52,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":682,"title":683,"slug":684,"order_index":330,"cornerstone":52,"reading_time_minutes":195},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":686,"title":687,"slug":688,"order_index":341,"cornerstone":52,"reading_time_minutes":195},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":690,"title":691,"slug":692,"order_index":346,"cornerstone":52,"reading_time_minutes":191},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":156,"title":158,"slug":157,"order_index":351,"cornerstone":52,"reading_time_minutes":195},{"id":37,"title":38,"slug":39,"order_index":356,"cornerstone":52,"reading_time_minutes":51},{"id":160,"title":162,"slug":161,"order_index":361,"cornerstone":52,"reading_time_minutes":206},{"id":265,"name":697,"slug":698,"order_index":493,"topics":699},"The Modern CSS Toolkit","the-modern-css-toolkit",[700,704,708,712,716,720],{"id":701,"title":702,"slug":703,"order_index":366,"cornerstone":52,"reading_time_minutes":206},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":705,"title":706,"slug":707,"order_index":375,"cornerstone":52,"reading_time_minutes":206},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":709,"title":710,"slug":711,"order_index":380,"cornerstone":52,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":713,"title":714,"slug":715,"order_index":389,"cornerstone":52,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":717,"title":718,"slug":719,"order_index":394,"cornerstone":52,"reading_time_minutes":210},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":721,"title":722,"slug":723,"order_index":399,"cornerstone":52,"reading_time_minutes":206},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":270,"name":725,"slug":726,"order_index":493,"topics":727},"Responsive Design","responsive-design",[728,732,736,740,744,748],{"id":729,"title":730,"slug":731,"order_index":404,"cornerstone":52,"reading_time_minutes":210},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":733,"title":734,"slug":735,"order_index":338,"cornerstone":52,"reading_time_minutes":206},136,"Media Queries","media-queries",{"id":737,"title":738,"slug":739,"order_index":343,"cornerstone":52,"reading_time_minutes":206},137,"Responsive Images & Video","responsive-images-and-video",{"id":741,"title":742,"slug":743,"order_index":348,"cornerstone":52,"reading_time_minutes":210},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":745,"title":746,"slug":747,"order_index":353,"cornerstone":52,"reading_time_minutes":210},139,"Container Queries","container-queries",{"id":749,"title":750,"slug":751,"order_index":358,"cornerstone":52,"reading_time_minutes":222},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":275,"name":753,"slug":754,"order_index":493,"topics":755},"Transitions & Animation","transitions-animation",[756,760,764,768,772,776,780],{"id":757,"title":758,"slug":759,"order_index":363,"cornerstone":52,"reading_time_minutes":191},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":761,"title":762,"slug":763,"order_index":372,"cornerstone":52,"reading_time_minutes":187},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":765,"title":766,"slug":767,"order_index":377,"cornerstone":52,"reading_time_minutes":191},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":769,"title":770,"slug":771,"order_index":386,"cornerstone":52,"reading_time_minutes":191},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":773,"title":774,"slug":775,"order_index":391,"cornerstone":52,"reading_time_minutes":191},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":777,"title":778,"slug":779,"order_index":396,"cornerstone":52,"reading_time_minutes":191},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":781,"title":782,"slug":783,"order_index":401,"cornerstone":52,"reading_time_minutes":195},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]