ورود / ثبت‌نامورود
خودآموز تاروپود: پنجره‌ی مرورگر به شکل پارچه‌ی بافته‌شده که تار آن ساختار و پود آن ظاهر صفحه است

خودآموز تعاملی

تاروپود — خودآموز HTML و CSS

۷ ترم۷۱ فصل ۷۱ فصل رایگان

هنوز کسی امتیاز نداده

از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.

  • HTML + CSS
  • کدنویسی متنی
  • آزمایشگاه زنده در مرورگر
  • همراه با هوش مصنوعی
جلسه اول را رایگان بخوان

فهرست کتاب

۷ ترم، ۷۱ فصل — به ترتیب.

۱HTML: ساختار و معناترم ۱ · ۱۱ فصلHTML: ساختار و معنا — اسکلت صفحه به‌شکل تارهای عمودی دستگاه بافندگی: نوار عنوان، نوار پیمایش، خطوط پاراگراف و جای تصویر
  1. صفحهٔ ساده‌ای که در این فصل می‌سازیم، باز شده در مرورگرفصل ۰۱ — اولین صفحهٔ وب تورایگان
  2. صفحهٔ نهنگ آبی با یک تیتر اصلی، دو عنوانِ بخش و چند پاراگراف، باز شده در مرورگرفصل ۰۲ — متن: عنوان و پاراگرافرایگان
  3. صفحه‌ای ساده در مرورگر که چند کلمهٔ آن لینک است و یکی‌شان به بخش دیگری از صفحه می‌پردفصل ۰۳ — پیوند: چیزی که وب را وب کردرایگان
  4. صفحهٔ نهایی این فصل: یک تیتر، یک پاراگراف، و یک عکس با توضیح زیرش، باز شده در مرورگرفصل ۰۴ — تصویررایگان
  5. سه نوع فهرست کنار هم: فهرست نقطه‌ای، فهرست شماره‌دار و فهرست تودرتوفصل ۰۵ — فهرسترایگان
  6. طرح یک صفحهٔ وب با ناحیه‌های رنگی جدا: سرصفحه بالا، منو، محتوای اصلی شامل یک مطلب و یک بخش، یک ستون کناری، و پاصفحهفصل ۰۶ — اسکلت معنادار صفحهرایگان
  7. یک جدول ردهٔ لیگ با ستون‌های برد، باخت و امتیاز، همان‌طور که مرورگر نشانش می‌دهدفصل ۰۷ — جدول، فقط برای دادهرایگان
  8. یک فرم عضویت ساده باز شده در مرورگر: چند کادر متن، یک گروه گزینه، یک فهرست بازشو و یک دکمهفصل ۰۸ — فرم: گرفتن ورودیرایگان
  9. صفحه‌ای که فقط با keyboard پیمایش می‌شود: یک حلقهٔ focus دور یک لینک و مسیری شماره‌دار که ترتیب حرکت با کلید Tab را از منو تا فرم نشان می‌دهدفصل ۰۹ — دسترس‌پذیری از همان HTMLرایگان
  10. صفحهٔ موزهٔ علوم در مرورگر: یک پخش‌کنندهٔ ویدیو با تصویر گل و دکمهٔ پخش، و زیر آن یک نوار پخش صدافصل ۱۰ — ویدیو و صدارایگان
  11. صفحهٔ معرفی نهایی در مرورگر: سرصفحه با نام و منو، بخش دربارهٔ من با عکس، فهرست مهارت‌ها، یک جدول کوچک، یک فرم تماس و پاصفحهفصل ۱۱ — پروژه: صفحهٔ معرفی خودترایگان
۲CSS: کنترل ظاهرترم ۲ · ۱۱ فصلCSS: کنترل ظاهر — همان پارچهٔ صفحه که پودهای رنگی نیمی از آن را بافته‌اند و نیمهٔ دیگر هنوز خام است، با درجه‌ای کنار دستگاه
  1. یک صفحه در دو حالت کنار هم: سمت راست بی‌رنگ و پیش‌فرض، سمت چپ همان صفحه با پس‌زمینه و متنِ رنگیفصل ۰۱ — اولین CSSرایگان
  2. سه راهِ نشانه‌گرفتن عنصرها کنار هم: همهٔ عنصرهای یک‌نوع باهم، چند عنصرِ پراکنده که یک برچسبِ مشترک دارند، و یک عنصرِ یکتافصل ۰۲ — selector هارایگان
  3. یک ترازو که سه ستون وزنه دارد — ستونِ id سنگین‌تر از ستونِ class و آن هم سنگین‌تر از ستونِ نوع — و ترازو به سمتِ id خم شدهفصل ۰۳ — cascade، specificity و inheritanceرایگان
  4. نمای بازشدهٔ یک جعبه در CSS: از درون به بیرون، محتوا، بعد لایهٔ padding، بعد border، بعد margin — چهار لایهٔ تودرتو با رنگ‌های جدافصل ۰۴ — جعبه‌ها: box modelرایگان
  5. مقایسهٔ دو راهِ اندازه‌گیری فونت: در سمتی، جعبه‌های تودرتو که هرکدام از قبلی بزرگ‌تر می‌شوند و مثل گلوله برف رشد می‌کنند؛ در سمتِ دیگر، همان جعبه‌ها که همه از یک خط‌کشِ ثابت اندازه گرفته‌اند و یک‌اندازه‌اندفصل ۰۵ — واحد و رنگرایگان
  6. مقایسهٔ دو ستونِ متن با نوارهای placeholder: در یکی خط‌ها به‌هم چسبیده و فشرده‌اند، در دیگری بین خط‌ها فاصلهٔ راحت هست و متن نفس می‌کشدفصل ۰۶ — تایپوگرافی و فونت فارسیرایگان
  7. مقایسهٔ دو نوع چیدمان: در سمتی چند جعبهٔ پهن که کاملاً زیر هم چیده شده‌اند (block)، در سمتِ دیگر چند جعبهٔ کوچک که در یک خط کنار هم نشسته‌اند (inline)فصل ۰۷ — جریان عادی صفحهرایگان
  8. یک کارت مطلب تمیز با یک نوار تصویری بالای آن، گوشه‌های گرد، یک حاشیهٔ نازک و یک سایهٔ ملایم که کارت را کمی از پس‌زمینه جدا می‌کندفصل ۰۸ — پس‌زمینه، حاشیه، سایهرایگان
  9. طرح‌واره‌ای که یک نمونه‌رنگ اصلی را نشان می‌دهد که از آن چند فلش به چند جای مختلف صفحه — یک دکمه، یک برچسب، یک حاشیه — کشیده شده؛ همه از همان یک منبعِ رنگ تغذیه می‌کنندفصل ۰۹ — متغیرهای خودت در CSSرایگان
  10. طرح‌وارهٔ پنجرهٔ DevTools کنارِ یک صفحه: سمتی درختِ عنصرهای صفحه، سمتِ دیگر فهرست قاعده‌های CSS که یکی از آن‌ها یک خط روی خودش دارد (قاعدهٔ بازنده)، و پایین یک نمودارِ جعبه‌ایِ تودرتوفصل ۱۰ — DevTools: ابزار واقعیرایگان
  11. یک صفحهٔ وبلاگِ ساده ولی خوش‌ظاهر: سرصفحه با عنوانِ رنگی و چند لینکِ قرصی‌شکل، دو کارتِ مطلب با گوشهٔ گرد و سایه، یک جعبهٔ لینک‌های مفید، و یک پاصفحه — همه در یک ستونِ وسط‌چینفصل ۱۱ — صفحهٔ ترم ۱ را زنده کنرایگان
۳Layout: چیدمانترم ۳ · ۱۱ فصلLayout: چیدمان — کشوی حروف سربی که بلوک‌ها در قابی به‌شکل شبکهٔ صفحه چیده شده‌اند و یکی کمی بیرون کشیده شده
  1. طرح‌وارهٔ جریان عادی: یک ستون از جعبه‌های block که از بالا به پایین روی هم می‌چینند، و کنارش یک ردیف از عنصرهای inline که در امتداد یک خط می‌آیندفصل ۰۱ — چیدمان: از جریان عادی شروع کنرایگان
  2. طرح‌وارهٔ دو محور در flexbox: سه کارت در یک ردیف، یک پیکانِ افقی به‌عنوان main axis که در امتدادِ کارت‌ها می‌رود و یک پیکانِ عمودی به‌عنوان cross axis که عمود بر آن استفصل ۰۲ — flexbox: یک محوررایگان
  3. طرح‌وارهٔ تفاوتِ justify-content و align-items: یک پیکانِ افقی که نشان می‌دهد justify-content روی main axis کار می‌کند و یک پیکانِ عمودی که نشان می‌دهد align-items روی cross axis کار می‌کندفصل ۰۳ — چیدن و وسط‌چین کردنرایگان
  4. طرح‌وارهٔ flex-grow: یک ردیف که فضای خالیِ آخرش به‌صورتِ سهم‌های برابر بینِ کارت‌ها پخش می‌شود و کارت‌ها کش می‌آیند تا کلِ عرض پُر شودفصل ۰۴ — انعطاف واقعیرایگان
  5. طرح یک grid با سه ستون برابر و دو سطر؛ فضای خالی صفحه به‌صورت سهم‌های مساوی بین ستون‌ها تقسیم شده، با خط‌های راهنما بین خانه‌هافصل ۰۵ — grid: دو محوررایگان
  6. طرح یک چیدمانِ سه‌ستونه با خط‌های شماره‌دار؛ یک بلوکِ بزرگ که دو ستون و دو سطر را می‌پوشاند و دو بلوکِ کوچک کنارش، با خط‌های راهنمای شماره‌دار از راست به چپفصل ۰۶ — جای‌گذاری در gridرایگان
  7. طرح یک صفحهٔ کامل با ناحیه‌های نام‌دار: نوارِ سرصفحه و منو در بالا، یک ستونِ کناریِ باریک در سمت راست، محتوای اصلیِ پهن در چپ، و پاصفحه در پایینفصل ۰۷ — layout کامل صفحه با gridرایگان
  8. مقایسهٔ پنج حالتِ position روی یک عنصرِ یکسان: عادی سرِ جایش، کمی جابه‌جا شده، چسبیده به گوشهٔ یک جعبه، چسبیده به گوشهٔ کلِ صفحه، و چسبیده به بالای صفحه هنگام اسکرولفصل ۰۸ — positionرایگان
  9. چند لایهٔ رنگی که روی هم افتاده‌اند و در عمق چیده شده‌اند، لایهٔ جلویی کاملاً روی بقیه نشسته و ترتیبِ جلو-به-عقب پیداستفصل ۰۹ — z-index و stacking contextرایگان
  10. مقایسهٔ یک کارت در دو حالت: در حالتِ راست‌به‌چپ آیکون و تورفتگی سمتِ راست‌اند، و در حالتِ چپ‌به‌راست همان‌ها خودبه‌خود به سمتِ چپ رفته‌اند، بدونِ تغییرِ کدفصل ۱۰ — logical propertiesرایگان
  11. طرحِ سیمیِ یک صفحهٔ کامل: سرصفحه با لوگو یک سمت و منو سمتِ دیگر، زیرش یک بدنهٔ دوستونی با ستونِ پهنِ محتوا و ستونِ باریکِ کناری، و یک پاصفحه در پایینفصل ۱۱ — پروژه: layout یک سایت کاملرایگان
۴Responsiveترم ۴ · ۸ فصلResponsive — یک صفحه در سه عرض مختلف کنار هم، که بلوک‌هایش به‌جای کوچک‌شدن جابه‌جا شده‌اند، با خط‌کش تاشو زیرشان
  1. مقایسهٔ یک صفحه روی سه اندازهٔ نمایش: موبایلِ باریک با یک ستون، تبلتِ متوسط، و صفحهٔ پهن — محتوا در هر سه خوانا و بی‌سرریز استفصل ۰۱ — responsive یعنی چهرایگان
  2. یک گالریِ کارت که با عرضِ صفحه چیدمانش عوض می‌شود: روی نمایشِ باریک یک ستونِ عمودی، و روی نمایشِ پهن سه ستونِ کنارِ هم، با یک خطِ آستانه که مرزِ تغییر را نشان می‌دهدفصل ۰۲ — media queryرایگان
  3. یک عکسِ واحد که در سه جعبهٔ با عرض‌های مختلف قرار گرفته و در هر کدام بدونِ سرریز و بدونِ کش‌آمدن جا شده استفصل ۰۳ — تصویر responsiveرایگان
  4. یک تیتر که با عرضِ صفحه بزرگ و کوچک می‌شود، ولی بینِ یک اندازهٔ کمینه و یک اندازهٔ بیشینه محدود مانده، مثلِ یک لغزنده که به دو گیرهٔ کف و سقف بسته شده استفصل ۰۴ — تایپوگرافی سیال و ریاضی در CSSرایگان
  5. دو کارتِ یک‌شکل روی صفحه: کارتِ سمتِ راست در یک ناحیهٔ پهن، افقی و دوقسمتی چیده شده و یک فلش به لبهٔ همان ناحیه اشاره دارد؛ کارتِ سمتِ چپ در یک ستونِ باریک، عمودی مانده و فلشش به لبهٔ ستونِ باریک اشاره داردفصل ۰۵ — container queryرایگان
  6. مقایسهٔ دو حالت از یک منو: در صفحهٔ پهن یک ردیفِ افقی از چند لینک، و در صفحهٔ باریک همان لینک‌ها جمع‌شده پشتِ یک دکمهٔ منو با یک مثلثِ کوچکِ بازشوفصل ۰۶ — ناوبری responsiveرایگان
  7. یک کارتِ یک‌شکل که دو بار نشان داده شده: یک‌بار با پس‌زمینهٔ کاغذیِ روشن و متنِ تیره، یک‌بار با پس‌زمینهٔ تیره و متنِ روشن؛ بینشان یک دسته نمونه‌رنگ که مقدارهایش بین دو حالت عوض می‌شودفصل ۰۷ — dark modeرایگان
  8. طرحِ یک صفحه در سه عرض: موبایل با منوی جمع‌شده و کارت‌های تک‌ستونه، تبلت، و دسکتاپ با منوی افقی و کارت‌های سه‌ستونه؛ گوشه‌ای یک نشانِ روشن/تیرهفصل ۰۸ — پروژه: سایت کاملاً responsiveرایگان
۵تعامل و جزئیاتترم ۵ · ۱۰ فصلتعامل و جزئیات — سازوکار برش‌خوردهٔ یک دکمه با فنر و کنتاکتش، و نخی که به پنلِ بازشدهٔ روی کارت صفحه می‌رود
  1. چهار نمای یک دکمهٔ یکسان کنار هم: نمای عادی سفید، نمای ماوس‌رو با پس‌زمینهٔ آبیِ توپُر، نمای فشرده با آبیِ تیره‌تر، و نمای غیرفعال با رنگِ کم‌جانِ خاکستریفصل ۰۱ — حالت‌ها: pseudo-class تعاملیرایگان
  2. یک فهرستِ عمودی از چند ردیف که یک‌درمیان دو رنگِ روشن دارند؛ ردیفِ اول پررنگ و آبی، ردیفِ آخر با رنگِ متفاوت، و بینِ ردیف‌ها خطِ نازکِ جداکنندهفصل ۰۲ — selector های ساختاری و combinator هارایگان
  3. یک جعبهٔ محتوای پُررنگ در وسط با دو جعبهٔ کم‌رنگِ خط‌چین در دو طرفش — یکی چسبیده به ابتدا و یکی به انتها — که نشان می‌دهد pseudo-element ها دو جعبهٔ اضافه‌اند که مرورگر می‌سازد و در HTML وجود ندارندفصل ۰۳ — pseudo-element هارایگان
  4. یک فرمِ تماسِ استایل‌خورده با چند کادرِ ورودیِ هم‌شکل، یک منوی کشویی، یک جعبهٔ پیامِ بزرگ‌تر، یک checkbox رنگی و یک دکمهٔ ارسال؛ یکی از ردیف‌ها با یک هالهٔ ملایم روشن شده تا نشان دهد الان focus داخلش استفصل ۰۴ — استایل فرمرایگان
  5. یک فرمِ ساده در سه حالت کنارِ هم: خانهٔ ایمیلِ خالی با مرزِ خنثی، همان خانه با ورودیِ نادرست و مرزِ قرمز، و همان خانه با ورودیِ درست و مرزِ سبزفصل ۰۵ — اعتبارسنجی فرمرایگان
  6. یک ردیف سه کارت که کارتِ وسط با موس بزرگ‌تر و کمی کج شده و از دو کارتِ کناری بالاتر آمده، ولی جای اصلی‌اش در ردیف هنوز محفوظ استفصل ۰۶ — transformرایگان
  7. یک دکمه در دو ردیف: ردیفِ بالا تغییرِ ناگهانی از رنگِ روشن به تیره در یک پرش، و ردیفِ پایین همان تغییر ولی نرم و پله‌پله در چند گام میانیفصل ۰۷ — transitionرایگان
  8. نواری از چند فریمِ پشت‌سرِ هم که یک دایرهٔ سبز در آن‌ها کوچک و بزرگ می‌شود؛ فریم اول و آخر کوچک، فریم وسط بزرگ، و مرورگر فاصلهٔ بینشان را پُر می‌کندفصل ۰۸ — animation و احترام به کاربررایگان
  9. یک کارت که یک checkbox داخلش دارد؛ از خودِ کارت یک فلش رو به بالا به کلِ کارت برمی‌گردد و نشان می‌دهد که کارت بر اساسِ وضعیتِ فرزندش رنگ عوض می‌کندفصل ۰۹ — :has() و تعامل بدون JavaScriptرایگان
  10. یک آکاردئونِ سه‌ردیفی: ردیفِ بالا باز است و متنِ پاسخ زیرش دیده می‌شود با علامتِ ضربدر، دو ردیفِ دیگر بسته‌اند با علامتِ به‌علاوهفصل ۱۰ — پروژه: یک component تعاملی بدون JSرایگان
۶حرفه‌ای و واقعیترم ۶ · ۱۱ فصلحرفه‌ای و واقعی — کارت صفحهٔ نهایی در قاب، کنارش کولیس اندازه‌گیری و کارت نمونهٔ کنتراست و برگهٔ فهرست بررسی
  1. یک stylesheet که به بخش‌های مرتب تقسیم شده: بالا یک بخش کوچک، بعد بخش پایه، بعد بخش چیدمان، و پایین بخش بزرگ‌ترِ component ها؛ سمتِ دیگر همان کد به‌هم‌ریخته و بدون بخش‌بندیفصل ۰۱ — CSS را سازماندهی کنرایگان
  2. دو لایهٔ روی‌هم‌چیده‌شدهٔ قاعده‌های CSS: یک لایهٔ پایین و یک لایهٔ بالا؛ یک فلش نشان می‌دهد قاعدهٔ لایهٔ بالا برنده است، بی‌آنکه به بزرگیِ نشانه‌های specificity اهمیت بدهدفصل ۰۲ — `@layer` و nestingرایگان
  3. یک دکمهٔ آبی که سه بار در سه جای متفاوتِ یک صفحه نشسته — یک بار در نوار بالا، یک بار وسط، یک بار در پاصفحه — و هر سه دقیقاً یک شکل‌اندفصل ۰۳ — مثل component فکر کنرایگان
  4. چند design token در یک ستون سمت راست — چند نمونهٔ رنگ، چند پلهٔ فاصله، یک شکلِ گوشهٔ گِرد — که با خطوطی به یک کارت و یک دکمه در سمت چپ وصل شده‌اند و رنگ و فاصلهٔ آن‌ها را تغذیه می‌کنندفصل ۰۴ — design system کوچک خودترایگان
  5. دو دکمهٔ گِرد کنار هم؛ دکمهٔ راست و آیکونِ قلبِ داخلش هر دو یک قرمزِ آجری‌اند، دکمهٔ چپ و آیکونِ ستارهٔ داخلش هر دو یک زردِ زعفرانی؛ رنگِ هر آیکون دقیقاً همرنگِ خطِ دورِ دکمهٔ خودش استفصل ۰۵ — SVG و آیکونرایگان
  6. یک کارتِ پروفایل که یک مسیرِ نقطه‌چینِ حرکتِ صفحه‌کلید رویش کشیده شده: از منوی بالا شروع می‌شود، به دکمهٔ اصلی می‌رسد و بعد به دکمهٔ آیکونی؛ دورِ عنصرِ فعال یک قابِ ضخیمِ قرمز هست که همان حلقهٔ focus را نشان می‌دهدفصل ۰۶ — دسترس‌پذیری عمیقرایگان
  7. مقایسهٔ دو صفحه؛ سمتِ راست موقعِ بارگذاری متن‌ها با یک فلشِ پرش به پایین جهیده‌اند چون جای تصویر خالی بوده، سمتِ چپ همان صفحه که یک قابِ خالیِ رزروشده به‌جای تصویر دارد و متن‌ها سرِ جای نهایی‌شان آرام نشسته‌اندفصل ۰۷ — سرعترایگان
  8. دو مسیرِ کنار هم برای رنگ‌کردنِ یک دکمه؛ مسیرِ راست پلکانی بالا می‌رود و هر پله ضخیم‌تر از قبلی است تا به یک علامتِ توقفِ قرمزِ درشت برسد، مسیرِ چپ یک خطِ صاف و کوتاه و آرام است که مستقیم به دکمه می‌رسدفصل ۰۸ — معماری CSS در مقیاس بزرگرایگان
  9. طرحِ یک صفحه که از قابِ نمایش پهن‌تر است: یک جعبهٔ آبیِ کناری از لبهٔ صفحه بیرون زده و یک نوارِ اسکرولِ افقیِ نارنجی پایینِ صفحه را روشن کرده، در حالی که بقیهٔ بلوک‌ها درست جا شده‌اندفصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌هارایگان
  10. طرحِ یک سایتِ نمونه‌کار: بالا یک سرصفحهٔ مشترک با نامِ سازنده یک‌سو و منو سویِ دیگر، وسط یک ردیف کارتِ هم‌اندازه روی یک گرید، و پایین یک پاصفحهٔ مشترک؛ کنارش همان صفحه در حالتِ تیرهفصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ایرایگان
  11. مقایسهٔ دو کارتِ پیش‌نمایشِ لینک: سمتی یک کارتِ خالی و بی‌رمق فقط با یک نوارِ خاکستریِ آدرس، سمتِ دیگر یک کارتِ کامل با یک ناحیهٔ تصویر، یک نوارِ عنوانِ پررنگ و دو نوارِ خلاصهفصل ۱۱ — پروژهٔ نهایی: انتشار زندهرایگان
۷پل به JavaScriptترم ۷ · ۹ فصلپل به JavaScript — پلی برش‌خورده که یک کرانه‌اش پارچهٔ بافتهٔ صفحه و کرانهٔ دیگرش چرخ‌دنده است و نخی از این به آن می‌رود
  1. سه لایهٔ یک صفحهٔ وب روی هم: لایهٔ اسکلت با ساختار خطی، لایهٔ ظاهر با رنگ و بافت، و لایهٔ بالایی با چرخ‌دنده و جرقه که به صفحه حرکت می‌دهدفصل ۰۱ — چرا JavaScript؟ اولین اسکریپترایگان
  2. دو جعبهٔ نگهدارندهٔ مقدار کنار هم: یک جعبهٔ باز با درِ برداشته که مقدار داخلش قابل تعویض است، و یک جعبهٔ قفل‌شده با قفلِ بسته که مقدارش ثابت ماندهفصل ۰۲ — متغیر و مقداررایگان
  3. ذره‌بینی که از میان چند کارتِ هم‌شکل روی یک صفحه، یکی را پیدا کرده و یک قلم‌مو همان یک کارت را رنگ و متنِ تازه می‌زندفصل ۰۳ — پیدا کردن و تغییرِ عنصررایگان
  4. یک دکمهٔ بزرگ که موج‌های صدا از آن به سمتِ یک گوشِ دوستانه می‌رود و بالای دکمه یک جرقهٔ کوچک روشن شدهفصل ۰۴ — رویدادرایگان
  5. یک پل که دو جزیره را به هم وصل می‌کند: یک سمت قلم‌مو و پالتِ رنگ، سمتِ دیگر یک چرخ‌دنده با جرقه؛ وسطِ پل یک کلیدِ چراغ و پس‌زمینه نیمی روشن و نیمی تاریکفصل ۰۵ — روشن/خاموش‌کردنِ یک class: پلِ CSS و JSرایگان
  6. یک کارتِ فرم با یک فیلد و یک دکمه؛ از دکمه یک مسیر دوشاخه می‌شود: یک شاخه به علامتِ خطرِ قرمز و شاخهٔ دیگر به علامتِ تیکِ سبز می‌رسدفصل ۰۶ — کار با فرم در JavaScriptرایگان
  7. یک ردیف کارت داده که با یک فلش چرخان یکی‌یکی به عنصرهای یک فهرست روی صفحهٔ وب تبدیل می‌شوندفصل ۰۷ — فهرست و حلقهرایگان
  8. یک کارت وب که با بازویی کابلی بسته‌ای از داده را از یک ابر سرور می‌گیردفصل ۰۸ — گرفتن داده از اینترنترایگان
  9. صفحهٔ نمونه‌کار که نیمی روشن و نیمی تیره است، با یک کلید تغییر حالت، فهرستی در حال فیلترشدن از میان یک قیف، و فرمی با علامت تأیید سبزفصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کنرایگان