CSS
چیدمان، رنگ و حرکت برای وب امروز.
CSS همان چیزی است که HTML ساده را به صفحه‌هایی تبدیل می‌کند که از کار با آن‌ها لذت می‌برید. این مسیر از اولین قاعده‌ی استایل شروع می‌شود و شما را تا چیدمان‌های مدرن می‌برد: انتخابگرها و آبشار، مدل جعبه‌ای، تایپوگرافی متن فارسی، رنگ‌های oklch، فلکس‌باکس و گرید، طراحی واکنش‌گرا و راست‌به‌چپ، حرکت، متغیرهای CSS، تودرتویی، :has() و @layer.
هر درس کوتاه و کاربردی است و با آزمون‌های تعاملی همراه است، و مثال‌ها از یک رابط کاربری تیره و امروزی آمده‌اند.
- درس
- ۲۵
- زمان
- ۳ ساعت
- سطح
- مقدماتی
- برنز باز
- نقره باز
- طلا قفل
آماده‌ای ثابتش کنی؟
سه آزمون منتظرند: برنز، نقره و طلا.
در پایان این مسیر می‌توانی
- قاعده‌های CSS را بخوانید و بنویسید و پیش‌بینی کنید در آبشار کدام قاعده برنده می‌شود
- اندازه و فاصله‌ی عنصرها را با مدل جعبه‌ای و واحدهای مدرن با اطمینان تنظیم کنید
- با فلکس‌باکس، گرید و subgrid چیدمان‌های واقعی بسازید
- صفحه‌هایی بسازید که با هر صفحه‌نمایشی جور شوند و در فارسی راست‌به‌چپ درست کار کنند
- حرکت نرم و دسترس‌پذیر اضافه کنید و استایل‌ها را با CSS مدرن مرتب نگه دارید
نقشهٔ مسیر
۱ فصل ۱پایه‌های CSS
CSS چیست، یک قاعده چطور ساخته می‌شود، انتخابگرها چطور عنصرها را پیدا می‌کنند و آبشار چطور برنده را انتخاب می‌کند.
۰ / ۴۲ فصل ۲مدل جعبه‌ای
هر عنصر یک جعبه است: محتوا، padding، حاشیه و margin، و اینکه جعبه‌ها چطور در صفحه کنار هم قرار می‌گیرند.
۰ / ۳۳ فصل ۳متن و رنگ
فونت‌ها و پشته‌ی فونت، متن فارسی خوش‌خوان، واحدهای نسبی، رنگ‌های oklch و کنتراست خوانا.
۰ / ۳۴ فصل ۴فلکس‌باکس
آیتم‌ها را در یک ردیف یا ستون بچینید، ترازشان کنید و فضا را منصفانه بینشان تقسیم کنید.
۰ / ۳۵ فصل ۵گرید
چیدمان دوبعدی با ستون، ردیف، ناحیه‌های نام‌دار و subgrid.
۰ / ۳۶ فصل ۶واکنش‌گرا و راست‌به‌چپ
مدیا کوئری موبایل‌محور، کانتینر کوئری، متن سیال با clamp() و ویژگی‌های منطقی برای چیدمان فارسی.
۰ / ۴۷ فصل ۷حرکت و CSS مدرن
ترنزیشن، کی‌فریم، حرکت نرم و دسترس‌پذیر، متغیرهای CSS، تودرتویی، :has() و @layer.
۰ / ۵