برو به محتوا

HTML و CSS · سطح ۲ — متوسط

آموزش HTML معنایی، فلکس‌باکس، گرید و طراحی واکنش‌گرا

ساختار معنایی و دسترس‌پذیر، چیدمان حرفه‌ای با فلکس‌باکس و گرید، طراحی واکنش‌گرا، متغیرها و انیمیشن در CSS.

درس‌های این دوره در حال نوشتن است؛ سرفصل‌ها را ببینید و برنامه‌تان را بچینید.

  • مدرس: مهدی مشعل

برای چه کسی

  • کسی که سطح مقدماتی را گذرانده یا صفحهٔ ساده می‌سازد

بعد از این دوره

  • صفحه‌های چندبخشی واکنش‌گرا با گرید و فلکس‌باکس بسازید
  • صفحه‌ای بسازید که صفحه‌خوان و موتور جست‌وجو درست بفهمند

پیش‌نیاز

  • HTML و CSS مقدماتی

سرفصل‌ها

  1. ۱HTML معنایی و دسترس‌پذیریبه‌زودی
    1. بخش‌های اصلی صفحه: header، nav، main، footerبه‌زودی
    2. فرم‌های دسترس‌پذیربه‌زودی
    3. پایه‌های ARIAبه‌زودی
  2. ۲فلکس‌باکس کاملبه‌زودی
    1. محورها و جهتبه‌زودی
    2. grow، shrink و basisبه‌زودی
    3. الگوهای رایج فلکسبه‌زودی
  3. ۳گریدبه‌زودی
    1. ستون‌ها، ردیف‌ها و فاصلهبه‌زودی
    2. ناحیه‌های نام‌داربه‌زودی
    3. گرید واکنش‌گرا بدون media queryبه‌زودی
  4. ۴طراحی واکنش‌گرابه‌زودی
    1. اول موبایلبه‌زودی
    2. media queryبه‌زودی
    3. تصویرهای واکنش‌گرا با srcsetبه‌زودی
  5. ۵CSS امروزیبه‌زودی
    1. متغیرهای CSSبه‌زودی
    2. گذار و انیمیشنبه‌زودی
    3. چیدمان راست‌به‌چپ و دوزبانهبه‌زودی
  6. ۶پروژهٔ سطحبه‌زودی
    1. پروژه: صفحهٔ فرودبه‌زودی

پروژهٔ پایان سطح

صفحهٔ فرود یک محصول، واکنش‌گرا و دسترس‌پذیر

گذراندن این سطح یعنی: یک پروژهٔ کوچک واقعی را تحویل می‌دهد — مدال اخگر