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

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

عنوان دوره: Optimizing CSS Delivery and Performance

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

موضوع میانی: CSS

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

• 1. مبانی CSS: معرفی و اهمیت
• 2. ساختار CSS: انتخابگرها، خصوصیات و مقادیر
• 3. نحوه افزودن CSS به HTML: Inline, Internal, External
• 4. مقیاس‌بندی واحدها در CSS: px, em, rem, vw, vh
• 5. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 6. تنظیم ابعاد عناصر: width, height, min-width, max-width
• 7. تنظیم حاشیه‌ها (Margin): margin-top, margin-right, margin-bottom, margin-left
• 8. تنظیم فاصله‌ها (Padding): padding-top, padding-right, padding-bottom, padding-left
• 9. تنظیم کادر (Border): border-width, border-style, border-color
• 10. رنگ‌ها در CSS: نام رنگ‌ها، مقادیر هگزادسیمال، RGB، RGBA، HSL، HSLA
• 11. تنظیم رنگ متن: color
• 12. تنظیم رنگ پس‌زمینه: background-color
• 13. تنظیم تصاویر پس‌زمینه: background-image, background-repeat, background-position, background-size
• 14. Background Shorthand Property
• 15. متن و فونت: font-family, font-size, font-weight, font-style
• 16. تنظیم ارتفاع خط: line-height
• 17. تنظیم تراز متن: text-align
• 18. تنظیم تورفتگی متن: text-indent
• 19. تنظیم دکوراسیون متن: text-decoration
• 20. تنظیم فاصله‌گذاری حروف: letter-spacing
• 21. تنظیم فاصله‌گذاری کلمات: word-spacing
• 22. لیست‌ها و عناصر نشانه‌دار: list-style-type, list-style-position, list-style-image
• 23. تنظیم نمایش عناصر: display (block, inline, inline-block, none)
• 24. تنظیم جایگاه عناصر: position (static, relative, absolute, fixed, sticky)
• 25. Z-index Property
• 26. شناور کردن عناصر: float (left, right, none)
• 27. پاک کردن شناوری: clear
• 28. تنظیم موقعیت دهی با Flexbox: معرفی و مفاهیم
• 29. Flex Container Properties: display, flex-direction, flex-wrap, justify-content, align-items, align-content
• 30. Flex Item Properties: order, flex-grow, flex-shrink, flex-basis, align-self
• 31. تنظیم موقعیت دهی با Grid: معرفی و مفاهیم
• 32. Grid Container Properties: display, grid-template-columns, grid-template-rows, grid-gap
• 33. Grid Item Properties: grid-column, grid-row
• 34. مدیریت فضای خالی: white-space
• 35. تنظیم Overflow: overflow (visible, hidden, scroll, auto)
• 36. تنظیم Cursor: cursor
• 37. تنظیم Opacity: opacity
• 38. تغییرات (Transitions): معرفی و کاربرد
• 39. Transition Properties: transition-property, transition-duration, transition-timing-function, transition-delay
• 40. انتقال‌های پیچیده
• 41. انیمیشن‌ها (Animations): معرفی و کاربرد
• 42. @keyframes Rule
• 43. Animation Properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
• 44. تنظیم Transform: translate, rotate, scale, skew, matrix
• 45. توابع Transform: transform-origin
• 46. Pseudo-classes: :hover, :active, :focus, :visited, :first-child, :last-child, :nth-child
• 47. Pseudo-elements: ::before, ::after, ::first-line, ::first-letter
• 48. تنظیم Variableها در CSS (Custom Properties)
• 49. استفاده از Unitهای نسبی (em, rem) برای Responsive Design
• 50. Media Queries: معرفی و کاربرد
• 51. نوشتن Media Queries برای اندازه‌های مختلف صفحه
• 52. Mobile-First Approach
• 53. Desktop-First Approach
• 54. تنظیم Viewport برای Responsive Design
• 55. بارگذاری تصاویر با کیفیت بالا و پایین (Responsive Images)
• 56. Lazy Loading تصاویر
• 57. نکات بهینه سازی CSS: کاهش حجم فایل CSS
• 58. حذف CSS بلااستفاده (Unused CSS)
• 59. فشرده سازی فایل‌های CSS (Minification)
• 60. Concatenation فایل‌های CSS
• 61. بارگذاری Async CSS
• 62. بارگذاری Critical CSS
• 63. استفاده از Inline CSS برای Critical Rendering Path
• 64. تاثیر CSS بر روی Rendering Performance
• 65. شناسایی Bottleneckهای CSS
• 66. ابزارهای توسعه دهنده مرورگر برای بررسی CSS
• 67. Performance Auditing با Lighthouse
• 68. معماری CSS: BEM (Block, Element, Modifier) Methodology
• 69. SMACSS (Scalable and Modular Architecture for CSS)
• 70. OOCSS (Object-Oriented CSS)
• 71. CSS-in-JS: معرفی و مزایا
• 72. معایب CSS-in-JS
• 73. Server-Side Rendering (SSR) و CSS
• 74. Static Site Generators و CSS
• 75. Performance of CSS Preprocessors (Sass, Less)
• 76. استفاده بهینه از Fontها
• 77. بارگذاری Fontهای وب (Web Fonts)
• 78. Display Values for Fonts: font-display
• 79. Font Subsetting
• 80. استفاده از SVG Icons به جای تصاویر
• 81. بهینه سازی انیمیشن‌های CSS
• 82. استفاده از Hardware Acceleration برای انیمیشن‌ها
• 83. Previewing Animations
• 84. CSS Performance Budgets
• 85. Testing CSS Performance
• 86. Cross-Browser Compatibility
• 87. Accessibility در CSS
• 88. تنظیم Outline برای فوکوس
• 89. مدیریت رنگ و کنتراست
• 90. Semantic HTML و CSS
• 91. Future of CSS Performance
• 92. **CSS Specificity: Understanding Selector Weight and Importance**
• 93. **CSS Optimization Techniques: Minification, Compression, and Bundling**
• 94. **Critical CSS: Delivering Above-the-Fold Content Efficiently**
• 95. **Lazy Loading Images and Resources with CSS and JavaScript**
• 96. **Font Optimization: Choosing and Loading Web Fonts for Performance**
• 97. **Responsive Design Best Practices: Media Queries and Mobile-First Approach**
• 98. **CSS Animations and Transitions: Optimizing Performance for Smooth Effects**
• 99. **CSS Frameworks and Libraries: Evaluating and Integrating for Speed**
• 100. **Debugging and Profiling CSS: Tools and Strategies for Performance Analysis**

Optimizing CSS Delivery and Performance: سرعت و زیبایی وب‌سایت شما