فلش‌کارت‌های آموزشی CSS for Urban Planning

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

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

عنوان دوره: دوره CSS for Urban Planning

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

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

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

• 1. مقدمه‌ای بر CSS و جایگاه آن در طراحی شهری
• 2. چرا CSS برای برنامه‌ریزی شهری مهم است؟
• 3. نصب و راه‌اندازی ابزارهای مورد نیاز (ویرایشگر کد، مرورگر)
• 4. اولین گام‌ها با CSS: اتصال CSS به HTML
• 5. انتخاب‌گرهای پایه: تگ، کلاس، آیدی
• 6. انتخاب‌گرهای پیشرفته‌تر: صفات (Attributes)
• 7. انتخاب‌گرهای شبه‌کلاس (Pseudo-classes)
• 8. انتخاب‌گرهای شبه‌المان (Pseudo-elements)
• 9. نحوه اولویت‌بندی انتخاب‌گرها (Specificity)
• 10. قانون ارث‌بری (Inheritance) در CSS
• 11. استفاده از فایل‌های CSS خارجی، داخلی و درون‌خطی
• 12. ساختار CSS: خواص (Properties) و مقادیر (Values)
• 13. واحدها در CSS: پیکسل، درصد، em، rem، vw، vh
• 14. تنظیم رنگ: مقادیر رنگی (نام، هگز، RGB، HSL)
• 15. پس‌زمینه (Background): رنگ، تصویر، تکرار، موقعیت، اندازه
• 16. مدیریت متن: فونت (Font-family, size, weight, style)
• 17. ترازبندی متن (Text-align) و تورفتگی (Text-indent)
• 18. مدیریت فاصله خطوط (Line-height) و فاصله‌گذاری حروف (Letter-spacing)
• 19. مدیریت فاصله کلمات (Word-spacing) و دکوراسیون متن (Text-decoration)
• 20. مدیریت سایه متن (Text-shadow)
• 21. خواص جعبه‌ای (Box Model): محتوا، padding، border، margin
• 22. تنظیم حاشیه‌ها (Margin) و فاصله داخلی (Padding)
• 23. تنظیم حاشیه‌های مرزی (Border): عرض، سبک، رنگ
• 24. قوانین مخفی کردن عناصر (Display: none, block, inline, inline-block)
• 25. خاصیت Position: static, relative, absolute, fixed, sticky
• 26. مدیریت چیدمان با Float و Clear
• 27. استفاده از Flexbox برای چیدمان انعطاف‌پذیر
• 28. مفاهیم اصلی Flexbox: container و items
• 29. خواص Flexbox برای container: justify-content, align-items, flex-direction, flex-wrap
• 30. خواص Flexbox برای items: order, flex-grow, flex-shrink, flex-basis, align-self
• 31. استفاده از CSS Grid برای چیدمان دو بعدی
• 32. مفاهیم اصلی CSS Grid: container و items
• 33. خواص CSS Grid برای container: display, grid-template-columns, grid-template-rows, grid-gap
• 34. خواص CSS Grid برای items: grid-column, grid-row, justify-self, align-self
• 35. طراحی ریسپانسیو (Responsive Design): مفهوم و اهمیت
• 36. استفاده از Media Queries برای طراحی ریسپانسیو
• 37. تنظیم Viewport برای دستگاه‌های مختلف
• 38. نکات کلیدی در طراحی ریسپانسیو برای نقشه‌های شهری
• 39. مدیریت ابعاد تصاویر و ویدیوها در طرح‌های شهری
• 40. تکنیک‌های انتقال (Transitions) برای انیمیشن‌های ساده
• 41. انتقال خواص CSS (Transition-property, duration, timing-function, delay)
• 42. استفاده از انیمیشن‌ها (Animations) با @keyframes
• 43. ساخت انیمیشن‌های پیچیده‌تر با @keyframes
• 44. مدیریت انیمیشن‌ها: animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode
• 45. استفاده از Transform برای تغییر شکل عناصر
• 46. انتقال، چرخش، مقیاس‌بندی و کج کردن با Transform
• 47. استفاده از CSS Variables (Custom Properties) برای مدیریت مقادیر
• 48. مزایای استفاده از CSS Variables در پروژه‌های بزرگ
• 49. طراحی جداول برای نمایش داده‌های شهری
• 50. استایل‌دهی به فرم‌ها و عناصر ورودی
• 51. کنترل ظاهر عناصر تعاملی (دکمه‌ها، لینک‌ها)
• 52. نکات تخصصی CSS برای نمایش اطلاعات جغرافیایی
• 53. استفاده از SVG در CSS برای گرافیک‌های وکتوری
• 54. مدیریت عناصر چند رسانه‌ای (تصاویر، ویدیوها) در طرح‌های شهری
• 55. استایل‌دهی به انیمیشن‌های مبتنی بر جاوا اسکریپت با CSS
• 56. مقدمه‌ای بر فریم‌ورک‌های CSS (Bootstrap, Tailwind CSS)
• 57. کاربرد فریم‌ورک‌ها در تسریع توسعه طرح‌های شهری
• 58. استفاده از Grid System در فریم‌ورک‌ها
• 59. طراحی ریسپانسیو با استفاده از کامپوننت‌های فریم‌ورک
• 60. نکات پیشرفته در فریم‌ورک‌ها برای طرح‌های شهری
• 61. بهینه‌سازی عملکرد CSS (CSS Performance Optimization)
• 62. کاهش حجم فایل‌های CSS
• 63. استفاده از ابزارهای بررسی عملکرد CSS
• 64. مدیریت رنگ‌های برند و هویتی در طرح‌های شهری
• 65. نکات دسترسی‌پذیری (Accessibility) در CSS
• 66. اطمینان از خوانایی و کنتراست مناسب
• 67. استایل‌دهی برای صفحه‌خوان‌ها (Screen Readers)
• 68. مفهوم و کاربرد CSS Preprocessors (Sass, Less)
• 69. نحو و امکانات Sass: متغیرها، توابع، Mixins
• 70. نحو و امکانات Less
• 71. کامپایل کردن Sass/Less به CSS
• 72. استفاده از CSS Modules برای مدیریت بهتر استایل‌ها
• 73. اصول معماری CSS (CSS Architecture): BEM, SMACSS, OOCSS
• 74. پیاده‌سازی BEM در پروژه‌های برنامه‌ریزی شهری
• 75. استفاده از SMACSS برای سازماندهی CSS
• 76. اصول OOCSS و تکرارپذیری در استایل‌ها
• 77. مدیریت تم‌ها (Themes) در CSS
• 78. ایجاد حالت‌های مختلف برای عناصر (Hover, Focus, Active)
• 79. مدیریت پنجره‌های Modal و Pop-up
• 80. استایل‌دهی به نقشه‌های تعاملی (Interactive Maps)
• 81. نمایش لایه‌های اطلاعاتی مختلف بر روی نقشه
• 82. استفاده از Selectors برای انتخاب مناطق خاص بر روی نقشه
• 83. استایل‌دهی به پین‌ها و نشانگرهای نقشه
• 84. مدیریت سبک‌های مختلف نقشه (Map Styles)
• 85. تکنیک‌های پیشرفته نمایش داده‌های مکانی با CSS
• 86. استفاده از CSS برای ایجاد نمودارها و گراف‌های ساده
• 87. مدیریت عناصر پیچیده مانند فیلترها و اسلایدرها
• 88. استایل‌دهی به منوهای ناوبری پیشرفته (Navigation Menus)
• 89. استایل‌دهی به پلتفرم‌های موبایل در طرح‌های شهری
• 90. بهینه‌سازی CSS برای سرعت بارگذاری وب‌سایت‌ها
• 91. مدیریت فونت‌های سفارشی (Custom Fonts)
• 92. نکات مربوط به طراحی با مقیاس‌های مختلف (Scalable Design)
• 93. استفاده از CSS برای انیمیشن‌های Lottie
• 94. ساخت انیمیشن‌های پیچیده با CSS و SVG
• 95. مدیریت زوایای دید و پرسپکتیو در طراحی
• 96. مفهوم و کاربرد CSS-in-JS
• 97. مقدمه‌ای بر کامپوننت‌ها و استایل‌دهی آن‌ها
• 98. نکات مربوط به تست و دیباگ کردن CSS
• 99. اصول نام‌گذاری کلاس‌ها و آیدی‌ها (Naming Conventions)
• 100. پروژه‌های عملی: طراحی یک نقشه شهری تعاملی با CSS