ChatGPT said:

📝 جلسه اول – آشنایی با طراحی رسپانسیو

1️⃣ طراحی رسپانسیو (Responsive Design):
روشی در طراحی وب برای سازگاری صفحات با انواع دستگاه‌ها (موبایل، تبلت، لپ‌تاپ و دسکتاپ).

2️⃣ مدیا کوئری (Media Query):

• ابزار اصلی در CSS3 برای طراحی رسپانسیو.
• امکان تغییر استایل‌ها بر اساس ویژگی‌های دستگاه (مثل عرض، ارتفاع، نوع صفحه).

3️⃣ سینتکس مدیا کوئری:

@media (condition) {
  /* CSS rules */
}

4️⃣ Media Type:

• screen → نمایشگرها
• print → چاپ
• all → همه‌ی دستگاه‌ها

5️⃣ Media Feature (ویژگی‌های رسانه):

• width / min-width / max-width
• height / orientation (landscape / portrait)
• resolution

6️⃣ Grid System:

• سیستمی برای تقسیم‌بندی صفحه به ستون‌ها و ردیف‌ها.
• ایجاد چیدمان منظم و انعطاف‌پذیر در طراحی رسپانسیو.

7️⃣ مزیت طراحی رسپانسیو:

• بهبود تجربه کاربری
• سازگاری با همه دستگاه‌ها
• کاهش نیاز به ساخت نسخه جداگانه برای موبایل