دوره CSS for Lifelong Learning همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Lifelong Learning

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

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

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

• 1. آشنایی با CSS و نقش آن در وب
• 2. نحوه افزودن CSS به صفحات HTML (داخلی، خارجی، خطی)
• 3. قواعد و دستور زبان CSS (Selectors, Properties, Values)
• 4. انتخابگرهای پایه (عنصر، کلاس، ID)
• 5. انتخابگرهای ترکیبی (نواده، فرزند، خواهر و برادر مجاور و عمومی)
• 6. انتخابگرهای ویژگی (Attribute Selectors)
• 7. شبه‌کلاس‌ها (Pseudo-classes) (مانند hover, active, focus)
• 8. شبه‌کلاس‌های ساختاری (مانند first-child, nth-child)
• 9. شبه‌عناصر (Pseudo-elements) (مانند before, after, first-line)
• 10. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 11. تنظیم اندازه جعبه (Box Sizing): content-box در مقابل border-box
• 12. خاصیت Display (block, inline, inline-block, none)
• 13. تنظیمات عرض و ارتفاع (Width and Height)
• 14. حداقل و حداکثر عرض و ارتفاع (Min/Max Width and Height)
• 15. کنترل سرریز محتوا (Overflow Property)
• 16. تنظیمات پس‌زمینه (Background Color, Image, Repeat)
• 17. تنظیمات پیشرفته پس‌زمینه (Position, Size, Attachment)
• 18. سیستم‌های رنگی در CSS (Named Colors, RGB, Hex)
• 19. سیستم‌های رنگی پیشرفته (RGBA, HSL, HSLA)
• 20. واحدهای اندازه‌گیری در CSS (px, em, rem, %, vw, vh)
• 21. واحدهای اندازه‌گیری پیشرفته (fr, ch, ex)
• 22. تنظیمات خانواده و اندازه فونت (Font-family, Font-size)
• 23. تنظیمات وزن و استایل فونت (Font-weight, Font-style)
• 24. ارتفاع خط و تراز متن (Line-height, Text-align)
• 25. دکوراسیون و تبدیل متن (Text-decoration, Text-transform)
• 26. فاصله‌گذاری حروف و کلمات (Letter-spacing, Word-spacing)
• 27. استایل‌دهی به لیست‌ها (List Styles)
• 28. تنظیمات حاشیه (Border Style, Width, Color)
• 29. گوشه‌های گرد (Border-radius)
• 30. سایه‌های جعبه و متن (Box-shadow, Text-shadow)
• 31. مقدمه‌ای بر موقعیت‌یابی (Positioning): Static, Relative
• 32. موقعیت‌یابی مطلق و ثابت (Absolute, Fixed)
• 33. موقعیت‌یابی چسبنده (Sticky Positioning)
• 34. کنترل ترتیب لایه‌ها (Z-index)
• 35. شناورسازی عناصر (Float Property)
• 36. پاکسازی شناورسازی (Clearfix Technique)
• 37. مقدمه‌ای بر Flexbox (Display: flex)
• 38. خواص کانتینر فلکس (Flex Container Properties): Direction, Wrap
• 39. خواص کانتینر فلکس: Justify-content, Align-items
• 40. خواص کانتینر فلکس: Align-content
• 41. خواص آیتم‌های فلکس (Flex Item Properties): Order, Grow, Shrink
• 42. خواص آیتم‌های فلکس: Flex-basis, Flex, Align-self
• 43. الگوهای طراحی با فلکس‌باکس
• 44. مقدمه‌ای بر CSS Grid (Display: grid)
• 45. تعریف ستون‌ها و ردیف‌ها در گرید (Grid-template-columns, Rows)
• 46. نام‌گذاری نواحی در گرید (Grid-template-areas)
• 47. کنترل فاصله در گرید (Grid-gap, Row-gap, Column-gap)
• 48. قرار دادن آیتم‌ها در گرید (Grid-column, Grid-row, Grid-area)
• 49. گرید خودکار و ضمنی (Auto-placement, Implicit Grid)
• 50. الگوهای طراحی ریسپانسیو با گرید
• 51. ستون‌بندی چندگانه (Multi-column Layout)
• 52. خاصیت‌های جدول‌بندی (Table Layout Properties)
• 53. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design Principles)
• 54. مدیا کوئری‌ها (Media Queries): حداقل و حداکثر عرض
• 55. مدیا کوئری‌ها: Orientation, Resolution
• 56. استراتژی Mobile-First در طراحی واکنش‌گرا
• 57. الگوهای رایج طراحی واکنش‌گرا
• 58. متغیرهای CSS (Custom Properties) و کاربرد آنها
• 59. استفاده مؤثر از متغیرهای CSS برای تم‌سازی
• 60. سلسله مراتب و ارث‌بری در CSS (Cascade and Inheritance)
• 61. مفهوم Specificity و تعیین اولویت
• 62. قانون `!important` و استفاده صحیح از آن
• 63. ریست CSS و Normalize.css
• 64. پیشوندهای وندور (Vendor Prefixes)
• 65. گرادیانت‌های خطی و شعاعی (Linear, Radial Gradients)
• 66. گرادیانت‌های مخروطی و تکرارشونده (Conic, Repeating Gradients)
• 67. تبدیلات دو بعدی (2D Transforms): Translate, Rotate, Scale, Skew
• 68. تبدیلات سه بعدی (3D Transforms): Rotate3d, Scale3d
• 69. خاصیت Perspective برای عمق در 3D
• 70. انیمیشن‌های گذار (Transitions): Property, Duration, Timing, Delay
• 71. انیمیشن‌های کلیدی (@keyframes): Name, Duration, Iteration
• 72. انیمیشن‌های کلیدی: Direction, Fill-mode, Play-state
• 73. فیلترها (Filters): Grayscale, Blur, Brightness, Contrast
• 74. فیلترها: Drop-shadow, Hue-rotate, Invert, Sepia, Saturate
• 75. Clipping و Masking در CSS
• 76. خاصیت Object-fit و Object-position برای تصاویر و ویدئوها
• 77. ترکیب حالت‌ها (Blend Modes): Mix-blend-mode, Background-blend-mode
• 78. جهت‌دهی نوشتار (Writing Modes): Vertical, Horizontal
• 79. خاصیت Cursor و Outline
• 80. تغییر اندازه عناصر (Resizing)
• 81. پیمایش چسبنده (Scroll Snap)
• 82. افکت‌های Parallax با CSS
• 83. دسترسی‌پذیری (Accessibility) در CSS (Focus States, SR-only)
• 84. استایل‌دهی برای چاپ (Print Stylesheets)
• 85. استایل‌دهی به فرم‌ها و شبه‌کلاس‌های UI
• 86. استایل‌دهی به SVG با CSS
• 87. بهینه‌سازی عملکرد CSS (Reflows, Repaints, Minification)
• 88. معماری‌های CSS (BEM, SMACSS, OOCSS) - مقدمه
• 89. متدولوژی BEM: Block, Element, Modifier
• 90. مقدمه‌ای بر Preprocessors (Sass/Less): Variables, Nesting
• 91. Preprocessors: Mixins, Extends, Partials, Functions
• 92. PostCSS و کاربردهای آن
• 93. CSS Modules و Styled Components (CSS-in-JS)
• 94. CSS Utility-First و Atomic CSS
• 95. Container Queries و آینده طراحی واکنش‌گرا
• 96. Subgrid و بهبودهای CSS Grid
• 97. انتخابگرهای جدید (has:, is:, where:)
• 98. لایه‌های آبشاری CSS (@layer)
• 99. متغیرهای فونت (Variable Fonts) و تایپوگرافی پیشرفته
• 100. استراتژی‌های یادگیری مادام‌العمر برای CSS و آینده آن