کتاب صوتی طراحی وب واکنش‌گرا با CSS3، SASS، Flexbox، Grid و Bootstrap

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

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

عنوان دوره: دوره طراحی وب واکنش‌گرا با CSS3، SASS، Flexbox، Grid و Bootstrap

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

موضوع میانی: طراحی رابط کاربری و تجربه کاربری وب

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

• 1. مقدمه‌ای بر طراحی وب و استانداردهای آن
• 2. تاریخچه مختصر CSS و تحول آن
• 3. اصول اولیه CSS: انتخابگرها، خصوصیات و مقادیر
• 4. مدیریت رنگ‌ها و پس‌زمینه‌ها در CSS
• 5. کار با متن و تایپوگرافی در وب
• 6. قواعد جعبه‌ای (Box Model) در CSS
• 7. چیدمان عناصر با استفاده از Float و Positioning
• 8. معرفی Flexbox و اصول چیدمان انعطاف‌پذیر
• 9. کار با Flex Container و Flex Items
• 10. جهت‌دهی در Flexbox و تنظیمات اصلی
• 11. نحوه توزیع فضا در Flexbox
• 12. مفهوم Grid Layout در CSS
• 13. ساختاربندی Grid با Rows و Columns
• 14. تعریف Areaها و Grid Template
• 15. چیدمان عناصر در Grid
• 16. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 17. اهمیت طراحی واکنش‌گرا برای تجربه کاربری
• 18. مدیریت Viewport و دستگاه‌های مختلف
• 19. استفاده از Media Queries برای تطبیق‌پذیری
• 20. طراحی برای موبایل اول (Mobile First)
• 21. تکنیک‌های بهینه‌سازی تصاویر برای وب
• 22. فشرده‌سازی تصاویر و فرمت‌های نوین
• 23. نقش فونت‌ها در طراحی وب و مدیریت آن‌ها
• 24. استفاده از فونت‌های وب (Web Fonts)
• 25. معرفی SASS و مزایای استفاده از آن
• 26. نصب و راه‌اندازی SASS
• 27. متغیرها (Variables) در SASS
• 28. تودرتوسازی (Nesting) در SASS
• 29. میکسین‌ها (Mixins) برای کدهای تکراری
• 30. توابع (Functions) در SASS
• 31. ارث‌بری (Inheritance) و Extend در SASS
• 32. ساختار پروژه‌های SASS
• 33. بهینه‌سازی کدهای SASS
• 34. معرفی Bootstrap به عنوان فریم‌ورک CSS
• 35. نصب و راه‌اندازی Bootstrap
• 36. سیستم Grid در Bootstrap
• 37. اجزای رابط کاربری Bootstrap (Buttons, Forms, Navbars)
• 38. کارت‌ها (Cards) و مودال‌ها (Modals) در Bootstrap
• 39. سیستم کاروسل (Carousel) در Bootstrap
• 40. نکات و ترفندهای Bootstrap
• 41. شخصی‌سازی Bootstrap
• 42. طراحی فرم‌های واکنش‌گرا با Bootstrap
• 43. اصول اولیه تجربه کاربری (UX)
• 44. اهمیت تجربه کاربری در موفقیت وب‌سایت
• 45. مراحل طراحی تجربه کاربری
• 46. تحقیق و جمع‌آوری نیازمندی‌ها
• 47. شخصیت‌پردازی کاربران (Personas)
• 48. نقشه‌راه کاربر (User Journey Map)
• 49. وایرفریمینگ (Wireframing) و پروتوتایپینگ
• 50. آزمون کاربردپذیری (Usability Testing)
• 51. مقدمه‌ای بر رابط کاربری (UI)
• 52. اصول طراحی رابط کاربری
• 53. رنگ‌شناسی در طراحی UI
• 54. تایپوگرافی در طراحی UI
• 55. طراحی سلسله‌مراتب بصری
• 56. استفاده از فضای سفید (Whitespace)
• 57. طراحی آیکون‌ها و عناصر گرافیکی
• 58. تکنیک‌های انیمیشن در رابط کاربری
• 59. اصول دسترسی‌پذیری (Accessibility) در وب
• 60. اهمیت دسترسی‌پذیری برای همه کاربران
• 61. استانداردهای WCAG
• 62. طراحی برای کاربران با نیازهای ویژه
• 63. تست دسترسی‌پذیری
• 64. مبانی سئو (SEO) در طراحی وب
• 65. نقش CSS در سئو
• 66. بهینه‌سازی ساختار HTML برای سئو
• 67. اهمیت کلمات کلیدی و متادیتای صحیح
• 68. تکنیک‌های بهینه‌سازی سرعت بارگذاری صفحه
• 69. نقش تجربه کاربری در سئو
• 70. طراحی هدر و فوتر کاربرپسند
• 71. منوهای ناوبری واضح و کارآمد
• 72. فرم‌های تماس و ثبت‌نام کاربردی
• 73. استفاده از تصاویر و ویدئوهای بهینه
• 74. طراحی جداول و لیست‌های خوانا
• 75. مدیریت خطاها و پیام‌های سیستمی
• 76. نکات پیشرفته در CSS
• 77. انتقال‌ها (Transitions) و انیمیشن‌ها (Animations)
• 78. فیلترها (Filters) و Transform ها
• 79. CSS Variables و Custom Properties
• 80. Layout های پیشرفته با Grid و Flexbox
• 81. بهینه‌سازی عملکرد CSS
• 82. ابزارهای توسعه‌دهنده مرورگر برای CSS
• 83. عیب‌یابی و رفع مشکلات CSS
• 84. جمع‌بندی و گام‌های بعدی در طراحی وب