[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t1-s05-lists":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,5,"t1-s05-lists","book",1,"فصل ۰۵ — فهرست",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",[20,24,27,32,35,38,41,45,48,51,54,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>آخر این فصل یک صفحه داری که چند فهرست واقعی دارد: یک فهرست کارهای امروز، یک دستور پخت مرحله‌به‌مرحله، و یک منوی تودرتو. و مهم‌تر از شکلشان، یاد می‌گیری مرورگر از کجا می‌فهمد ترتیب یک فهرست مهم است یا نه.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-lists.da4df7d18b.160.webp 160w, \u002F_img\u002F01-image-lists.da4df7d18b.320.webp 320w, \u002F_img\u002F01-image-lists.da4df7d18b.640.webp 640w, \u002F_img\u002F01-image-lists.da4df7d18b.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-lists.da4df7d18b.1280.jpg\" srcset=\"\u002F_img\u002F01-image-lists.da4df7d18b.160.jpg 160w, \u002F_img\u002F01-image-lists.da4df7d18b.320.jpg 320w, \u002F_img\u002F01-image-lists.da4df7d18b.640.jpg 640w, \u002F_img\u002F01-image-lists.da4df7d18b.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>یک فهرست نقطه‌ای و یک فهرست شماره‌دار بسازی\u003C\u002Fli>\n\u003Cli>فهرست تودرتو بسازی (فهرست داخل فهرست)\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode><li>\u003C\u002Fcode> همیشه باید داخل \u003Ccode><ul>\u003C\u002Fcode> یا \u003Ccode><ol>\u003C\u002Fcode> باشد\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\u003Cp>فقط چیزهایی که تا حالا بلدی: از فصل ۲ متن و پاراگراف، و از فصل ۱ اسکلت صفحه. همین کافی است.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","و هر فهرستی که در این فصل ساختیم، همان‌جا بنویس و نتیجه‌اش را ببین","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-05-lists",{"kind":21,"heading":33,"html":34},"۱. دو جور فهرست، و فرقشان معنایی است نه ظاهری","\u003Ch2 id=\"۱-دو-جور-فهرست-و-فرقشان-معنایی-است-نه-ظاهری\">۱. دو جور فهرست، و فرقشان معنایی است نه ظاهری\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AF%D9%88-%D8%AC%D9%88%D8%B1-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D9%88-%D9%81%D8%B1%D9%82%D8%B4%D8%A7%D9%86-%D9%85%D8%B9%D9%86%D8%A7%DB%8C%DB%8C-%D8%A7%D8%B3%D8%AA-%D9%86%D9%87-%D8%B8%D8%A7%D9%87%D8%B1%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>به این دو چیز فکر کن:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>کارهای امروز:\u003C\u002Fstrong> نان بخر، به مامان زنگ بزن، تکلیف ریاضی. — ترتیبش مهم نیست. اول به مامان زنگ بزنی یا اول نان بخری، فرقی نمی‌کند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>دستور پختِ املت:\u003C\u002Fstrong> اول تخم‌مرغ را بشکن، بعد هم بزن، بعد در تابه بریز. — اینجا ترتیب همه‌چیز است. اگر اول در تابه بریزی، املت نداری.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>HTML برای این دو حالت دو ابزار جدا دارد، و انتخاب درست فقط یک تصمیم ظاهری نیست — تو داری به مرورگر و به screen reader می‌گویی «ترتیب این‌ها مهم هست یا نیست».\u003C\u002Fp>\n\u003Cul>\n\u003Cli>فهرستی که ترتیبش \u003Cstrong>مهم نیست\u003C\u002Fstrong>: \u003Ccode><ul>\u003C\u002Fcode> (بعداً می‌بینی این حروف از کجا آمده‌اند).\u003C\u002Fli>\n\u003Cli>فهرستی که ترتیبش \u003Cstrong>مهم است\u003C\u002Fstrong>: \u003Ccode><ol>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>هر آیتم فهرست، چه در این یکی چه در آن یکی، داخل یک \u003Ccode><li>\u003C\u002Fcode> می‌رود.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. اولین فهرست: فهرست بدون ترتیب","\u003Ch2 id=\"۲-اولین-فهرست-فهرست-بدون-ترتیب\">۲. اولین فهرست: فهرست بدون ترتیب\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%A8%D8%AF%D9%88%D9%86-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا فهرست کارهای امروز را بسازیم. در آزمایشگاه این را بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h2>کارهای امروز<\u002Fh2>\n<ul>\n  <li>نان بخر<\u002Fli>\n  <li>به مامان زنگ بزن<\u002Fli>\n  <li>تکلیف ریاضی<\u002Fli>\n<\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode><ul>\u003C\u002Fcode> کل فهرست را دربر می‌گیرد، و هر \u003Ccode><li>\u003C\u002Fcode> یک آیتم است. \u003Ccode><li>\u003C\u002Fcode> مخفف «list item» است — همان «آیتم فهرست».\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید سه خط ببینی که جلوی هرکدام یک نقطه (•) هست. آن نقطه‌ها را تو نگذاشتی — مرورگر خودش برای هر \u003Ccode><li>\u003C\u002Fcode> داخل \u003Ccode><ul>\u003C\u002Fcode> یک نقطه می‌گذارد.\u003C\u002Fp>\n\u003Cp>و باز همان درسِ همیشگی این خودآموز: هیچ‌جا نگفتیم «نقطه بگذار». فقط گفتیم «این‌ها یک فهرست بی‌ترتیب‌اند». نقطه، تصمیم پیش‌فرض مرورگر بود. بعداً در ترم ۲ با CSS می‌توانی آن نقطه را عوض کنی یا برداری — ولی معنای فهرست بودن سرِ جایش می‌ماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> «بی‌ترتیب» یعنی ترتیبش برای معنا مهم نیست، نه اینکه آیتم‌ها به‌هم‌ریخته‌اند. تو باز هم خودت تصمیم می‌گیری چه چیزی اول بیاید؛ فقط به مرورگر می‌گویی «اگر جایشان عوض شود، معنا خراب نمی‌شود.»\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. فهرست باترتیب: وقتی شماره معنا دارد","\u003Ch2 id=\"۳-فهرست-باترتیب-وقتی-شماره-معنا-دارد\">۳. فهرست باترتیب: وقتی شماره معنا دارد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%A8%D8%A7%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8-%D9%88%D9%82%D8%AA%DB%8C-%D8%B4%D9%85%D8%A7%D8%B1%D9%87-%D9%85%D8%B9%D9%86%D8%A7-%D8%AF%D8%A7%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا دستور پخت. فقط \u003Ccode><ul>\u003C\u002Fcode> را به \u003Ccode><ol>\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h2>املت<\u002Fh2>\n<ol>\n  <li>تخم‌مرغ را بشکن<\u002Fli>\n  <li>خوب هم بزن<\u002Fli>\n  <li>در تابه بریز<\u002Fli>\n<\u002Fol>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode><ol>\u003C\u002Fcode> مخفف «ordered list» است — فهرست باترتیب.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا به‌جای نقطه، عدد می‌بینی: ۱، ۲، ۳. باز هم تو عددها را تایپ نکردی! مرورگر خودش شمارید. این خیلی مهم است: اگر بعداً یک مرحله را وسط اضافه کنی، همهٔ شماره‌ها خودشان درست می‌شوند و لازم نیست دستی عوضشان کنی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> وسوسه نشو که خودت عددها را داخل متن \u003Ccode><li>\u003C\u002Fcode> تایپ کنی، مثل \u003Ccode><li>۱. تخم‌مرغ را بشکن<\u002Fli>\u003C\u002Fcode>. اگر این کار را بکنی، دو تا عدد می‌بینی — یکی مالِ تو، یکی مالِ مرورگر. بگذار شمردن کارِ مرورگر باشد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":42,"heading":43,"html":44},"checkpoint","چالش: کدام فهرست برای فهرست بازیکن‌های تیم؟","\u003Ch2 id=\"چالش-کدام-فهرست-برای-فهرست-بازیکن‌های-تیم\">چالش: کدام فهرست برای فهرست بازیکن‌های تیم؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%DA%A9%D8%AF%D8%A7%D9%85-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%A8%D8%A7%D8%B2%DB%8C%DA%A9%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%DB%8C%D9%85\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اسم یازده بازیکن یک تیم فوتبال را می‌خواهی فهرست کنی. \u003Ccode><ul>\u003C\u002Fcode> درست است یا \u003Ccode><ol>\u003C\u002Fcode>؟ اول جواب بده، بعد باز کن.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> بستگی دارد به اینکه چه می‌خواهی بگویی. اگر فقط داری اسم‌ها را ردیف می‌کنی و ترتیبشان معنا ندارد، \u003Ccode><ul>\u003C\u002Fcode>. ولی اگر داری رتبه‌بندی می‌کنی — مثلاً «بهترین بازیکنان فصل به ترتیب» — آن‌وقت ترتیب معنا دارد و \u003Ccode><ol>\u003C\u002Fcode> درست است. سؤال همیشه یکی است: «اگر جای دوتا آیتم عوض شود، معنا عوض می‌شود؟» اگر آره، \u003Ccode><ol>\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":21,"heading":46,"html":47},"۴. فهرست داخل فهرست: تودرتو","\u003Ch2 id=\"۴-فهرست-داخل-فهرست-تودرتو\">۴. فهرست داخل فهرست: تودرتو\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%AF%D8%A7%D8%AE%D9%84-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%AA%D9%88%D8%AF%D8%B1%D8%AA%D9%88\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فهرست‌ها می‌توانند تودرتو باشند. یک \u003Ccode><ul>\u003C\u002Fcode> کامل می‌تواند \u003Cstrong>داخل\u003C\u002Fstrong> یک \u003Ccode><li>\u003C\u002Fcode> برود. بیا یک منوی رستوران بسازیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>منوی رستوران<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <h1>منو<\u002Fh1>\n    <ul>\n      <li>پیش‌غذا\n        <ul>\n          <li>سوپ جو<\u002Fli>\n          <li>سالاد<\u002Fli>\n        <\u002Ful>\n      <\u002Fli>\n      <li>غذای اصلی\n        <ul>\n          <li>چلوکباب<\u002Fli>\n          <li>قرمه‌سبزی<\u002Fli>\n        <\u002Ful>\n      <\u002Fli>\n    <\u002Ful>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>با دقت نگاه کن به جایی که \u003Ccode><ul>\u003C\u002Fcode> دوم قرار گرفته: \u003Cstrong>داخل\u003C\u002Fstrong> \u003Ccode><li>ی\u003C\u002Fcode> «پیش‌غذا»، قبل از بسته شدنش \u003Ccode><\u002Fli>\u003C\u002Fcode>. تورفتگی اینجا واقعاً کمکت می‌کند ببینی چه چیزی داخل چه چیزی است.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید «پیش‌غذا» و «غذای اصلی» را ببینی، و کمی تورفته‌تر و ریزتر، آیتم‌های هرکدام را زیرشان.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> آیتم‌های داخلی به‌جای اینکه زیر «پیش‌غذا» بروند، هم‌ردیف بقیه شدند؟ احتمالاً \u003Ccode><ul>\u003C\u002Fcode> داخلی را بعد از \u003Ccode><\u002Fli>\u003C\u002Fcode> گذاشته‌ای، نه قبلش. \u003Ccode><li>\u003C\u002Fcode> باید اول متن خودش را داشته باشد، بعد فهرست تودرتو، و بعد بسته شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":49,"html":50},"۵. یک قانون ساده ولی مهم","\u003Ch2 id=\"۵-یک-قانون-ساده-ولی-مهم\">۵. یک قانون ساده ولی مهم\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DB%8C%DA%A9-%D9%82%D8%A7%D9%86%D9%88%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-%D9%88%D9%84%DB%8C-%D9%85%D9%87%D9%85\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode><li>\u003C\u002Fcode> تنها جایی زندگی می‌کند که داخل یک \u003Ccode><ul>\u003C\u002Fcode> یا \u003Ccode><ol>\u003C\u002Fcode> باشد. یک \u003Ccode><li>\u003C\u002Fcode> وسط \u003Ccode><body>\u003C\u002Fcode> بدون فهرست دور و برش، بی‌معناست — مثل یک آیتم فهرست که فهرستی ندارد.\u003C\u002Fp>\n\u003Cp>بیا این را عمداً خراب کنیم تا ببینی. در آزمایشگاه یک \u003Ccode><li>\u003C\u002Fcode> تنها بنویس، بیرون از هر فهرستی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><li>من داخل هیچ فهرستی نیستم<\u002Fli>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نتیجه را نگاه کن: متن دیده می‌شود، ولی نقطه یا عددی جلویش نیست — چون مرورگر نمی‌داند این آیتمِ کدام فهرست است. باز هم مرورگر خطا نداد، فقط کارِ نیم‌بند کرد. این دقیقاً همان رفتار موذی HTML است که از فصل ۱ می‌شناسی.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا همان \u003Ccode><li>\u003C\u002Fcode> را داخل یک \u003Ccode><ul>...<\u002Ful>\u003C\u002Fcode> بگذار و ببین نقطه‌اش برگشت.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک فهرست بنویس و از دستیار AI ات بپرس «آیا این فهرست باید \u003Ccode><ul>\u003C\u002Fcode> باشد یا \u003Ccode><ol>\u003C\u002Fcode>؟». جوابش را با معیار خودمان بسنج: «اگر جای آیتم‌ها عوض شود، معنا عوض می‌شود؟» گاهی AI فقط به ظاهر نگاه می‌کند و اشتباه می‌گوید. یادت باشد \u003Cstrong>اول خودت، بعد AI\u003C\u002Fstrong> — اول با معیار خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظر دوم بشنو، نه به‌عنوان جواب نهایی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":52,"html":53},"واژه‌های تازهٔ این فصل","\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>list\u003C\u002Ftd>\n\u003Ctd>لیست\u003C\u002Ftd>\n\u003Ctd>فهرست\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>unordered list\u003C\u002Ftd>\n\u003Ctd>آن‌اوردِرد لیست\u003C\u002Ftd>\n\u003Ctd>فهرستی که ترتیبش مهم نیست (\u003Ccode><ul>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>ordered list\u003C\u002Ftd>\n\u003Ctd>اوردِرد لیست\u003C\u002Ftd>\n\u003Ctd>فهرستی که ترتیبش مهم است (\u003Ccode><ol>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>list item\u003C\u002Ftd>\n\u003Ctd>لیست آیتم\u003C\u002Ftd>\n\u003Ctd>یک آیتم فهرست (\u003Ccode><li>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>nested\u003C\u002Ftd>\n\u003Ctd>نِستِد\u003C\u002Ftd>\n\u003Ctd>تودرتو؛ چیزی داخل چیز دیگر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":42,"heading":55,"html":56},"تمرین‌ها","\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><li>\u003C\u002Fcode> را داخل چه چیزی باید گذاشت، و چرا؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک صفحه دربارهٔ یک روز عادیِ خودت بساز. باید داشته باشد: یک فهرست بی‌ترتیب از چیزهایی که دوست داری، و یک فهرست باترتیب از کارهایی که از صبح تا شب به ترتیب انجام می‌دهی. برای هرکدام درست تصمیم بگیر که \u003Ccode><ul>\u003C\u002Fcode> است یا \u003Ccode><ol>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک فهرست تودرتوی سه‌سطحی بساز — مثلاً «کشور ← شهر ← محله». یعنی یک \u003Ccode><ul>\u003C\u002Fcode> که هر آیتمش خودش یک \u003Ccode><ul>\u003C\u002Fcode> دارد، و آن هم باز یک \u003Ccode><ul>\u003C\u002Fcode> دیگر. ببین تا چند سطح می‌توانی تودرتو کنی و همچنان تورفتگی‌ات مرتب بماند.\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> بدهی: کجایش سرصفحه است، کجایش منوی اصلی، کجایش محتوای اصلی — با tag هایی که دقیقاً همین را می‌گویند.\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,74,78,82,83,84,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":72,"source":8,"term":9,"title_fa":73},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":9,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":9,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"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},{"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":75,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":105,"source":8,"term":75,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":12,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":6,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":16,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":86,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":90,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":94,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":98,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":75,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":136,"source":8,"term":79,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":139,"source":8,"term":79,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":12,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":6,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":16,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":86,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":90,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":94,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":98,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":169,"source":8,"term":12,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":172,"source":8,"term":12,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":175,"source":8,"term":12,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":12,"slug":178,"source":8,"term":12,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":6,"slug":181,"source":8,"term":12,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":16,"slug":184,"source":8,"term":12,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":86,"slug":187,"source":8,"term":12,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":90,"slug":190,"source":8,"term":12,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":193,"source":8,"term":6,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":196,"source":8,"term":6,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":199,"source":8,"term":6,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":12,"slug":202,"source":8,"term":6,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":6,"slug":205,"source":8,"term":6,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":16,"slug":208,"source":8,"term":6,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":86,"slug":211,"source":8,"term":6,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":90,"slug":214,"source":8,"term":6,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":94,"slug":217,"source":8,"term":6,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":98,"slug":220,"source":8,"term":6,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":223,"source":8,"term":16,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":226,"source":8,"term":16,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":229,"source":8,"term":16,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":12,"slug":232,"source":8,"term":16,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":6,"slug":235,"source":8,"term":16,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":16,"slug":238,"source":8,"term":16,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":86,"slug":241,"source":8,"term":16,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":90,"slug":244,"source":8,"term":16,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":94,"slug":247,"source":8,"term":16,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":98,"slug":250,"source":8,"term":16,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":253,"source":8,"term":16,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104700]