</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهHTMLدرس 8
درس 8 از 8 · ۵۰ دقیقه

پروژه نهایی، انتشار و بازخورد

ساختار صفحه‌های وب را از اولین تگ تا یک صفحه کامل و دسترس‌پذیر یاد بگیر.

۰امتیاز شما
نقشه این درس

بعد از این درس چه کاری می‌توانی انجام بدهی؟

  • نیازهای نسخه اول را محدود کنی
  • مسیر موفق و خطا را کامل کنی
  • پروژه را برای یک کاربر واقعی آماده کنی
به زبان زندگی واقعی

HTML را ساده بفهم

HTML مثل اسکلت و برچسب‌های یک فروشگاه است؛ مشخص می‌کند هر بخش عنوان، توضیح، تصویر یا دکمه است.

نکته مهم برای شروع HTML

قابلیت نیمه‌تمام ارزش کمتری از جریان کوچک اما قابل استفاده دارد.

چرا مهم است؟ کوچک، کامل و قابل استفاده.

اولین تمرین تو: برای «صفحه معرفی یک محصول واقعی» سه قابلیت حیاتی، دو حالت خطا و یک معیار موفقیت بنویس؛ سپس فقط نخستین جریان را کامل کن.

توضیح ساده و قدم‌به‌قدم

از یک مثال کوچک شروع کن

پروژه نهایی باید کوچک، کامل و قابل ارائه باشد. نیاز کاربر را محدود کن، مسیر اصلی را انتها‌به‌انتها بساز و سپس حالت خطا، آزمون و راهنمای اجرا را اضافه کن. انتشار پایان یادگیری نیست؛ آغاز بازخورد واقعی است.

1

۱. دامنه نسخه اول

سه نیاز حیاتی و معیار موفقیت را بنویس.

2

۲. Vertical slice

یک مسیر کوچک را از ورودی تا خروجی کامل کن.

3

۳. تحویل حرفه‌ای

تست، README، تنظیمات و راه بازگشت را آماده کن.

نکته مهم

قابلیت نیمه‌تمام ارزش کمتری از جریان کوچک اما قابل استفاده دارد.

مفهوم‌های اصلی

سه قطعه‌ای که باید بفهمی

نسخه اول

کوچک، کامل و قابل استفاده.

انتشار

محیط، تنظیمات و راه بازگشت.

بهبود

تغییر بر اساس رفتار و بازخورد واقعی.

سناریوی واقعی

صفحه معرفی محصولی که کاربر و موتور جست‌وجو هر دو ساختارش را درست بفهمند.

در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را می‌سازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص می‌کنیم.

ورودی روشنیک تغییر کوچکنتیجه قابل سنجش
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

روی هر قطعه بزن تا وارد پاسخ شود؛ برای برگرداندن دوباره روی آن بزن. با دکمه‌های جابه‌جایی هم می‌توانی بدون کشیدن و رهاکردن ترتیب را اصلاح کنی.

مرحله ۲ از ۳ · مرتب‌کردن کد
بانک قطعه‌هاقطعه مناسب را انتخاب کن
ترتیب پاسخ تواز بالا به پایین اجرا می‌شود

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    اجرا و پیش‌نمایش

    این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا می‌شود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.

    html-final-project
    خروجیآماده
    یک بخش را تغییر بده و دکمه بررسی را بزن.
    بعد از هر تغییر، نتیجه را دوباره بررسی کن.
    تمرین هدایت‌شده

    برای «صفحه معرفی یک محصول واقعی» سه قابلیت حیاتی، دو حالت خطا و یک معیار موفقیت بنویس؛ سپس فقط نخستین جریان را کامل کن.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

    دامنه بسیار بزرگ

    2

    نداشتن README و روش اجرا

    3

    انتشار بدون آزمون حالت خطا

    سنجش چندمرحله‌ای

    با 5 سؤال مطمئن شو که مفهوم را گرفته‌ای

    سؤال 1 از 5

    بهترین روش استفاده از نمونه این درس چیست؟

    سؤال 2 از 5

    نسخه اول خوب چگونه است؟

    سؤال 3 از 5

    پیش از انتشار چه چیزی لازم است؟

    سؤال 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    سؤال 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 8

    فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟

    فقط در این صورت درس را کامل کن و سراغ مرحله بعد برو.