[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-text-effects":6,"course-tree":169,"blog-categories":786},{"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":104,"quiz":5,"exercises":128,"published_at":5,"updated_at":160,"prev":161,"next":165},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects","\u003Ch2 id=\"css-text-effects-text-wrap-balance-line-clamp-ellipsis-shadows-and-gradients\">CSS Text Effects: text-wrap balance, line-clamp, Ellipsis, Shadows and Gradients\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS text effects\u003C\u002Fstrong> make text look polished and stay readable at any width. Modern CSS gives you native tools that used to need JavaScript: \u003Ccode>text-wrap: balance\u003C\u002Fcode> for even headings, \u003Ccode>text-wrap: pretty\u003C\u002Fcode> for better paragraph endings, \u003Ccode>line-clamp\u003C\u002Fcode> for multi-line truncation, plus shadows, gradient text, outlines and more. This lesson covers the most useful effects with practical code and browser support notes.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>Balanced and pretty line breaking with \u003Ccode>text-wrap\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Single-line ellipsis and multi-line \u003Ccode>line-clamp\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-shadow\u003C\u002Fcode> for depth, glow and outlines\u003C\u002Fli>\u003Cli>Gradient text with \u003Ccode>background-clip: text\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Text stroke with \u003Ccode>-webkit-text-stroke\u003C\u002Fcode> and \u003Ccode>paint-order\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Drop caps with \u003Ccode>initial-letter\u003C\u002Fcode> and \u003Ccode>::first-letter\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Vertical text with \u003Ccode>writing-mode\u003C\u002Fcode> and text selection styling\u003C\u002Fli>\u003Cli>Accessibility and performance guidelines for text effects\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"text-wrap-balance\">text-wrap: balance\u003C\u002Fh3>\u003Cp>Headings often end with a single short word on the last line (a widow). \u003Ccode>text-wrap: balance\u003C\u002Fcode> asks the browser to spread words evenly across all lines so they are similar in length.\u003C\u002Fp>\u003Cpre>h1, h2, h3 { text-wrap: balance; }\u003C\u002Fpre>\u003Cul>\u003Cli>It is best for headings, captions, blockquotes and short text, because the browser limits balancing to a small number of lines (about 6 in Chromium and 10 in Firefox).\u003C\u002Fli>\u003Cli>It does not change the width of the box, only where lines break. Combine it with \u003Ccode>max-width\u003C\u002Fcode> to control the overall block.\u003C\u002Fli>\u003Cli>Browsers that do not support it simply ignore it, so it is a safe progressive enhancement.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"text-wrap-pretty\">text-wrap: pretty\u003C\u002Fh3>\u003Cp>\u003Ccode>text-wrap: pretty\u003C\u002Fcode> asks the browser to favor better-looking line breaks in paragraphs, mainly by avoiding very short last lines. It is more relaxed than balance and suitable for body text, at a small layout cost. Support is newer and limited to some browsers, so treat it as an enhancement.\u003C\u002Fp>\u003Ch3 id=\"text-wrap-shorthand-and-other-values\">text-wrap Shorthand and Other Values\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>text-wrap: wrap\u003C\u002Fcode>: normal wrapping (default).\u003C\u002Fli>\u003Cli>\u003Ccode>text-wrap: nowrap\u003C\u002Fcode>: no wrapping, same as \u003Ccode>white-space: nowrap\u003C\u002Fcode> for wrapping behavior.\u003C\u002Fli>\u003Cli>\u003Ccode>text-wrap: stable\u003C\u002Fcode>: keeps earlier lines from changing while the user edits, useful in editable content.\u003C\u002Fli>\u003Cli>\u003Ccode>text-wrap\u003C\u002Fcode> is the shorthand for \u003Ccode>text-wrap-mode\u003C\u002Fcode> and \u003Ccode>text-wrap-style\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"single-line-ellipsis\">Single-Line Ellipsis\u003C\u002Fh3>\u003Cpre>.ellipsis {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\u003C\u002Fpre>\u003Cp>All three properties are required, and the element needs a constrained width. In Flexbox or Grid children also add \u003Ccode>min-width: 0\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"multi-line-truncation-line-clamp\">Multi-Line Truncation: line-clamp\u003C\u002Fh3>\u003Cp>The widely supported pattern uses the legacy box model together with the prefixed property:\u003C\u002Fp>\u003Cpre>.clamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  line-clamp: 3;\n  overflow: hidden;\n}\u003C\u002Fpre>\u003Cul>\u003Cli>The number is how many lines to show before adding an ellipsis.\u003C\u002Fli>\u003Cli>The standard unprefixed \u003Ccode>line-clamp\u003C\u002Fcode> is being rolled out and will work without the \u003Ccode>-webkit-box\u003C\u002Fcode> display, but keep the prefixed version for compatibility.\u003C\u002Fli>\u003Cli>Clamped content remains in the DOM, so screen readers still read the whole text. Offer a way to see the full text, such as a Read more button.\u003C\u002Fli>\u003Cli>Tailwind CSS provides this as \u003Ccode>line-clamp-3\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"text-shadow\">text-shadow\u003C\u002Fh3>\u003Cp>Syntax: \u003Ccode>text-shadow: x-offset y-offset blur color;\u003C\u002Fcode> and you can stack many shadows separated by commas.\u003C\u002Fp>\u003Cul>\u003Cli>Soft depth: \u003Ccode>text-shadow: 0 2px 4px rgb(0 0 0 \u002F 0.3);\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Glow: \u003Ccode>text-shadow: 0 0 8px #0ff, 0 0 20px #0ff;\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Fake outline: four shadows with 1px offsets in each direction.\u003C\u002Fli>\u003Cli>Readability on images: a subtle dark shadow helps white text over photos, but an overlay is usually the more reliable fix.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"gradient-text\">Gradient Text\u003C\u002Fh3>\u003Cpre>.gradient {\n  background: linear-gradient(90deg, #ff6a00, #ee0979);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n}\u003C\u002Fpre>\u003Cp>Always keep a fallback \u003Ccode>color\u003C\u002Fcode> before the gradient rules for browsers that do not support clipping, and make sure the lightest part of the gradient still has enough contrast with the page background.\u003C\u002Fp>\u003Ch3 id=\"text-stroke-and-paint-order\">Text Stroke and paint-order\u003C\u002Fh3>\u003Cp>\u003Ccode>-webkit-text-stroke: 2px #222;\u003C\u002Fcode> draws an outline around glyphs and is supported in all modern browsers. The stroke is centered on the glyph edge, so it eats into the fill. Add \u003Ccode>paint-order: stroke fill;\u003C\u002Fcode> to draw the stroke underneath the fill for a cleaner outer outline. Use \u003Ccode>-webkit-text-fill-color: transparent;\u003C\u002Fcode> for hollow text.\u003C\u002Fp>\u003Ch3 id=\"drop-caps\">Drop Caps\u003C\u002Fh3>\u003Cp>The \u003Ccode>initial-letter\u003C\u002Fcode> property makes a large first letter that spans several lines: \u003Ccode>p::first-letter { initial-letter: 3; }\u003C\u002Fcode>. Since support is limited, a float based fallback is common: \u003Ccode>float: left; font-size: 3.2em; line-height: 0.9; padding-right: 0.08em;\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"vertical-text-writing-mode\">Vertical Text: writing-mode\u003C\u002Fh3>\u003Cp>\u003Ccode>writing-mode: vertical-rl;\u003C\u002Fcode> turns text to run top to bottom. \u003Ccode>text-orientation: upright;\u003C\u002Fcode> keeps letters upright in vertical text. It is essential for East Asian vertical typography and also great for sidebar labels and rotated table headers without transforms.\u003C\u002Fp>\u003Ch3 id=\"styling-text-selection\">Styling Text Selection\u003C\u002Fh3>\u003Cp>The \u003Ccode>::selection\u003C\u002Fcode> pseudo-element styles highlighted text: \u003Ccode>::selection { background: #ffe066; color: #000; }\u003C\u002Fcode>. Keep contrast high.\u003C\u002Fp>\u003Ch3 id=\"other-handy-text-effects\">Other Handy Text Effects\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>text-decoration\u003C\u002Fcode> variants: wavy red underline for errors, or a thick offset underline for links.\u003C\u002Fli>\u003Cli>\u003Ccode>text-underline-position: under\u003C\u002Fcode> moves the underline below descenders.\u003C\u002Fli>\u003Cli>\u003Ccode>hyphens: auto\u003C\u002Fcode> reduces ragged edges in narrow columns.\u003C\u002Fli>\u003Cli>\u003Ccode>text-emphasis\u003C\u002Fcode> adds marks above characters, used in East Asian typography.\u003C\u002Fli>\u003Cli>\u003Ccode>mix-blend-mode\u003C\u002Fcode> and \u003Ccode>backdrop-filter\u003C\u002Fcode> can create advanced overlay text, but test performance on mobile.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"accessibility-and-performance\">Accessibility and Performance\u003C\u002Fh3>\u003Cul>\u003Cli>Text effects must not reduce contrast below 4.5:1 for normal text and 3:1 for large text.\u003C\u002Fli>\u003Cli>Gradient and stroke text can be unreadable in Windows High Contrast (forced colors) mode, so test it.\u003C\u002Fli>\u003Cli>Do not use heavy animated effects on large blocks of text. Respect \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> for moving text effects.\u003C\u002Fli>\u003Cli>Use real text, never text inside images, so it stays selectable, translatable and searchable.\u003C\u002Fli>\u003Cli>Avoid large blur radii on many elements, since they are costly to paint.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Using \u003Ccode>text-wrap: balance\u003C\u002Fcode> on long paragraphs and expecting it to work.\u003C\u002Fli>\u003Cli>Forgetting \u003Ccode>white-space: nowrap\u003C\u002Fcode> with \u003Ccode>text-overflow: ellipsis\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Missing \u003Ccode>overflow: hidden\u003C\u002Fcode> on a clamped element.\u003C\u002Fli>\u003Cli>Making gradient text with a transparent fill and no fallback color.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>line-clamp\u003C\u002Fcode> to hide the text from screen readers.\u003C\u002Fli>\u003Cli>Stacking too many text shadows, which hurts readability.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-does-text-wrap-balance-do\">What does text-wrap: balance do?\u003C\u002Fh4>\u003Cp>It balances the line lengths of a block of text so headings do not end with one lonely word.\u003C\u002Fp>\u003Ch4 id=\"what-is-the-difference-between-balance-and-pretty\">What is the difference between balance and pretty?\u003C\u002Fh4>\u003Cp>\u003Ccode>balance\u003C\u002Fcode> equalizes all lines in short text. \u003Ccode>pretty\u003C\u002Fcode> mostly fixes bad last lines in long paragraphs.\u003C\u002Fp>\u003Ch4 id=\"how-do-i-truncate-text-after-two-lines\">How do I truncate text after two lines?\u003C\u002Fh4>\u003Cp>Use the \u003Ccode>line-clamp\u003C\u002Fcode> pattern with a value of 2, including \u003Ccode>display: -webkit-box\u003C\u002Fcode> and \u003Ccode>overflow: hidden\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch4 id=\"how-do-i-make-gradient-text\">How do I make gradient text?\u003C\u002Fh4>\u003Cp>Set a gradient as the background, clip it to the text with \u003Ccode>background-clip: text\u003C\u002Fcode> and make the text fill transparent.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Use \u003Ccode>text-wrap: balance\u003C\u002Fcode> on headings and \u003Ccode>text-wrap: pretty\u003C\u002Fcode> on paragraphs as progressive enhancements.\u003C\u002Fli>\u003Cli>Ellipsis needs nowrap + overflow hidden + text-overflow. Multi-line truncation uses \u003Ccode>line-clamp\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Gradient text needs \u003Ccode>background-clip: text\u003C\u002Fcode> and a transparent fill.\u003C\u002Fli>\u003Cli>Stack \u003Ccode>text-shadow\u003C\u002Fcode> values for depth or glow, but protect contrast.\u003C\u002Fli>\u003Cli>Test accessibility, forced colors and reduced motion for every effect.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.box { width: 360px; border: 1px dashed #999; padding: 10px; margin: 10px 0; }\nh2 { margin: 0; font-size: 1.6rem; font-family: system-ui, sans-serif; }\n.plain { text-wrap: wrap; }\n.balance { text-wrap: balance; }\n<\u002Fstyle>\n<div class='box'><h2 class='plain'>Understanding modern CSS layout and typography<\u002Fh2><\u002Fdiv>\n<div class='box'><h2 class='balance'>Understanding modern CSS layout and typography<\u002Fh2><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\np { width: 300px; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; border: 1px dashed #999; padding: 8px; }\n.wrap { text-wrap: wrap; }\n.pretty { text-wrap: pretty; }\n<\u002Fstyle>\n<p class='wrap'>wrap: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.<\u002Fp>\n<p class='pretty'>pretty: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.ellipsis { width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 6px; }\n.clamp2 { width: 240px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; border: 1px solid #999; padding: 6px; margin-top: 10px; }\n<\u002Fstyle>\n<div class='ellipsis'>Single line ellipsis: this sentence is too long to fit in one line.<\u002Fdiv>\n<div class='clamp2'>Two line clamp: this paragraph is much longer and will only show the first two lines before it is cut with an ellipsis, even though there is more text.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nbody { background: #111; padding: 20px; font-family: system-ui, sans-serif; }\nh2 { font-size: 2.2rem; margin: 10px 0; color: #fff; }\n.soft { text-shadow: 0 2px 6px rgb(0 0 0 \u002F 0.6); }\n.glow { color: #e0ffff; text-shadow: 0 0 6px #0ff, 0 0 18px #0ff, 0 0 36px #08f; }\n.retro { color: #ffe066; text-shadow: 3px 3px 0 #e74c3c, 6px 6px 0 #8e44ad; }\n<\u002Fstyle>\n<h2 class='soft'>Soft depth shadow<\u002Fh2>\n<h2 class='glow'>Neon glow effect<\u002Fh2>\n<h2 class='retro'>Retro stacked shadow<\u002Fh2>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nh1 { font-family: system-ui, sans-serif; font-size: 3rem; margin: 0; }\n.gradient {\n  color: #e74c3c; \u002F* fallback *\u002F\n  background: linear-gradient(90deg, #ff6a00, #ee0979, #7b2ff7);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n<\u002Fstyle>\n<h1 class='gradient'>Gradient Text<\u002Fh1>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\nbody { background: #fdf6e3; padding: 20px; }\n.outline { font: 800 3.5rem system-ui, sans-serif; color: #ffe066; -webkit-text-stroke: 3px #222; paint-order: stroke fill; margin: 0; }\n.hollow { font: 800 3.5rem system-ui, sans-serif; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #2c3e50; margin: 0; }\n<\u002Fstyle>\n<p class='outline'>Outlined<\u002Fp>\n<p class='hollow'>Hollow<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.dropcap::first-letter { float: left; font-size: 3.6em; line-height: 0.85; padding: 0.05em 0.1em 0 0; font-weight: 700; color: #c0392b; font-family: Georgia, serif; }\n.vertical { writing-mode: vertical-rl; text-orientation: mixed; font: 700 1.2rem system-ui, sans-serif; letter-spacing: 0.15em; background: #2c3e50; color: #fff; padding: 12px 6px; display: inline-block; margin-left: 20px; }\n::selection { background: #ffe066; color: #000; }\np { width: 320px; line-height: 1.6; font-family: Georgia, serif; }\n<\u002Fstyle>\n<p class='dropcap'>Drop caps bring a classic editorial feel to the start of an article. Select this text to see the custom highlight color as well.<\u002Fp>\n<span class='vertical'>SIDEBAR LABEL<\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Typography & Text","typography-text",{"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",[],[],[],7,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-text-effects","CSS Text Effects: text-wrap balance, line-clamp, ellipsis, shadow","Learn CSS text effects: text-wrap balance and pretty, single-line ellipsis, multi-line line-clamp, text-shadow, gradient text, text stroke, drop caps and accessibility.",[31],{"id":32,"text":33,"level":34,"children":35},"css-text-effects-text-wrap-balance-line-clamp-ellipsis-shadows-and-gradients","CSS Text Effects: text-wrap balance, line-clamp, Ellipsis, Shadows and Gradients",2,[36,41,45,49,53,57,61,64,68,72,76,80,84,88,92,96,100],{"id":37,"text":38,"level":39,"children":40},"what-you-will-learn","What You Will Learn",3,[],{"id":42,"text":43,"level":39,"children":44},"text-wrap-balance","text-wrap: balance",[],{"id":46,"text":47,"level":39,"children":48},"text-wrap-pretty","text-wrap: pretty",[],{"id":50,"text":51,"level":39,"children":52},"text-wrap-shorthand-and-other-values","text-wrap Shorthand and Other Values",[],{"id":54,"text":55,"level":39,"children":56},"single-line-ellipsis","Single-Line Ellipsis",[],{"id":58,"text":59,"level":39,"children":60},"multi-line-truncation-line-clamp","Multi-Line Truncation: line-clamp",[],{"id":62,"text":62,"level":39,"children":63},"text-shadow",[],{"id":65,"text":66,"level":39,"children":67},"gradient-text","Gradient Text",[],{"id":69,"text":70,"level":39,"children":71},"text-stroke-and-paint-order","Text Stroke and paint-order",[],{"id":73,"text":74,"level":39,"children":75},"drop-caps","Drop Caps",[],{"id":77,"text":78,"level":39,"children":79},"vertical-text-writing-mode","Vertical Text: writing-mode",[],{"id":81,"text":82,"level":39,"children":83},"styling-text-selection","Styling Text Selection",[],{"id":85,"text":86,"level":39,"children":87},"other-handy-text-effects","Other Handy Text Effects",[],{"id":89,"text":90,"level":39,"children":91},"accessibility-and-performance","Accessibility and Performance",[],{"id":93,"text":94,"level":39,"children":95},"common-mistakes","Common Mistakes",[],{"id":97,"text":98,"level":39,"children":99},"frequently-asked-questions","Frequently Asked Questions",[],{"id":101,"text":102,"level":39,"children":103},"key-takeaways","Key Takeaways",[],[105,110,113,116,119,122,125],{"id":106,"language":107,"code":108,"is_editable":109},368,"html","\u003Cstyle>\n.box { width: 360px; border: 1px dashed #999; padding: 10px; margin: 10px 0; }\nh2 { margin: 0; font-size: 1.6rem; font-family: system-ui, sans-serif; }\n.plain { text-wrap: wrap; }\n.balance { text-wrap: balance; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>\u003Ch2 class='plain'>Understanding modern CSS layout and typography\u003C\u002Fh2>\u003C\u002Fdiv>\n\u003Cdiv class='box'>\u003Ch2 class='balance'>Understanding modern CSS layout and typography\u003C\u002Fh2>\u003C\u002Fdiv>",true,{"id":111,"language":107,"code":112,"is_editable":109},369,"\u003Cstyle>\np { width: 300px; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; border: 1px dashed #999; padding: 8px; }\n.wrap { text-wrap: wrap; }\n.pretty { text-wrap: pretty; }\n\u003C\u002Fstyle>\n\u003Cp class='wrap'>wrap: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.\u003C\u002Fp>\n\u003Cp class='pretty'>pretty: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.\u003C\u002Fp>",{"id":114,"language":107,"code":115,"is_editable":109},370,"\u003Cstyle>\n.ellipsis { width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 6px; }\n.clamp2 { width: 240px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; border: 1px solid #999; padding: 6px; margin-top: 10px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='ellipsis'>Single line ellipsis: this sentence is too long to fit in one line.\u003C\u002Fdiv>\n\u003Cdiv class='clamp2'>Two line clamp: this paragraph is much longer and will only show the first two lines before it is cut with an ellipsis, even though there is more text.\u003C\u002Fdiv>",{"id":117,"language":107,"code":118,"is_editable":109},371,"\u003Cstyle>\nbody { background: #111; padding: 20px; font-family: system-ui, sans-serif; }\nh2 { font-size: 2.2rem; margin: 10px 0; color: #fff; }\n.soft { text-shadow: 0 2px 6px rgb(0 0 0 \u002F 0.6); }\n.glow { color: #e0ffff; text-shadow: 0 0 6px #0ff, 0 0 18px #0ff, 0 0 36px #08f; }\n.retro { color: #ffe066; text-shadow: 3px 3px 0 #e74c3c, 6px 6px 0 #8e44ad; }\n\u003C\u002Fstyle>\n\u003Ch2 class='soft'>Soft depth shadow\u003C\u002Fh2>\n\u003Ch2 class='glow'>Neon glow effect\u003C\u002Fh2>\n\u003Ch2 class='retro'>Retro stacked shadow\u003C\u002Fh2>",{"id":120,"language":107,"code":121,"is_editable":109},372,"\u003Cstyle>\nh1 { font-family: system-ui, sans-serif; font-size: 3rem; margin: 0; }\n.gradient {\n  color: #e74c3c; \u002F* fallback *\u002F\n  background: linear-gradient(90deg, #ff6a00, #ee0979, #7b2ff7);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\u003C\u002Fstyle>\n\u003Ch1 class='gradient'>Gradient Text\u003C\u002Fh1>",{"id":123,"language":107,"code":124,"is_editable":109},373,"\u003Cstyle>\nbody { background: #fdf6e3; padding: 20px; }\n.outline { font: 800 3.5rem system-ui, sans-serif; color: #ffe066; -webkit-text-stroke: 3px #222; paint-order: stroke fill; margin: 0; }\n.hollow { font: 800 3.5rem system-ui, sans-serif; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #2c3e50; margin: 0; }\n\u003C\u002Fstyle>\n\u003Cp class='outline'>Outlined\u003C\u002Fp>\n\u003Cp class='hollow'>Hollow\u003C\u002Fp>",{"id":126,"language":107,"code":127,"is_editable":109},374,"\u003Cstyle>\n.dropcap::first-letter { float: left; font-size: 3.6em; line-height: 0.85; padding: 0.05em 0.1em 0 0; font-weight: 700; color: #c0392b; font-family: Georgia, serif; }\n.vertical { writing-mode: vertical-rl; text-orientation: mixed; font: 700 1.2rem system-ui, sans-serif; letter-spacing: 0.15em; background: #2c3e50; color: #fff; padding: 12px 6px; display: inline-block; margin-left: 20px; }\n::selection { background: #ffe066; color: #000; }\np { width: 320px; line-height: 1.6; font-family: Georgia, serif; }\n\u003C\u002Fstyle>\n\u003Cp class='dropcap'>Drop caps bring a classic editorial feel to the start of an article. Select this text to see the custom highlight color as well.\u003C\u002Fp>\n\u003Cspan class='vertical'>SIDEBAR LABEL\u003C\u002Fspan>",[129,137,144,151],{"id":130,"title":131,"slug":132,"prompt":133,"starter_code":134,"expected_output":135,"language":107,"order_index":136},145,"Balance a Headline","balance-a-headline","The headline below leaves one short word on the last line. Using a single CSS property on .headline, make the browser balance the line lengths. Also limit its width to 22em.","\u003Cstyle>\n.headline { font: 700 2rem\u002F1.2 system-ui, sans-serif; \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Ch1 class='headline'>Everything you need to know about modern CSS typography\u003C\u002Fh1>","The headline uses text-wrap: balance and max-width: 22em so the lines are even.",1,{"id":138,"title":139,"slug":140,"prompt":141,"starter_code":142,"expected_output":143,"language":107,"order_index":34},146,"Two-Line Card Description","two-line-card-description","Truncate the .desc text to exactly two lines with an ellipsis at the end using the line-clamp pattern. The text should be hidden after the second line.","\u003Cstyle>\n.card { width: 260px; border: 1px solid #ccc; padding: 12px; font-family: system-ui, sans-serif; }\n.desc { \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Cp class='desc'>This description is intentionally long so it needs more than two lines when displayed in a narrow card, and everything after the second line should be cut with an ellipsis.\u003C\u002Fp>\n\u003C\u002Fdiv>","Only two lines are visible and the second line ends with an ellipsis.",{"id":145,"title":146,"slug":147,"prompt":148,"starter_code":149,"expected_output":150,"language":107,"order_index":39},147,"Gradient Heading","gradient-heading","Make the h1 text show a horizontal gradient from #ff6a00 to #ee0979. Use background-clip for text and make the fill transparent. Keep a fallback color.","\u003Cstyle>\nh1 { font: 800 3rem system-ui, sans-serif; \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Ch1>Gradient Text\u003C\u002Fh1>","The heading text is filled by a gradient from #ff6a00 to #ee0979.",{"id":152,"title":153,"slug":154,"prompt":155,"starter_code":156,"expected_output":157,"language":158,"order_index":159},148,"Truncate Text in JavaScript","truncate-text-javascript","Write a function truncate(text, maxChars) that returns the text unchanged if its length is at most maxChars. Otherwise return the first maxChars - 1 characters followed by the ellipsis character (…), so the total length equals maxChars.","function truncate(text, maxChars) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(truncate('Short', 10));\nconsole.log(truncate('This is a long sentence', 10));\nconsole.log(truncate('Exactly ten', 11));","Short\nThis is a…\nExactly ten","javascript",4,"2026-09-30T17:07:01+00:00",{"id":162,"slug":163,"title":164},111,"web-fonts","Web Fonts: Google Fonts, @font-face and Variable Fonts",{"id":166,"slug":167,"title":168},113,"styling-links-css","Styling Links",{"data":170},[171,491],{"id":136,"name":172,"slug":173,"icon":5,"icon_url":5,"short_description":174,"meta_title":175,"meta_description":176,"og_image":177,"locale":178,"subcategories":179},"HTML","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",[180,204,239,263,339,373,387,415,439,455],{"id":136,"name":181,"slug":182,"order_index":136,"topics":183},"HTML Fundamentals & Setup","html-fundamentals-setup",[184,187,190,193,196,200],{"id":34,"title":185,"slug":186,"order_index":136,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":136,"title":188,"slug":189,"order_index":136,"cornerstone":25,"reading_time_minutes":136},"HTML Introduction & History","html-introduction-and-history",{"id":39,"title":191,"slug":192,"order_index":39,"cornerstone":25,"reading_time_minutes":34},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":159,"title":194,"slug":195,"order_index":159,"cornerstone":25,"reading_time_minutes":34},"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":25,"reading_time_minutes":34},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":205,"slug":206,"order_index":34,"topics":207},"Text & Content Basics","text-content-basics",[208,211,215,219,223,227,231,235],{"id":24,"title":209,"slug":210,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":212,"title":213,"slug":214,"order_index":212,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":216,"title":217,"slug":218,"order_index":216,"cornerstone":25,"reading_time_minutes":136},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":220,"title":221,"slug":222,"order_index":220,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":224,"title":225,"slug":226,"order_index":224,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":228,"title":229,"slug":230,"order_index":228,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":232,"title":233,"slug":234,"order_index":232,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":236,"title":237,"slug":238,"order_index":236,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":39,"name":240,"slug":241,"order_index":39,"topics":242},"Links, Media & Navigation","links-media-navigation",[243,247,251,255,259],{"id":244,"title":245,"slug":246,"order_index":244,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":248,"title":249,"slug":250,"order_index":248,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":252,"title":253,"slug":254,"order_index":252,"cornerstone":25,"reading_time_minutes":136},17,"HTML Favicon Setup","html-favicon-setup",{"id":256,"title":257,"slug":258,"order_index":256,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":260,"title":261,"slug":262,"order_index":260,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":159,"name":264,"slug":265,"order_index":159,"topics":266},"Structuring Content","structuring-content",[267,272,277,282,287,291,295,299,303,307,311,315,319,323,327,331,335],{"id":268,"title":269,"slug":270,"order_index":271,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":273,"title":274,"slug":275,"order_index":276,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":278,"title":279,"slug":280,"order_index":281,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":283,"title":284,"slug":285,"order_index":286,"cornerstone":25,"reading_time_minutes":136},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":288,"title":289,"slug":290,"order_index":268,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":292,"title":293,"slug":294,"order_index":273,"cornerstone":25,"reading_time_minutes":136},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":296,"title":297,"slug":298,"order_index":278,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":300,"title":301,"slug":302,"order_index":283,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":304,"title":305,"slug":306,"order_index":288,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":308,"title":309,"slug":310,"order_index":292,"cornerstone":25,"reading_time_minutes":39},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":312,"title":313,"slug":314,"order_index":296,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":316,"title":317,"slug":318,"order_index":300,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":320,"title":321,"slug":322,"order_index":304,"cornerstone":25,"reading_time_minutes":136},77,"HTML Symbols","html-symbols",{"id":324,"title":325,"slug":326,"order_index":324,"cornerstone":25,"reading_time_minutes":136},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":328,"title":329,"slug":330,"order_index":328,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":332,"title":333,"slug":334,"order_index":332,"cornerstone":25,"reading_time_minutes":136},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":336,"title":337,"slug":338,"order_index":336,"cornerstone":25,"reading_time_minutes":136},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":24,"name":340,"slug":341,"order_index":197,"topics":342},"Forms & User Input","forms-user-input",[343,348,353,358,363,368],{"id":344,"title":345,"slug":346,"order_index":347,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":349,"title":350,"slug":351,"order_index":352,"cornerstone":25,"reading_time_minutes":136},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":354,"title":355,"slug":356,"order_index":357,"cornerstone":25,"reading_time_minutes":136},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":359,"title":360,"slug":361,"order_index":362,"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":364,"title":365,"slug":366,"order_index":367,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":369,"title":370,"slug":371,"order_index":372,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":212,"name":374,"slug":375,"order_index":201,"topics":376},"Graphics & Visuals","graphics-visuals",[377,382],{"id":378,"title":379,"slug":380,"order_index":381,"cornerstone":25,"reading_time_minutes":39},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":383,"title":384,"slug":385,"order_index":386,"cornerstone":25,"reading_time_minutes":39},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":216,"name":388,"slug":389,"order_index":24,"topics":390},"Multimedia","multimedia",[391,396,401,406,411],{"id":392,"title":393,"slug":394,"order_index":395,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":397,"title":398,"slug":399,"order_index":400,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":402,"title":403,"slug":404,"order_index":405,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":407,"title":408,"slug":409,"order_index":410,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":412,"title":413,"slug":414,"order_index":344,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":220,"name":416,"slug":417,"order_index":212,"topics":418},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[419,423,427,431,435],{"id":420,"title":421,"slug":422,"order_index":349,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":424,"title":425,"slug":426,"order_index":354,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":428,"title":429,"slug":430,"order_index":359,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":432,"title":433,"slug":434,"order_index":364,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":436,"title":437,"slug":438,"order_index":369,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":224,"name":440,"slug":441,"order_index":216,"topics":442},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[443,447,451],{"id":444,"title":445,"slug":446,"order_index":378,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":448,"title":449,"slug":450,"order_index":383,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":452,"title":453,"slug":454,"order_index":392,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":228,"name":456,"slug":457,"order_index":220,"topics":458},"Reference & Practice","reference-practice",[459,463,467,471,475,479,483,487],{"id":460,"title":461,"slug":462,"order_index":136,"cornerstone":25,"reading_time_minutes":34},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":464,"title":465,"slug":466,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":468,"title":469,"slug":470,"order_index":39,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":472,"title":473,"slug":474,"order_index":159,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":476,"title":477,"slug":478,"order_index":197,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":480,"title":481,"slug":482,"order_index":201,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":484,"title":485,"slug":486,"order_index":24,"cornerstone":25,"reading_time_minutes":39},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":488,"title":489,"slug":490,"order_index":212,"cornerstone":25,"reading_time_minutes":136},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":492,"meta_title":493,"meta_description":494,"og_image":5,"locale":178,"subcategories":495},"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.",[496,524,548,584,616,648,669,701,729,757],{"id":286,"name":497,"slug":498,"order_index":499,"topics":500},"UI Components","ui-components",0,[501,504,508,512,516,520],{"id":152,"title":502,"slug":503,"order_index":412,"cornerstone":25,"reading_time_minutes":201},"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":505,"title":506,"slug":507,"order_index":420,"cornerstone":25,"reading_time_minutes":201},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":509,"title":510,"slug":511,"order_index":424,"cornerstone":25,"reading_time_minutes":24},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":513,"title":514,"slug":515,"order_index":428,"cornerstone":25,"reading_time_minutes":201},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":517,"title":518,"slug":519,"order_index":432,"cornerstone":25,"reading_time_minutes":201},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":521,"title":522,"slug":523,"order_index":436,"cornerstone":25,"reading_time_minutes":201},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":232,"name":525,"slug":526,"order_index":499,"topics":527},"CSS Fundamentals & Setup","css-fundamentals-setup",[528,532,536,540,544],{"id":529,"title":530,"slug":531,"order_index":136,"cornerstone":25,"reading_time_minutes":159},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":533,"title":534,"slug":535,"order_index":34,"cornerstone":25,"reading_time_minutes":159},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":537,"title":538,"slug":539,"order_index":39,"cornerstone":25,"reading_time_minutes":39},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":541,"title":542,"slug":543,"order_index":159,"cornerstone":25,"reading_time_minutes":39},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":545,"title":546,"slug":547,"order_index":197,"cornerstone":25,"reading_time_minutes":197},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":236,"name":549,"slug":550,"order_index":499,"topics":551},"Selectors & the Cascade","selectors-the-cascade",[552,556,560,564,568,572,576,580],{"id":553,"title":554,"slug":555,"order_index":201,"cornerstone":25,"reading_time_minutes":159},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":557,"title":558,"slug":559,"order_index":24,"cornerstone":25,"reading_time_minutes":159},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":561,"title":562,"slug":563,"order_index":212,"cornerstone":25,"reading_time_minutes":159},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":565,"title":566,"slug":567,"order_index":216,"cornerstone":25,"reading_time_minutes":201},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":569,"title":570,"slug":571,"order_index":220,"cornerstone":25,"reading_time_minutes":197},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":573,"title":574,"slug":575,"order_index":224,"cornerstone":25,"reading_time_minutes":197},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":577,"title":578,"slug":579,"order_index":228,"cornerstone":25,"reading_time_minutes":159},93,"CSS Specificity Explained","css-specificity-explained",{"id":581,"title":582,"slug":583,"order_index":232,"cornerstone":25,"reading_time_minutes":197},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":244,"name":585,"slug":586,"order_index":499,"topics":587},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[588,592,596,600,604,608,612],{"id":589,"title":590,"slug":591,"order_index":236,"cornerstone":25,"reading_time_minutes":197},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":593,"title":594,"slug":595,"order_index":244,"cornerstone":25,"reading_time_minutes":159},96,"CSS Backgrounds","css-backgrounds",{"id":597,"title":598,"slug":599,"order_index":248,"cornerstone":25,"reading_time_minutes":197},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":601,"title":602,"slug":603,"order_index":252,"cornerstone":25,"reading_time_minutes":197},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":605,"title":606,"slug":607,"order_index":256,"cornerstone":25,"reading_time_minutes":201},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":609,"title":610,"slug":611,"order_index":260,"cornerstone":25,"reading_time_minutes":197},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":613,"title":614,"slug":615,"order_index":271,"cornerstone":25,"reading_time_minutes":201},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":248,"name":617,"slug":618,"order_index":499,"topics":619},"Box Model & Spacing","box-model-spacing",[620,624,628,632,636,640,644],{"id":621,"title":622,"slug":623,"order_index":276,"cornerstone":25,"reading_time_minutes":24},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":625,"title":626,"slug":627,"order_index":281,"cornerstone":25,"reading_time_minutes":24},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":629,"title":630,"slug":631,"order_index":286,"cornerstone":25,"reading_time_minutes":201},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":633,"title":634,"slug":635,"order_index":268,"cornerstone":25,"reading_time_minutes":216},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":637,"title":638,"slug":639,"order_index":273,"cornerstone":25,"reading_time_minutes":197},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":641,"title":642,"slug":643,"order_index":278,"cornerstone":25,"reading_time_minutes":24},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":645,"title":646,"slug":647,"order_index":283,"cornerstone":25,"reading_time_minutes":24},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":252,"name":16,"slug":17,"order_index":499,"topics":649},[650,654,658,659,660,661,665],{"id":651,"title":652,"slug":653,"order_index":288,"cornerstone":25,"reading_time_minutes":24},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":655,"title":656,"slug":657,"order_index":292,"cornerstone":25,"reading_time_minutes":24},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":162,"title":164,"slug":163,"order_index":296,"cornerstone":25,"reading_time_minutes":24},{"id":8,"title":9,"slug":10,"order_index":300,"cornerstone":25,"reading_time_minutes":24},{"id":166,"title":168,"slug":167,"order_index":304,"cornerstone":25,"reading_time_minutes":212},{"id":662,"title":663,"slug":664,"order_index":324,"cornerstone":25,"reading_time_minutes":24},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":666,"title":667,"slug":668,"order_index":328,"cornerstone":25,"reading_time_minutes":220},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":256,"name":670,"slug":671,"order_index":499,"topics":672},"Display, Position & Layout Basics","display-position-layout-basics",[673,677,681,685,689,693,697],{"id":674,"title":675,"slug":676,"order_index":332,"cornerstone":25,"reading_time_minutes":24},116,"Display & Inline-block","display-and-inline-block",{"id":678,"title":679,"slug":680,"order_index":336,"cornerstone":25,"reading_time_minutes":201},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":682,"title":683,"slug":684,"order_index":347,"cornerstone":25,"reading_time_minutes":201},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":686,"title":687,"slug":688,"order_index":352,"cornerstone":25,"reading_time_minutes":197},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":690,"title":691,"slug":692,"order_index":357,"cornerstone":25,"reading_time_minutes":201},120,"Centering Techniques","centering-techniques",{"id":694,"title":695,"slug":696,"order_index":362,"cornerstone":25,"reading_time_minutes":24},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":698,"title":699,"slug":700,"order_index":367,"cornerstone":25,"reading_time_minutes":212},122,"Website Layout Basics","website-layout-basics",{"id":271,"name":702,"slug":703,"order_index":499,"topics":704},"The Modern CSS Toolkit","the-modern-css-toolkit",[705,709,713,717,721,725],{"id":706,"title":707,"slug":708,"order_index":372,"cornerstone":25,"reading_time_minutes":212},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":710,"title":711,"slug":712,"order_index":381,"cornerstone":25,"reading_time_minutes":212},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":714,"title":715,"slug":716,"order_index":386,"cornerstone":25,"reading_time_minutes":24},131,"Native CSS Nesting","native-css-nesting",{"id":718,"title":719,"slug":720,"order_index":395,"cornerstone":25,"reading_time_minutes":24},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":722,"title":723,"slug":724,"order_index":400,"cornerstone":25,"reading_time_minutes":216},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":726,"title":727,"slug":728,"order_index":405,"cornerstone":25,"reading_time_minutes":212},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":276,"name":730,"slug":731,"order_index":499,"topics":732},"Responsive Design","responsive-design",[733,737,741,745,749,753],{"id":734,"title":735,"slug":736,"order_index":410,"cornerstone":25,"reading_time_minutes":216},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":738,"title":739,"slug":740,"order_index":344,"cornerstone":25,"reading_time_minutes":212},136,"Media Queries","media-queries",{"id":742,"title":743,"slug":744,"order_index":349,"cornerstone":25,"reading_time_minutes":212},137,"Responsive Images & Video","responsive-images-and-video",{"id":746,"title":747,"slug":748,"order_index":354,"cornerstone":25,"reading_time_minutes":216},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":750,"title":751,"slug":752,"order_index":359,"cornerstone":25,"reading_time_minutes":216},139,"Container Queries","container-queries",{"id":754,"title":755,"slug":756,"order_index":364,"cornerstone":25,"reading_time_minutes":228},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":281,"name":758,"slug":759,"order_index":499,"topics":760},"Transitions & Animation","transitions-animation",[761,765,769,773,777,780,783],{"id":762,"title":763,"slug":764,"order_index":369,"cornerstone":25,"reading_time_minutes":197},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":766,"title":767,"slug":768,"order_index":378,"cornerstone":25,"reading_time_minutes":159},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":770,"title":771,"slug":772,"order_index":383,"cornerstone":25,"reading_time_minutes":197},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":774,"title":775,"slug":776,"order_index":392,"cornerstone":25,"reading_time_minutes":197},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":130,"title":778,"slug":779,"order_index":397,"cornerstone":25,"reading_time_minutes":197},"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":138,"title":781,"slug":782,"order_index":402,"cornerstone":25,"reading_time_minutes":197},"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":145,"title":784,"slug":785,"order_index":407,"cornerstone":25,"reading_time_minutes":201},"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":787},[788,791,794,799,804],{"name":13,"slug":14,"description":789,"post_count":34,"subcategories":790},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":172,"slug":107,"description":792,"post_count":34,"subcategories":793},"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":795,"slug":796,"description":797,"post_count":136,"subcategories":798},"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":800,"slug":801,"description":802,"post_count":136,"subcategories":803},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":805,"slug":806,"description":807,"post_count":136,"subcategories":808},"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.",[]]