طراحی واکنش‌گرا — بخش اول: Mobile-First و نقطه‌شکست

آبشار و specificity در CSS: ترتیب نوشتن، محاسبهٔ سادهٔ اولویت، ارث‌بری و inherit، هزینهٔ !important و سازمان‌دهی کلاس‌ها برای جلوگیری از جنگ اولویت.

رنگ و تایپوگرافی در CSS: فرمت‌های رنگ و شفافیت، فهرست فونت جانشین، font-display و وب‌فونت فارسی، line-height مناسب متن فارسی و تیتر روان با clamp().

تزئین در CSS: ساخت عنصر تزئینی با ::before و ::after و content، شمارنده‌ها و نشانه‌های سفارشی فهرست، چند پس‌زمینه و گرادیان، سایه و filter و ساخت آیکون بدون تصویر.

جریان طبیعی در CSS: بلوک و اینلاین و inline-block، تفاوت display: none با visibility: hidden، فروپاشی margin و شکل‌گیری BFC با overflow.

Flexbox در CSS: محور اصلی و متقاطع، flex-direction و wrap، justify-content و align-items، gap، flex کوتاه‌نویس و تمرین نوار ناوبری.

Flexbox در عمل: flex-grow و shrink، باگ min-width: auto و سرریز متن، ستون‌های هم‌ارتفاع، چسباندن دکمه به پایین کارت و انتخاب بین flex و grid.

CSS Grid: تعریف ستون و ردیف، واحد fr، minmax() و repeat(auto-fit, minmax())، فاصله‌ها و ساخت گالری واکنش‌گرا بدون حتی یک media query.

CSS Grid پیشرفته: grid-template-areas و نقشهٔ صفحه، نام‌گذاری خطوط، span، هم‌ترازی سلول‌ها، subgrid و چیدمان کامل صفحهٔ محصول.

جای‌گذاری در CSS: چهار حالت position، کاربرد inset، sticky و شرط‌هایش، fixed، و z-index همراه با مفهوم stacking context که پاسخ چرایی «۹۹۹۹ جواب نداد» است.

تصویر و رسانهٔ واکنش‌گرا: max-width و height: auto، aspect-ratio برای جلوگیری از پرش چیدمان، object-fit، srcset و sizes و picture.

متغیرهای CSS: ساخت --token و استفاده با var()، دامنهٔ متغیرها، تغییر تم با کلاس روی :root و تم تاریک خودکار با prefers-color-scheme.

ویژگی‌های مدرن CSS: @container و container-type، انتخاب والد با :has()، nesting بومی، @layer، margin-inline برای راست‌به‌چپ و نگاهی به انیمیشن‌های اسکرول؛ همراه با @supports و جانشین ساده.

انیمیشن در CSS: transition و خواص ارزان برای حرکت، transform، @keyframes، ساخت اسپینر و اسکلتون لودینگ و احترام به prefers-reduced-motion.

استایل اجزای رابط: حالت‌های دکمه، استایل ورودی‌ها و حالت خطای فرم، کارت با لایهٔ درست سایه، جدول واکنش‌گرا و ساخت یک کتابخانهٔ کوچک داخلی.

دسترس‌پذیری در CSS: :focus-visible، کنتراست و اندازهٔ متن، اندازهٔ هدف لمسی، تفاوت visually-hidden با display: none، استایل چاپ و جلوگیری از layout shift.

معماری CSS: قاعدهٔ نام‌گذاری کلاس و الگوی BEM به زبان ساده، ساختار پوشه و ترتیب فایل‌ها، @layer برای ترتیب مشخص، پیدا کردن استایل مرده و بازآرایی یک فایل به‌هم‌ریخته.

پروژهٔ پایانی: ساختار فایل و لایه‌ها، توکن‌های رنگ و فاصله، استایل کامل صفحهٔ محصول، واکنش‌گرایی و تم تاریک، بازبینی دسترس‌پذیری و عملکرد و مسیر ادامهٔ یادگیری.