[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"lesson:t6-s09-debugging":3,"course:taropood":54},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,9,"t6-s09-debugging","book",6,"فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},8,"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},10,"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",[20,24,27,32,35,38,41,44,47,51],{"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> را درست می‌کنی. صفحه‌ای که یک نوارِ اسکرولِ افقیِ مرموز پیدا کرده: می‌توانی کمی به پهلو بکشی‌اش، انگار چیزی از لبه بیرون زده، ولی به چشم پیدا نیست کدام. تازه‌کار به کد خیره می‌شود و حدس می‌زند. حرفه‌ای‌ها حدس نمی‌زنند؛ \u003Cstrong>مقصر را پیدا می‌کنند\u003C\u002Fstrong> — با روش. در این فصل سه روشِ واقعی یاد می‌گیری که هر سازندهٔ وب هر روز به‌کار می‌برد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.160.webp 160w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.320.webp 320w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.640.webp 640w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.1280.jpg\" srcset=\"\u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.160.jpg 160w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.320.jpg 320w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.640.jpg 640w, \u002F_img\u002F01-image-scrollbar-hunt.d9d07867e2.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>یک مسئله را با \u003Cstrong>نصف‌کردن\u003C\u002Fstrong> کوچک کنی تا مقصر گیر بیفتد\u003C\u002Fli>\n\u003Cli>در زبانهٔ Computed ببینی مرورگر \u003Cstrong>واقعاً\u003C\u002Fstrong> چه مقداری روی یک عنصر گذاشته\u003C\u002Fli>\n\u003Cli>عنصری را که layout را می‌شکند (یک اسکرولِ افقی) پیدا و رفعش کنی\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> DevTools — Inspect، پنلِ Styles، و به‌خصوص زبانهٔ Computed. این فصل همان ابزار را برای شکارِ باگ به‌کار می‌گیرد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۴:\u003C\u002Fstrong> box model و اینکه \u003Ccode>width\u003C\u002Fcode> با \u003Ccode>box-sizing: border-box\u003C\u002Fcode> چه می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳ فصل ۹:\u003C\u002Fstrong> \u003Ccode>overflow\u003C\u002Fcode> — چیزی که از جعبه‌اش بیرون می‌زند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک صفحهٔ ساده می‌بینی که یک نوارِ اسکرولِ افقی دارد و نباید داشته باشد. در طولِ فصل با همین صفحه کار می‌کنیم تا مقصر را پیدا و رفعش کنیم","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-09-debugging",{"kind":21,"heading":33,"html":34},"۱. اشکال‌زدایی یعنی مقصریابی، نه حدس","\u003Ch2 id=\"۱-اشکال‌زدایی-یعنی-مقصریابی-نه-حدس\">۱. اشکال‌زدایی یعنی مقصریابی، نه حدس\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D8%B4%DA%A9%D8%A7%D9%84%E2%80%8C%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C-%DB%8C%D8%B9%D9%86%DB%8C-%D9%85%D9%82%D8%B5%D8%B1%DB%8C%D8%A7%D8%A8%DB%8C-%D9%86%D9%87-%D8%AD%D8%AF%D8%B3\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>وقتی چیزی خراب است، دو جمله در ذهنت هست: «فکر می‌کنم باید فلان‌طور باشد» و «الان این‌طور است». اشکال‌زدایی یعنی فاصلهٔ این دو را پیدا کنی — نه اینکه ده تغییرِ تصادفی بدهی و امید داشته باشی یکی جواب بدهد. حرفه‌ای همیشه از یک سؤال شروع می‌کند: «مرورگر \u003Cstrong>واقعاً\u003C\u002Fstrong> چه می‌بیند، و کجا با انتظارِ من فرق دارد؟»\u003C\u002Fp>\n\u003Cp>سه روشِ پایه‌اند: \u003Cstrong>نصف کن\u003C\u002Fstrong> تا بفهمی مقصر کجاست، \u003Cstrong>Computed را بخوان\u003C\u002Fstrong> تا بفهمی چه مقداری واقعاً اعمال شده، و \u003Cstrong>عنصرِ خراب‌کار را پیدا کن\u003C\u002Fstrong>. همین سه تا بیشترِ باگ‌های CSS را می‌گیرند. بیا روی همان اسکرولِ افقیِ آزمایشگاه به‌کارشان ببریم.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. روشِ اول: نصف‌کردن مسئله","\u003Ch2 id=\"۲-روشِ-اول-نصف‌کردن-مسئله\">۲. روشِ اول: نصف‌کردن مسئله\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%B1%D9%88%D8%B4%D9%90-%D8%A7%D9%88%D9%84-%D9%86%D8%B5%D9%81%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D8%B3%D8%A6%D9%84%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بزرگ‌ترین دشمنِ اشکال‌زدایی، وسعتِ مسئله است: وقتی صد خط CSS داری، مقصر می‌تواند هرکدام باشد. روشِ حرفه‌ای این است که مسئله را \u003Cstrong>نصف\u003C\u002Fstrong> کنی: نصفِ قاعده‌ها را موقتی خاموش کن و ببین باگ ماند یا رفت. اگر رفت، مقصر در نیمهٔ خاموش است؛ اگر ماند، در نیمهٔ روشن. هر بار نصف‌کردن، دامنهٔ جست‌وجو را نصف می‌کند — چند قدم و مقصر گیر می‌افتد.\u003C\u002Fp>\n\u003Cp>خاموش‌کردنِ موقتیِ CSS با \u003Cstrong>کامنت\u003C\u002Fstrong> است: هرچه بینِ \u003Ccode>\u002F*\u003C\u002Fcode> و \u003Ccode>*\u002F\u003C\u002Fcode> بگذاری، مرورگر نادیده می‌گیرد، انگار اصلاً نوشته نشده.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* in yek comment ast — morurgar khat-e daroonash ra ejra nemikonad *\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>بیا روی همین صفحه امتحانش کنیم. کلِ قاعدهٔ \u003Ccode>.callout\u003C\u002Fcode> را داخلِ \u003Ccode>\u002F*\u003C\u002Fcode> و \u003Ccode>*\u002F\u003C\u002Fcode> بگذار تا خاموش شود، بعد صفحه را نگاه کن.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> تا \u003Ccode>.callout\u003C\u002Fcode> را کامنت کردی، نوارِ اسکرولِ افقی \u003Cstrong>ناپدید شد\u003C\u002Fstrong>. پس مقصر پیدا شد: عنصری که class اش \u003Ccode>.callout\u003C\u002Fcode> است دارد صفحه را پهن می‌کند. حالا کامنت را بردار تا صفحه به حالتِ خرابش برگردد و برویم ببینیم \u003Cstrong>کدام property\u003C\u002Fstrong> مقصر است.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. روشِ دوم: Computed، مقدارِ واقعی","\u003Ch2 id=\"۳-روشِ-دوم-computed-مقدارِ-واقعی\">۳. روشِ دوم: Computed، مقدارِ واقعی\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%B1%D9%88%D8%B4%D9%90-%D8%AF%D9%88%D9%85-computed-%D9%85%D9%82%D8%AF%D8%A7%D8%B1%D9%90-%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>می‌دانیم مقصر \u003Ccode>.callout\u003C\u002Fcode> است، ولی این جعبه چند خط CSS دارد. کدام‌شان صفحه را پهن می‌کند؟ اینجا زبانهٔ \u003Cstrong>Computed\u003C\u002Fstrong> جواب می‌دهد — همان که در ترم ۲ دیدی: مقدارِ \u003Cstrong>نهایی و واقعیِ\u003C\u002Fstrong> هر property را نشان می‌دهد، بعد از اینکه کلِ cascade حساب شد.\u003C\u002Fp>\n\u003Cp>DevTools را باز کن، با Inspect روی جعبهٔ \u003Ccode>.callout\u003C\u002Fcode> کلیک کن، و در زبانهٔ Computed دنبالِ \u003Ccode>width\u003C\u002Fcode> بگرد. عددی که می‌بینی این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.callout {\n  width: 680px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>۶۸۰\u003C\u002Fcode> پیکسل. صفحهٔ این آزمایشگاه بسیار باریک‌تر از این است، ولی این جعبه اصرار دارد \u003Ccode>۶۸۰\u003C\u002Fcode> پیکسل پهن باشد — پس از لبهٔ صفحه می‌زند بیرون و مرورگر مجبور می‌شود یک نوارِ اسکرول بدهد تا بشود بقیه‌اش را دید.\u003C\u002Fp>\n\u003Cp>یک راهِ سریع‌ترِ دیدنش هم هست: در پنلِ Elements موس را روی عنصرها ببر؛ مرورگر جعبهٔ هرکدام را روی صفحه پررنگ می‌کند. روی \u003Ccode>.callout\u003C\u002Fcode> که بروی، پررنگی‌اش از لبهٔ صفحه بیرون می‌زند — با چشمِ خودت همان عنصرِ خراب‌کار را می‌بینی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-devtools-overflow.f6988f28ff.160.webp 160w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.320.webp 320w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.640.webp 640w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-devtools-overflow.f6988f28ff.1280.jpg\" srcset=\"\u002F_img\u002F02-image-devtools-overflow.f6988f28ff.160.jpg 160w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.320.jpg 320w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.640.jpg 640w, \u002F_img\u002F02-image-devtools-overflow.f6988f28ff.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"پنجرهٔ DevTools کنارِ صفحه: در درختِ عناصر، عنصرِ کناری انتخاب شده و جعبهٔ پررنگش روی صفحه از لبهٔ راست بیرون زده؛ در زبانهٔ کناری یک مقدارِ عددیِ بزرگ برای پهنا مشخص است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. رفعش کن، و صفحهٔ کامل","\u003Ch2 id=\"۴-رفعش-کن-و-صفحهٔ-کامل\">۴. رفعش کن، و صفحهٔ کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B1%D9%81%D8%B9%D8%B4-%DA%A9%D9%86-%D9%88-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>مقصر یک \u003Ccode>width\u003C\u002Fcode> ثابت است. \u003Ccode>width: 680px\u003C\u002Fcode> یعنی «همیشه دقیقاً ۶۸۰ پیکسل»، حتی وقتی صفحه باریک‌تر از آن است — برای همین جعبه کوتاه نمی‌آید و صفحه را پهن می‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> یک \u003Ccode>width\u003C\u002Fcode> ثابت را با \u003Ccode>max-width\u003C\u002Fcode> عوض کن. \u003Ccode>max-width: 680px\u003C\u002Fcode> یعنی «\u003Cstrong>حداکثر\u003C\u002Fstrong> ۶۸۰ پیکسل، ولی اگر جا کم بود کوچک‌تر شو». روی صفحهٔ پهن هنوز تا ۶۸۰ می‌رسد، ولی روی صفحهٔ باریک خودش را جمع می‌کند و جا می‌شود — پس دیگر از لبه بیرون نمی‌زند و نوارِ افقی می‌رود. این تلهٔ بسیار رایج است: هر جا اسکرولِ افقیِ ناخواسته دیدی، اول دنبالِ یک \u003Ccode>width\u003C\u002Fcode> ثابت یا یک تصویرِ بدونِ \u003Ccode>max-width\u003C\u002Fcode> بگرد که از صفحه بزرگ‌تر شده.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.callout {\n  max-width: 680px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این کلِ فرق بود: یک حرف. حالا هر دو فایلِ کاملِ صفحهٔ درست‌شده. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <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      <h1>یادداشت‌های وب<\u002Fh1>\n    <\u002Fheader>\n\n    <main class="page">\n      <article class="post">\n        <h2>روزی که اسکرول‌بارِ افقی پیدا شد<\u002Fh2>\n        <p>امروز صفحه‌ام یک نوارِ اسکرولِ افقی گرفت و نمی‌دانستم از کجا آمده. یاد گرفتم چطور مقصر را پیدا کنم.<\u002Fp>\n\n        <aside class="callout">\n          <h3>نکتهٔ روز<\u002Fh3>\n          <p>هر وقت صفحه بی‌دلیل پهن شد، دنبالِ عنصری بگرد که از پهنای صفحه بیرون زده — تقریباً همیشه یکی است.<\u002Fp>\n        <\u002Faside>\n\n        <p>حالا این صفحه در هر پهنایی جا می‌شود و دیگر خبری از آن نوارِ افقی نیست.<\u002Fp>\n      <\u002Farticle>\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>، با \u003Ccode>.callout\u003C\u002Fcode> درست‌شده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #6b6150;\n  --brand: #2a6b93;\n  --accent: #bc3e1c;\n  --line: #d8ccae;\n  --space: 20px;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  color: var(--ink);\n  background-color: var(--bg);\n  line-height: 1.9;\n}\n\n.site-header {\n  padding: 16px var(--space);\n  background-color: var(--card);\n  border-block-end: 1px solid var(--line);\n}\n\n.site-header h1 {\n  margin: 0;\n  font-size: 1.5rem;\n  color: var(--brand);\n}\n\n.page {\n  max-width: 640px;\n  margin-inline: auto;\n  padding: var(--space);\n}\n\n.post h2 {\n  margin-block: 0 12px;\n}\n\n.callout {\n  max-width: 680px;\n  margin-block: var(--space);\n  padding: var(--space);\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-inline-start: 4px solid var(--accent);\n  border-radius: 12px;\n}\n\n.callout h3 {\n  margin-block: 0 8px;\n  color: var(--accent);\n}\n\n.callout p {\n  margin: 0;\n  color: var(--muted);\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> صفحه را به پهلو بکش — دیگر تکان نمی‌خورد. نوارِ اسکرولِ افقی رفته و جعبهٔ کناری حالا داخلِ صفحه جا شده. با سه قدم رسیدی اینجا: نصف‌کردن گفت مقصر \u003Ccode>.callout\u003C\u002Fcode> است، Computed گفت مقصر \u003Ccode>width\u003C\u002Fcode> است، و یک \u003Ccode>max-width\u003C\u002Fcode> رفعش کرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> CSS خراب را به دستیار AI ات بده و بپرس «چرا این صفحه یک اسکرولِ افقی دارد؟». گاهی درست جواب می‌دهد، ولی خیلی وقت‌ها با اعتمادبه‌نفس چیزِ دیگری را مقصر می‌کند (\u003Ccode>margin\u003C\u002Fcode> یا \u003Ccode>overflow\u003C\u002Fcode>) که اصلاً ربطی ندارد. جوابش را دربست نپذیر — همان‌جا در DevTools موس را روی عناصر ببر و ببین \u003Cstrong>کدام جعبه\u003C\u002Fstrong> واقعاً از لبه بیرون می‌زند. مرورگر مدرک دارد، AI فقط حدس. این بهترین شکلِ «AI هم اشتباه می‌کند» است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"واژه‌های تازهٔ این فصل","\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>debugging\u003C\u002Ftd>\n\u003Ctd>دیباگینگ\u003C\u002Ftd>\n\u003Ctd>مقصریابیِ روشمندِ یک خرابی، به‌جای حدس‌زدن\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>comment\u003C\u002Ftd>\n\u003Ctd>کامِنت\u003C\u002Ftd>\n\u003Ctd>متنی بینِ \u003Ccode>\u002F*\u003C\u002Fcode> و \u003Ccode>*\u002F\u003C\u002Fcode> که مرورگر اجرا نمی‌کند؛ برای خاموش‌کردنِ موقتیِ کد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Computed\u003C\u002Ftd>\n\u003Ctd>کامپیوتِد\u003C\u002Ftd>\n\u003Ctd>زبانهٔ DevTools که مقدارِ نهایی و واقعیِ هر property را نشان می‌دهد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>overflow\u003C\u002Ftd>\n\u003Ctd>اورفلو\u003C\u002Ftd>\n\u003Ctd>وقتی محتوا از جعبه‌اش بیرون می‌زند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":48,"heading":49,"html":50},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: اگر یک صفحه یک اسکرولِ افقیِ ناخواسته داشت، اولین دو کاری که می‌کنی چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به همین صفحه یک باگِ عمدیِ تازه بده: به \u003Ccode>.page\u003C\u002Fcode> هم \u003Ccode>width: 900px\u003C\u002Fcode> اضافه کن و ببین دوباره اسکرولِ افقی برمی‌گردد. حالا با روشِ نصف‌کردن و بعد Computed، خودت مقصر را پیدا کن و با \u003Ccode>max-width\u003C\u002Fcode> رفعش کن — این‌بار بدونِ اینکه من بگویم کجاست.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یکی از سایت‌های موردعلاقه‌ات را روی گوشی یا در پنجرهٔ باریک باز کن و ببین آیا اسکرولِ افقیِ ناخواسته دارد. اگر داشت، با موس‌بردن روی عناصر در Elements، آن جعبه‌ای را پیدا کن که از صفحه بیرون زده — و حدس بزن یک \u003Ccode>width\u003C\u002Fcode> ثابت است یا یک تصویرِ بدونِ \u003Ccode>max-width\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"در فصل بعد","\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>الان ابزارِ مقصریابی را داری: نصف‌کردن، Computed، و پیداکردنِ عنصرِ خراب‌کار. این آخرین مهارتِ تازه پیش از پروژهٔ بزرگ بود. دو فصلِ بعد، پروژهٔ نهاییِ دوره است: در فصلِ بعد یک سایتِ \u003Cstrong>چندصفحه‌ای\u003C\u002Fstrong> واقعی می‌سازی که همهٔ ترم‌ها را کنارِ هم می‌گذارد — semantic، layout، responsive، dark mode، component و token — و همین مهارتِ اشکال‌زدایی هم کنارت می‌ماند تا هر جا گیر کردی، مقصر را پیدا کنی نه اینکه حدس بزنی.\u003C\u002Fp>\n",{"course":55,"entitled":63,"lessons":64,"payments_enabled":63,"terms":249,"live":5},{"active_window":56,"effective_price_toman":57,"free":5,"lesson_count":58,"price_toman":59,"slug":60,"summary_fa":61,"title_fa":62},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[65,69,73,77,81,85,88,92,95,98,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,244,245,246],{"free_preview":5,"order":66,"slug":67,"source":8,"term":66,"title_fa":68},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":70,"slug":71,"source":8,"term":66,"title_fa":72},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":74,"slug":75,"source":8,"term":66,"title_fa":76},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":78,"slug":79,"source":8,"term":66,"title_fa":80},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":82,"slug":83,"source":8,"term":66,"title_fa":84},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":86,"source":8,"term":66,"title_fa":87},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":89,"slug":90,"source":8,"term":66,"title_fa":91},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":93,"source":8,"term":66,"title_fa":94},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":6,"slug":96,"source":8,"term":66,"title_fa":97},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":16,"slug":99,"source":8,"term":66,"title_fa":100},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":66,"slug":102,"source":8,"term":70,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":70,"slug":105,"source":8,"term":70,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":74,"slug":108,"source":8,"term":70,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":78,"slug":111,"source":8,"term":70,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":82,"slug":114,"source":8,"term":70,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":117,"source":8,"term":70,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":89,"slug":120,"source":8,"term":70,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":12,"slug":123,"source":8,"term":70,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":6,"slug":126,"source":8,"term":70,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":16,"slug":129,"source":8,"term":70,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":70,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":66,"slug":136,"source":8,"term":74,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":70,"slug":139,"source":8,"term":74,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":74,"slug":142,"source":8,"term":74,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":78,"slug":145,"source":8,"term":74,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":82,"slug":148,"source":8,"term":74,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":151,"source":8,"term":74,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":89,"slug":154,"source":8,"term":74,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":157,"source":8,"term":74,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":6,"slug":160,"source":8,"term":74,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":16,"slug":163,"source":8,"term":74,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":74,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":66,"slug":169,"source":8,"term":78,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":70,"slug":172,"source":8,"term":78,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":74,"slug":175,"source":8,"term":78,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":78,"slug":178,"source":8,"term":78,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":82,"slug":181,"source":8,"term":78,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":184,"source":8,"term":78,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":89,"slug":187,"source":8,"term":78,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":190,"source":8,"term":78,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":66,"slug":193,"source":8,"term":82,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":70,"slug":196,"source":8,"term":82,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":74,"slug":199,"source":8,"term":82,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":78,"slug":202,"source":8,"term":82,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":82,"slug":205,"source":8,"term":82,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":208,"source":8,"term":82,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":89,"slug":211,"source":8,"term":82,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":214,"source":8,"term":82,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":6,"slug":217,"source":8,"term":82,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":16,"slug":220,"source":8,"term":82,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":66,"slug":223,"source":8,"term":9,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":70,"slug":226,"source":8,"term":9,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":74,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":78,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":82,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":9,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":89,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"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":132,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105779]