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