دوره بوت‌استرپ موبایل فرست: طراحی وب‌سایت‌های واکنش‌گرا و سریع همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب بوت‌استرپ موبایل فرست: طراحی وب‌سایت‌های واکنش‌گرا و سریع

موضوع کلی: طراحی وب مدرن و واکنش‌گرا

موضوع میانی: توسعه واکنش‌گرا با فریم‌ورک‌های فرانت‌اند

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه: چرا طراحی وب مدرن اهمیت دارد؟
• 2. فلسفه Mobile First چیست و چرا حیاتی است؟
• 3. معرفی فریم‌ورک بوت‌استرپ و تاریخچه آن
• 4. بررسی نسخه‌های مختلف بوت‌استرپ و تفاوت‌های کلیدی
• 5. آماده‌سازی محیط توسعه: ویرایشگر کد و ابزارهای لازم
• 6. روش‌های افزودن بوت‌استرپ به پروژه (CDN و Local)
• 7. ساختار اولیه یک صفحه HTML5 برای بوت‌استرپ
• 8. مفهوم متا تگ Viewport و اهمیت آن در واکنش‌گرایی
• 9. آشنایی با Reboot.css: نرمال‌سازی استایل‌های مرورگر
• 10. مفاهیم پایه CSS: Box Model و نقش آن در بوت‌استرپ
• 11. واحدهای اندازه‌گیری واکنش‌گرا (rem, em, vw, vh)
• 12. آشنایی با Sass و نقش آن در سفارشی‌سازی بوت‌استرپ
• 13. نصب و راه‌اندازی Node.js و NPM برای کامپایل Sass
• 14. شروع اولین پروژه: ساخت یک صفحه ساده "Hello World"
• 15. بررسی ابزارهای توسعه‌دهنده مرورگر (DevTools) برای دیباگ
• 16. مقدمه بر سیستم گرید (Grid System) بوت‌استرپ
• 17. کانتینرها: Container, Container-fluid و تفاوت‌هایشان
• 18. مفهوم ردیف‌ها (Rows) و ستون‌ها (Columns)
• 19. آشنایی با نقاط شکست (Breakpoints): xs, sm, md, lg, xl, xxl
• 20. ایجاد اولین طرح‌بندی واکنش‌گرا با کلاس‌های col-*
• 21. ترکیب کلاس‌های گرید برای نمایش‌های مختلف (مثال: col-12 col-md-6)
• 22. تنظیم عرض ستون‌ها به صورت خودکار (Auto-layout columns)
• 23. کلاس‌های ترازبندی عمودی (Vertical Alignment) در ردیف‌ها
• 24. کلاس‌های ترازبندی افقی (Horizontal Alignment) در ردیف‌ها
• 25. ایجاد فاصله بین ستون‌ها با Gutter (کلاس‌های g-*)
• 26. کلاس‌های آفست (Offset): ایجاد فضای خالی در گرید
• 27. تغییر ترتیب ستون‌ها (Reordering) با کلاس‌های order-*
• 28. ستون‌های تودرتو (Nesting Columns)
• 29. سیستم گرید مبتنی بر Sass: متغیرها و میکس‌این‌ها
• 30. مثال عملی: طراحی طرح‌بندی یک وبلاگ با سیستم گرید
• 31. کار با سرفصل‌ها (Headings) و کلاس‌های Display
• 32. استایل‌دهی به پاراگراف‌ها، متن اصلی و کلاس Lead
• 33. لیست‌ها: مرتب، نامرتب و استایل‌دهی به آن‌ها
• 34. نقل قول‌ها (Blockquotes) و سفارشی‌سازی آن‌ها
• 35. نمایش کد (Code) به صورت Inline و Block
• 36. کار با تصاویر واکنش‌گرا (Responsive Images)
• 37. کلاس‌های استایل‌دهی به تصاویر (Thumbnails, Alignment)
• 38. جداول (Tables) واکنش‌گرا و استایل‌های مختلف آن
• 39. عناصر Figure برای تصاویر و توضیحات
• 40. کلاس‌های کمکی برای متن (Text Alignment, Wrapping, Transformation)
• 41. دکمه‌ها (Buttons): استایل‌ها، اندازه‌ها و حالت‌ها
• 42. گروه‌های دکمه (Button Groups) و نوارهای ابزار (Toolbars)
• 43. کارت‌ها (Cards): ساختار اصلی و کامپوننت همه‌کاره
• 44. هدر، فوتر و بدنه کارت (Card Header, Footer, Body)
• 45. تصاویر در کارت‌ها و طرح‌بندی‌های مختلف آن
• 46. گروه‌های کارت (Card Groups) و طرح‌بندی Masonry
• 47. هشدارها (Alerts) و نحوه بستن آن‌ها
• 48. نشان‌ها (Badges) و کاربرد آن‌ها در کامپوننت‌ها
• 49. مسیر راهنما (Breadcrumb) برای ناوبری
• 50. کشویی‌ها (Dropdowns): ساختار و گزینه‌ها
• 51. لیست گروه‌ها (List Groups) و انواع آن
• 52. پنجره‌های مودال (Modals): ساختار، فعال‌سازی و گزینه‌ها
• 53. نوار ناوبری (Navbar): ساختار اصلی و واکنش‌گرایی
• 54. برند، لینک‌ها و فرم‌ها در Navbar
• 55. منوی همبرگری (Navbar Toggler) برای موبایل
• 56. صفحه‌بندی (Pagination) و ناوبری صفحات
• 57. پاپ‌اورها (Popovers) و نحوه فعال‌سازی
• 58. نوارهای پیشرفت (Progress Bars)
• 59. اسکرول اسپای (Scrollspy) برای ردیابی اسکرول
• 60. اسپینرها (Spinners) برای نمایش وضعیت بارگذاری
• 61. تست‌ها (Toasts) برای نمایش اعلان‌ها
• 62. راهنمای ابزار (Tooltips)
• 63. آکاردئون (Accordion) و کامپوننت Collapse
• 64. اسلایدر یا کاروسل (Carousel): ساختار و کنترل‌ها
• 65. دکمه‌های بستن (Close Button)
• 66. مقدمه‌ای بر API ابزارها (Utilities API)
• 67. کلاس‌های فاصله گذاری: Margin و Padding (m-*, p-*)
• 68. کنترل فواصل به صورت واکنش‌گرا (مثال: mb-2 mb-md-4)
• 69. کلاس‌های رنگ (Colors): متن، پس‌زمینه و لینک‌ها
• 70. کلاس‌های نمایش (Display Utilities): d-none, d-flex, ...
• 71. ابزارهای Flexbox: جهت، چینش و تراز بندی
• 72. کلاس‌های Float و Clearfix
• 73. کلاس‌های Overflow
• 74. کلاس‌های موقعیت‌دهی (Position): relative, absolute, fixed
• 75. کلاس‌های سایه (Shadows)
• 76. کلاس‌های اندازه‌دهی (Sizing): عرض و ارتفاع
• 77. کلاس‌های مرز (Borders): افزودن، حذف و استایل‌دهی
• 78. تعاملات (Interactions): انتخاب متن و رویدادهای اشاره‌گر
• 79. کلاس‌های نسبت ابعاد (Aspect Ratios)
• 80. ابزارهای Stacks (vstack, hstack) برای طرح‌بندی سریع
• 81. سفارشی‌سازی بوت‌استرپ با متغیرهای Sass
• 82. تغییر پالت رنگی پیش‌فرض بوت‌استرپ
• 83. تغییر تنظیمات تایپوگرافی و فونت‌ها
• 84. سفارشی‌سازی سیستم گرید و Breakpointها
• 85. استفاده از میکس‌این‌های (Mixins) بوت‌استرپ در کدهای خود
• 86. ایجاد کامپوننت‌های سفارشی با استفاده از ابزارهای بوت‌استرپ
• 87. بهینه‌سازی حجم فایل CSS نهایی با وارد کردن بخش‌های مورد نیاز
• 88. مقدمه‌ای بر کامپوننت‌های جاوا اسکریپت بوت‌استرپ
• 89. کار با Data Attributes برای فعال‌سازی جاوا اسکریپت
• 90. استفاده از API جاوا اسکریپت برای کنترل پیشرفته کامپوننت‌ها
• 91. مبحث دسترسی‌پذیری (Accessibility - a11y) در بوت‌استرپ
• 92. کلاس‌های کمکی برای صفحه‌خوان‌ها (Screen Readers)
• 93. پشتیبانی از حالت تیره (Dark Mode)
• 94. افزودن آیکون‌ها به پروژه (Bootstrap Icons یا Font Awesome)
• 95. مفاهیم RTL و پشتیبانی از زبان‌های راست‌چین
• 96. پروژه عملی: طراحی و ساخت یک وب‌سایت شرکتی تک صفحه‌ای
• 97. مرحله اول: وایرفریمینگ و طراحی ساختار کلی
• 98. مرحله دوم: پیاده‌سازی بخش‌های مختلف با کامپوننت‌های بوت‌استرپ
• 99. مرحله سوم: سفارشی‌سازی نهایی و رفع اشکالات واکنش‌گرایی
• 100. بهینه‌سازی نهایی و آماده‌سازی برای انتشار (Deployment)