فلش‌کارت‌های آموزشی ساخت پروژه‌های تعاملی با CSS برای مبتدیان

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره ساخت پروژه‌های تعاملی با CSS برای مبتدیان

موضوع کلی: توسعه وب و طراحی رابط کاربری

موضوع میانی: یادگیری و کاربرد CSS

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر طراحی رابط کاربری و CSS
• 2. آشنایی با ساختار HTML برای CSS
• 3. انتخاب ویرایشگر کد مناسب
• 4. نصب و راه‌اندازی ابزارهای توسعه وب
• 5. اصول اولیه CSS: انتخابگرها و قوانین
• 6. انتخابگرهای کلاس، شناسه و عنصر
• 7. انتخابگرهای صفات و ترکیبی
• 8. اولویت انتخابگرها (Specificity)
• 9. کادربندی (Box Model): حاشیه، فاصله، حاشیه داخلی و محتوا
• 10. واحدها در CSS: پیکسل، درصد، em، rem
• 11. رنگ‌ها در CSS: نام، کد هگزادسیمال، RGB، RGBA
• 12. فونت‌ها و تایپوگرافی: فونت‌های وب، وزن، سبک
• 13. پس‌زمینه‌ها: رنگ، تصویر، تکرار، موقعیت
• 14. بک‌گراند تکرار شونده و تکرار نشده
• 15. پس‌زمینه با موقعیت دلخواه
• 16. مدیریت پس‌زمینه با چندین تصویر
• 17. استفاده از فونت‌های گوگل (Google Fonts)
• 18. تنظیمات پایه فونت: اندازه، ارتفاع خط، فاصله حروف
• 19. تنظیمات پیشرفته فونت: سایه، تبدیل متن
• 20. استایل‌دهی به لینک‌ها و دکمه‌ها
• 21. قوانین نمایشی (Display): block، inline، inline-block
• 22. قوانین نمایشی: none، flex، grid
• 23. آشنایی با Flexbox برای چیدمان
• 24. چیدمان با Flexbox: محور اصلی و عرضی
• 25. تنظیمات item در Flexbox
• 26. استفاده از Flexbox برای ناوبری
• 27. آشنایی با Grid Layout برای چیدمان پیچیده
• 28. ساخت صفحات با Grid Layout
• 29. تنظیمات item در Grid Layout
• 30. چیدمان سه‌ستونی با Grid
• 31. استفاده از Grid برای فرم‌ها
• 32. مدیریت فضا در Grid
• 33. ایجاد هدر و فوتر واکنش‌گرا
• 34. طراحی واکنش‌گرا (Responsive Design)
• 35. استفاده از Media Queries
• 36. تنظیم layout بر اساس اندازه صفحه
• 37. ایجاد فرم‌های واکنش‌گرا
• 38. طراحی جداول واکنش‌گرا
• 39. بهینه‌سازی تصاویر برای وب
• 40. استفاده از SVG برای گرافیک‌های برداری
• 41. انیمیشن‌ها در CSS: transition
• 42. تنظیمات transition: مدت، تاخیر، تابع زمان‌بندی
• 43. انیمیشن‌های کلیدی (Keyframes)
• 44. ایجاد انیمیشن‌های پیچیده با Keyframes
• 45. انیمیشن‌های چرخش و مقیاس
• 46. انیمیشن‌های محو شدن و جابجایی
• 47. جلوه‌های ویژه: سایه متن و کادر
• 48. استفاده از Pseudo-elements
• 49. ایجاد عناصر مجازی با ::before و ::after
• 50. طراحی منوهای بازشو (Dropdown Menus)
• 51. ساخت اسلایدرهای ساده با CSS
• 52. طراحی کارت‌های محصول
• 53. فرم ثبت‌نام با استایل CSS
• 54. طراحی گالری تصاویر
• 55. ایجاد بخش نظرات کاربران
• 56. صفحه فرود (Landing Page) واکنش‌گرا
• 57. طراحی سربرگ (Header) تعاملی
• 58. طراحی پابرگ (Footer) با لینک‌ها
• 59. استایل‌دهی به لیست‌ها و آیتم‌های لیست
• 60. ایجاد نوارهای پیشرفت (Progress Bars)
• 61. طراحی مودال‌ها (Modals)
• 62. ایجاد آیکون‌ها با Font Awesome
• 63. استفاده از آیکون‌های SVG
• 64. طراحی فرم جستجو
• 65. استایل‌دهی به پیام‌های خطا و موفقیت
• 66. ایجاد چیدمان جعبه‌ای (Card Layout)
• 67. طراحی صفحه پروفایل کاربری
• 68. استایل‌دهی به نمودارها (Charts)
• 69. ایجاد اسلایدشو تصاویر ساده
• 70. طراحی صفحات محصول با جزئیات
• 71. استایل‌دهی به کامپوننت‌های فرم
• 72. بخش معرفی تیم
• 73. طراحی بخش درباره ما
• 74. استایل‌دهی به فوتر با نقشه
• 75. ایجاد منوی ناوبری افقی
• 76. طراحی صفحه تماس با ما
• 77. استایل‌دهی به کامپوننت‌های تگ
• 78. ایجاد لیست محصولات با فیلتر
• 79. طراحی گالری ویدئو
• 80. استایل‌دهی به کامپوننت‌های دکمه‌های رادیویی
• 81. ساخت صفحه پرسش و پاسخ
• 82. ایجاد بخش مشتریان ما
• 83. طراحی تقویم ساده
• 84. استایل‌دهی به کامپوننت‌های چک‌باکس
• 85. ایجاد اسلایدر نظرات
• 86. طراحی صفحه ثبت‌نام دوره
• 87. استایل‌دهی به کامپوننت‌های فیلد ورودی
• 88. ساخت صفحه جزئیات رویداد
• 89. ایجاد بخش همکاران
• 90. طراحی فوتر با فرم اشتراک خبرنامه
• 91. استایل‌دهی به کامپوننت‌های انتخاب‌گر تاریخ
• 92. ایجاد اسلایدر نمونه کارها
• 93. طراحی صفحه گزارش
• 94. استایل‌دهی به کامپوننت‌های انتخاب‌گر زمان
• 95. ساخت صفحه مقایسه محصولات
• 96. ایجاد بخش شرکا
• 97. طراحی فوتر با لینک شبکه‌های اجتماعی
• 98. استایل‌دهی به کامپوننت‌های Slider
• 99. ایجاد اسلایدر اخبار
• 100. طراحی صفحه پرسش‌های متداول