دوره آموزش جامع طراحی ظاهر و چیدمان صفحات وب با CSS همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره آموزش جامع طراحی ظاهر و چیدمان صفحات وب با CSS

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

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

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

• 1. مبانی CSS و جایگاه آن در طراحی وب
• 2. آشنایی با نحو و سینتکس CSS
• 3. انتخاب‌گرهای CSS: اصول و انواع
• 4. انتخاب‌گرهای کلاس و شناسه
• 5. انتخاب‌گرهای خصوصیت و ساختاری
• 6. انتخاب‌گرهای شبه‌کلاس و شبه‌عنصر
• 7. اولویت‌بندی و ارث‌بری در CSS (Cascade)
• 8. خاصیت (Specificity) در انتخاب‌گرها
• 9. قوانین ارث‌بری و تأثیر آن بر ظاهر
• 10. استفاده از واحدهای اندازه‌گیری در CSS
• 11. واحد پیکسل (px) و کاربرد آن
• 12. واحدهای نسبی: em, rem, %
• 13. واحدهای viewport: vw, vh
• 14. مدیریت رنگ‌ها در CSS
• 15. کدهای هگزادسیمال و RGB
• 16. فضاهای رنگی HSL و RGBA
• 17. نام‌گذاری رنگ‌ها و کاربرد آن‌ها
• 18. خواص متنی در CSS
• 19. فونت و خانواده فونت (font-family)
• 20. اندازه فونت (font-size) و وزن فونت (font-weight)
• 21. سبک فونت (font-style) و تزیینات متنی (text-decoration)
• 22. مدیریت فاصله‌گذاری در متن: line-height, letter-spacing
• 23. تراز کردن متن (text-align) و تورفتگی (text-indent)
• 24. مدیریت پس‌زمینه در CSS
• 25. رنگ پس‌زمینه (background-color)
• 26. تصویر پس‌زمینه (background-image)
• 27. تکرار تصویر پس‌زمینه (background-repeat)
• 28. موقعیت تصویر پس‌زمینه (background-position)
• 29. مقیاس تصویر پس‌زمینه (background-size)
• 30. خواص مربوط به جعبه (Box Model)
• 31. محتوا (content)، حاشیه (margin) و padding
• 32. عرض و ارتفاع (width, height)
• 33. حاشیه‌های خارجی (margin) و داخلی (padding)
• 34. اندازه‌گیری جعبه (box-sizing)
• 35. مدیریت چیدمان با CSS (Layout)
• 36. نمایش عناصر: inline, block, inline-block
• 37. خاصیت float و کاربردهای آن
• 38. خاصیت clear و رفع مشکلات float
• 39. استفاده از Flexbox برای چیدمان
• 40. مبانی Flexbox: container و items
• 41. جهت‌دهی (flex-direction)، چیدمان (justify-content) و ترازبندی (align-items)
• 42. انعطاف‌پذیری (flex-grow, flex-shrink, flex-basis)
• 43. استفاده از CSS Grid برای چیدمان
• 44. مبانی Grid: container و items
• 45. تعریف ردیف‌ها (grid-template-rows) و ستون‌ها (grid-template-columns)
• 46. فضاهای گرید (grid-gap)
• 47. موقعیت‌دهی عناصر در گرید
• 48. طراحی واکنش‌گرا (Responsive Design)
• 49. مفهوم طراحی واکنش‌گرا
• 50. استفاده از Media Queries
• 51. تعیین نقاط شکست (Breakpoints)
• 52. تصاویر و رسانه‌های واکنش‌گرا
• 53. مدیریت فرم‌ها با CSS
• 54. استایل‌دهی به فیلدهای ورودی
• 55. استایل‌دهی به دکمه‌ها و برچسب‌ها
• 56. استایل‌دهی به ناحیه متنی
• 57. مدیریت جداول با CSS
• 58. استایل‌دهی به سلول‌ها و ردیف‌ها
• 59. تنظیمات حاشیه و پس‌زمینه جداول
• 60. استایل‌دهی به هدر و فوتر جداول
• 61. انتقال‌ها و تبدیل‌ها در CSS (Transitions & Transformations)
• 62. مفهوم transition و کاربردهای آن
• 63. تنظیمات transition: property, duration, timing-function, delay
• 64. مفهوم transform و انواع آن (translate, rotate, scale, skew)
• 65. ترکیب transform ها
• 66. انیمیشن‌ها در CSS (Animations)
• 67. مفهوم keyframes و ساخت انیمیشن
• 68. تنظیمات انیمیشن: animation-name, duration, iteration-count, timing-function
• 69. تأخیر در انیمیشن (animation-delay)
• 70. کاربرد انیمیشن در طراحی وب
• 71. استفاده از فونت‌های سفارشی (Custom Fonts)
• 72. بارگذاری فونت‌های وب (Web Fonts)
• 73. فرمت‌های فونت (WOFF, WOFF2)
• 74. نحوه استفاده از @font-face
• 75. بهینه‌سازی CSS
• 76. فشرده‌سازی فایل‌های CSS
• 77. حذف کدهای اضافی و بلااستفاده
• 78. اصول کدنویسی تمیز در CSS
• 79. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 80. اهمیت دسترسی‌پذیری در وب
• 81. استفاده از کنتراست مناسب رنگ‌ها
• 82. قابلیت پیمایش با کیبورد
• 83. استایل‌دهی به عناصر فرم برای دسترسی بهتر
• 84. CSS Preprocessors (مقدماتی)
• 85. مفهوم SASS/SCSS و LESS
• 86. متغیرها و توابع در Preprocessors
• 87. تو در تو کردن (Nesting) در Preprocessors
• 88. نکات پیشرفته در CSS
• 89. سایه‌ها (box-shadow, text-shadow)
• 90. گرادیان‌ها (linear-gradient, radial-gradient)
• 91. فیلترها (filter)
• 92. نقش CSS در تجربه کاربری (UX)
• 93. ارتباط CSS با طراحی UI
• 94. تأثیر CSS بر سرعت بارگذاری صفحه
• 95. آشنایی با فریم‌ورک‌های CSS (مقدماتی)
• 96. مفهوم و مزایای فریم‌ورک‌ها
• 97. معرفی اجمالی Bootstrap, Tailwind CSS
• 98. کاربرد عملی CSS در پروژه‌های واقعی
• 99. ساخت یک صفحه وب ساده با CSS
• 100. استایل‌دهی به یک فرم تماس