CSS Study Plan

برنامه مطالعه CSS را می‌بینی — این برنامه برای حدود ۶ تا ۸ هفته طراحی شده تا از سطح مبتدی تا پیشرفته پیش بروی (می‌توانی سرعت را بر اساس وقت خودت تنظیم کنی).

🗓️ برنامه مطالعه CSS

هفته ۱: مفاهیم پایه

هدف: درک این‌که CSS چیست و چطور با HTML کار می‌کند.
مباحث:

• CSS چیست؟ (درون‌خطی، داخلی، خارجی)
• ساختار و دستور زبان CSS (Selectors و Properties)
• رنگ‌ها، واحدها (px، em، rem، %، vw، vh)
• مدل جعبه‌ای (Box Model): margin، padding، border
• نوع نمایش (display): block، inline، inline-block
• استایل‌های پایه: متن، فونت، پس‌زمینه

تمرین:

• استایل دادن به یک صفحه ساده شامل عنوان و متن
• تغییر فونت، رنگ، فاصله‌ها و حاشیه‌ها

منابع:

• آموزش پایه CSS در MDN
• راهنمای مقدماتی CSS Tricks

هفته ۲: موقعیت‌دهی و چیدمان

هدف: یادگیری نحوه کنترل موقعیت عناصر در صفحه.
مباحث:

• Position: static، relative، absolute، fixed، sticky
• Float و Clear
• z-index و ترتیب لایه‌ها
• Overflow و Visibility
• واحدهای نسبی (vw، vh، %، fr)

تمرین:

• ساخت یک نوار ناوبری چسبنده (sticky navbar)
• طراحی یک چیدمان دو ستونه با float یا position

هفته ۳: Flexbox

هدف: تسلط بر چیدمان منعطف و مدرن.
مباحث:

• Flexbox چیست؟
• خصوصیات: display: flex، flex-direction، justify-content، align-items
• flex-wrap، align-content
• flex-grow، flex-shrink، flex-basis، order
• تراز کردن وسط صفحه با Flexbox

تمرین:

• ساخت نوار ناوبری واکنش‌گرا با Flexbox
• طراحی جدول قیمت‌ها (pricing table)

منابع:

• بازی Flexbox Froggy
• راهنمای کامل Flexbox در CSS Tricks

هفته ۴: Grid Layout

هدف: یادگیری طراحی چیدمان‌های پیشرفته و واکنش‌گرا.
مباحث:

• display: grid، grid-template-rows، grid-template-columns
• gap، justify-items، align-items
• grid-template-areas
• طراحی واکنش‌گرا با auto-fit، minmax، repeat

تمرین:

• ساخت گالری تصاویر یا داشبورد
• ترکیب Flexbox و Grid در یک پروژه

منابع:

• بازی Grid Garden
• راهنمای کامل Grid در CSS Tricks

هفته ۵: طراحی واکنش‌گرا (Responsive Design)

هدف: سازگار کردن طراحی برای تمام اندازه‌های صفحه‌نمایش.
مباحث:

• Media Query
• رویکرد Mobile-first و Desktop-first
• تایپوگرافی واکنش‌گرا
• تگ viewport
• تصاویر واکنش‌گرا

تمرین:

• واکنش‌گرا کردن یک پروژه قبلی برای موبایل

منابع:

• طراحی واکنش‌گرا در MDN

هفته ۶: استایل‌های پیشرفته

هدف: یادگیری افکت‌ها و انیمیشن‌های بصری.
مباحث:

• شبه‌کلاس‌ها و شبه‌عناصر (Pseudo-classes & Pseudo-elements)
• متغیرهای CSS (--var)
• Transition و Animation
• Transform (چرخش، مقیاس، انتقال)
• سایه‌ها، گرادیان‌ها، فیلترها
• clip-path و mask

تمرین:

• ساخت انیمیشن hover برای دکمه
• طراحی کارت با افکت سایه و بزرگ‌نمایی در hover

هفته ۷: ساختار و بهترین روش‌ها

هدف: نوشتن CSS تمیز و قابل نگهداری.
مباحث:

• اصل DRY و CSS ماژولار
• نام‌گذاری BEM
• CSS Reset و Normalize.css
• استفاده از CSS Variables
• مقدمه‌ای بر SASS/SCSS

تمرین:

• بازنویسی یک فایل CSS شلوغ به ساختارمند و تمیز

هفته ۸: پروژه‌ها

هدف: استفاده از تمام مفاهیم در پروژه واقعی.
ایده پروژه‌ها:

• پورتفولیوی شخصی واکنش‌گرا
• صفحه فرود محصول
• قالب وبلاگ
• رابط کاربری داشبورد

چالش:

• بازسازی طرح یک وب‌سایت واقعی با استفاده از CSS Grid و Flexbox

🧠 مطالب تکمیلی (پیشرفته‌تر)

• فریم‌ورک‌ها (Tailwind، Bootstrap)
• CSS در جاوااسکریپت (CSS-in-JS در React)
• طراحی حالت تیره (Dark Mode) با CSS Variables
• دسترسی‌پذیری (Accessibility یا a11y) در CSS