[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"lesson:t6-s11-capstone-ship":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":16},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,11,"t6-s11-capstone-ship","book",6,"فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},10,"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",null,[17,21,24,29,32,35,38,41,44,47,50,54],{"kind":18,"heading":19,"html":20},"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> و \u003Cstrong>پیش‌نمایشِ اجتماعی\u003C\u002Fstrong> می‌دهی تا وقتی لینکش را جایی می‌فرستی، به‌جای یک خطِ خشک، یک کارتِ قشنگ با عنوان و خلاصه و تصویر دیده شود. بعد فایل‌ها را از آزمایشگاه به کامپیوترِ خودت و یک ویرایشگرِ واقعی می‌بری، و بالاخره سایت را روی یک میزبانِ رایگان \u003Cstrong>منتشر\u003C\u002Fstrong> می‌کنی. مفهومِ CSSِ تازه‌ای نیست؛ چند تگِ ساده در \u003Ccode>&lt;head&gt;\u003C\u002Fcode> و یک جریانِ کارِ واقعی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-share-preview.bc6a6e9ebb.160.webp 160w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.320.webp 320w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.640.webp 640w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-share-preview.bc6a6e9ebb.1280.jpg\" srcset=\"\u002F_img\u002F01-image-share-preview.bc6a6e9ebb.160.jpg 160w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.320.jpg 320w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.640.jpg 640w, \u002F_img\u002F01-image-share-preview.bc6a6e9ebb.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>meta description\u003C\u002Fcode> و تگ‌های \u003Ccode>og:*\u003C\u002Fcode> بدهی تا پیش‌نمایشِ اشتراک قشنگ شود\u003C\u002Fli>\n\u003Cli>یک \u003Ccode>favicon\u003C\u002Fcode> و یک \u003Ccode>theme-color\u003C\u002Fcode> به سایت اضافه کنی\u003C\u002Fli>\n\u003Cli>فایل‌ها را از آزمایشگاه به کامپیوترِ خودت و \u003Ccode>VS Code\u003C\u002Fcode> منتقل کنی\u003C\u002Fli>\n\u003Cli>سایت را روی یک میزبانِ static منتشر کنی و آدرسِ زنده‌اش را به اشتراک بگذاری\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":18,"heading":22,"html":23},"قبل از شروع","\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>index.html\u003C\u002Fcode> و \u003Ccode>styles.css\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۱ فصل ۱:\u003C\u002Fstrong> \u003Ccode>&lt;head&gt;\u003C\u002Fcode> و \u003Ccode>&lt;title&gt;\u003C\u002Fcode> — جایی که این تگ‌های تازه هم می‌نشینند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":25,"heading":26,"html":27,"embed":28},"lab","","— یک صفحه می‌بینی که &lt;head&gt; اش تقریباً خالی است. در این فصل تگ‌های متادیتا را یکی‌یکی به آن اضافه می‌کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-11-capstone-ship",{"kind":18,"heading":30,"html":31},"۱. صفحه‌ات کجا زندگی می‌کند؟","\u003Ch2 id=\"۱-صفحه‌ات-کجا-زندگی-می‌کند\">۱. صفحه‌ات کجا زندگی می‌کند؟\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%D8%A7%D8%AA-%DA%A9%D8%AC%D8%A7-%D8%B2%D9%86%D8%AF%DA%AF%DB%8C-%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا صفحه‌ات فقط روی کامپیوترِ خودت باز می‌شد. \u003Cstrong>انتشار\u003C\u002Fstrong> یعنی یک نسخه از فایل‌ها را روی یک کامپیوترِ همیشه‌روشن (یک «میزبان») بگذاری که به اینترنت وصل است، تا هر کسی با یک آدرس بازش کند. قبل از این کار، دو کارِ کوچک ولی مهم مانده که سایت را آمادهٔ دیده‌شدن می‌کنند: متادیتا و آیکون.\u003C\u002Fp>\n",{"kind":18,"heading":33,"html":34},"۲. متادیتا: توضیح و پیش‌نمایشِ اجتماعی","\u003Ch2 id=\"۲-متادیتا-توضیح-و-پیش‌نمایشِ-اجتماعی\">۲. متادیتا: توضیح و پیش‌نمایشِ اجتماعی\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D9%85%D8%AA%D8%A7%D8%AF%DB%8C%D8%AA%D8%A7-%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-%D9%88-%D9%BE%DB%8C%D8%B4%E2%80%8C%D9%86%D9%85%D8%A7%DB%8C%D8%B4%D9%90-%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن آدرسِ سایتت را برای یک دوست در یک پیام‌رسان می‌فرستی. انتظار داری یک کارتِ قشنگ ظاهر شود؛ ولی چیزی که می‌آید یک خطِ خاکستریِ بی‌رمق است — نه عنوانی، نه خلاصه‌ای، نه تصویری. چرا؟ چون پیام‌رسان سراغِ \u003Ccode>&lt;head&gt;\u003C\u002Fcode> صفحه‌ات رفت و دنبالِ یک \u003Cstrong>توضیح\u003C\u002Fstrong> و چند تگِ \u003Cstrong>پیش‌نمایش\u003C\u002Fstrong> گشت و هیچ‌کدام را پیدا نکرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> پیش‌نمایشِ لینک خالی و زشت است؟ چون صفحه‌ات این تگ‌ها را ندارد. دو چیز اضافه کن. اول \u003Ccode>&lt;meta name=&quot;description&quot;&gt;\u003C\u002Fcode>: یک جملهٔ کوتاه که می‌گوید صفحه دربارهٔ چیست — همان که موتورِ جست‌وجو و پیام‌رسان به‌عنوان خلاصه نشان می‌دهند. بعد تگ‌های \u003Ccode>Open Graph\u003C\u002Fcode> که با \u003Ccode>og:\u003C\u002Fcode> شروع می‌شوند و دقیقاً همان کارت را می‌سازند: \u003Ccode>og:title\u003C\u002Fcode> (عنوان)، \u003Ccode>og:description\u003C\u002Fcode> (خلاصه)، \u003Ccode>og:image\u003C\u002Fcode> (تصویرِ کارت) و \u003Ccode>og:url\u003C\u002Fcode> (آدرسِ صفحه). این‌ها را داخلِ \u003Ccode>&lt;head&gt;\u003C\u002Fcode> بگذار:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;meta name=&quot;description&quot; content=&quot;نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.&quot;&gt;\n\n&lt;meta property=&quot;og:type&quot; content=&quot;website&quot;&gt;\n&lt;meta property=&quot;og:title&quot; content=&quot;پروانه پارسا — نمونه‌کارها&quot;&gt;\n&lt;meta property=&quot;og:description&quot; content=&quot;نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.&quot;&gt;\n&lt;meta property=&quot;og:image&quot; content=&quot;https:\u002F\u002Fparvaneh.example\u002Fcover.jpg&quot;&gt;\n&lt;meta property=&quot;og:url&quot; content=&quot;https:\u002F\u002Fparvaneh.example\u002F&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا همان لینک، یک کارتِ کامل می‌سازد: عنوان، خلاصه و تصویر. آدرسِ \u003Ccode>parvaneh.example\u003C\u002Fcode> فعلاً جای‌نگه‌دار است؛ وقتی سایتت را منتشر کردی و آدرسِ واقعی‌ات را گرفتی، این دو خط را با همان آدرس عوض می‌کنی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>description\u003C\u002Fcode> را کوتاه و واقعی بنویس — حدودِ یک جمله. این متن جایی روی صفحه دیده نمی‌شود، ولی همان است که موتورِ جست‌وجو زیرِ عنوانِ سایتت نشان می‌دهد. یک \u003Ccode>description\u003C\u002Fcode> خوب یعنی آدم‌ها روی لینکِ تو کلیک می‌کنند نه لینکِ بغلی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":18,"heading":36,"html":37},"۳. favicon و theme-color","\u003Ch2 id=\"۳-favicon-و-theme-color\">۳. favicon و theme-color\u003Ca class=\"head-anchor\" href=\"#%DB%B3-favicon-%D9%88-theme-color\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دو تزئینِ کوچکِ دیگر هم سایت را حرفه‌ای می‌کنند. \u003Ccode>favicon\u003C\u002Fcode> همان آیکونِ ریزی است که مرورگر کنارِ عنوانِ صفحه، روی زبانه (tab) نشان می‌دهد؛ با یک تگ به مرورگر می‌گویی کدام فایل را به‌عنوانِ آیکون بردارد. و \u003Ccode>theme-color\u003C\u002Fcode> رنگی است که مرورگرِ موبایل، نوارِ بالای خودش را با آن هم‌رنگ می‌کند تا سایتت یکدست‌تر دیده شود. هر دو یک خط‌اند، داخلِ \u003Ccode>&lt;head&gt;\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;meta name=&quot;theme-color&quot; content=&quot;#2a6b93&quot;&gt;\n&lt;link rel=&quot;icon&quot; href=&quot;favicon.svg&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا کلِ \u003Ccode>&lt;head&gt;\u003C\u002Fcode> صفحهٔ آماده‌ات این شکلی است — این نسخهٔ نهاییِ \u003Ccode>index.html\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;!-- index.html --&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n\n    &lt;title&gt;پروانه پارسا — نمونه‌کارها&lt;\u002Ftitle&gt;\n    &lt;meta name=&quot;description&quot; content=&quot;نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.&quot;&gt;\n    &lt;meta name=&quot;theme-color&quot; content=&quot;#2a6b93&quot;&gt;\n\n    &lt;meta property=&quot;og:type&quot; content=&quot;website&quot;&gt;\n    &lt;meta property=&quot;og:title&quot; content=&quot;پروانه پارسا — نمونه‌کارها&quot;&gt;\n    &lt;meta property=&quot;og:description&quot; content=&quot;نمونه‌کارهای پروانه پارسا، سازندهٔ صفحه‌های وب با HTML و CSS.&quot;&gt;\n    &lt;meta property=&quot;og:image&quot; content=&quot;https:\u002F\u002Fparvaneh.example\u002Fcover.jpg&quot;&gt;\n    &lt;meta property=&quot;og:url&quot; content=&quot;https:\u002F\u002Fparvaneh.example\u002F&quot;&gt;\n\n    &lt;link rel=&quot;icon&quot; href=&quot;favicon.svg&quot;&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n  &lt;\u002Fhead&gt;\n  &lt;body&gt;\n    &lt;header class=&quot;site-header&quot;&gt;\n      &lt;a class=&quot;logo&quot; href=&quot;index.html&quot;&gt;پروانه پارسا&lt;\u002Fa&gt;\n      &lt;nav&gt;\n        &lt;ul class=&quot;menu&quot;&gt;\n          &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;خانه&lt;\u002Fa&gt;&lt;\u002Fli&gt;\n          &lt;li&gt;&lt;a href=&quot;#works&quot;&gt;نمونه‌کارها&lt;\u002Fa&gt;&lt;\u002Fli&gt;\n          &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;درباره&lt;\u002Fa&gt;&lt;\u002Fli&gt;\n        &lt;\u002Ful&gt;\n      &lt;\u002Fnav&gt;\n    &lt;\u002Fheader&gt;\n\n    &lt;main&gt;\n      &lt;section class=&quot;intro&quot;&gt;\n        &lt;h1&gt;سلام، من پروانه‌ام&lt;\u002Fh1&gt;\n        &lt;p&gt;سازندهٔ صفحه‌های وب. این سایت آمادهٔ انتشار است.&lt;\u002Fp&gt;\n      &lt;\u002Fsection&gt;\n    &lt;\u002Fmain&gt;\n\n    &lt;footer class=&quot;site-footer&quot;&gt;\n      &lt;p&gt;ساختهٔ پروانه پارسا — ۱۴۰۵&lt;\u002Fp&gt;\n    &lt;\u002Ffooter&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> DevTools را باز کن و در پنلِ Elements، داخلِ \u003Ccode>&lt;head&gt;\u003C\u002Fcode>، تگ‌های تازه را ببین: \u003Ccode>description\u003C\u002Fcode>، \u003Ccode>theme-color\u003C\u002Fcode>، پنج تگِ \u003Ccode>og:\u003C\u002Fcode> و \u003Ccode>link\u003C\u002Fcode> آیکون. متادیتا روی بدنهٔ صفحه چیزی عوض نمی‌کند — کارش برای مرورگر و موتورِ جست‌وجو و پیام‌رسان است، نه برای چشمِ بازدیدکننده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بخواه «برای این صفحه یک \u003Ccode>meta description\u003C\u002Fcode> کوتاه و گیرا در حدِ یک جمله بنویس» و متنِ صفحه‌ات را هم بده. جوابش معمولاً خوب است، ولی همیشه چک کن که واقعاً \u003Cstrong>صفحهٔ تو\u003C\u002Fstrong> را توصیف کند نه یک جملهٔ کلیشه‌ایِ کلی؛ توصیفی که به هر سایتی بخورد، به هیچ سایتی نمی‌خورد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":18,"heading":39,"html":40},"۴. از آزمایشگاه به کامپیوترِ خودت","\u003Ch2 id=\"۴-از-آزمایشگاه-به-کامپیوترِ-خودت\">۴. از آزمایشگاه به کامپیوترِ خودت\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%A7%D8%B2-%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4%DA%AF%D8%A7%D9%87-%D8%A8%D9%87-%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1%D9%90-%D8%AE%D9%88%D8%AF%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا در آزمایشگاه کد می‌نوشتی. برای انتشار، فایل‌ها باید روی کامپیوترِ خودت باشند. کارش ساده است:\u003C\u002Fp>\n\u003Col>\n\u003Cli>روی کامپیوترت یک پوشهٔ تازه بساز، مثلاً \u003Ccode>my-site\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>VS Code\u003C\u002Fcode> را نصب و باز کن — یک ویرایشگرِ متنِ رایگان که سازندگانِ وب واقعاً با آن کار می‌کنند — و پوشهٔ \u003Ccode>my-site\u003C\u002Fcode> را در آن باز کن.\u003C\u002Fli>\n\u003Cli>دو فایل بساز با همین نام‌ها: \u003Ccode>index.html\u003C\u002Fcode> و \u003Ccode>styles.css\u003C\u002Fcode>. کدِ هرکدام را از آزمایشگاه در فایلِ هم‌نامش کپی کن.\u003C\u002Fli>\n\u003Cli>روی \u003Ccode>index.html\u003C\u002Fcode> دوبار کلیک کن تا در مرورگر باز شود.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحه در مرورگرِ خودت، بیرون از آزمایشگاه، دقیقاً مثلِ قبل باز می‌شود. اگر بی‌استایل و لخت باز شد، یعنی \u003Ccode>index.html\u003C\u002Fcode> فایلِ \u003Ccode>styles.css\u003C\u002Fcode> را پیدا نکرده — مطمئن شو هر دو در یک پوشه‌اند و اسمِ داخلِ \u003Ccode>&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\u003C\u002Fcode> دقیقاً با نامِ فایل یکی است.\u003C\u002Fp>\n",{"kind":18,"heading":42,"html":43},"۵. انتشار روی میزبانِ static","\u003Ch2 id=\"۵-انتشار-روی-میزبانِ-static\">۵. انتشار روی میزبانِ static\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D8%B1%D9%88%DB%8C-%D9%85%DB%8C%D8%B2%D8%A8%D8%A7%D9%86%D9%90-static\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سایتِ تو فقط از فایل‌های آماده ساخته شده (HTML و CSS، بدونِ سرورِ خاص)، پس یک \u003Cstrong>میزبانِ static\u003C\u002Fstrong> می‌خواهد — و ساده‌ترین‌هایش رایگان‌اند. دو راهِ رایج:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>Netlify Drop\u003C\u002Fcode>: صفحه‌اش را باز کن و پوشهٔ \u003Ccode>my-site\u003C\u002Fcode> را با موس \u003Cstrong>بکش و رها کن\u003C\u002Fstrong> روی آن. چند ثانیه بعد، یک آدرسِ زندهٔ اینترنتی می‌گیری که می‌توانی برای هر کسی بفرستی.\u003C\u002Fli>\n\u003Cli>\u003Ccode>GitHub Pages\u003C\u002Fcode>: فایل‌هایت را در یک مخزنِ \u003Ccode>GitHub\u003C\u002Fcode> می‌گذاری و گزینهٔ Pages را روشن می‌کنی تا از همان مخزن، سایت را منتشر کند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-publish-flow.8394a5dcb4.160.webp 160w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.320.webp 320w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.640.webp 640w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-publish-flow.8394a5dcb4.1280.jpg\" srcset=\"\u002F_img\u002F02-image-publish-flow.8394a5dcb4.160.jpg 160w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.320.jpg 320w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.640.jpg 640w, \u002F_img\u002F02-image-publish-flow.8394a5dcb4.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"جریانِ انتشار: یک پوشه با دو فایلِ صفحه و استایل که با یک فلش به سمتِ یک کرهٔ اینترنت کشیده می‌شود و آن‌سو به‌صورتِ یک صفحهٔ زنده با یک نوارِ آدرسِ بالای آن ظاهر می‌شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>\u003Ccode>GitHub Pages\u003C\u002Fcode> به \u003Ccode>Git\u003C\u002Fcode> وصل است — همان ابزارِ نسخه‌سپاریِ کد که قدمِ طبیعیِ بعدیِ هر سازندهٔ وب است؛ فعلاً فقط اسمش را بشناس، در مسیرِ بعدی سراغش می‌روی.\u003C\u002Fp>\n",{"kind":18,"heading":45,"html":46},"۶. چک‌لیستِ پیش از انتشار","\u003Ch2 id=\"۶-چک‌لیستِ-پیش-از-انتشار\">۶. چک‌لیستِ پیش از انتشار\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%86%DA%A9%E2%80%8C%D9%84%DB%8C%D8%B3%D8%AA%D9%90-%D9%BE%DB%8C%D8%B4-%D8%A7%D8%B2-%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از اینکه لینک را دستِ کسی بدهی، این فهرست را یک‌بار برو — هرکدام درسی از همین دوره است:\u003C\u002Fp>\n\u003Col>\n\u003Cli>هر صفحه یک \u003Ccode>&lt;title&gt;\u003C\u002Fcode> معنادار و یک \u003Ccode>&lt;meta name=&quot;description&quot;&gt;\u003C\u002Fcode> دارد.\u003C\u002Fli>\n\u003Cli>تگ‌های \u003Ccode>og:title\u003C\u002Fcode>، \u003Ccode>og:description\u003C\u002Fcode> و \u003Ccode>og:image\u003C\u002Fcode> پر شده‌اند.\u003C\u002Fli>\n\u003Cli>یک \u003Ccode>favicon\u003C\u002Fcode> و یک \u003Ccode>theme-color\u003C\u002Fcode> گذاشته‌ای.\u003C\u002Fli>\n\u003Cli>\u003Ccode>&lt;meta name=&quot;viewport&quot;&gt;\u003C\u002Fcode> سرِ جایش است و صفحه در موبایل درست است.\u003C\u002Fli>\n\u003Cli>هر تصویر یک \u003Ccode>alt\u003C\u002Fcode> معنادار دارد.\u003C\u002Fli>\n\u003Cli>صفحه در تمِ روشن و تیره خواناست.\u003C\u002Fli>\n\u003Cli>با کلیدِ \u003Ccode>Tab\u003C\u002Fcode> می‌شود کلِ صفحه را پیمایش کرد.\u003C\u002Fli>\n\u003Cli>اسکرولِ افقیِ ناخواسته ندارد (همان شکارِ فصل قبل).\u003C\u002Fli>\n\u003Cli>لینک‌های بینِ صفحه‌ها واقعاً کار می‌کنند.\u003C\u002Fli>\n\u003C\u002Fol>\n",{"kind":18,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\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\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>meta description\u003C\u002Ftd>\n\u003Ctd>متا دیسکریپشِن\u003C\u002Ftd>\n\u003Ctd>یک جملهٔ خلاصهٔ صفحه در \u003Ccode>&lt;head&gt;\u003C\u002Fcode> که موتورِ جست‌وجو نشان می‌دهد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Open Graph\u003C\u002Ftd>\n\u003Ctd>اوپِن گراف\u003C\u002Ftd>\n\u003Ctd>تگ‌های \u003Ccode>og:\u003C\u002Fcode> که پیش‌نمایشِ لینک (کارتِ اشتراک) را می‌سازند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>favicon\u003C\u002Ftd>\n\u003Ctd>فَویکون\u003C\u002Ftd>\n\u003Ctd>آیکونِ ریزِ صفحه روی زبانهٔ مرورگر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>theme-color\u003C\u002Ftd>\n\u003Ctd>تِم‌کالر\u003C\u002Ftd>\n\u003Ctd>رنگی که مرورگرِ موبایل نوارِ بالایش را با آن هم‌رنگ می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>static host\u003C\u002Ftd>\n\u003Ctd>استاتیک هاست\u003C\u002Ftd>\n\u003Ctd>میزبانی که فقط فایل‌های آمادهٔ سایت را سرو می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>VS Code\u003C\u002Ftd>\n\u003Ctd>وی‌اِس‌کد\u003C\u002Ftd>\n\u003Ctd>یک ویرایشگرِ متنِ رایگانِ پرکاربردِ سازندگانِ وب\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Netlify\u003C\u002Ftd>\n\u003Ctd>نِت‌لیفای\u003C\u002Ftd>\n\u003Ctd>یک میزبانِ static که با کشیدن‌ورهاکردنِ پوشه سایت را منتشر می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>GitHub Pages\u003C\u002Ftd>\n\u003Ctd>گیت‌هاب پیجز\u003C\u002Ftd>\n\u003Ctd>انتشارِ سایتِ static از روی یک مخزنِ GitHub\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Git\u003C\u002Ftd>\n\u003Ctd>گیت\u003C\u002Ftd>\n\u003Ctd>ابزارِ نسخه‌سپاریِ کد؛ قدمِ بعدیِ مسیرِ تو\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"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>meta description\u003C\u002Fcode> و \u003Ccode>og:*\u003C\u002Fcode> وقتی به اشتراک گذاشته می‌شود بی‌رمق دیده می‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به صفحهٔ دومت (\u003Ccode>project.html\u003C\u002Fcode> از فصل قبل) هم متادیتای کاملِ خودش را بده — یک \u003Ccode>&lt;title&gt;\u003C\u002Fcode> و \u003Ccode>&lt;meta name=&quot;description&quot;&gt;\u003C\u002Fcode> و تگ‌های \u003Ccode>og:\u003C\u002Fcode> که \u003Cstrong>مخصوصِ همان صفحه\u003C\u002Fstrong> باشند، نه کپیِ خانه. هر صفحه توصیفِ خودش را دارد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> سایتت را واقعاً روی \u003Ccode>Netlify Drop\u003C\u002Fcode> منتشر کن و آدرسِ زنده‌اش را بگیر. حالا آن آدرس را در یک ابزارِ بررسیِ پیش‌نمایشِ لینک (link preview) امتحان کن و ببین کارتِ اشتراکت درست ساخته می‌شود. اگر تصویر نیامد، \u003Ccode>og:image\u003C\u002Fcode> را چک کن که به یک آدرسِ واقعیِ تصویر اشاره کند، نه به \u003Ccode>parvaneh.example\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":18,"heading":55,"html":56},"در فصل بعد","\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>اینجا پایانِ تاروپود است — و تو حالا یک سازندهٔ وب واقعی هستی: از یک صفحهٔ خالی تا یک سایتِ چندصفحه‌ایِ semantic، responsive، با dark mode و component، که آن را اشکال‌زدایی کردی و روی اینترنت منتشرش کردی. یک چیز مانده که HTML و CSS به‌تنهایی نمی‌توانند: وقتی کاربر روی چیزی کلیک می‌کند، صفحه \u003Cstrong>پاسخ\u003C\u002Fstrong> بدهد و عوض شود. این کارِ \u003Ccode>JavaScript\u003C\u002Fcode> است. ترمِ بعد — \u003Cstrong>پل به JavaScript\u003C\u002Fstrong> — یک پلِ کوچک به آن دنیاست: با حداقلِ کد، همان صفحه‌هایی که ساختی را تعاملی می‌کنی. تارَت را بافتی و پودت را زدی؛ حالا وقتِ جان‌دادن به پارچه است.\u003C\u002Fp>\n",{"course":58,"entitled":65,"lessons":66,"payments_enabled":65,"terms":254,"live":5},{"active_window":15,"effective_price_toman":59,"free":5,"lesson_count":60,"price_toman":61,"slug":62,"summary_fa":63,"title_fa":64},0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[67,71,75,79,83,87,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,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],{"free_preview":5,"order":68,"slug":69,"source":8,"term":68,"title_fa":70},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":72,"slug":73,"source":8,"term":68,"title_fa":74},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":76,"slug":77,"source":8,"term":68,"title_fa":78},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":80,"slug":81,"source":8,"term":68,"title_fa":82},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":84,"slug":85,"source":8,"term":68,"title_fa":86},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":88,"source":8,"term":68,"title_fa":89},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":91,"slug":92,"source":8,"term":68,"title_fa":93},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":95,"slug":96,"source":8,"term":68,"title_fa":97},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":99,"slug":100,"source":8,"term":68,"title_fa":101},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":12,"slug":103,"source":8,"term":68,"title_fa":104},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":68,"slug":106,"source":8,"term":72,"title_fa":107},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":72,"slug":109,"source":8,"term":72,"title_fa":110},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":76,"slug":112,"source":8,"term":72,"title_fa":113},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":80,"slug":115,"source":8,"term":72,"title_fa":116},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":84,"slug":118,"source":8,"term":72,"title_fa":119},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":121,"source":8,"term":72,"title_fa":122},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":91,"slug":124,"source":8,"term":72,"title_fa":125},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":95,"slug":127,"source":8,"term":72,"title_fa":128},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":99,"slug":130,"source":8,"term":72,"title_fa":131},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":12,"slug":133,"source":8,"term":72,"title_fa":134},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":6,"slug":136,"source":8,"term":72,"title_fa":137},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":68,"slug":139,"source":8,"term":76,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":76,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":76,"slug":145,"source":8,"term":76,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":80,"slug":148,"source":8,"term":76,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":84,"slug":151,"source":8,"term":76,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":154,"source":8,"term":76,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":91,"slug":157,"source":8,"term":76,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":95,"slug":160,"source":8,"term":76,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":99,"slug":163,"source":8,"term":76,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":12,"slug":166,"source":8,"term":76,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":6,"slug":169,"source":8,"term":76,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":68,"slug":172,"source":8,"term":80,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":72,"slug":175,"source":8,"term":80,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":76,"slug":178,"source":8,"term":80,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":80,"slug":181,"source":8,"term":80,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":84,"slug":184,"source":8,"term":80,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":187,"source":8,"term":80,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":91,"slug":190,"source":8,"term":80,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":95,"slug":193,"source":8,"term":80,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":68,"slug":196,"source":8,"term":84,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":72,"slug":199,"source":8,"term":84,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":76,"slug":202,"source":8,"term":84,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":80,"slug":205,"source":8,"term":84,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":84,"slug":208,"source":8,"term":84,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":211,"source":8,"term":84,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":91,"slug":214,"source":8,"term":84,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":95,"slug":217,"source":8,"term":84,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":99,"slug":220,"source":8,"term":84,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":12,"slug":223,"source":8,"term":84,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":68,"slug":226,"source":8,"term":9,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":72,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":76,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":80,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":84,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":9,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":91,"slug":244,"source":8,"term":9,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":95,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":99,"slug":250,"source":8,"term":9,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"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},[],1784827105789]