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

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

عنوان دوره: CSS for Philanthropy

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

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

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

• 1. مقدمه ای بر CSS و نقش آن در وب
• 2. CSS برای سازمان‌های غیرانتفاعی: چرا CSS مهم است؟
• 3. نحوه استفاده از CSS: درون خطی، داخلی و خارجی
• 4. انتخابگرها (Selectors): مبانی و انواع
• 5. انتخابگرهای عنصر (Element Selectors)
• 6. انتخابگرهای کلاس (Class Selectors)
• 7. انتخابگرهای ID (ID Selectors)
• 8. انتخابگرهای ویژگی (Attribute Selectors)
• 9. انتخابگرهای ترکیبی (Combinator Selectors)
• 10. انتخابگرهای فرزند (Child Selectors)
• 11. انتخابگرهای نوادگان (Descendant Selectors)
• 12. انتخابگرهای مجاور (Adjacent Sibling Selectors)
• 13. انتخابگرهای عمومی (General Sibling Selectors)
• 14. شبه کلاس‌ها (Pseudo-classes)
• 15. شبه عناصر (Pseudo-elements)
• 16. نحوه نوشتن قوانین CSS: ساختار و سینتکس
• 17. واحدها در CSS: پیکسل (px)، اِم (em)، رِم (rem)، درصد (%)
• 18. رنگ‌ها در CSS: نام رنگ، کد هگزادسیمال، RGB، RGBA
• 19. پس زمینه (Background): رنگ، تصویر، تکرار، موقعیت، اندازه
• 20. متن (Text): فونت، اندازه، وزن، سبک، رنگ، تراز
• 21. حاشیه (Border): سبک، رنگ، عرض
• 22. جعبه مدل (Box Model): محتوا، پدینگ، حاشیه، مارجین
• 23. پدینگ (Padding): فاصله داخلی
• 24. مارجین (Margin): فاصله بیرونی
• 25. عرض و ارتفاع (Width & Height)
• 26. نمایش (Display): block، inline، inline-block، none
• 27. موقعیت (Position): static، relative، absolute، fixed، sticky
• 28. زیر و بم (Z-index): کنترل لایه بندی عناصر
• 29. شناور (Float): چیدمان عناصر در کنار هم
• 30. پاکسازی (Clear): جلوگیری از تداخل شناور
• 31. طراحی ریسپانسیو (Responsive Design): مبانی
• 32. نقطه شکست (Breakpoints): تعریف و استفاده
• 33. پرس و جوی رسانه (Media Queries): برای دستگاه‌های مختلف
• 34. طراحی سیال (Fluid Layouts): استفاده از درصدها
• 35. تصاویر ریسپانسیو (Responsive Images): تکنیک‌ها
• 36. واحد viewport: چیستی و کاربردها
• 37. Flexbox: مقدمه و مفاهیم پایه
• 38. Flex Container: خواص اصلی
• 39. Flex Items: خواص اصلی
• 40. جهت (Direction): row، column، row-reverse، column-reverse
• 41. توجیه (Justify Content): flex-start، flex-end، center، space-between، space-around، space-evenly
• 42. تراز (Align Items): flex-start، flex-end، center، stretch، baseline
• 43. تراز کردن محتوا (Align Content): flex-start، flex-end، center، stretch، space-between، space-around
• 44. چینش (Order): تغییر ترتیب عناصر
• 45. انعطاف پذیری (Flex Grow، Flex Shrink، Flex Basis)
• 46. Grid Layout: مقدمه و مفاهیم پایه
• 47. Grid Container: خواص اصلی
• 48. Grid Items: خواص اصلی
• 49. تعریف سطرها و ستون‌ها (Grid Template Rows، Grid Template Columns)
• 50. تعریف فاصله بین سطرها و ستون‌ها (Grid Gap)
• 51. نامگذاری خطوط و نواحی (Grid Template Areas)
• 52. قراردادن عناصر در گرید (Grid Row Start/End، Grid Column Start/End)
• 53. تراز کردن عناصر در گرید (Justify Items، Align Items)
• 54. تراز کردن محتوا در گرید (Justify Content، Align Content)
• 55. ترکیب Flexbox و Grid
• 56. انیمیشن (Animation): انتقال (Transition)
• 57. انیمیشن (Animation): keyframes
• 58. خواص انیمیشن: duration، timing-function، delay، iteration-count، direction
• 59. تبدیل (Transform): translate، rotate، scale، skew
• 60. سایه (Shadow): box-shadow، text-shadow
• 61. فیلترها (Filters): blur، grayscale، sepia، brightness، contrast
• 62. گرادیان (Gradient): خطی و شعاعی
• 63. حالت hover و focus
• 64. نشانگر موس (Cursor)
• 65. فونت‌های سفارشی (Custom Fonts): @font-face
• 66. آیکون‌ها (Icons): Font Awesome، SVG
• 67. ابزارهای CSS: Preprocessors (Sass, Less)
• 68. Sass: متغیرها (Variables)
• 69. Sass: میکس‌این‌ها (Mixins)
• 70. Sass: توابع (Functions)
• 71. Sass: وراثت (Extend)
• 72. Sass: پارتشیال‌ها (Partials) و ماژول‌ها (Modules)
• 73. CSS Reset و Normalize.css
• 74. نامگذاری کلاس‌ها: BEM، SMACSS، OOCSS
• 75. سازگاری مرورگر (Browser Compatibility): مشکلات رایج و راه حل‌ها
• 76. پشتیبانی از مرورگرهای قدیمی (Vendor Prefixes)
• 77. استفاده از کتابخانه‌های CSS: Bootstrap، Materialize
• 78. سفارشی‌سازی کتابخانه‌های CSS
• 79. اجزاء (Components): طراحی و پیاده‌سازی
• 80. استفاده از CSS Modules
• 81. CSS in JS: Styled Components، Emotion
• 82. بهینه سازی CSS: کاهش حجم فایل، فشرده سازی (Minification)
• 83. بررسی و اشکال زدایی CSS: Chrome DevTools
• 84. ارزیابی عملکرد CSS: Lighthouse
• 85. تست CSS: Visual Regression Testing
• 86. طراحی وب در دسترس (Web Accessibility): اصول اولیه
• 87. استانداردهای دسترسی به محتوای وب (WCAG)
• 88. تکنیک‌های دسترسی‌پذیری در CSS
• 89. رنگ و کنتراست: اهمیت و ابزارها
• 90. استفاده از ARIA Attributes
• 91. ایجاد فرم‌های قابل دسترس
• 92. طراحی ناوبری قابل دسترس
• 93. طراحی برای افراد با اختلالات دیداری
• 94. چاپ CSS: طراحی برای چاپ
• 95. استفاده از متغیرهای CSS (CSS Custom Properties)
• 96. محاسبات CSS: calc()
• 97. شکل دهی با CSS: clip-path، shapes
• 98. CSS Houdini: مروری بر قابلیت‌های جدید
• 99. بهترین شیوه‌های کدنویسی CSS
• 100. پروژه‌های عملی: طراحی قالب یک وب سایت غیرانتفاعی