فلش‌کارت‌های آموزشی CSS for Social Media Platforms

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

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

عنوان دوره: دوره CSS for Social Media Platforms

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

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

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

• 1. مقدمه ای بر CSS و کاربرد آن در پلتفرم های اجتماعی
• 2. نحوه اتصال CSS به HTML (داخلی، خارجی، خطی)
• 3. انواع انتخابگرها: عنصر، کلاس و ID
• 4. استفاده از انتخابگرهای گروهی و ترکیبی
• 5. مدل جعبه ای (Box Model): Content, Padding, Border, Margin
• 6. تنظیم ابعاد عناصر: Width, Height, min/max-width/height
• 7. مبانی رنگ ها در CSS (نامی، Hex, RGB)
• 8. کار با شفافیت رنگ ها: RGBA, HSLA
• 9. تنظیم پس زمینه عناصر: color, image, repeat, position
• 10. کنترل اندازه تصویر پس زمینه: background-size
• 11. اصول تایپوگرافی: انتخاب فونت (font-family)
• 12. تنظیم اندازه و وزن فونت (font-size, font-weight)
• 13. تراز و ظاهر متن (text-align, line-height, text-decoration)
• 14. استایل دهی به لینک ها (links)
• 15. واحدهای اندازه گیری در CSS (px, em, rem, %)
• 16. واحدهای ویوپورت (vw, vh, vmin, vmax)
• 17. اصول وراثت (Inheritance) در CSS
• 18. مفهوم آبشار (Cascade) و ترتیب اعمال استایل ها
• 19. آشنایی با ارجحیت (Specificity) انتخابگرها
• 20. ابزارهای توسعه دهنده مرورگر برای اشکال زدایی CSS
• 21. خاصیت display: block, inline, inline-block
• 22. مخفی کردن عناصر با display: none و visibility: hidden
• 23. شناور سازی (Floats) و کاربرد آن در طرح بندی
• 24. پاکسازی شناورها (Clearfix) برای جلوگیری از مشکلات طرح بندی
• 25. مبانی موقعیت دهی (Positioning): static, relative
• 26. موقعیت دهی مطلق (absolute) برای قرارگیری دقیق عناصر
• 27. موقعیت دهی ثابت (fixed) برای نوارهای ناوبری چسبنده
• 28. موقعیت دهی چسبنده (sticky) برای هدرها و سایدبارها
• 29. مقدمه ای بر Flexbox: ساختار یک کانتینر انعطاف پذیر
• 30. جهت دهی آیتم ها در Flexbox: flex-direction
• 31. کنترل شکست خط آیتم ها: flex-wrap
• 32. تراز افقی آیتم ها در Flexbox: justify-content
• 33. تراز عمودی آیتم ها در Flexbox: align-items
• 34. تراز گروهی خطوط در Flexbox: align-content
• 35. خواص آیتم های Flexbox: order, flex-grow, flex-shrink, flex-basis
• 36. مقدمه ای بر CSS Grid Layout: ساختار جدولی
• 37. تعریف ستون ها در Grid: grid-template-columns
• 38. تعریف ردیف ها در Grid: grid-template-rows
• 39. تعیین فاصله بین خطوط Grid: grid-gap (grid-column-gap, grid-row-gap)
• 40. مفاهیم اولیه جایگذاری آیتم ها در Grid
• 41. مقدمه ای بر طراحی واکنش گرا (Responsive Design)
• 42. تگ Meta Viewport و اهمیت آن
• 43. اصول Media Queries و کاربرد آن در CSS
• 44. تعریف نقاط شکست (Breakpoints) برای دستگاه های مختلف
• 45. استفاده از min-width و max-width در Media Queries
• 46. رویکرد موبایل-اول (Mobile-First) در طراحی
• 47. ایجاد تصاویر واکنش گرا (Responsive Images)
• 48. تنظیم ویدئوهای واکنش گرا (Responsive Videos)
• 49. تایپوگرافی واکنش گرا (Responsive Typography) با واحدهای نسبی
• 50. سازگاری Flexbox با طراحی واکنش گرا
• 51. سازگاری CSS Grid با طراحی واکنش گرا
• 52. استفاده از توابع min(), max(), clamp() برای واکنش گرایی
• 53. طراحی منوهای ناوبری واکنش گرا
• 54. طراحی فرم های واکنش گرا برای موبایل
• 55. ساخت کارت های واکنش گرا برای پست های شبکه های اجتماعی
• 56. تست و اشکال زدایی طراحی واکنش گرا با ابزارهای مرورگر
• 57. بهینه سازی تصاویر و منابع برای سرعت بارگذاری در موبایل
• 58. سازگاری با جهت گیری صفحه (Orientation)
• 59. نکات طراحی برای نمایشگرهای رتینا (Retina Displays)
• 60. مطالعه موردی: طراحی یک بخش نظرات واکنش گرا
• 61. مقدمه ای بر Transition ها برای انیمیشن های نرم
• 62. خاصیت transition-property و transition-duration
• 63. توابع زمان بندی (transition-timing-function) و تأخیر (transition-delay)
• 64. افکت های Hover و Active با Transition ها
• 65. مقدمه ای بر Transforms: جابجایی (translate)
• 66. چرخش (rotate) عناصر با Transforms
• 67. تغییر اندازه (scale) عناصر با Transforms
• 68. کج کردن (skew) عناصر با Transforms
• 69. transforms سه بعدی: perspective و rotateX/Y/Z (مقدماتی)
• 70. مقدمه ای بر Keyframe Animations
• 71. تعریف Keyframes و انیمیشن های سفارشی
• 72. خواص انیمیشن (animation-name, duration, timing-function, delay)
• 73. کنترل تعداد تکرار و جهت انیمیشن (iteration-count, direction)
• 74. حالت پر شدن انیمیشن (animation-fill-mode)
• 75. استفاده از pseudo-classes: :hover, :focus, :active, :visited
• 76. استفاده از pseudo-elements: ::before, ::after برای افزودن محتوا
• 77. استفاده از pseudo-elements برای تزئینات بصری (مثلاً خطوط زیرین)
• 78. فیلترهای CSS (Filters): blur, grayscale, sepia و غیره
• 79. کار با گرادیان ها (Gradients): خطی (linear)
• 80. کار با گرادیان ها (Gradients): شعاعی (radial)
• 81. متغیرهای CSS (Custom Properties) برای مدیریت استایل ها
• 82. کاربرد متغیرها در تم سازی و Dark Mode
• 83. خاصیت z-index و مدیریت لایه ها (Stacking Context)
• 84. استفاده از object-fit برای کنترل نمایش تصاویر
• 85. حالت های ترکیب پس زمینه (background-blend-mode)
• 86. حالت های ترکیب عناصر (mix-blend-mode)
• 87. اصول نوشتن CSS قابل نگهداری (معرفی BEM)
• 88. CSS و دسترسی پذیری (Accessibility): نکات مهم
• 89. پیاده سازی تم تاریک (Dark Mode) با CSS
• 90. طراحی و استایل دهی کارت های پست (Post Cards) شبکه های اجتماعی
• 91. ساخت یک هدر پروفایل کاربری واکنش گرا
• 92. طراحی یک فید خبری (News Feed) با Flexbox یا Grid
• 93. پیاده سازی یک گالری عکس اینستاگرام مانند با CSS Grid
• 94. استایل دهی به حباب های چت (Chat Bubbles)
• 95. ساخت انباشت آواتارها (Avatar Stack) برای نمایش کاربران
• 96. طراحی دکمه های اشتراک گذاری تعاملی
• 97. استایل دهی به بخش کامنت ها و پاسخ ها
• 98. نکات بهینه سازی عملکرد CSS برای بارگذاری سریعتر
• 99. معرفی ابزارهای مفید و فریمورک های CSS
• 100. پروژه عملی: ساخت یک کامپوننت UI اجتماعی با تمام آموخته ها