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

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

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

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

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

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

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

• 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 و آینده آن

CSS for Lifelong Learning: کلید طراحی وب‌سایت‌های زیبا و مدرن را در دستان خود بگیرید!

آیا می‌خواهید وب‌سایت‌هایی طراحی کنید که نه تنها کارآمد باشند، بلکه چشم‌نواز و جذاب هم باشند؟ آیا به دنبال ارتقای مهارت‌های طراحی وب خود و ورود به دنیای حرفه‌ای توسعه فرانت‌اند هستید؟ دوره CSS for Lifelong Learning دقیقا همان چیزی است که به آن نیاز دارید!

در این دوره جامع و کاربردی، از صفر تا صد CSS را خواهید آموخت و با جدیدترین تکنیک‌ها و ابزارهای استایل‌دهی وب آشنا خواهید شد. فرقی نمی‌کند که یک مبتدی کامل باشید یا تجربه‌ای در این زمینه داشته باشید، این دوره به شما کمک می‌کند تا مهارت‌های خود را به سطح بالاتری ارتقا دهید و به یک متخصص CSS تبدیل شوید.

با CSS for Lifelong Learning، قدرت خلق وب‌سایت‌هایی زیبا، واکنش‌گرا و سازگار با تمام دستگاه‌ها را در دستان خود خواهید داشت. منتظر چه هستید؟ همین حالا شروع کنید و آینده شغلی خود را متحول سازید!

درباره دوره

دوره CSS for Lifelong Learning یک دوره جامع و پروژه محور است که به شما تمام مهارت‌های لازم برای طراحی و استایل‌دهی حرفه‌ای وب‌سایت‌ها را آموزش می‌دهد. در این دوره، با مفاهیم اساسی CSS، انواع سلکتورها، مدل جعبه‌ای (Box Model)، Flexbox، Grid Layout، انیمیشن‌ها، ترنزیشن‌ها، رسپانسیو دیزاین و بسیاری از تکنیک‌های پیشرفته دیگر آشنا خواهید شد. همچنین، در طول دوره پروژه‌های عملی متعددی را انجام خواهید داد تا مهارت‌های خود را در محیط واقعی محک بزنید.

موضوعات کلیدی

• مقدمه‌ای بر CSS و نحوه کار آن
• سلکتورهای CSS و انواع آن‌ها
• مدل جعبه‌ای (Box Model) و اهمیت آن
• استایل‌دهی متن، فونت و رنگ‌ها
• استفاده از Flexbox برای چیدمان عناصر
• استفاده از Grid Layout برای طراحی صفحات پیچیده
• ایجاد انیمیشن‌ها و ترنزیشن‌های جذاب
• رسپانسیو دیزاین و طراحی برای دستگاه‌های مختلف
• استفاده از CSS Preprocessors مانند Sass و Less
• بهینه‌سازی CSS برای بهبود عملکرد وب‌سایت

مخاطبان دوره

این دوره برای افراد زیر مناسب است:

• افرادی که به تازگی وارد دنیای طراحی وب شده‌اند و می‌خواهند CSS را از پایه یاد بگیرند.
• توسعه‌دهندگان فرانت‌اند که می‌خواهند مهارت‌های CSS خود را ارتقا دهند.
• طراحان وب که می‌خواهند کنترل بیشتری بر روی ظاهر وب‌سایت‌های خود داشته باشند.
• دانشجویان و فارغ‌التحصیلان رشته‌های کامپیوتر و IT که به دنبال کسب مهارت‌های عملی در زمینه طراحی وب هستند.
• هر کسی که به طراحی وب‌سایت‌های زیبا و کاربردی علاقه‌مند است.

چرا این دوره را بگذرانیم؟

گذراندن دوره CSS for Lifelong Learning مزایای بسیاری برای شما به همراه خواهد داشت:

• یادگیری CSS از پایه تا پیشرفته: این دوره به شما تمام مهارت‌های لازم برای تبدیل شدن به یک متخصص CSS را آموزش می‌دهد.
• پروژه‌های عملی متعدد: در طول دوره پروژه‌های عملی متعددی را انجام خواهید داد تا مهارت‌های خود را در محیط واقعی محک بزنید.
• مدرس متخصص و با تجربه: شما از دانش و تجربه یک مدرس متخصص و با تجربه در زمینه CSS بهره‌مند خواهید شد.
• محتوای آموزشی به‌روز: محتوای آموزشی این دوره همیشه به‌روز بوده و با جدیدترین تکنیک‌ها و ابزارهای CSS هماهنگ است.
• پشتیبانی و راهنمایی: در طول دوره از پشتیبانی و راهنمایی مدرس و تیم پشتیبانی برخوردار خواهید بود.
• افزایش فرصت‌های شغلی: با کسب مهارت‌های CSS، فرصت‌های شغلی بیشتری در زمینه طراحی وب و توسعه فرانت‌اند خواهید داشت.
• طراحی وب‌سایت‌های زیبا و مدرن: با استفاده از دانش CSS، می‌توانید وب‌سایت‌هایی زیبا، واکنش‌گرا و کاربردی طراحی کنید.
• استایل دهی بهینه و اصولی: خواهید آموخت که چگونه با استفاده از اصول صحیح CSS، وب‌سایت‌هایی با عملکرد بالا و سرعت بارگذاری سریع ایجاد کنید.

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

این دوره شامل 100 سرفصل جامع و کاربردی است که به شما تمام جنبه‌های CSS را آموزش می‌دهد. در اینجا به برخی از سرفصل‌های مهم اشاره می‌کنیم:

• بخش 1: مقدمه ای بر CSS
  • CSS چیست و چرا باید آن را یاد بگیریم؟
  • نحوه اضافه کردن CSS به HTML (inline, internal, external)
  • آشنایی با سینتکس CSS
  • سلکتورها، ویژگی‌ها و مقادیر
  • آشنایی با ابزارهای توسعه مرورگر (Developer Tools)
• بخش 2: سلکتورها
  • سلکتورهای عمومی (Universal Selector)
  • سلکتورهای نوع (Type Selectors)
  • سلکتورهای کلاس (Class Selectors)
  • سلکتورهای ID (ID Selectors)
  • سلکتورهای ویژگی (Attribute Selectors)
  • سلکتورهای ترکیبی (Combinators)
  • سلکتورهای شبه کلاس (Pseudo-classes)
  • سلکتورهای شبه عنصر (Pseudo-elements)
  • اولویت‌بندی سلکتورها (Specificity)
• بخش 3: مدل جعبه‌ای (Box Model)
  • آشنایی با اجزای مدل جعبه‌ای (Content, Padding, Border, Margin)
  • تغییر اندازه مدل جعبه‌ای (box-sizing)
  • استفاده از margin collapsing
  • درک تفاوت بین block و inline elements
• بخش 4: استایل‌دهی متن
  • تغییر فونت (font-family, font-size, font-weight, font-style)
  • تنظیم رنگ متن (color)
  • تغییر تراز متن (text-align, text-decoration, text-transform, text-indent, letter-spacing, word-spacing)
  • استفاده از سایه‌ها برای متن (text-shadow)
  • مدیریت فاصله بین خطوط (line-height)
• بخش 5: استایل‌دهی پس‌زمینه
  • تغییر رنگ پس‌زمینه (background-color)
  • اضافه کردن تصویر پس‌زمینه (background-image)
  • تنظیم تکرار تصویر پس‌زمینه (background-repeat)
  • تنظیم موقعیت تصویر پس‌زمینه (background-position)
  • تنظیم اندازه تصویر پس‌زمینه (background-size)
  • استفاده از گرادیان (Gradients) به عنوان پس‌زمینه
  • استفاده از multiple backgrounds
• بخش 6: Flexbox
  • آشنایی با مفاهیم Flexbox
  • تعیین container و items
  • تنظیم جهت محور اصلی (flex-direction)
  • تنظیم نحوه چینش items در محور اصلی (justify-content)
  • تنظیم نحوه چینش خطوط در محور فرعی (align-items)
  • تنظیم نحوه چینش محتوای هر خط (align-content)
  • تنظیم ترتیب نمایش items (order)
  • تنظیم انعطاف‌پذیری items (flex-grow, flex-shrink, flex-basis)
• بخش 7: Grid Layout
  • آشنایی با مفاهیم Grid Layout
  • تعریف ردیف‌ها و ستون‌ها (grid-template-rows, grid-template-columns)
  • تعیین فاصله بین ردیف‌ها و ستون‌ها (grid-gap, grid-row-gap, grid-column-gap)
  • نام‌گذاری خطوط و ناحیه‌ها (grid-template-areas)
  • قرار دادن items در ناحیه‌های مختلف (grid-area)
  • تراز کردن items در سلول‌های grid (justify-self, align-self)
  • تراز کردن کل grid در container (justify-content, align-content)
• بخش 8: انیمیشن‌ها و ترنزیشن‌ها
  • آشنایی با ترنزیشن‌ها (transition)
  • تنظیم ویژگی‌های قابل ترنزیشن (transition-property)
  • تنظیم مدت زمان ترنزیشن (transition-duration)
  • تنظیم تابع زمان‌بندی ترنزیشن (transition-timing-function)
  • تنظیم تاخیر ترنزیشن (transition-delay)
  • آشنایی با انیمیشن‌ها (animation)
  • تعریف کلیدواژه‌های انیمیشن (keyframes)
  • تنظیم تکرار انیمیشن (animation-iteration-count)
  • تنظیم جهت انیمیشن (animation-direction)
  • تنظیم سرعت انیمیشن (animation-timing-function)
• بخش 9: رسپانسیو دیزاین
  • آشنایی با مفهوم رسپانسیو دیزاین
  • استفاده از Media Queries
  • تنظیم Breakpoints برای دستگاه‌های مختلف
  • استفاده از واحدهای نسبی (%, em, rem, vw, vh)
  • طراحی Mobile-First
• بخش 10: CSS Preprocessors (Sass/Less)
  • آشنایی با Sass و Less
  • نصب و پیکربندی Sass/Less
  • استفاده از متغیرها (Variables)
  • استفاده از توابع (Mixins)
  • استفاده از توابع تو در تو (Nesting)
  • استفاده از ارث‌بری (Inheritance)
  • استفاده از پارتشیال‌ها (Partials)