[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t4-s08-responsive-project":3,"course:taropood":58},{"meta":4,"prev":11,"next":15,"sections":20},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,8,"t4-s08-responsive-project","book",4,"فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},7,"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":16,"slug":17,"source":8,"term":18,"title_fa":19},1,"t5-s01-states",5,"فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",[21,25,28,33,36,39,42,45,48,51,55],{"kind":22,"heading":23,"html":24},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این آخرین فصلِ ترمِ Responsive است و مفهومِ تازه‌ای ندارد. کارِ امروز ترکیب است: هر ابزاری که این ترم یاد گرفتی — \u003Ccode>@media\u003C\u002Fcode>، تصویرِ responsive، تایپوگرافیِ سیال، منوی بازشو و dark mode — را در یک صفحهٔ واقعی کنارِ هم می‌گذاری. یک صفحهٔ معرفیِ کوچک برای «تاروپود» که از موبایل تا دسکتاپ درست می‌ماند و خودش با تمِ سیستم، روشن و تیره می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.160.webp 160w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.320.webp 320w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.640.webp 640w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.1280.jpg\" srcset=\"\u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.160.jpg 160w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.320.jpg 320w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.640.jpg 640w, \u002F_img\u002F01-image-phone-to-desktop.ad1b2f2055.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرحِ یک صفحه در سه عرض: موبایل با منوی جمع‌شده و کارت‌های تک‌ستونه، تبلت، و دسکتاپ با منوی افقی و کارت‌های سه‌ستونه؛ گوشه‌ای یک نشانِ روشن\u002Fتیره\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک صفحهٔ کامل را mobile-first بچینی که در دسکتاپ باز شود\u003C\u002Fli>\n\u003Cli>منوی بازشو، تصویرِ سیال، تایپوگرافیِ \u003Ccode>clamp()\u003C\u002Fcode> و dark mode را در یک صفحه ترکیب کنی\u003C\u002Fli>\n\u003Cli>بگویی چرا شروع از موبایل، از شروع از دسکتاپ ساده‌تر است\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":22,"heading":26,"html":27},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> و mobile-first. \u003Cstrong>از فصل ۳:\u003C\u002Fstrong> تصویرِ \u003Ccode>max-width\u003C\u002Fcode>\u002F\u003Ccode>aspect-ratio\u003C\u002Fcode>. \u003Cstrong>از فصل ۴:\u003C\u002Fstrong> \u003Ccode>clamp()\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۶:\u003C\u002Fstrong> منوی \u003Ccode><details>\u003C\u002Fcode>\u002F\u003Ccode><summary>\u003C\u002Fcode>. \u003Cstrong>از فصل ۷:\u003C\u002Fstrong> theme با token و \u003Ccode>prefers-color-scheme\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":29,"heading":30,"html":31,"embed":32},"lab","","— یک صفحهٔ خام می‌بینی. در این فصل تکه‌تکه آن را به یک صفحهٔ کاملِ responsive تبدیل می‌کنی و در عرض‌های مختلف امتحانش می‌کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-4-responsive\u002Fsession-08-responsive-project",{"kind":22,"heading":34,"html":35},"۱. اسکلت و theme","\u003Ch2 id=\"۱-اسکلت-و-theme\">۱. اسکلت و theme\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D8%B3%DA%A9%D9%84%D8%AA-%D9%88-theme\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول اسکلتِ semantic را می‌گذاریم — \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode> — و بالای CSS همان theme با token از فصل ۷، با نسخهٔ تیره‌اش. این پایه است؛ همه‌چیز رنگش را از این token ها می‌گیرد تا dark mode مجانی به‌دست بیاید.\u003C\u002Fp>\n",{"kind":22,"heading":37,"html":38},"۲. سرصفحه و منوی responsive","\u003Ch2 id=\"۲-سرصفحه-و-منوی-responsive\">۲. سرصفحه و منوی responsive\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%B3%D8%B1%D8%B5%D9%81%D8%AD%D9%87-%D9%88-%D9%85%D9%86%D9%88%DB%8C-responsive\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سرصفحه با \u003Ccode>flexbox\u003C\u002Fcode> لوگو را یک سر و منو را سرِ دیگر می‌گذارد، و منو همان \u003Ccode><details>\u003C\u002Fcode>\u002F\u003Ccode><summary>\u003C\u002Fcode> فصل ۶ است: در موبایل یک دکمهٔ «منو»، و در \u003Ccode>@media (min-width: 700px)\u003C\u002Fcode> یک ردیفِ افقی.\u003C\u002Fp>\n",{"kind":22,"heading":40,"html":41},"۳. hero: تصویرِ سیال و تیترِ سیال","\u003Ch2 id=\"۳-hero-تصویرِ-سیال-و-تیترِ-سیال\">۳. hero: تصویرِ سیال و تیترِ سیال\u003Ca class=\"head-anchor\" href=\"#%DB%B3-hero-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%D9%90-%D8%B3%DB%8C%D8%A7%D9%84-%D9%88-%D8%AA%DB%8C%D8%AA%D8%B1%D9%90-%D8%B3%DB%8C%D8%A7%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بخشِ اصلی یک تصویر، یک تیتر و یک دکمه دارد. تصویر با \u003Ccode>max-width\u003C\u002Fcode> و \u003Ccode>aspect-ratio\u003C\u002Fcode> (فصل ۳) با عرضِ صفحه بالا و پایین می‌شود بی‌آنکه صفحه بپرد، و تیتر با \u003Ccode>clamp()\u003C\u002Fcode> (فصل ۴) روی موبایل کوچک و روی دسکتاپ بزرگ می‌شود — بدونِ حتی یک \u003Ccode>@media\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":22,"heading":43,"html":44},"۴. کارت‌ها: از یک ستون تا سه ستون","\u003Ch2 id=\"۴-کارت‌ها-از-یک-ستون-تا-سه-ستون\">۴. کارت‌ها: از یک ستون تا سه ستون\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%DA%A9%D8%A7%D8%B1%D8%AA%E2%80%8C%D9%87%D8%A7-%D8%A7%D8%B2-%DB%8C%DA%A9-%D8%B3%D8%AA%D9%88%D9%86-%D8%AA%D8%A7-%D8%B3%D9%87-%D8%B3%D8%AA%D9%88%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سه کارتِ درس داریم. حالا بیا یک اشتباهِ رایج را عمداً مرتکب شویم. چون در ذهنت صفحه را روی دسکتاپ می‌بینی، وسوسه می‌شوی مستقیم سه ستون بنویسی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی دسکتاپ عالی است. حالا پنجره را به عرضِ موبایل ببر: سه ستون سرِ جا می‌مانند و به هم فشرده می‌شوند، متن‌ها باریک و درهم می‌شوند و کارت‌ها له می‌شوند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این همان درسِ mobile-first فصل ۲ است. تو از دسکتاپ شروع کردی؛ سه ستون برای صفحهٔ کوچک زیادی است. \u003Cstrong>از موبایل شروع کن:\u003C\u002Fstrong> پیش‌فرض را یک ستون بگذار (که همیشه جا می‌شود)، و سه ستون را فقط داخلِ \u003Ccode>@media (min-width: 700px)\u003C\u002Fcode> بخواه. این‌طور صفحهٔ کوچک ساده می‌ماند و صفحهٔ بزرگ باز می‌شود، نه برعکس.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.cards {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n@media (min-width: 700px) {\n  .cards {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا در موبایل کارت‌ها زیرِ هم و راحت‌اند، و وقتی پنجره از \u003Ccode>700px\u003C\u002Fcode> رد می‌شود، سه‌تایی کنارِ هم می‌روند. تمِ سیستمت را هم تیره کن و ببین کلِ صفحه — سرصفحه، کارت‌ها، پاصفحه — با هم تیره می‌شود و خوانا می‌ماند.\u003C\u002Fp>\n",{"kind":22,"heading":46,"html":47},"۵. کد کاملِ صفحه","\u003Ch2 id=\"۵-کد-کاملِ-صفحه\">۵. کد کاملِ صفحه\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%B5%D9%81%D8%AD%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>تاروپود — خودآموز HTML و CSS<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <header class="site-header">\n      <a class="logo" href="#">تاروپود<\u002Fa>\n      <nav>\n        <details class="menu">\n          <summary>منو<\u002Fsummary>\n          <ul>\n            <li><a href="#lessons">درس‌ها<\u002Fa><\u002Fli>\n            <li><a href="#about">درباره<\u002Fa><\u002Fli>\n            <li><a href="#contact">تماس<\u002Fa><\u002Fli>\n          <\u002Ful>\n        <\u002Fdetails>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main class="page">\n      <section class="hero">\n        <img class="hero-img" src="cover.jpg" alt="طرحی از یک صفحهٔ وب که مثلِ پارچه از تار و پود بافته می‌شود" width="1280" height="720">\n        <h1>وب را با دستِ خودت بباف<\u002Fh1>\n        <p class="tagline">از ساختار تا ظاهر، قدم‌به‌قدم و در همین مرورگر.<\u002Fp>\n        <a class="btn" href="#lessons">شروع کن<\u002Fa>\n      <\u002Fsection>\n\n      <section id="lessons" class="cards">\n        <article class="card">\n          <h2>ساختار<\u002Fh2>\n          <p>با HTML اسکلتِ معنادار صفحه را می‌سازی.<\u002Fp>\n        <\u002Farticle>\n        <article class="card">\n          <h2>ظاهر<\u002Fh2>\n          <p>با CSS رنگ، فاصله و چیدمان را کنترل می‌کنی.<\u002Fp>\n        <\u002Farticle>\n        <article class="card">\n          <h2>responsive<\u002Fh2>\n          <p>یک صفحه که از موبایل تا دسکتاپ درست می‌ماند.<\u002Fp>\n        <\u002Farticle>\n      <\u002Fsection>\n    <\u002Fmain>\n\n    <footer class="site-footer">\n      <p>ساختهٔ تو — ۱۴۰۵<\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  color-scheme: light dark;\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #6b6150;\n  --brand: #2a6b93;\n  --line: #d8ccae;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #14181f;\n    --card: #1e2530;\n    --ink: #f2f4f8;\n    --muted: #aab3c5;\n    --line: #2c3644;\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  line-height: 1.9;\n}\n\n\u002F* --- sarsafhe va navbari (fasl 6) --- *\u002F\n.site-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  padding: 14px 20px;\n  background-color: var(--card);\n  border-block-end: 1px solid var(--line);\n}\n\n.logo {\n  font-weight: 700;\n  font-size: 1.3rem;\n  color: var(--brand);\n}\n\n.menu summary {\n  width: max-content;\n  cursor: pointer;\n  padding: 8px 14px;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  font-weight: 700;\n}\n\n.menu ul {\n  list-style: none;\n  margin-block: 10px 0;\n  margin-inline: 0;\n  padding: 8px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\n.menu a {\n  display: block;\n  padding: 10px;\n  border-radius: 6px;\n  color: var(--ink);\n}\n\n\u002F* --- mohtava --- *\u002F\n.page {\n  max-width: 960px;\n  margin-inline: auto;\n  padding: 20px;\n}\n\n.hero {\n  text-align: center;\n  padding-block: 24px;\n}\n\n\u002F* tasvir-e responsive (fasl 3): ba soton ba-la va pa-in mishavad, bedun-e paresh *\u002F\n.hero-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 16 \u002F 9;\n  object-fit: cover;\n  border-radius: 16px;\n  background-color: var(--brand);\n}\n\n\u002F* typographi-ye sayyal (fasl 4) *\u002F\n.hero h1 {\n  font-size: clamp(1.8rem, 5vw, 3rem);\n  margin-block: 18px 8px;\n}\n\n.tagline {\n  color: var(--muted);\n  margin-block: 0 18px;\n}\n\n.btn {\n  display: inline-block;\n  padding: 12px 22px;\n  border-radius: 10px;\n  background-color: var(--brand);\n  color: #ffffff;\n  font-weight: 700;\n}\n\n\u002F* --- gallery-ye kart-ha: mobile-first yek soton --- *\u002F\n.cards {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  padding-block: 24px 0;\n}\n\n.card {\n  padding: 20px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 14px;\n}\n\n.card h2 {\n  margin-block: 0 8px;\n  color: var(--brand);\n}\n\n.card p {\n  margin: 0;\n  color: var(--muted);\n}\n\n.site-footer {\n  padding: 24px 20px;\n  text-align: center;\n  color: var(--muted);\n  border-block-start: 1px solid var(--line);\n}\n\n\u002F* --- dar safheye pahn (fasl 2): navbar radifi + kart-ha se soton --- *\u002F\n@media (min-width: 700px) {\n  .menu ul {\n    display: flex;\n    gap: 6px;\n    padding: 6px;\n  }\n\n  .cards {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-project-anatomy.f44b036b3c.160.webp 160w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.320.webp 320w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.640.webp 640w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-project-anatomy.f44b036b3c.1280.jpg\" srcset=\"\u002F_img\u002F02-image-project-anatomy.f44b036b3c.160.jpg 160w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.320.jpg 320w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.640.jpg 640w, \u002F_img\u002F02-image-project-anatomy.f44b036b3c.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرحِ سیمیِ صفحهٔ نهایی: سرصفحه با لوگو و منو، یک hero با تصویر و تیتر و دکمه، یک ردیفِ سه‌کارتی، و پاصفحه\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحهٔ کامل را در دو عرض ببین. در موبایل: منوی جمع‌شده، تصویر و کارت‌ها زیرِ هم. در دسکتاپ: منوی افقی، تصویرِ بزرگ‌تر و سه کارتِ کنارِ هم. تمِ سیستم را هم عوض کن و ببین همه‌چیز با هم روشن و تیره می‌شود. (تصویر یک جای‌گیرِ رنگی است؛ هر عکسی در \u003Ccode>cover.jpg\u003C\u002Fcode> بگذاری، با همین قاعده‌ها اندازه می‌گیرد و صفحه نمی‌پرد.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> صفحهٔ کاملت را به دستیار AI ات بده و بپرس «این صفحه از نظرِ responsive و دسترس‌پذیری چه ضعفی دارد؟». جوابش را یک فهرستِ کارها ببین، نه حکمِ نهایی — هر موردش را همان‌جا در آزمایشگاه و در عرض‌های مختلف با چشمِ خودت چک کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":49,"html":50},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این فصل یک فصلِ پروژه‌ای است و واژهٔ فنیِ تازه‌ای ندارد؛ فقط ابزارهای این ترم — \u003Ccode>@media\u003C\u002Fcode>، تصویرِ responsive، \u003Ccode>clamp()\u003C\u002Fcode>، \u003Ccode><details>\u003C\u002Fcode>\u002F\u003Ccode><summary>\u003C\u002Fcode> و dark mode — را کنارِ هم به‌کار می‌گیرد.\u003C\u002Fp>\n",{"kind":52,"heading":53,"html":54},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا mobile-first (شروع از یک ستون) از نوشتنِ مستقیمِ سه ستون بهتر است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک بخشِ «نظرها» با سه کارتِ دیگر اضافه کن که در موبایل تک‌ستون و در دسکتاپ دوستون باشد (\u003Ccode>repeat(2, 1fr)\u003C\u002Fcode>). از همان token ها استفاده کن تا dark mode خودبه‌خود کار کند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک breakpoint میانی اضافه کن: کارت‌ها در موبایل یک ستون، در تبلت (\u003Ccode>min-width: 500px\u003C\u002Fcode>) دو ستون، و در دسکتاپ (\u003Ccode>min-width: 700px\u003C\u002Fcode>) سه ستون. صفحه را آرام‌آرام پهن کن و هر سه پله را ببین.\u003C\u002Fp>\n",{"kind":22,"heading":56,"html":57},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اینجا آخرِ ترمِ Responsive است. حالا سایتت از موبایل تا دسکتاپ درست می‌ماند، تصویر و متنش سیال‌اند، منوی بازشو دارد و dark mode را می‌فهمد. ولی صفحه هنوز کمی \u003Cstrong>ساکت\u003C\u002Fstrong> است: دکمه‌ها موقعِ نگاه‌کردن واکنشی ندارند، فرم‌ها خام‌اند، و هیچ حرکتی در کار نیست. ترمِ بعد — \u003Cstrong>تعامل و جزئیات\u003C\u002Fstrong> — همین را زنده می‌کند: با pseudo-class ها به حالتِ hover و focus جان می‌دهی، فرم‌ها را استایل و اعتبارسنجی می‌کنی، و با احترام به کاربر کمی حرکت اضافه می‌کنی — همه هنوز بدونِ JavaScript.\u003C\u002Fp>\n",{"course":59,"entitled":67,"lessons":68,"payments_enabled":67,"terms":252,"live":5},{"active_window":60,"effective_price_toman":61,"free":5,"lesson_count":62,"price_toman":63,"slug":64,"summary_fa":65,"title_fa":66},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[69,72,76,80,83,86,90,93,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,190,191,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":16,"slug":70,"source":8,"term":16,"title_fa":71},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":16,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":77,"slug":78,"source":8,"term":16,"title_fa":79},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":81,"source":8,"term":16,"title_fa":82},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":18,"slug":84,"source":8,"term":16,"title_fa":85},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":87,"slug":88,"source":8,"term":16,"title_fa":89},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":12,"slug":91,"source":8,"term":16,"title_fa":92},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":6,"slug":94,"source":8,"term":16,"title_fa":95},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":16,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":16,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":16,"slug":105,"source":8,"term":73,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":108,"source":8,"term":73,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":77,"slug":111,"source":8,"term":73,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":114,"source":8,"term":73,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":18,"slug":117,"source":8,"term":73,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":87,"slug":120,"source":8,"term":73,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":12,"slug":123,"source":8,"term":73,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":6,"slug":126,"source":8,"term":73,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":73,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":73,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":73,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":16,"slug":139,"source":8,"term":77,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":77,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":77,"slug":145,"source":8,"term":77,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":148,"source":8,"term":77,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":18,"slug":151,"source":8,"term":77,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":87,"slug":154,"source":8,"term":77,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":12,"slug":157,"source":8,"term":77,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":6,"slug":160,"source":8,"term":77,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":77,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":77,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":77,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":16,"slug":172,"source":8,"term":9,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":175,"source":8,"term":9,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":77,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":9,"slug":181,"source":8,"term":9,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":18,"slug":184,"source":8,"term":9,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":87,"slug":187,"source":8,"term":9,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":18,"title_fa":19},{"free_preview":5,"order":73,"slug":193,"source":8,"term":18,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":77,"slug":196,"source":8,"term":18,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":199,"source":8,"term":18,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":18,"slug":202,"source":8,"term":18,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":87,"slug":205,"source":8,"term":18,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":12,"slug":208,"source":8,"term":18,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":6,"slug":211,"source":8,"term":18,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":214,"source":8,"term":18,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":18,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":16,"slug":220,"source":8,"term":87,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":87,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":77,"slug":226,"source":8,"term":87,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":229,"source":8,"term":87,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":18,"slug":232,"source":8,"term":87,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":87,"slug":235,"source":8,"term":87,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":12,"slug":238,"source":8,"term":87,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":6,"slug":241,"source":8,"term":87,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":87,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":87,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":87,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105166]