فلش‌کارت‌های آموزشی مبانی کاربردی CSS برای طراحی رابط کاربری وب

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

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

عنوان دوره: دوره مبانی کاربردی CSS برای طراحی رابط کاربری وب

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

موضوع میانی: طراحی و توسعه وب‌سایت

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

• 1. مقدمه‌ای بر زبان CSS و جایگاه آن در طراحی وب
• 2. آشنایی با ساختار و سینتکس CSS
• 3. نحوه پیوند دادن فایل‌های CSS به HTML
• 4. انتخابگرهای CSS: انتخاب عناصر HTML
• 5. انتخابگرهای ساده: تگ، کلاس و آیدی
• 6. انتخابگرهای ترکیبی: فرزند، والد و همسایه
• 7. انتخابگرهای صفات: فیلتر کردن عناصر بر اساس صفات
• 8. انتخابگرهای شبه‌کلاس‌ها: وضعیت‌های پویا برای عناصر
• 9. انتخابگرهای شبه‌المان‌ها: استایل‌دهی به بخش‌های خاصی از عناصر
• 10. اولویت‌بندی قوانین CSS: اهمیت ترتیب و وزن انتخابگرها
• 11. خاصیت (Property) و مقدار (Value) در CSS
• 12. رنگ‌ها در CSS: مقادیر هگزادسیمال، RGB و نام رنگ‌ها
• 13. شفافیت و کانال آلفا در رنگ‌ها
• 14. پس‌زمینه‌ها: رنگ، تصویر و تکرار پس‌زمینه
• 15. تنظیم موقعیت و اندازه تصاویر پس‌زمینه
• 16. حاشیه‌ها (Borders): ضخامت، سبک و رنگ
• 17. فضای داخلی (Padding): فاصله بین محتوا و حاشیه
• 18. فاصله خارجی (Margin): فاصله بین عناصر
• 19. مدل جعبه‌ای (Box Model): درک چیدمان عناصر
• 20. خاصیت `display`: کنترل نحوه نمایش عناصر (block, inline, inline-block)
• 21. خاصیت `position`: تعیین موقعیت عناصر (static, relative, absolute, fixed, sticky)
• 22. لایه‌بندی با `float` و `clear`
• 23. خاصیت `overflow`: مدیریت محتوای خارج از محدوده
• 24. خاصیت `width` و `height`: کنترل ابعاد عناصر
• 25. حداقل و حداکثر عرض و ارتفاع
• 26. خاصیت `box-sizing`: تغییر رفتار مدل جعبه‌ای
• 27. تایپوگرافی در CSS: فونت‌ها و اندازه‌ها
• 28. تنظیم خانواده فونت (font-family)
• 29. اندازه فونت (font-size) و وزن فونت (font-weight)
• 30. سبک فونت (font-style) و تزئینات فونت (text-decoration)
• 31. فاصله بین خطوط (line-height) و فاصله حروف (letter-spacing)
• 32. تنظیم تراز متن (text-align) و تورفتگی متن (text-indent)
• 33. رنگ متن (color)
• 34. خاصیت `text-transform`: تغییر حالت حروف (uppercase, lowercase, capitalize)
• 35. لیست‌ها و مارکرها در CSS
• 36. استایل‌دهی به لیست‌های مرتب و نامرتب
• 37. استفاده از تصاویر به عنوان مارکر لیست
• 38. تنظیم موقعیت مارکر لیست
• 39. جداول در CSS: استایل‌دهی به داده‌های جدولی
• 40. تنظیم عرض و ارتفاع ستون‌ها و ردیف‌ها
• 41. حاشیه‌ها و فضاهای داخلی در جداول
• 42. ادغام سلول‌ها (colspan, rowspan)
• 43. استایل‌دهی به سلول‌های خاص جدول
• 44. فرم‌ها در CSS: استایل‌دهی به عناصر ورودی
• 45. استایل‌دهی به فیلدهای متنی، دکمه‌ها و چک‌باکس‌ها
• 46. تنظیم حاشیه‌ها و پس‌زمینه‌های عناصر فرم
• 47. استایل‌دهی به برچسب‌های فرم (labels)
• 48. کنترل ظاهر عناصر `select` و `textarea`
• 49. انیمیشن‌ها در CSS: ایجاد حرکت در رابط کاربری
• 50. مفهوم `keyframes` برای تعریف فریم‌های انیمیشن
• 51. اعمال انیمیشن‌ها به عناصر: `animation-name`, `animation-duration`
• 52. کنترل تکرار و تاخیر انیمیشن: `animation-iteration-count`, `animation-delay`
• 53. تنظیم جهت و وضعیت نهایی انیمیشن: `animation-direction`, `animation-fill-mode`
• 54. توابع زمان‌بندی انیمیشن (animation-timing-function)
• 55. انتقال‌ها (Transitions): ایجاد تغییرات نرم بین وضعیت‌ها
• 56. تعریف ویژگی‌های قابل انتقال
• 57. مدت زمان و تاخیر انتقال
• 58. توابع زمان‌بندی انتقال
• 59. خاصیت `transition-property` و `transition-duration`
• 60. خاصیت `transition-timing-function` و `transition-delay`
• 61. طراحی واکنش‌گرا (Responsive Design)
• 62. مفهوم Viewport و تنظیم آن
• 63. استفاده از واحدهای نسبی: `em`, `rem`, `%`, `vw`, `vh`
• 64. مدیا کوئری‌ها (Media Queries): اعمال استایل بر اساس ویژگی‌های دستگاه
• 65. استفاده از مدیا کوئری‌ها برای اندازه‌های مختلف صفحه
• 66. طراحی موبایل اول (Mobile-First Design)
• 67. استفاده از Flexbox برای چیدمان انعطاف‌پذیر
• 68. مفهوم کانتینر فلکس و آیتم‌های فلکس
• 69. تنظیم جهت و ترتیب آیتم‌ها در Flexbox
• 70. ترازبندی آیتم‌ها در محور اصلی و متقاطع
• 71. اجازه دادن به آیتم‌ها برای شکستن به خطوط جدید
• 72. استفاده از Grid Layout برای چیدمان دو بعدی
• 73. مفهوم کانتینر گرید و آیتم‌های گرید
• 74. تعریف خطوط و ستون‌های گرید
• 75. تنظیم اندازه و فضای سلول‌های گرید
• 76. ترازبندی آیتم‌ها در گرید
• 77. مفاهیم پیشرفته‌تر CSS
• 78. متغیرهای CSS (Custom Properties)
• 79. استفاده از متغیرها برای مدیریت مقادیر تکراری
• 80. توابع CSS (Functions): `calc()`, `url()`, `linear-gradient()`
• 81. افکت‌های بصری: `box-shadow`, `text-shadow`
• 82. فیلترهای CSS (CSS Filters)
• 83. استایل‌دهی به عناصر SVG
• 84. مقدمه‌ای بر فریم‌ورک‌های CSS (مانند Bootstrap یا Tailwind CSS)
• 85. نحوه استفاده از کلاس‌های از پیش تعریف شده
• 86. سفارشی‌سازی فریم‌ورک‌ها
• 87. بهینه‌سازی عملکرد CSS
• 88. کاهش حجم فایل‌های CSS
• 89. استفاده از انتخابگرهای کارآمد
• 90. مدیریت و سازماندهی کدهای CSS بزرگ
• 91. ملاحظات دسترسی‌پذیری (Accessibility) در CSS
• 92. استفاده از کنتراست مناسب رنگ‌ها
• 93. قابلیت ناوبری با کیبورد
• 94. نکات مهم در طراحی رابط کاربری وب با CSS
• 95. ایجاد رابط‌های کاربری کاربرپسند و جذاب
• 96. آشنایی با اصول طراحی UI/UX در CSS
• 97. پروژه‌های عملی برای تمرین CSS
• 98. ساخت یک صفحه فرود (Landing Page) با CSS
• 99. طراحی یک فرم تماس واکنش‌گرا
• 100. ایجاد یک گالری تصاویر واکنش‌گرا