[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t6-s10-capstone-build":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,10,"t6-s10-capstone-build","book",6,"فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},9,"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},11,"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"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>رسیدی به پروژهٔ نهایی. مفهومِ تازه‌ای در کار نیست — کارِ امروز \u003Cstrong>ترکیب\u003C\u002Fstrong> است: هر چیزی که در پنج ترمِ گذشته یاد گرفتی را در یک سایتِ واقعی کنارِ هم می‌گذاری. یک نمونه‌کارِ کوچک (portfolio) با \u003Cstrong>دو صفحه\u003C\u002Fstrong>: یک صفحهٔ خانه که کارهایت را در یک گریدِ کارت نشان می‌دهد، و یک صفحهٔ جزئیات برای یک کار — و هر دو یک سرصفحه و پاصفحهٔ \u003Cstrong>مشترک\u003C\u002Fstrong> دارند. توی این یک پروژه، semantic HTML، layout، responsive، dark mode، component و token همه با هم جمع‌اند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.160.webp 160w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.320.webp 320w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.640.webp 640w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.1280.jpg\" srcset=\"\u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.160.jpg 160w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.320.jpg 320w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.640.jpg 640w, \u002F_img\u002F01-image-portfolio-pages.cb0f3ef407.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>یک سرصفحه و پاصفحهٔ مشترک بسازی که در چند صفحه یکسان بماند\u003C\u002Fli>\n\u003Cli>کارها را در یک گریدِ \u003Cstrong>responsive\u003C\u002Fstrong> بچینی که خودش تعدادِ ستون را با پهنای صفحه جور می‌کند\u003C\u002Fli>\n\u003Cli>theme روشن و تیره را با token به کلِ سایت بدهی\u003C\u002Fli>\n\u003Cli>چند صفحه را با پیوندهای واقعی به هم وصل کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\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> ساختارِ semantic — \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><section>\u003C\u002Fcode>، \u003Ccode><article>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>flexbox\u003C\u002Fcode> برای سرصفحه و \u003Ccode>grid\u003C\u002Fcode> با \u003Ccode>repeat(auto-fit, minmax(...))\u003C\u002Fcode> برای کارت‌ها.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۴:\u003C\u002Fstrong> \u003Ccode>clamp()\u003C\u002Fcode> برای فونتِ سیال و \u003Ccode>prefers-color-scheme\u003C\u002Fcode> برای dark mode.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۶:\u003C\u002Fstrong> فکرِ component و token، و اگر گیر کردی، اشکال‌زداییِ فصل قبل.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— HTML صفحهٔ خانه آماده است. در این فصل خط‌به‌خط CSS اش را می‌نویسی و می‌بینی چطور یک صفحهٔ خام به یک سایتِ واقعی تبدیل می‌شود","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-10-capstone-build",{"kind":21,"heading":33,"html":34},"۱. نقشهٔ سایت","\u003Ch2 id=\"۱-نقشهٔ-سایت\">۱. نقشهٔ سایت\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%86%D9%82%D8%B4%D9%87%D9%94-%D8%B3%D8%A7%DB%8C%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول نقشه، بعد کد. سایت دو صفحه دارد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>index.html\u003C\u002Fcode> — صفحهٔ خانه: یک معرفیِ کوتاه و یک گرید از کارتِ کارها.\u003C\u002Fli>\n\u003Cli>\u003Ccode>project.html\u003C\u002Fcode> — صفحهٔ جزئیاتِ یک کار: عنوان، یک تصویر و چند پاراگراف.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>هر دو صفحه \u003Cstrong>همان\u003C\u002Fstrong> \u003Ccode><header>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> و \u003Cstrong>همان\u003C\u002Fstrong> \u003Ccode>styles.css\u003C\u002Fcode> را دارند. این نکتهٔ اصلیِ یک سایتِ چندصفحه‌ای است: یک stylesheet مشترک، پس theme و سرصفحه فقط یک‌بار نوشته می‌شوند و همه‌جا یکسان‌اند.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. پایه: token و تمِ روشن\u002Fتیره","\u003Ch2 id=\"۲-پایه-token-و-تمِ-روشنتیره\">۲. پایه: token و تمِ روشن\u002Fتیره\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D9%BE%D8%A7%DB%8C%D9%87-token-%D9%88-%D8%AA%D9%85%D9%90-%D8%B1%D9%88%D8%B4%D9%86%D8%AA%DB%8C%D8%B1%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>از فصلِ dark mode یادت هست: رنگ‌ها را یک‌جا روی \u003Ccode>:root\u003C\u002Fcode> به‌عنوان token تعریف می‌کنی، و در \u003Ccode>@media (prefers-color-scheme: dark)\u003C\u002Fcode> مقدارشان را عوض می‌کنی. همین پایه را می‌گذاریم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>: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  --space: 20px;\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\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>بقیهٔ CSS به‌جای رنگِ ثابت، \u003Ccode>var(--bg)\u003C\u002Fcode>، \u003Ccode>var(--ink)\u003C\u002Fcode> و مثلِ این‌ها را صدا می‌زند — پس کلِ سایت با تمِ سیستم، روشن و تیره می‌شود بی‌آنکه یک رنگ را دوباره بنویسی.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. سرصفحه و پاصفحهٔ مشترک","\u003Ch2 id=\"۳-سرصفحه-و-پاصفحهٔ-مشترک\">۳. سرصفحه و پاصفحهٔ مشترک\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%B3%D8%B1%D8%B5%D9%81%D8%AD%D9%87-%D9%88-%D9%BE%D8%A7%D8%B5%D9%81%D8%AD%D9%87%D9%94-%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سرصفحه دو چیز دارد که دو سرِ خط می‌نشینند: نامِ سازنده یک‌سو، منو سویِ دیگر — کارِ \u003Ccode>flexbox\u003C\u002Fcode> با \u003Ccode>space-between\u003C\u002Fcode>. یک \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> هم می‌گذاریم تا در صفحهٔ باریک، منو خودش برود خطِ بعد و چیزی از لبه بیرون نزند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.site-header {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space);\n  padding: 14px var(--space);\n  background-color: var(--card);\n  border-block-end: 1px solid var(--line);\n}\n\n.site-footer {\n  padding-block: 20px;\n  text-align: center;\n  color: var(--muted);\n  border-block-start: 1px solid var(--line);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> نامِ «پروانه پارسا» یک‌سو و سه لینکِ منو سویِ دیگر نشستند، و یک پاصفحهٔ وسط‌چین پایینِ صفحه آمد. پنجره را باریک کن: منو به‌جای بیرون‌زدن، آرام می‌رود خطِ بعد.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. صفحهٔ خانه: گریدِ کارت‌ها","\u003Ch2 id=\"۴-صفحهٔ-خانه-گریدِ-کارت‌ها\">۴. صفحهٔ خانه: گریدِ کارت‌ها\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%D8%AE%D8%A7%D9%86%D9%87-%DA%AF%D8%B1%DB%8C%D8%AF%D9%90-%DA%A9%D8%A7%D8%B1%D8%AA%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا مهم‌ترین بخش: کارها باید در چند کارتِ هم‌اندازه کنارِ هم بنشینند. اولین فکر شاید این باشد که سه ستونِ ثابت بدهی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: var(--space);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی صفحهٔ پهن قشنگ است. حالا پنجره را باریک کن — مثلِ صفحهٔ موبایل. سه کارت سرِ جاشان می‌مانند ولی هر کدام آن‌قدر باریک می‌شوند که متن‌ها له می‌شوند و کارت‌ها زشت و بلند می‌شوند. سه ستون همیشه سه ستون است، حتی وقتی جا نیست.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> به‌جای عددِ ثابتِ ستون‌ها، از مرورگر بخواه خودش تصمیم بگیرد. \u003Ccode>repeat(auto-fit, minmax(220px, 1fr))\u003C\u002Fcode> یعنی «هر کارت حداقل ۲۲۰ پیکسل باشد، و هرچند تا که در این عرض جا می‌شود کنارِ هم بچین؛ باقی را ببر خطِ بعد». روی صفحهٔ پهن سه‌تایی می‌شوند، روی صفحهٔ باریک خودشان می‌روند زیرِ هم و بزرگ و خوانا می‌مانند — بدونِ حتی یک \u003Ccode>@media\u003C\u002Fcode>. این همان \u003Ccode>auto-fit\u003C\u002Fcode>ِ ترم ۳ است، و اینجا نشان می‌دهد چرا آن روز یادش گرفتی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: var(--space);\n  margin: 0;\n  padding: 0;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پنجره را پهن و باریک کن. کارت‌ها خودشان از سه ستون به دو و به یک ستون می‌روند و هیچ‌وقت له نمی‌شوند. این یعنی responsive.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-grid-responsive.caa139d27d.160.webp 160w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.320.webp 320w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.640.webp 640w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-grid-responsive.caa139d27d.1280.jpg\" srcset=\"\u002F_img\u002F02-image-grid-responsive.caa139d27d.160.jpg 160w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.320.jpg 320w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.640.jpg 640w, \u002F_img\u002F02-image-grid-responsive.caa139d27d.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو حالتِ یک ردیف کارت کنارِ هم: سمتی سه ستونِ ثابت که در صفحهٔ باریک به سه نوارِ باریک و لهیده تبدیل شده‌اند، سمتِ دیگر همان کارت‌ها که در صفحهٔ باریک زیرِ هم و بزرگ و خوانا چیده شده‌اند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. صفحهٔ دوم و پیوند بینشان","\u003Ch2 id=\"۵-صفحهٔ-دوم-و-پیوند-بینشان\">۵. صفحهٔ دوم و پیوند بینشان\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%D8%AF%D9%88%D9%85-%D9%88-%D9%BE%DB%8C%D9%88%D9%86%D8%AF-%D8%A8%DB%8C%D9%86%D8%B4%D8%A7%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>صفحهٔ خانه آماده است. صفحهٔ دوم، \u003Ccode>project.html\u003C\u002Fcode>، دقیقاً \u003Cstrong>همان\u003C\u002Fstrong> \u003Ccode><header>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> و همان \u003Ccode><link rel="stylesheet" href="styles.css">\u003C\u002Fcode> را دارد؛ فقط \u003Ccode><main>\u003C\u002Fcode> اش فرق می‌کند: یک \u003Ccode><article>\u003C\u002Fcode> با یک \u003Ccode><h1>\u003C\u002Fcode> عنوانِ کار، یک تصویر با \u003Ccode>max-width: 100%\u003C\u002Fcode> (تا هیچ‌وقت از صفحه بیرون نزند — همان درسِ فصل قبل)، و چند پاراگراف توضیح. چون stylesheet مشترک است، این صفحه بدونِ یک خطِ CSS تازه، همان ظاهر و همان تمِ روشن\u002Fتیره را می‌گیرد.\u003C\u002Fp>\n\u003Cp>پیوندِ بینشان با همان \u003Ccode><a href>\u003C\u002Fcode>ِ ترم ۱ ساخته می‌شود: در کارت‌های خانه \u003Ccode>href="project.html"\u003C\u002Fcode> می‌گذاری، و در صفحهٔ جزئیات یک لینکِ بازگشت با \u003Ccode>href="index.html"\u003C\u002Fcode>. همین دو مسیرِ نسبی، دو صفحه را به یک سایت تبدیل می‌کند.\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"۶. کدِ کامل","\u003Ch2 id=\"۶-کدِ-کامل\">۶. کدِ کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%A9%D8%AF%D9%90-%DA%A9%D8%A7%D9%85%D9%84\" 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>پروانه پارسا — نمونه‌کارها<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <header class="site-header">\n      <a class="logo" href="index.html">پروانه پارسا<\u002Fa>\n      <nav>\n        <ul class="menu">\n          <li><a href="index.html">خانه<\u002Fa><\u002Fli>\n          <li><a href="#works">نمونه‌کارها<\u002Fa><\u002Fli>\n          <li><a href="#about">درباره<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main>\n      <section class="intro">\n        <h1>سلام، من پروانه‌ام<\u002Fh1>\n        <p>سازندهٔ صفحه‌های وب. اینجا چند کاری که ساخته‌ام را می‌بینی.<\u002Fp>\n      <\u002Fsection>\n\n      <section id="works" class="works">\n        <h2>نمونه‌کارها<\u002Fh2>\n        <ul class="grid">\n          <li class="card">\n            <article>\n              <h3><a href="project.html">فروشگاه گل<\u002Fa><\u002Fh3>\n              <p>یک صفحهٔ فروشگاهیِ ساده با گرید و کارتِ محصول.<\u002Fp>\n            <\u002Farticle>\n          <\u002Fli>\n          <li class="card">\n            <article>\n              <h3><a href="project.html">تقویم رویداد<\u002Fa><\u002Fh3>\n              <p>فهرستِ رویدادها با تایپوگرافیِ تمیز و حالتِ تیره.<\u002Fp>\n            <\u002Farticle>\n          <\u002Fli>\n          <li class="card">\n            <article>\n              <h3><a href="project.html">صفحهٔ سفر<\u002Fa><\u002Fh3>\n              <p>یک صفحهٔ معرفیِ شهر با تصویرِ responsive.<\u002Fp>\n            <\u002Farticle>\n          <\u002Fli>\n        <\u002Ful>\n      <\u002Fsection>\n\n      <section id="about" class="about">\n        <h2>درباره<\u002Fh2>\n        <p>تازه دنیای وب را تمام کرده‌ام و با HTML و CSS صفحه می‌سازم. این سایت خودش یکی از کارهاست.<\u002Fp>\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\u002F* ---------- tokens (roshan) ---------- *\u002F\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  --space: 20px;\n}\n\n\u002F* ---------- tokens (tire) ---------- *\u002F\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\n\u002F* ---------- base ---------- *\u002F\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  color: var(--ink);\n  background-color: var(--bg);\n  line-height: 1.9;\n}\n\n\u002F* ---------- header + footer (moshtarak) ---------- *\u002F\n.site-header {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space);\n  padding: 14px var(--space);\n  background-color: var(--card);\n  border-block-end: 1px solid var(--line);\n}\n\n.logo {\n  font-size: 1.3rem;\n  font-weight: 700;\n  color: var(--brand);\n}\n\n.menu {\n  display: flex;\n  gap: 16px;\n  margin: 0;\n  padding: 0;\n}\n\n.menu a {\n  color: var(--ink);\n  font-weight: 700;\n}\n\n.site-footer {\n  padding-block: 20px;\n  text-align: center;\n  color: var(--muted);\n  border-block-start: 1px solid var(--line);\n}\n\n\u002F* ---------- main ---------- *\u002F\nmain {\n  max-width: 900px;\n  margin-inline: auto;\n  padding: var(--space);\n}\n\n.intro h1 {\n  margin-block: 0 8px;\n  font-size: clamp(1.6rem, 5vw, 2.4rem);\n}\n\n.about {\n  margin-block-start: var(--space);\n}\n\n\u002F* ---------- works grid + card ---------- *\u002F\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: var(--space);\n  margin: 0;\n  padding: 0;\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 h3 {\n  margin-block: 0 8px;\n}\n\n.card a {\n  color: var(--brand);\n}\n\n.card p {\n  margin: 0;\n  color: var(--muted);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحهٔ کامل را نگاه کن — سرصفحهٔ flex، گریدِ کارت‌های responsive، و در تمِ تیرهٔ سیستم، کلِ سایت تیره و خوانا. نقطه‌های فهرست هم رفتند، چون \u003Ccode><ul>\u003C\u002Fcode> را \u003Ccode>grid\u003C\u002Fcode> و \u003Ccode>flex\u003C\u002Fcode> کردیم و آیتم‌هایش دیگر «آیتمِ فهرست» حساب نمی‌شوند. این یک سایتِ واقعی است، ساخته از هرچه بلدی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> کلِ صفحه‌ات را به دستیار AI ات بده و بپرس «آیا ساختارِ semantic و ترتیبِ heading این صفحه درست است؟». این یکی از بهترین کاربردهای AI است — یک بازبینیِ دسترس‌پذیری، \u003Cstrong>بعد\u003C\u002Fstrong> از اینکه خودت نوشتی. ولی هر پیشنهادش را در DevTools و با فهمِ خودت بسنج؛ گاهی یک \u003Ccode><div>\u003C\u002Fcode> یا \u003Ccode>role\u003C\u002Fcode>ِ بی‌لزوم اضافه می‌کند که تو با درسِ ترم ۱ می‌دانی لازم نیست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\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>این فصلِ پروژه‌ای است و واژهٔ فنیِ تازه‌ای ندارد؛ فقط ابزارهای پنج ترم — semantic HTML، \u003Ccode>flexbox\u003C\u002Fcode>، \u003Ccode>grid\u003C\u002Fcode>، \u003Ccode>auto-fit\u003C\u002Fcode>، \u003Ccode>clamp()\u003C\u002Fcode>، \u003Ccode>prefers-color-scheme\u003C\u002Fcode> و token — را در یک سایت کنارِ هم می‌گذارد.\u003C\u002Fp>\n",{"kind":54,"heading":55,"html":56},"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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode>repeat(auto-fit, minmax(220px, 1fr))\u003C\u002Fcode> بهتر از \u003Ccode>1fr 1fr 1fr\u003C\u002Fcode> است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> صفحهٔ دومِ \u003Ccode>project.html\u003C\u002Fcode> را واقعاً بساز. همان \u003Ccode><header>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> را از خانه کپی کن، \u003Ccode><main>\u003C\u002Fcode> را با یک \u003Ccode><article>\u003C\u002Fcode> (یک \u003Ccode><h1>\u003C\u002Fcode>، یک \u003Ccode><p>\u003C\u002Fcode> و اگر خواستی یک تصویرِ \u003Ccode>max-width: 100%\u003C\u002Fcode>) پر کن، و همان \u003Ccode>styles.css\u003C\u002Fcode> را link کن. بعد لینک‌های کارتِ خانه و یک لینکِ بازگشت را چک کن که درست بینِ دو صفحه رفت‌وآمد کنند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک token تازه به theme اضافه کن، مثلاً \u003Ccode>--accent\u003C\u002Fcode> برای رنگِ تأکید، و با آن یک برچسبِ کوچکِ «تازه» رویِ یکی از کارت‌ها بساز. مطمئن شو در \u003Cstrong>هر دو\u003C\u002Fstrong> تمِ روشن و تیره خوانا و خوش‌رنگ است — همان درسِ «رنگِ متن و پس‌زمینه یک جفت‌اند».\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\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>سایتت ساخته شد و روی صفحهٔ تو کار می‌کند — ولی هنوز فقط روی کامپیوترِ توست و هیچ‌کسِ دیگری نمی‌تواند بازش کند. فصلِ بعد، آخرین فصلِ دوره، همین را حل می‌کند: به سایت متادیتا و پیش‌نمایشِ اجتماعی می‌دهی تا لینکش قشنگ به اشتراک گذاشته شود، فایل‌ها را از آزمایشگاه به کامپیوترِ خودت و یک ویرایشگرِ واقعی می‌بری، و بالاخره سایت را روی اینترنت \u003Cstrong>منتشر\u003C\u002Fstrong> می‌کنی تا هر کسی در دنیا با یک آدرس بازش کند.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,79,83,87,91,94,98,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,165,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,252,253,254],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":76,"slug":77,"source":8,"term":72,"title_fa":78},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":80,"slug":81,"source":8,"term":72,"title_fa":82},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":84,"slug":85,"source":8,"term":72,"title_fa":86},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":88,"slug":89,"source":8,"term":72,"title_fa":90},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":92,"source":8,"term":72,"title_fa":93},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":95,"slug":96,"source":8,"term":72,"title_fa":97},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":99,"slug":100,"source":8,"term":72,"title_fa":101},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":12,"slug":103,"source":8,"term":72,"title_fa":104},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":6,"slug":106,"source":8,"term":72,"title_fa":107},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":109,"source":8,"term":76,"title_fa":110},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":76,"slug":112,"source":8,"term":76,"title_fa":113},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":80,"slug":115,"source":8,"term":76,"title_fa":116},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":84,"slug":118,"source":8,"term":76,"title_fa":119},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":88,"slug":121,"source":8,"term":76,"title_fa":122},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":124,"source":8,"term":76,"title_fa":125},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":95,"slug":127,"source":8,"term":76,"title_fa":128},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":99,"slug":130,"source":8,"term":76,"title_fa":131},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":133,"source":8,"term":76,"title_fa":134},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":6,"slug":136,"source":8,"term":76,"title_fa":137},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":16,"slug":139,"source":8,"term":76,"title_fa":140},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":80,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":76,"slug":145,"source":8,"term":80,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":80,"slug":148,"source":8,"term":80,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":84,"slug":151,"source":8,"term":80,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":88,"slug":154,"source":8,"term":80,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":157,"source":8,"term":80,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":95,"slug":160,"source":8,"term":80,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":99,"slug":163,"source":8,"term":80,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":12,"slug":166,"source":8,"term":80,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":6,"slug":169,"source":8,"term":80,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":16,"slug":172,"source":8,"term":80,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":175,"source":8,"term":84,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":76,"slug":178,"source":8,"term":84,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":80,"slug":181,"source":8,"term":84,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":84,"slug":184,"source":8,"term":84,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":88,"slug":187,"source":8,"term":84,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":190,"source":8,"term":84,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":95,"slug":193,"source":8,"term":84,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":99,"slug":196,"source":8,"term":84,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":199,"source":8,"term":88,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":76,"slug":202,"source":8,"term":88,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":80,"slug":205,"source":8,"term":88,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":84,"slug":208,"source":8,"term":88,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":88,"slug":211,"source":8,"term":88,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":214,"source":8,"term":88,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":95,"slug":217,"source":8,"term":88,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":99,"slug":220,"source":8,"term":88,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":12,"slug":223,"source":8,"term":88,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":6,"slug":226,"source":8,"term":88,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":76,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":80,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":84,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":88,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":9,"slug":244,"source":8,"term":9,"title_fa":245},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":95,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":99,"slug":250,"source":8,"term":9,"title_fa":251},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"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":9,"title_fa":18},[],1784827105784]