دوره CSS for Event Websites همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب CSS for Event Websites

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه و مبانی CSS
• 2. نقش CSS در وب‌سایت‌های رویداد
• 3. تفاوت CSS Inline، Internal و External
• 4. ساختار یک قانون CSS: انتخابگر، خصوصیت، مقدار
• 5. نحوه کامنت‌گذاری در CSS
• 6. تنظیم محیط توسعه برای CSS
• 7. استفاده از ابزارهای توسعه‌دهنده مرورگر (DevTools)
• 8. آشنایی با مفهوم Cascade و Specificity
• 9. آشنایی با مفهوم ارث‌بری (Inheritance)
• 10. انتخابگرهای پایه: Element, Class, ID
• 11. انتخابگرهای ترکیبی (Combinators)
• 12. گروه‌بندی انتخابگرها و انتخابگر عمومی (*)
• 13. انتخابگرهای صفت (Attribute Selectors)
• 14. شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 15. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 16. شبه‌المان‌ها (Pseudo-elements): ::before, ::after
• 17. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 18. خصوصیت box-sizing: content-box در مقابل border-box
• 19. واحدها در CSS: px, em, rem
• 20. واحدهای Viewport: vw, vh, vmin, vmax
• 21. کار با رنگ‌ها: Hex, RGB, RGBA, HSL
• 22. استایل‌دهی به پس‌زمینه: background-color و background-image
• 23. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 24. گرادینت‌های پس‌زمینه: خطی و شعاعی
• 25. استایل‌دهی به متون: font-family, font-size, color
• 26. تنظیمات فونت: font-weight, font-style, text-decoration
• 27. تراز و فاصله متون: text-align, line-height, letter-spacing
• 28. استفاده از فونت‌های وب (Google Fonts)
• 29. استایل‌دهی به لیست‌ها برای ساخت برنامه‌های رویداد
• 30. استایل‌دهی به لینک‌ها و حالات مختلف آن
• 31. خصوصیت display: block, inline, inline-block
• 32. کنترل ابعاد: width, height, min/max-width, min/max-height
• 33. استایل‌دهی به حاشیه‌ها (Borders) و گوشه‌های گرد (border-radius)
• 34. ایجاد سایه برای عناصر با box-shadow
• 35. کنترل سرریز محتوا: overflow
• 36. مقدمه‌ای بر Flexbox: محور اصلی و متقاطع
• 37. ایجاد یک Flex Container با display: flex
• 38. کنترل چیدمان در محور اصلی با justify-content
• 39. کنترل چیدمان در محور متقاطع با align-items
• 40. تنظیم چند خطی بودن با flex-wrap
• 41. کنترل آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 42. خصوصیت کوتاه‌نویسی flex
• 43. تغییر ترتیب آیتم‌ها با order
• 44. مقدمه‌ای بر CSS Grid: تعریف ستون‌ها و ردیف‌ها
• 45. ایجاد یک Grid Container با display: grid
• 46. تعریف ترک‌ها با grid-template-columns و grid-template-rows
• 47. استفاده از واحد fr برای ترک‌های انعطاف‌پذیر
• 48. موقعیت‌دهی آیتم‌ها در گرید بر اساس خطوط
• 49. ادغام سلول‌ها با grid-column و grid-row
• 50. ایجاد فاصله بین آیتم‌ها با gap
• 51. نام‌گذاری خطوط و نواحی در گرید
• 52. چیدمان با position: static, relative, absolute
• 53. چیدمان با position: fixed برای هدرهای چسبان
• 54. کنترل لایه‌ها روی هم با z-index
• 55. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 56. متا تگ Viewport
• 57. مفهوم Mobile-First در طراحی
• 58. مقدمه‌ای بر Media Queries
• 59. تعیین نقاط شکست (Breakpoints) رایج
• 60. ایجاد تصاویر واکنش‌گرا
• 61. تایپوگرافی واکنش‌گرا با clamp()
• 62. ساخت منوی ناوبری (Navigation) واکنش‌گرا
• 63. تست واکنش‌گرایی در مرورگرها
• 64. استایل‌دهی به بخش Hero و فراخوان به عمل (CTA)
• 65. طراحی تایمر شمارش معکوس رویداد
• 66. ساخت جدول زمان‌بندی (Agenda) رویداد با Grid
• 67. طراحی کارت‌های معرفی سخنرانان (Speaker Cards)
• 68. استایل‌دهی به بخش لوگوی حامیان مالی (Sponsors)
• 69. طراحی بخش قیمت‌گذاری و بلیت‌ها (Pricing Tiers)
• 70. استایل‌دهی به فرم‌های ثبت‌نام و تماس
• 71. سفارشی‌سازی Inputها، Textarea و Buttonها
• 72. سفارشی‌سازی Checkboxها و Radio Buttonها
• 73. ایجاد گالری تصاویر برای رویدادهای گذشته
• 74. استایل‌دهی به بخش نقشه و محل برگزاری
• 75. طراحی استایل‌های مختلف برای دکمه‌ها
• 76. طراحی بخش نظرات شرکت‌کنندگان (Testimonials)
• 77. طراحی فوتر وب‌سایت رویداد
• 78. ایجاد بخش سوالات متداول (FAQ) آکاردئونی
• 79. مقدمه‌ای بر Transitionها برای ایجاد افکت‌های نرم
• 80. کنترل زمان‌بندی و تاخیر در Transitionها
• 81. کار با خصوصیت transform: translate, rotate, scale
• 82. ترکیب چندین transform
• 83. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 84. اعمال انیمیشن‌ها: animation-name, duration, iteration-count
• 85. ایجاد افکت‌های هاور خلاقانه
• 86. استفاده از فیلترها: blur, brightness, grayscale
• 87. ایجاد اشکال خلاقانه با clip-path
• 88. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 89. استفاده از تابع calc() برای محاسبات پویا
• 90. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 91. متدولوژی نام‌گذاری BEM
• 92. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass
• 93. استفاده از Nesting و Variables در Sass
• 94. ملاحظات دسترسی‌پذیری (Accessibility): prefers-reduced-motion
• 95. بهینه‌سازی عملکرد CSS
• 96. سازگاری بین مرورگرها و پیشوندهای فروشنده (Vendor Prefixes)
• 97. پروژه نهایی: ساخت کامل صفحه اصلی یک وب‌سایت رویداد
• 98. **طراحی واکنش‌گرا (Responsive Design) با CSS: Grid و Flexbox برای چیدمان المان‌ها در اندازه‌های مختلف صفحه نمایش**
• 99. **انیمیشن و ترنزیشن‌های CSS: جذاب‌سازی بصری وب‌سایت‌های رویداد و بهبود تجربه کاربری**
• 100. **بهینه‌سازی CSS برای عملکرد بهتر: فشرده‌سازی، Minify کردن و کاهش حجم فایل‌های CSS**