[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t3-s11-layout-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,11,"t3-s11-layout-project","book",3,"فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},10,"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":16,"slug":17,"source":8,"term":18,"title_fa":19},1,"t4-s01-responsive-intro",4,"فصل ۰۱ — responsive یعنی چه",[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>این آخرین فصلِ ترمِ Layout است و مفهومِ تازه‌ای ندارد. کارِ امروز ترکیب است: هر ابزاری که این ترم یاد گرفتی — \u003Ccode>flexbox\u003C\u002Fcode>، \u003Ccode>grid\u003C\u002Fcode>، \u003Ccode>position\u003C\u002Fcode> و logical properties — را کنارِ هم می‌گذاریم و layout کاملِ یک سایتِ واقعی را از صفر می‌سازیم. یک صفحهٔ گالریِ هنری به‌نامِ «هنرکده»: یک سرصفحه که لوگو و منویش با flexbox دو سرِ خط نشسته‌اند، یک بدنهٔ گرید که محتوای اصلی و یک ستونِ کناری را کنارِ هم می‌چیند، یک ستونِ کناری که موقعِ پیمایش می‌چسبد، و یک پاصفحه. آخرِ این فصل یک صفحه داری که واقعاً مثلِ یک سایت چیده شده.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.160.webp 160w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.320.webp 320w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.640.webp 640w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.1280.jpg\" srcset=\"\u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.160.jpg 160w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.320.jpg 320w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.640.jpg 640w, \u002F_img\u002F01-image-page-wireframe.c82b1bb5dd.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرحِ سیمیِ یک صفحهٔ کامل: سرصفحه با لوگو یک سمت و منو سمتِ دیگر، زیرش یک بدنهٔ دوستونی با ستونِ پهنِ محتوا و ستونِ باریکِ کناری، و یک پاصفحه در پایین\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک سرصفحه بسازی که لوگو و منویش با \u003Ccode>flexbox\u003C\u002Fcode> دو سرِ خط بنشینند\u003C\u002Fli>\n\u003Cli>بدنهٔ صفحه را با \u003Ccode>grid\u003C\u002Fcode> به دو ستونِ محتوا و کناری تقسیم کنی\u003C\u002Fli>\n\u003Cli>یک ستونِ کناری را با \u003Ccode>position: sticky\u003C\u002Fcode> موقعِ پیمایش بچسبانی\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>flexbox\u003C\u002Fcode> — \u003Ccode>display: flex\u003C\u002Fcode>، \u003Ccode>justify-content\u003C\u002Fcode>، \u003Ccode>align-items\u003C\u002Fcode>، \u003Ccode>gap\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل‌های ۵ تا ۷:\u003C\u002Fstrong> \u003Ccode>grid\u003C\u002Fcode> — \u003Ccode>display: grid\u003C\u002Fcode>، \u003Ccode>grid-template-columns\u003C\u002Fcode>، واحدِ \u003Ccode>fr\u003C\u002Fcode>، \u003Ccode>gap\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۸:\u003C\u002Fstrong> \u003Ccode>position\u003C\u002Fcode>، به‌خصوص \u003Ccode>sticky\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱۰:\u003C\u002Fstrong> logical properties برای فاصله و جای امنِ فارسی.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":29,"heading":30,"html":31,"embed":32},"lab","","— یک صفحهٔ خام با HTML آماده می‌بینی. در این فصل خط‌به‌خط CSS اش را می‌نویسی و می‌بینی چطور همان ساختار، تکه‌تکه، به یک layout کامل تبدیل می‌شود","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-3-layout\u002Fsession-11-layout-project",{"kind":22,"heading":34,"html":35},"۱. اسکلت و پایه","\u003Ch2 id=\"۱-اسکلت-و-پایه\">۱. اسکلت و پایه\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D8%B3%DA%A9%D9%84%D8%AA-%D9%88-%D9%BE%D8%A7%DB%8C%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول به ساختارِ صفحه نگاه کن. semantic است، همان‌طور که در ترم ۱ یاد گرفتی: یک \u003Ccode><header>\u003C\u002Fcode> برای سرصفحه، یک \u003Ccode><main>\u003C\u002Fcode> برای بدنه که داخلش یک \u003Ccode><div class="content">\u003C\u002Fcode> و یک \u003Ccode><aside>\u003C\u002Fcode> دارد، و یک \u003Ccode><footer>\u003C\u002Fcode>. کلاس‌ها فقط برای اینکه با CSS راحت هدفشان بگیریم اضافه شده‌اند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><header class="site-header">\n  <a class="logo" href="#">هنرکده<\u002Fa>\n  <nav>\n    <ul class="menu">\n      <li><a href="#works">کارها<\u002Fa><\u002Fli>\n      <li><a href="#about">درباره<\u002Fa><\u002Fli>\n      <li><a href="#contact">تماس<\u002Fa><\u002Fli>\n    <\u002Ful>\n  <\u002Fnav>\n<\u002Fheader>\n\n<main class="layout">\n  <section class="content"><!-- kart-haye mohteva inja --><\u002Fsection>\n  <aside class="sidebar"><!-- sotoon-e kenari inja --><\u002Faside>\n<\u002Fmain>\n\n<footer class="site-footer"><!-- pasafhe inja --><\u002Ffooter>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا پایهٔ CSS را می‌گذاریم: \u003Ccode>box-sizing\u003C\u002Fcode> سراسری از فصل ۴، یک theme کوچک با custom property از فصل ۹ ترم ۲، و کمی جانِ اولیه به \u003Ccode>body\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>* {\n  box-sizing: border-box;\n}\n\n:root {\n  --brand: #2a6b93;\n  --ink: #2c2114;\n  --paper: #f6edda;\n  --card: #ffffff;\n  --line: #d8ccae;\n  --space: 20px;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  color: var(--ink);\n  background-color: var(--paper);\n  line-height: 1.8;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحه یک پس‌زمینهٔ کاغذی گرفت و همه‌چیز هنوز زیرِ هم است — سرصفحه، بدنه، پاصفحه. این جریانِ عادی است؛ حالا شروع می‌کنیم به چیدن.\u003C\u002Fp>\n",{"kind":22,"heading":37,"html":38},"۲. سرصفحه با flexbox","\u003Ch2 id=\"۲-سرصفحه-با-flexbox\">۲. سرصفحه با flexbox\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%B3%D8%B1%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%A7-flexbox\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سرصفحه دو چیز دارد که باید دو سرِ خط بنشینند: لوگو یک طرف، منو طرفِ دیگر. این دقیقاً کاری است که \u003Ccode>flexbox\u003C\u002Fcode> با \u003Ccode>justify-content: space-between\u003C\u002Fcode> می‌کند — از فصل ۳. خودِ منو هم یک ردیفِ افقی از لینک‌هاست، پس آن را هم \u003Ccode>flex\u003C\u002Fcode> می‌کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.site-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space);\n  padding-block: 14px;\n  padding-inline: 24px;\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.4rem;\n  color: var(--brand);\n}\n\n.menu {\n  display: flex;\n  gap: 18px;\n  margin: 0;\n  padding: 0;\n}\n\n.menu a {\n  color: var(--ink);\n  font-weight: 700;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> لوگوی «هنرکده» یک سرِ خط نشست و سه لینکِ منو سرِ دیگر، در یک ردیفِ افقی و با فاصلهٔ منظم. \u003Ccode>space-between\u003C\u002Fcode> فضای خالی را انداخت وسط، پس دو گروه به دو لبه چسبیدند. دقت کن که \u003Ccode>padding-inline\u003C\u002Fcode> و \u003Ccode>border-block-end\u003C\u002Fcode> را logical نوشتیم — پس سرصفحه در صفحهٔ راست‌به‌چپ درست است و اگر روزی چپ‌به‌راست شود هم می‌ماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> نقطه‌های فهرست کجا رفتند؟ وقتی \u003Ccode><ul>\u003C\u002Fcode> را \u003Ccode>display: flex\u003C\u002Fcode> کردیم، هر \u003Ccode><li>\u003C\u002Fcode> تبدیل به یک flex item شد و — درست مثلِ آن \u003Ccode>inline-block\u003C\u002Fcode>ِ ترم ۲ — دیگر «آیتمِ فهرست» حساب نمی‌شود، پس نقطه‌ها خودبه‌خود ناپدید شدند. منو یک \u003Ccode><ul>\u003C\u002Fcode>ِ واقعی می‌ماند — که برای screen reader درست است، «فهرستی از لینک‌ها» — ولی ظاهرش یک نوارِ افقی شد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":40,"html":41},"۳. بدنه با grid","\u003Ch2 id=\"۳-بدنه-با-grid\">۳. بدنه با grid\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%A8%D8%AF%D9%86%D9%87-%D8%A8%D8%A7-grid\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا مهم‌ترین بخش: بدنه باید دو ستون داشته باشد — یک ستونِ پهن برای محتوا و یک ستونِ باریک‌ترِ ثابت برای کناری. این کارِ \u003Ccode>grid\u003C\u002Fcode> است. با \u003Ccode>grid-template-columns: 1fr 260px\u003C\u002Fcode> می‌گوییم ستونِ اول هرچه فضا ماند را بگیرد (\u003Ccode>1fr\u003C\u002Fcode>) و ستونِ دوم دقیقاً \u003Ccode>260px\u003C\u002Fcode> باشد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.layout {\n  display: grid;\n  grid-template-columns: 1fr 260px;\n  gap: var(--space);\n  max-width: 960px;\n  margin-inline: auto;\n  padding: var(--space);\n}\n\n.content {\n  display: grid;\n  gap: var(--space);\n}\n\n.card {\n  padding: var(--space);\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 12px;\n}\n\n.card h2 {\n  margin-block: 0 10px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> بدنه دو ستون شد — کارت‌های محتوا سمتِ راست (چون صفحه rtl است و ستونِ اولِ گرید از راست شروع می‌شود) و ستونِ کناری سمتِ چپ. کلِ بدنه هم با \u003Ccode>margin-inline: auto\u003C\u002Fcode> وسطِ صفحه جمع شد و از \u003Ccode>960px\u003C\u002Fcode> پهن‌تر نمی‌شود. خودِ \u003Ccode>.content\u003C\u002Fcode> را هم یک گرید کردیم تا کارت‌هایش با \u003Ccode>gap\u003C\u002Fcode> فاصلهٔ منظم بگیرند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.160.webp 160w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.320.webp 320w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.640.webp 640w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.160.jpg 160w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.320.jpg 320w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.640.jpg 640w, \u002F_img\u002F02-image-grid-sticky.b9bf2a19e3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"نقشهٔ بدنهٔ دوستونی: یک ستونِ پهن با چند کارتِ روی‌هم که فلش‌های بالا-پایین نشانِ پیمایش‌اند، و کنارش یک ستونِ باریک با یک نشانِ سنجاق که یعنی موقعِ پیمایش سرِ جا می‌ماند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> این layout هنوز \u003Cstrong>responsive نیست\u003C\u002Fstrong>. اگر پنجره را خیلی باریک کنی، آن \u003Ccode>260px\u003C\u002Fcode> جا نمی‌شود و صفحه به‌هم می‌ریزد. اینکه در صفحهٔ موبایل این دو ستون بروند زیرِ هم، کارِ \u003Ccode>@media\u003C\u002Fcode> است که ابزارش را نداریم. \u003Cstrong>این را در ترم ۴ کامل یاد می‌گیریم.\u003C\u002Fstrong> فعلاً صفحه را در عرضِ معمولی نگه دار.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":43,"html":44},"۴. ستونِ کناری که می‌چسبد","\u003Ch2 id=\"۴-ستونِ-کناری-که-می‌چسبد\">۴. ستونِ کناری که می‌چسبد\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B3%D8%AA%D9%88%D9%86%D9%90-%DA%A9%D9%86%D8%A7%D8%B1%DB%8C-%DA%A9%D9%87-%D9%85%DB%8C%E2%80%8C%DA%86%D8%B3%D8%A8%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>می‌خواهیم وقتی کاربر صفحه را پایین می‌برد، ستونِ کناری همراهش نرود و بالای صفحه \u003Cstrong>بچسبد\u003C\u002Fstrong>. از فصل ۸ می‌دانی این کارِ \u003Ccode>position: sticky\u003C\u002Fcode> است. اول همین را امتحان کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.sidebar {\n  position: sticky;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>صفحه را پایین ببر. ستونِ کناری... هیچ کاری نمی‌کند. با محتوا بالا می‌رود، انگار \u003Ccode>sticky\u003C\u002Fcode> ای در کار نیست.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> \u003Ccode>sticky\u003C\u002Fcode> گذاشتی و نچسبید؟ این رایج‌ترین اشتباهِ \u003Ccode>sticky\u003C\u002Fcode> است: \u003Ccode>position: sticky\u003C\u002Fcode> به‌تنهایی کافی نیست — باید بگویی \u003Cstrong>کجا\u003C\u002Fstrong> بچسبد. بدونِ یک فاصله‌ٔ مرجع، مرورگر نمی‌داند در چه نقطه‌ای باید عنصر را نگه دارد، پس مثلِ یک عنصرِ عادی رفتار می‌کند. باید یک offset بدهی؛ مثلاً \u003Ccode>inset-block-start: 16px\u003C\u002Fcode> یعنی «وقتی به ۱۶ پیکسلیِ بالای صفحه رسیدی، همان‌جا بچسب». (این همان \u003Ccode>top: 16px\u003C\u002Fcode> است، ولی logical و امن برای هر جهت.)\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>یک نکتهٔ دوم هم هست: عنصرِ گرید به‌طور پیش‌فرض به بلندیِ کلِ ردیف کش می‌آید، و چیزی که کلِ ارتفاع را پُر کرده جایی برای «چسبیدن» ندارد. با \u003Ccode>align-self: start\u003C\u002Fcode> — همان \u003Ccode>align-self\u003C\u002Fcode>ِ فصل ۳، که در گرید هم کار می‌کند — می‌گوییم ستونِ کناری فقط به‌اندازهٔ محتوایش بلند باشد تا فضای چسبیدن پیدا کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.sidebar {\n  align-self: start;\n  position: sticky;\n  inset-block-start: 16px;\n  padding: var(--space);\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 12px;\n}\n\n.sidebar h2 {\n  margin-block: 0 10px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا صفحه را پایین ببر. ستونِ محتوا بالا می‌رود، ولی جعبهٔ «دسته‌ها» در فاصلهٔ ۱۶ پیکسلیِ بالای صفحه \u003Cstrong>می‌چسبد\u003C\u002Fstrong> و همان‌جا می‌ماند تا وقتی به پاصفحه برسی. آن دو خط — \u003Ccode>align-self: start\u003C\u002Fcode> و \u003Ccode>inset-block-start\u003C\u002Fcode> — کاری کردند که \u003Ccode>sticky\u003C\u002Fcode> واقعاً کار کند.\u003C\u002Fp>\n",{"kind":22,"heading":46,"html":47},"۵. پاصفحه و صفحهٔ کامل","\u003Ch2 id=\"۵-پاصفحه-و-صفحهٔ-کامل\">۵. پاصفحه و صفحهٔ کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D9%BE%D8%A7%D8%B5%D9%81%D8%AD%D9%87-%D9%88-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخرین تکه، پاصفحه است: یک خطِ ساده و وسط‌چین با یک مرزِ بالایی که جدایش می‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.site-footer {\n  padding-block: 20px;\n  text-align: center;\n  color: var(--ink);\n  border-block-start: 1px solid var(--line);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\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    <title>هنرکده<\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        <ul class="menu">\n          <li><a href="#works">کارها<\u002Fa><\u002Fli>\n          <li><a href="#about">درباره<\u002Fa><\u002Fli>\n          <li><a href="#contact">تماس<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main class="layout">\n      <section class="content">\n        <article id="works" class="card">\n          <h2>کارها<\u002Fh2>\n          <p>اینجا مجموعه‌ای از کارها را نشان می‌دهیم. هر کار یک عکس و یک توضیح کوتاه دارد.<\u002Fp>\n          <p>وقتی صفحه را پایین می‌بری، این ستون بلند حرکت می‌کند ولی ستونِ کناری سرِ جایش می‌ماند.<\u002Fp>\n        <\u002Farticle>\n\n        <article id="about" class="card">\n          <h2>درباره<\u002Fh2>\n          <p>هنرکده یک نمونهٔ تمرینی است تا layout یک صفحهٔ واقعی را کنارِ هم بچینیم.<\u002Fp>\n          <p>سرصفحه با flexbox، بدنه با grid، و ستونِ کناری با position چیده شده‌اند.<\u002Fp>\n        <\u002Farticle>\n\n        <article id="contact" class="card">\n          <h2>تماس<\u002Fh2>\n          <p>این هم آخرین بخش، تا ستون به‌اندازهٔ کافی بلند شود و بشود صفحه را پایین برد.<\u002Fp>\n          <p>حالا به ستونِ کناری نگاه کن که موقعِ پیمایش چطور می‌چسبد.<\u002Fp>\n        <\u002Farticle>\n      <\u002Fsection>\n\n      <aside class="sidebar">\n        <h2>دسته‌ها<\u002Fh2>\n        <ul>\n          <li><a href="#">نقاشی<\u002Fa><\u002Fli>\n          <li><a href="#">عکاسی<\u002Fa><\u002Fli>\n          <li><a href="#">خط<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Faside>\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  --brand: #2a6b93;\n  --ink: #2c2114;\n  --paper: #f6edda;\n  --card: #ffffff;\n  --line: #d8ccae;\n  --space: 20px;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  color: var(--ink);\n  background-color: var(--paper);\n  line-height: 1.8;\n}\n\n.site-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space);\n  padding-block: 14px;\n  padding-inline: 24px;\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.4rem;\n  color: var(--brand);\n}\n\n.menu {\n  display: flex;\n  gap: 18px;\n  margin: 0;\n  padding: 0;\n}\n\n.menu a {\n  color: var(--ink);\n  font-weight: 700;\n}\n\n.layout {\n  display: grid;\n  grid-template-columns: 1fr 260px;\n  gap: var(--space);\n  max-width: 960px;\n  margin-inline: auto;\n  padding: var(--space);\n}\n\n.content {\n  display: grid;\n  gap: var(--space);\n}\n\n.card {\n  padding: var(--space);\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 12px;\n}\n\n.card h2 {\n  margin-block: 0 10px;\n}\n\n.sidebar {\n  align-self: start;\n  position: sticky;\n  inset-block-start: 16px;\n  padding: var(--space);\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 12px;\n}\n\n.sidebar h2 {\n  margin-block: 0 10px;\n}\n\n.site-footer {\n  padding-block: 20px;\n  text-align: center;\n  color: var(--ink);\n  border-block-start: 1px solid var(--line);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحهٔ کامل را نگاه کن — سرصفحهٔ flex با لوگو و منوی دو سر، بدنهٔ گرید با دو ستون، ستونِ کناری که موقعِ پیمایش می‌چسبد، و پاصفحهٔ وسط‌چین. هر چیزی که این ترم یاد گرفتی در همین یک صفحه هست: \u003Ccode>flexbox\u003C\u002Fcode> برای سرصفحه، \u003Ccode>grid\u003C\u002Fcode> برای بدنه، \u003Ccode>position: sticky\u003C\u002Fcode> برای کناری، \u003Ccode>z-index\u003C\u002Fcode> و context ها زیرِ پوستِ لایه‌ها، و logical properties که همه را برای فارسی امن کرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> صفحهٔ کاملت را به دستیار AI ات بده و بپرس «اگر بخواهم این دو ستون در صفحهٔ موبایل زیرِ هم بروند، چه باید بکنم؟». احتمالاً از \u003Ccode>@media\u003C\u002Fcode> حرف می‌زند — چیزی که هنوز یاد نگرفته‌ای. این یک نگاهِ خوب به جلوست، ولی \u003Cstrong>کدش را همین‌جا کورکورانه نچسبان\u003C\u002Fstrong>؛ ترم ۴ همین را قدم‌به‌قدم و درست یادت می‌دهد. فعلاً فقط ببین جوابش چه شکلی است.\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>flexbox\u003C\u002Fcode>، \u003Ccode>grid\u003C\u002Fcode>، \u003Ccode>position: sticky\u003C\u002Fcode> و logical properties — را کنارِ هم به‌کار می‌گیرد.\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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا این صفحه هنوز در پنجرهٔ باریک به‌هم می‌ریزد، و ابزارِ درستش در کدام ترم است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> جای دو ستون را عوض کن — کاری کن ستونِ کناری سمتِ \u003Cstrong>شروع\u003C\u002Fstrong> بیاید و محتوا سمتِ پایان. (راهنمایی: ترتیبِ ستون‌ها در \u003Ccode>grid-template-columns\u003C\u002Fcode> و جای دو عنصر در HTML.) بعد یک کارتِ چهارم به محتوا اضافه کن و ببین بدونِ یک خطِ CSSِ تازه، خودش سرِ جایش می‌نشیند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک نوارِ اعلانِ چسبان به \u003Cstrong>بالای سرصفحه\u003C\u002Fstrong> اضافه کن که همیشه دیده شود (\u003Ccode>position: sticky\u003C\u002Fcode> با \u003Ccode>inset-block-start: 0\u003C\u002Fcode> روی خودِ \u003Ccode><header>\u003C\u002Fcode>). بعد امتحان کن: اگر یکی از والدهای هدر \u003Ccode>overflow: hidden\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>اینجا آخرِ ترمِ Layout است. حالا می‌توانی چیزها را کنارِ هم بچینی، ستون بسازی، لایه‌بندی کنی و یک صفحهٔ واقعی را سرِ هم کنی. ولی یک ضعفِ بزرگ باقی است که خودت دیدی: این صفحه فقط در یک عرضِ مشخص خوب است و در پنجرهٔ باریکِ موبایل به‌هم می‌ریزد. ترمِ بعد — \u003Cstrong>Responsive\u003C\u002Fstrong> — دقیقاً همین را حل می‌کند: یاد می‌گیری با \u003Ccode>@media\u003C\u002Fcode> و واحدهای نسبی، صفحه‌ای بسازی که از موبایل تا نمایشگرِ بزرگ، همه‌جا درست بماند و خودش را با اندازهٔ صفحه جور کند. همان دو ستونی که این فصل در موبایل جا نمی‌شد، آنجا یاد می‌گیری چطور در صفحهٔ کوچک زیرِ هم بروند.\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,79,82,86,90,94,98,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,165,166,167,168,171,174,177,180,183,186,189,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":9,"slug":77,"source":8,"term":16,"title_fa":78},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":18,"slug":80,"source":8,"term":16,"title_fa":81},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":83,"slug":84,"source":8,"term":16,"title_fa":85},5,"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":91,"slug":92,"source":8,"term":16,"title_fa":93},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":95,"slug":96,"source":8,"term":16,"title_fa":97},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":99,"slug":100,"source":8,"term":16,"title_fa":101},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":12,"slug":103,"source":8,"term":16,"title_fa":104},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":16,"slug":106,"source":8,"term":73,"title_fa":107},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":109,"source":8,"term":73,"title_fa":110},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":112,"source":8,"term":73,"title_fa":113},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":18,"slug":115,"source":8,"term":73,"title_fa":116},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":83,"slug":118,"source":8,"term":73,"title_fa":119},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":87,"slug":121,"source":8,"term":73,"title_fa":122},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":91,"slug":124,"source":8,"term":73,"title_fa":125},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":95,"slug":127,"source":8,"term":73,"title_fa":128},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":99,"slug":130,"source":8,"term":73,"title_fa":131},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":12,"slug":133,"source":8,"term":73,"title_fa":134},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":6,"slug":136,"source":8,"term":73,"title_fa":137},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":16,"slug":139,"source":8,"term":9,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":9,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":9,"slug":145,"source":8,"term":9,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":18,"slug":148,"source":8,"term":9,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":83,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":87,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":91,"slug":157,"source":8,"term":9,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":95,"slug":160,"source":8,"term":9,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":99,"slug":163,"source":8,"term":9,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"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":169,"source":8,"term":18,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":172,"source":8,"term":18,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":18,"slug":175,"source":8,"term":18,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":83,"slug":178,"source":8,"term":18,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":87,"slug":181,"source":8,"term":18,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":91,"slug":184,"source":8,"term":18,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":95,"slug":187,"source":8,"term":18,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":16,"slug":190,"source":8,"term":83,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":193,"source":8,"term":83,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":196,"source":8,"term":83,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":18,"slug":199,"source":8,"term":83,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":83,"slug":202,"source":8,"term":83,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":87,"slug":205,"source":8,"term":83,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":91,"slug":208,"source":8,"term":83,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":95,"slug":211,"source":8,"term":83,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":99,"slug":214,"source":8,"term":83,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":12,"slug":217,"source":8,"term":83,"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":9,"slug":226,"source":8,"term":87,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":18,"slug":229,"source":8,"term":87,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":83,"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":91,"slug":238,"source":8,"term":87,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":95,"slug":241,"source":8,"term":87,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":99,"slug":244,"source":8,"term":87,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":12,"slug":247,"source":8,"term":87,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":6,"slug":250,"source":8,"term":87,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105129]