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

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

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

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

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

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

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

• 1. مقدمه ای بر CSS و نقش آن در طراحی وب
• 2. چرا CSS برای وبسایت های گردشگری ضروری است؟
• 3. مرور کلی بر ساختار HTML (نیازهای پایه)
• 4. روش های افزودن CSS: Inline Style
• 5. روش های افزودن CSS: Internal Style Sheet
• 6. روش های افزودن CSS: External Style Sheet (بهترین روش)
• 7. قواعد نگارش CSS: Syntax و ساختار
• 8. انتخابگرها (Selectors): معرفی و انواع پایه
• 9. اعمال استایل به عناصر با Type Selector
• 10. انتخابگر Class برای گروه بندی عناصر
• 11. انتخابگر ID برای عناصر منحصر به فرد
• 12. کامنت گذاری در CSS برای خوانایی بهتر کد
• 13. مدیریت رنگ ها: foreground و background-color
• 14. مدیریت رنگ ها: RGB, RGBA, HSL, HSLA, Hex
• 15. واحدهای اندازه گیری در CSS: px, em, rem
• 16. واحدهای اندازه گیری در CSS: %, vw, vh, vmin, vmax
• 17. استایل دهی به متن: font-family, font-size, font-weight
• 18. استایل دهی به متن: line-height, letter-spacing, word-spacing
• 19. استایل دهی به متن: text-align, text-decoration, text-transform
• 20. معرفی Box Model: Content, Padding, Border, Margin
• 21. کنترل Margin: فضا دهی خارجی عناصر
• 22. کنترل Padding: فضا دهی داخلی عناصر
• 23. Border: استایل دهی به حاشیه عناصر
• 24. ویژگی display: block, inline, inline-block
• 25. بازنشانی استایل های پیش فرض مرورگر (Reset/Normalize CSS)
• 26. اولویت بندی استایل ها: Specificity
• 27. قوانین Cascade: ارث بری و همپوشانی استایل ها
• 28. استفاده از Inspect Element برای دیباگ CSS
• 29. بهترین روش ها برای سازماندهی فایل های CSS
• 30. مقدمه ای بر جریان عادی سند (Normal Document Flow)
• 31. ویژگی float برای چیدمان عناصر
• 32. پاکسازی float ها (Clearing Floats)
• 33. مفهوم Position: static, relative
• 34. مفهوم Position: absolute, fixed, sticky
• 35. کنترل ترتیب قرارگیری عناصر: z-index
• 36. معرفی Flexbox: چیدمان تک بعدی قدرتمند
• 37. ویژگی های Flex Container: display: flex
• 38. ویژگی های Flex Container: flex-direction, flex-wrap
• 39. ویژگی های Flex Container: justify-content, align-items, align-content
• 40. ویژگی های Flex Item: order, flex-grow, flex-shrink, flex-basis
• 41. ویژگی های Flex Item: align-self
• 42. طراحی یک نوار ناوبری ریسپانسیو با Flexbox
• 43. معرفی CSS Grid Layout: چیدمان دو بعدی
• 44. ویژگی های Grid Container: display: grid
• 45. ویژگی های Grid Container: grid-template-columns, grid-template-rows
• 46. ویژگی های Grid Container: grid-gap, grid-column-gap, grid-row-gap
• 47. ویژگی های Grid Item: grid-column, grid-row, grid-area
• 48. استفاده از Grid Area برای چیدمان های پیچیده
• 49. ترکیب Flexbox و Grid برای طراحی بخش های مختلف صفحه
• 50. مقدمه ای بر طراحی ریسپانسیو (Responsive Design)
• 51. اهمیت طراحی ریسپانسیو برای وبسایت های گردشگری و محیط زیست
• 52. تگ meta viewport و تنظیمات آن
• 53. معرفی Media Queries: اساس طراحی ریسپانسیو
• 54. استفاده از Media Queries برای breakpoints های مختلف
• 55. رویکرد Mobile-First در طراحی ریسپانسیو
• 56. بهینه سازی تصاویر برای ریسپانسیو بودن (Fluid Images)
• 57. تنظیم اندازه فونت ریسپانسیو با واحدهای vw/vh
• 58. پنهان سازی یا نمایش عناصر در دستگاه های مختلف
• 59. تست ریسپانسیو بودن وبسایت در مرورگرها و ابزارهای توسعه
• 60. انتخاب پالت رنگی الهام گرفته از طبیعت و محیط زیست
• 61. استفاده از گرادینت ها (Gradients) برای پس زمینه های طبیعی
• 62. مدیریت تصاویر پس زمینه (background-image, -repeat, -position, -size)
• 63. استایل دهی به لینک ها و دکمه ها برای جذابیت بصری و حس طبیعت
• 64. ایجاد افکت های Hover و Active برای عناصر تعاملی (دکمه های رزرو)
• 65. سایه انداختن به عناصر: box-shadow, text-shadow
• 66. استایل دهی به فرم ها: ورودی ها، دکمه های ارسال (با ظاهر ارگانیک)
• 67. طراحی کارت های اطلاعاتی (Card Design) برای مقاصد گردشگری
• 68. استایل دهی به گالری تصاویر طبیعت و حیات وحش
• 69. فونت های مناسب برای محتوای اطلاعاتی و توضیحات مسیرهای طبیعت گردی
• 70. استفاده از Font Icons (مانند Font Awesome) برای نمایش مسیرها و فعالیت ها
• 71. استایل دهی به لیست ها (سفرنامه ها، چک لیست های طبیعت گردی)
• 72. طراحی صفحات "درباره ما" با رویکرد محیط زیستی و داستان گویی
• 73. استایل دهی به نقشه ها و مکان نماها (Map Styling) برای نمایش مقاصد
• 74. ایجاد افکت های ظریف برای جلب توجه به نکات مهم محیط زیستی و هشدارهای سفر
• 75. معرفی Pseudo-classes (مانند :hover, :focus, :nth-child)
• 76. معرفی Pseudo-elements (مانند ::before, ::after)
• 77. ایجاد افکت های بصری با ::before و ::after
• 78. ترنزیشن ها (Transitions): تغییرات روان بین حالت ها
• 79. ویژگی های Transition: property, duration, timing-function, delay
• 80. ترنسفورم ها (Transforms) 2D: translate, rotate, scale, skew
• 81. ترنسفورم ها (Transforms) 3D: perspective, rotateX, rotateY, translateZ
• 82. انیمیشن ها (Animations): معرفی @keyframes
• 83. ویژگی های Animation: name, duration, timing-function, delay, iteration-count, direction
• 84. استفاده از Custom Properties (CSS Variables) برای مدیریت آسان تر استایل ها
• 85. مزایای CSS Variables در تم سازی وبسایت های بزرگ (مثلاً تغییر تم فصلی)
• 86. فیلترها (Filters) در CSS: blur, brightness, contrast, grayscale
• 87. ویژگی object-fit برای کنترل نمایش تصاویر (مناسب برای گالری ها)
• 88. مفهوم Clip-path برای اشکال هندسی پیچیده و خلاقانه
• 89. بهینه سازی و فشرده سازی CSS برای عملکرد بهتر وبسایت
• 90. مقدمه ای بر دسترسی پذیری وب (Web Accessibility)
• 91. اهمیت دسترسی پذیری برای مخاطبان گسترده (افراد با نیازهای خاص)
• 92. کنتراست رنگی مناسب برای خوانایی بهتر متن و محتوای طبیعت گردی
• 93. استایل دهی برای حالت تمرکز (Focus States) جهت ناوبری با کیبورد
• 94. استفاده صحیح از واحدهای رم (rem) برای مقیاس پذیری فونت و عناصر
• 95. سازماندهی کد CSS با متدولوژی هایی مانند BEM (Block, Element, Modifier)
• 96. مقدمه ای کوتاه بر Preprocessors مانند Sass/Less
• 97. ابزارهای CSS Linting و Code Formatting برای کدهای تمیز
• 98. مدیریت و بهینه سازی تصاویر پس زمینه برای سرعت بارگذاری
• 99. اهمیت سرعت بارگذاری برای تجربه کاربری و SEO در سایت های گردشگری
• 100. طراحی و استایل دهی به Header و Footer سایت گردشگری