CSS
از اولین قدم تا محصول واقعی
CSS را با کارت فروش واقعی یاد بگیر؛ از اتصال فایل و Box Model تا Grid، واکنشگرایی، حرکت مسئولانه و Debug.
این پروژه را در 20 قدم کوتاه میسازی. هر درس فقط یک موضوع تازه دارد و با نمونه قابل دیدن تمام میشود.
20 قدم کوتاه و مرتب
هر درس فقط یک مفهوم تازه دارد: اول خیلی ساده میخوانی، بعد مثال میبینی، کد را تغییر میدهی و با آزمون کوتاه مطمئن میشوی.
CSS را به صفحه وصل کن
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Selector، Cascade و Specificity
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
رنگ، فونت و متن خوانا
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Box Model؛ اندازه واقعی کارت
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
display و جریان طبیعی صفحه
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Flexbox برای یک ردیف منعطف
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Grid برای کارتهای چندستونی
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
position و z-index بدون سردرگمی
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Pseudo-class و Pseudo-element
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
CSS Variable و Design Token
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Responsive Design از محتوا شروع میشود
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Media Query برای ترجیح و محیط کاربر
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
rem، درصد و viewport؛ واحد درست برای کار درست
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
پسزمینه، گرادیان و سایه با هدف
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Transition برای بازخورد کوتاه
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Animation و keyframes
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
فرم و دکمه حرفهای
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
دسترسیپذیری و کاهش حرکت
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
پروژه؛ کارت فروش واکنشگرا
یک مفهوم، یک مثال واقعی، یک تمرین و چند آزمون کوتاه.
Debug CSS و تحویل نهایی
همه آموختهها را به یک پروژه کامل و قابل ارائه تبدیل کن.
کارت فروش واکنشگرا و قابل دسترس
این پروژه یک نمونه تزئینی نیست. مدل داده، قوانین، حالت خطا، آزمون و مسیر انتشار را قدمبهقدم کامل میکنی.
- تعریف مسئله و کاربر واقعی
- ساخت نسخه کوچک اما انتهابهانتها
- آزمون مسیر موفق، مرزی و خطا
- آمادهسازی خروجی برای ارائه و بازخورد
/* styles.css */
body {
font-family: system-ui, sans-serif;
color: #172033;
background: #f4f7fb;
}
h1 { color: #126b4f; }