کدنامهمرجع‌های مهندسی نرم‌افزار، به فارسی

CSS

CSS

بیشتر ناامیدی از ‎CSS‎ از یک چیز می‌آید: آدم‌ها خاصیت‌ها را حفظ می‌کنند ولی مدل زیرین را نه. چرا این ‎margin‎ اعمال نشد، چرا آن عنصر وسط نمی‌آید، چرا ‎z-index‎ کار نمی‌کند — همه جواب دقیق دارند، و همه از سه مفهوم می‌آیند: آبشار، جریان، و بافت انباشت. این مسیر آن سه را محکم می‌کند، بعد می‌رود سراغ چیدمان.

۲۲فصل
۳۶۳تمرین با پاسخ
≈ ۳۴ ساعتزمان تخمینی
۳پروژهٔ نهایی

پیشرفت تو

۰٪

درصد هر فصل از دو چیز می‌آید: چقدر از بخش‌هایش را خوانده‌ای (۵۵٪) و چند تمرینش را تیک زده‌ای (۴۵٪). همه‌چیز داخل مرورگر خودت می‌ماند.

فصل

فصل‌ها به هم وابسته‌اند و ترتیبشان معنا دارد. هر مسیر با پروژه‌های نهایی تمام می‌شود: ساده، متوسط، پیچیده.

۱

آبشار و ویژگی

منشأ بیشتر «چرا اعمال نمی‌شود؟»

در نوبت نوشتن
۲

انتخابگرها

ترکیبی، شبه‌کلاس، ‎:has()‎ و ‎:is()‎.

در نوبت نوشتن
۳

مدل جعبه

‏margin، padding، border و ‎border-box‎.

در نوبت نوشتن
۴

جریان سند

‏block، inline، ‎inline-block‎ و ‎BFC‎.

در نوبت نوشتن
۵

واحدها

‏px، rem، em، ‎%‎، ‎vh‎، ‎ch‎ و ‎clamp()‎.

در نوبت نوشتن
۶

رنگ

‏hex، ‎hsl‎، ‎oklch‎، شفافیت و ‎color-mix()‎.

در نوبت نوشتن
۷

تایپوگرافی

خط، فاصله، ‎font-face‎ و فونت متغیر.

در نوبت نوشتن
۸

Flexbox

چیدمان یک‌بعدی — و اینکه هر خاصیت روی کدام محور اثر دارد.

در نوبت نوشتن
۹

Grid ۱

ستون، ردیف، ‎fr‎ و ‎gap‎.

در نوبت نوشتن
۱۰

Grid ۲

ناحیهٔ نام‌دار، ‎auto-fit‎، ‎minmax‎ و چیدمان زیرشبکه.

در نوبت نوشتن
۱۱

موقعیت و لایه

‏sticky، ‎absolute‎ و بافت انباشت ‎z-index‎.

در نوبت نوشتن
۱۲

واکنش‌گرایی

‏media query، ‎container query‎ و طراحی سیال.

در نوبت نوشتن
۱۳

متغیرهای ‎CSS‎

‏custom property، دامنه، و ساخت تم تاریک.

در نوبت نوشتن
۱۴

گذار و انیمیشن

‏transition، ‎keyframes‎ و حرکتی که آزار ندهد.

در نوبت نوشتن
۱۵

تبدیل

‏translate، ‎scale‎، ‎rotate‎ و سه‌بعدی.

در نوبت نوشتن
۱۶

‏RTL و خاصیت منطقی

‏inline-start به‌جای ‎left‎ — درس اصلی برای فارسی.

در نوبت نوشتن
۱۷

معماری ‎CSS‎

‏BEM، لایه‌بندی و کدی که بشود حذفش کرد.

در نوبت نوشتن
۱۸

کارایی رندر

‏reflow، ‎repaint‎، ‎contain‎ و اسکرول روان.

در نوبت نوشتن
۱۹

‏CSS مدرن

‏@layer، ‎@container‎، ‎:has()‎، ‎nesting‎ و ‎@supports‎.

در نوبت نوشتن
۲۰

پروژهٔ ۱ — چیدمان صفحه

یک صفحهٔ کامل با ‎Grid‎ و ‎Flexbox‎.

در نوبت نوشتنپروژهٔ ساده
۲۱

پروژهٔ ۲ — سیستم تم

توکن، تم روشن و تاریک، و ‎RTL‎.

در نوبت نوشتنپروژهٔ متوسط
۲۲

پروژهٔ ۳ — رابط کامل بدون فریم‌ورک

واکنش‌گرا، دسترس‌پذیر و با اسکرول روان.

در نوبت نوشتنپروژهٔ پیچیده