آموزش CSS از پایه تا طراحی رابط کاربری حرفه‌ای

<div class='lesson-rich-content'> <h2>جلسه 1: مدل جعبه‌ای و پایه‌های CSS</h2> <h3>تمرکز جلسه</h3> <p> selector، property، value، box model، margin، padding و border. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Box Model پایه تقریباً تمام تصمیم‌های layout را توضیح می‌دهد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک کارت دوره بسازید و فاصله‌های داخلی و خارجی آن را کنترل کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده تصادفی از margin و padding برای حل فاصله‌ها. </p> <h3>چالش جلسه</h3> <p> ابعاد یک کارت را با DevTools تحلیل و Box Model آن را مستند کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 2: Selectorها و Cascade</h2> <h3>تمرکز جلسه</h3> <p> element، class، id، attribute، specificity و ترتیب قوانین. </p> <h3>چرا این مبحث مهم است؟</h3> <p> در پروژه واقعی بخش زیادی از خطاهای CSS از رقابت بین selectorها ناشی می‌شود. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> قوانین متعارض ایجاد کنید و نتیجه Cascade و specificity را بررسی کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده افراطی از !important. </p> <h3>چالش جلسه</h3> <p> یک stylesheet را بدون !important بازنویسی کنید و specificity را کاهش دهید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 3: رنگ، فونت و تایپوگرافی</h2> <h3>تمرکز جلسه</h3> <p> font-family، size، weight، line-height، color و متغیرهای پایه. </p> <h3>چرا این مبحث مهم است؟</h3> <p> تایپوگرافی مناسب خوانایی و هویت بصری سایت را تعیین می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> برای سایت آموزشی سیستم تایپوگرافی فارسی طراحی کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از اندازه‌های نامنسجم و line-height کم. </p> <h3>چالش جلسه</h3> <p> برای heading، body و caption یک مقیاس تایپوگرافی مشخص تعریف کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 4: Flexbox از صفر تا layout</h2> <h3>تمرکز جلسه</h3> <p> display:flex، axis، gap، justify-content، align-items و wrap. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Flexbox برای چیدمان یک‌بعدی و رابط‌های responsive بسیار کاربردی است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> هدر و کارت‌های دوره را با Flexbox پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از position برای layoutهای ساده. </p> <h3>چالش جلسه</h3> <p> یک header راست‌چین با منو، لوگو و دکمه بسازید که در عرض کم wrap شود. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 5: CSS Grid برای صفحات حرفه‌ای</h2> <h3>تمرکز جلسه</h3> <p> grid-template-columns، gap، minmax، auto-fit و مناطق grid. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Grid برای layoutهای دوبعدی و صفحات کاتالوگی مناسب است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> صفحه دوره‌ها را با Grid به کارت‌های چندستونه تبدیل کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از ستون‌های ثابت که در موبایل می‌شکنند. </p> <h3>چالش جلسه</h3> <p> یک grid بسازید که از 4 ستون در دسکتاپ به 1 ستون در موبایل برسد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 6: Responsive Design و Media Query</h2> <h3>تمرکز جلسه</h3> <p> mobile-first، breakpoints، fluid sizing و clamp. </p> <h3>چرا این مبحث مهم است؟</h3> <p> کاربر با اندازه‌های مختلف صفحه وارد سایت می‌شود و layout باید سازگار باشد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> کارت دوره و منوی سایت را برای موبایل و دسکتاپ responsive کنید. </p> <h3>اشتباه رایج</h3> <p> انتخاب breakpoint بر اساس دستگاه به جای نیاز واقعی layout. </p> <h3>چالش جلسه</h3> <p> یک صفحه را از 360 تا 1440 پیکسل تست و breakpointهای لازم را استخراج کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 7: Position، z-index و لایه‌ها</h2> <h3>تمرکز جلسه</h3> <p> relative، absolute، fixed، sticky و stacking context. </p> <h3>چرا این مبحث مهم است؟</h3> <p> لایه‌بندی در header، modal و عناصر شناور ضروری است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک نوار بالای sticky و badge روی تصویر کارت بسازید. </p> <h3>اشتباه رایج</h3> <p> استفاده بی‌دلیل از z-indexهای بسیار بزرگ. </p> <h3>چالش جلسه</h3> <p> سه عنصر روی هم قرار دهید و ترتیب لایه‌ها را با stacking context توضیح دهید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 8: Transition و Animation</h2> <h3>تمرکز جلسه</h3> <p> transition، transform، keyframes و timing function. </p> <h3>چرا این مبحث مهم است؟</h3> <p> حرکت کنترل‌شده می‌تواند بازخورد رابط را بهتر کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> hover و focus حرفه‌ای برای کارت و دکمه بسازید. </p> <h3>اشتباه رایج</h3> <p> انیمیشن‌های سریع یا سنگین که خوانایی را مختل می‌کنند. </p> <h3>چالش جلسه</h3> <p> برای یک دکمه transition بسازید و نسخه prefers-reduced-motion را نیز در نظر بگیرید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 9: Pseudo-class و Pseudo-element</h2> <h3>تمرکز جلسه</h3> <p> hover، focus، active، nth-child، before و after. </p> <h3>چرا این مبحث مهم است؟</h3> <p> این قابلیت‌ها نیاز به HTML اضافی را در بسیاری از UIها کاهش می‌دهند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> برای لیست درس‌ها نشانگر و وضعیت فعال طراحی کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از before/after برای محتوای ضروری. </p> <h3>چالش جلسه</h3> <p> یک navigation با حالت active و focus قابل مشاهده طراحی کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 10: متغیرهای CSS و Design Tokens</h2> <h3>تمرکز جلسه</h3> <p> custom properties، theme و کنترل مرکزی رنگ و فاصله. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Tokenها تغییر تم و یکدست نگه داشتن UI را ساده می‌کنند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> سیستم رنگ سرمه‌ای، آبی الکتریکی و سفید سایت را به token تبدیل کنید. </p> <h3>اشتباه رایج</h3> <p> تعریف رنگ یکسان در ده‌ها selector. </p> <h3>چالش جلسه</h3> <p> رنگ‌ها، radius و spacing اصلی یک صفحه را با متغیرهای CSS مدیریت کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 11: کامپوننت‌های UI با CSS</h2> <h3>تمرکز جلسه</h3> <p> ساخت card، button، badge، input و alert قابل استفاده مجدد. </p> <h3>چرا این مبحث مهم است؟</h3> <p> UI یکدست نتیجه وجود الگوهای تکرارپذیر است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک mini design system برای صفحات دوره بسازید. </p> <h3>اشتباه رایج</h3> <p> ساخت هر دکمه با CSS اختصاصی و تکراری. </p> <h3>چالش جلسه</h3> <p> سه variant برای button و دو variant برای card طراحی کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 12: Dark Mode و theme</h2> <h3>تمرکز جلسه</h3> <p> prefers-color-scheme، data-theme و نگهداری انتخاب کاربر. </p> <h3>چرا این مبحث مهم است؟</h3> <p> تم مناسب می‌تواند تجربه مطالعه طولانی را بهتر کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> برای صفحه دوره حالت روشن و تاریک بسازید. </p> <h3>اشتباه رایج</h3> <p> تعریف رنگ متن و پس‌زمینه به شکل hard-coded در همه اجزا. </p> <h3>چالش جلسه</h3> <p> یک theme token system بسازید که بدون تغییر کامپوننت‌ها رنگ‌ها را عوض کند. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 13: بهینه‌سازی CSS و جلوگیری از آشفتگی</h2> <h3>تمرکز جلسه</h3> <p> ساختار فایل، naming، cascade layers و کاهش تکرار. </p> <h3>چرا این مبحث مهم است؟</h3> <p> CSS پروژه‌های بزرگ بدون نظم سریعاً دشوار برای تغییر می‌شود. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک stylesheet شلوغ را refactor کنید. </p> <h3>اشتباه رایج</h3> <p> نام‌گذاری مبهم و selectorهای بیش از حد عمیق. </p> <h3>چالش جلسه</h3> <p> یک صفحه را به بخش‌های base، component و utility تقسیم کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 14: Responsive Form و جدول حرفه‌ای</h2> <h3>تمرکز جلسه</h3> <p> فرم‌های چندستونه، input states، overflow و جدول responsive. </p> <h3>چرا این مبحث مهم است؟</h3> <p> بخش زیادی از UI واقعی شامل فرم و داده جدولی است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> فرم ثبت‌نام و جدول سرفصل دوره را responsive کنید. </p> <h3>اشتباه رایج</h3> <p> فشرده کردن بیش از حد inputها در موبایل. </p> <h3>چالش جلسه</h3> <p> یک فرم 6 فیلدی بسازید که در موبایل تک‌ستونه شود. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 15: پروژه نهایی CSS؛ طراحی صفحه دوره</h2> <h3>تمرکز جلسه</h3> <p> ترکیب Grid، Flexbox، typography، theme، responsive و animation. </p> <h3>چرا این مبحث مهم است؟</h3> <p> پروژه نهایی توانایی تبدیل HTML خام به رابط واقعی را نشان می‌دهد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک صفحه دوره آموزشی حرفه‌ای و یکدست طراحی کنید. </p> <h3>اشتباه رایج</h3> <p> تمرکز صرف بر زیبایی و بی‌توجهی به accessibility و responsive. </p> <h3>چالش جلسه</h3> <p> صفحه نهایی را در موبایل، تبلت و دسکتاپ تست و مشکلات layout را اصلاح کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>