کتاب صوتی آموزش جامع CSS3 برای طراحی صفحات وب مدرن

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

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

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

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

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

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

• 1. آشنایی با CSS: زبان استایل‌دهی صفحات وب
• 2. تاریخچه و تکامل CSS
• 3. CSS چیست و چرا اهمیت دارد؟
• 4. مفاهیم پایه CSS: انتخابگرها، خصوصیات و مقادیر
• 5. نصب و راه‌اندازی ابزارهای توسعه وب
• 6. اولین استایل‌های CSS: اعمال رنگ و فونت
• 7. نحوه اتصال فایل‌های CSS به HTML
• 8. CSS داخلی، خارجی و درون‌خطی
• 9. انتخابگرهای پایه: تگ، کلاس و ID
• 10. ترکیب انتخابگرها برای دقت بیشتر
• 11. انتخابگرهای خصوصیت (Attribute Selectors)
• 12. انتخابگرهای شبه‌کلاس (Pseudo-classes)
• 13. انتخابگرهای شبه‌عنصر (Pseudo-elements)
• 14. اهمیت ترتیب و اولویت انتخابگرها (Specificity)
• 15. مدیریت خصوصیات: وراثت (Inheritance)
• 16. مقادیر CSS: واحدها (Units) و فرمت‌ها
• 17. واحد طول: پیکسل، em، rem، vw، vh
• 18. واحد زاویه: deg، rad، grad
• 19. واحد زمان: s، ms
• 20. واحد رنگ: نام رنگ، HEX، RGB، RGBA
• 21. واحد درصد (%)
• 22. خاصیت `color` و `background-color`
• 23. تنظیم رنگ متن و پس‌زمینه
• 24. استفاده از مقادیر رنگی شفاف (RGBA)
• 25. تنظیم فونت: `font-family` و `font-size`
• 26. تنظیم وزن و سبک فونت: `font-weight` و `font-style`
• 27. خصوصیات مربوط به متن: `text-align`، `text-decoration`
• 28. مدیریت فواصل بین خطوط و کاراکترها
• 29. جعبه مدل (Box Model) در CSS
• 30. مفهوم `content`, `padding`, `border`, `margin`
• 31. تنظیم `padding` برای فواصل داخلی
• 32. تنظیم `border` برای حاشیه‌ها
• 33. تنظیم `margin` برای فواصل خارجی
• 34. تاثیر `box-sizing` بر جعبه مدل
• 35. طراحی طرح‌بندی صفحات وب با CSS
• 36. مفهوم `display`: `block`, `inline`, `inline-block`
• 37. کاربرد `display` در چیدمان عناصر
• 38. استفاده از `float` برای چیدمان ستونی
• 39. پاکسازی فلوت‌ها (`clear`)
• 40. معرفی Flexbox برای طرح‌بندی انعطاف‌پذیر
• 41. اصول و مفاهیم Flexbox
• 42. خصوصیات Flex Container
• 43. خصوصیات Flex Item
• 44. کاربرد Flexbox در طراحی هدر و فوتر
• 45. معرفی Grid Layout برای طرح‌بندی شبکه‌ای
• 46. اصول و مفاهیم Grid Layout
• 47. خصوصیات Grid Container
• 48. خصوصیات Grid Item
• 49. مقایسه Flexbox و Grid Layout
• 50. طراحی ریسپانسیو (Responsive Design)
• 51. مفهوم و اهمیت طراحی واکنش‌گرا
• 52. استفاده از واحدهای نسبی
• 53. استفاده از Media Queries
• 54. تعریف نقاط شکست (Breakpoints)
• 55. تنظیم چیدمان بر اساس اندازه صفحه
• 56. بهینه‌سازی تصاویر برای وب
• 57. مدیریت فرم‌ها با CSS
• 58. استایل‌دهی عناصر فرم: `input`, `textarea`, `button`
• 59. استفاده از شبه‌کلاس‌ها برای وضعیت فرم
• 60. افکت‌ها و انیمیشن‌ها در CSS
• 61. معرفی ترنزیشن‌ها (Transitions)
• 62. تنظیم خصوصیات ترنزیشن
• 63. معرفی انیمیشن‌ها (Animations)
• 64. فریم‌های کلیدی (Keyframes)
• 65. ایجاد انیمیشن‌های ساده
• 66. مدیریت انیمیشن‌ها
• 67. طراحی دکمه‌های جذاب با CSS
• 68. استفاده از گرادیان‌ها در پس‌زمینه
• 69. افزودن سایه به عناصر (`box-shadow`)
• 70. افزودن سایه به متن (`text-shadow`)
• 71. نکات پیشرفته در CSS
• 72. استفاده از متغیرها در CSS (CSS Variables)
• 73. مفهوم `calc()` برای محاسبات داینامیک
• 74. استفاده از Pseudo-elements پیشرفته
• 75. طراحی ناوبری (Navigation) با CSS
• 76. بهینه‌سازی عملکرد CSS
• 77. فشرده‌سازی فایل‌های CSS
• 78. نکات امنیتی در CSS (محدود به موارد عمومی)
• 79. مقدمه‌ای بر فریم‌ورک‌های CSS (اختیاری و با احتیاط)
• 80. معرفی Bootstrap (با تأکید بر چارچوب رسمی)
• 81. معرفی Tailwind CSS (با تأکید بر چارچوب رسمی)
• 82. کاربرد CSS در پروژه‌های واقعی
• 83. تمرین عملی: طراحی یک صفحه فرود (Landing Page)
• 84. تمرین عملی: طراحی یک وبلاگ ساده
• 85. تمرین عملی: ساخت یک گالری تصاویر ریسپانسیو
• 86. مرور و جمع‌بندی مباحث CSS3
• 87. آینده CSS و استانداردهای جدید
• 88. منابع بیشتر برای یادگیری CSS