فلش‌کارت‌های آموزشی CSS for Public Understanding of Science

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

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

عنوان دوره: دوره CSS for Public Understanding of Science

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

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

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

• 1. مقدمه‌ای بر CSS: چرا برای ترویج علم حیاتی است؟
• 2. نقش HTML، CSS و JavaScript در وب‌سایت‌های علمی
• 3. CSS چیست؟ زبان استایل‌دهی به دانش
• 4. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 5. ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 6. راه‌اندازی محیط کار و اولین فایل CSS شما
• 7. استفاده از کامنت برای مستندسازی کدهای CSS علمی
• 8. آشنایی با ابزارهای توسعه‌دهنده مرورگر برای دیباگ کردن
• 9. درک مفهوم آبشار (The Cascade)
• 10. اولویت‌بندی قوانین با مفهوم Specificity
• 11. وراثت (Inheritance) و چگونگی کنترل آن
• 12. انتخابگرهای پایه: تگ، کلاس و شناسه (ID)
• 13. انتخابگرهای ترکیبی برای هدف‌گیری دقیق عناصر
• 14. انتخابگر عمومی (*) و کاربردهای آن در طراحی اولیه
• 15. گروه‌بندی انتخابگرها برای نوشتن کد بهینه‌تر
• 16. مدل جعبه‌ای (Box Model): بنیان بصری تمام عناصر
• 17. خصوصیت margin برای ایجاد فضای خارجی اطراف عناصر
• 18. خصوصیت padding برای ایجاد فضای داخلی در عناصر
• 19. خصوصیت border برای قاب‌بندی داده‌ها و نقل‌قول‌ها
• 20. کنترل ابعاد با خصوصیت‌های width و height
• 21. واحدهای مطلق و نسبی: px در مقابل em, rem و درصد
• 22. استایل‌دهی به متن: خصوصیت color
• 23. انتخاب فونت مناسب برای خوانایی علمی با font-family
• 24. تنظیم اندازه فونت برای ایجاد سلسله مراتب بصری با font-size
• 25. تأکید بر مفاهیم کلیدی با font-weight و font-style
• 26. بهبود خوانایی متون طولانی با line-height و letter-spacing
• 27. استایل‌دهی به لیست‌ها برای نمایش مراحل و یافته‌ها
• 28. استایل‌دهی به لینک‌ها و منابع (References)
• 29. کار با رنگ‌ها: مدل‌های HEX، RGB و RGBA
• 30. استفاده از HSL و HSLA برای ساخت پالت‌های رنگی علمی
• 31. تنظیم رنگ پس‌زمینه با background-color
• 32. استفاده از تصاویر پس‌زمینه برای ایجاد بافت و زمینه
• 33. کنترل تکرار و موقعیت تصاویر پس‌زمینه
• 34. ایجاد گرادینت‌های خطی و شعاعی برای پس‌زمینه‌های جذاب
• 35. خصوصیت box-sizing: border-box برای محاسبات آسان‌تر
• 36. درک خصوصیت display: block, inline و inline-block
• 37. خصوصیت position: static و relative
• 38. موقعیت‌دهی مطلق (absolute) برای عناصر شناور
• 39. موقعیت‌دهی ثابت (fixed) برای هدرها و منوهای ناوبری
• 40. موقعیت‌دهی چسبنده (sticky) برای سایدبارهای تعاملی
• 41. شناورسازی عناصر (float) برای قرار دادن تصاویر در کنار متن
• 42. پاک‌سازی float با تکنیک clearfix
• 43. مقدمه‌ای بر Flexbox: ابزار مدرن چیدمان تک‌بعدی
• 44. مفاهیم Flexbox: کانتینر، آیتم، محور اصلی و متقاطع
• 45. کنترل جهت چیدمان با flex-direction
• 46. توزیع آیتم‌ها در محور اصلی با justify-content
• 47. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 48. چیدمان یک چکیده مقاله علمی با استفاده از Flexbox
• 49. مقدمه‌ای بر CSS Grid: ابزار چیدمان دوبعدی
• 50. مفاهیم Grid: کانتینر، آیتم، ترک، خط و سلول
• 51. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 52. قرار دادن دقیق آیتم‌ها در گرید با grid-column و grid-row
• 53. ایجاد فاصله بین آیتم‌های گرید با gap
• 54. طراحی صفحه اصلی یک وب‌سایت خبری علمی با CSS Grid
• 55. ترکیب Flexbox و Grid برای ساختارهای پیچیده
• 56. چرا طراحی واکنش‌گرا برای ارتباطات علمی ضروری است؟
• 57. متا تگ Viewport و نقش آن در نمایش موبایل
• 58. مقدمه‌ای بر Media Queries: استایل‌دهی بر اساس اندازه صفحه
• 59. نقاط شکست (Breakpoints) رایج برای موبایل، تبلت و دسکتاپ
• 60. استفاده از واحدهای واکنش‌گرا: vw, vh, %
• 61. تایپوگرافی واکنش‌گرا با استفاده از clamp()
• 62. واکنش‌گرا کردن تصاویر و نمودارهای علمی
• 63. رویکرد Mobile-First در طراحی واکنش‌گرا
• 64. نمایش و پنهان‌سازی عناصر در اندازه‌های مختلف صفحه
• 65. پروژه عملی: واکنش‌گرا کردن یک مقاله علمی آنلاین
• 66. مقدمه‌ای بر CSS Transitions برای تعاملات نرم
• 67. خصوصیت‌های transition: property, duration, timing-function, delay
• 68. ایجاد افکت hover برای نمایش تعاریف و اطلاعات تکمیلی
• 69. مقدمه‌ای بر انیمیشن‌های CSS با @keyframes
• 70. خصوصیت‌های animation: name, duration, iteration-count, direction
• 71. انیمیشن‌سازی یک فرآیند ساده علمی (مانند تقسیم سلولی)
• 72. مقدمه‌ای بر CSS Transforms برای دگرگونی عناصر
• 73. تغییر مقیاس (scale) و چرخش (rotate)
• 74. جابجایی (translate) و کج کردن (skew)
• 75. استفاده از Transform برای برجسته‌سازی داده‌ها در یک نمودار
• 76. انتخابگرهای پیشرفته: انتخابگرهای ویژگی (Attribute Selectors)
• 77. انتخابگرهای فرزند و همزاد (Child and Sibling Selectors)
• 78. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 79. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 80. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 81. کاربرد شبه‌عناصر برای افزودن واحدها و آیکون‌ها به داده‌ها
• 82. متغیرهای CSS (Custom Properties) برای مدیریت تم رنگی و ابعاد
• 83. سازماندهی کدهای CSS: مقدمه‌ای بر متدولوژی BEM
• 84. فیلترهای CSS: تنظیم روشنایی، کنتراست و رنگ تصاویر علمی
• 85. کنترل نحوه نمایش تصاویر با object-fit و object-position
• 86. استایل‌دهی جداول داده‌های علمی برای خوانایی بالا
• 87. ایجاد استایل خطوط راه‌راه (Zebra-Striping) برای جداول
• 88. واکنش‌گرا کردن جداول داده برای نمایش در دستگاه‌های کوچک
• 89. ساخت یک نمودار میله‌ای (Bar Chart) ساده فقط با CSS
• 90. استایل‌دهی فرمول‌های ریاضی و نمادهای علمی (sup, sub)
• 91. اهمیت دسترسی‌پذیری (Accessibility) در ترویج علم
• 92. طراحی برای کنتراست بالا جهت بهبود خوانایی
• 93. احترام به تنظیمات کاربر با prefers-reduced-motion
• 94. استایل‌دهی حالت focus برای ناوبری با کیبورد
• 95. کاربرد خصوصیت clip-path برای ایجاد شکل‌های سفارشی
• 96. پروژه عملی: استایل‌دهی یک جدول تناوبی تعاملی
• 97. پروژه عملی: طراحی یک تایم‌لاین از اکتشافات علمی
• 98. پروژه عملی: ساخت کارت‌های اطلاعاتی برای دانشمندان
• 99. مطالعه موردی: تحلیل CSS یک وب‌سایت اینفوگرافیک علمی
• 100. جمع‌بندی: ترکیب آموخته‌ها برای ساخت یک صفحه مقاله کامل و جذاب