فلش‌کارت‌های آموزشی CSS در عمق: راهنمای جامع برای ساخت رابط‌های کاربری پویا و واکنش‌گرا

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

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

عنوان دوره: CSS در عمق: راهنمای جامع برای ساخت رابط‌های کاربری پویا و واکنش‌گرا

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

موضوع میانی: تسلط بر طراحی با CSS

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

• 1. مقدمه‌ای بر CSS: نقش و قدرت آن در وب
• 2. نحوه افزودن CSS به یک صفحه وب: داخلی، خارجی و درون‌خطی
• 3. آناتومی یک قانون CSS: انتخابگر، اعلان، خصوصیت و مقدار
• 4. جادوی انتخابگرها: انتخابگرهای نوع، کلاس و شناسه (ID)
• 5. انتخابگرهای ترکیبی: انتخابگرهای فرزند، نسل، همسایه مجاور و همسایه‌های عمومی
• 6. انتخابگرهای ویژگی (Attribute Selectors) و کاربردهای آن
• 7. مفهوم آبشار (Cascade): چگونه مرورگر تداخل‌ها را حل می‌کند
• 8. اولویت‌بندی و امتیازدهی (Specificity): کدام قانون برنده می‌شود؟
• 9. وراثت (Inheritance) و کنترل آن با مقادیر inherit, initial, unset
• 10. استفاده هوشمندانه از دستور !important
• 11. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 12. کنترل مدل جعبه‌ای با خصوصیت box-sizing
• 13. واحدها در CSS: واحدهای مطلق (px, pt) و نسبی (em, rem, %)
• 14. تفاوت بنیادین بین واحدهای em و rem
• 15. کار با رنگ‌ها: کلمات کلیدی، HEX، RGB و RGBA
• 16. فضای رنگی HSL و HSLA برای کنترل بهتر رنگ‌ها
• 17. استایل‌دهی به متن: font-family, font-size, font-weight, font-style
• 18. تایپوگرافی پیشرفته: line-height, letter-spacing, word-spacing
• 19. استفاده از فونت‌های وب با @font-face
• 20. خصوصیت display: درک مقادیر block, inline و inline-block
• 21. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 22. مفهوم Normal Flow یا جریان عادی سند
• 23. کنترل (Overflow): مقادیر visible, hidden, scroll, auto
• 24. موقعیت‌یابی (Positioning): مقادیر static و relative
• 25. موقعیت‌یابی مطلق (absolute) و مفهوم Containing Block
• 26. موقعیت‌یابی ثابت (fixed) برای عناصر شناور در صفحه
• 27. موقعیت‌یابی چسبنده (sticky): بهترین‌های relative و fixed
• 28. مدیریت لایه‌ها با z-index و مفهوم Stacking Context
• 29. شناورسازی با Float: مفهوم و کاربردهای تاریخی
• 30. مشکلات Float و تکنیک‌های پاک‌سازی آن (Clearfix)
• 31. مقدمه‌ای بر Flexbox: انقلابی در چیدمان یک‌بعدی
• 32. محورهای اصلی و متقاطع در Flexbox
• 33. خصوصیات کانتینر Flex: flex-direction و flex-wrap
• 34. تراز کردن در محور اصلی: justify-content
• 35. تراز کردن در محور متقاطع: align-items
• 36. تراز کردن خطوط چندگانه: align-content
• 37. خصوصیات آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 38. شورت‌هند flex و کاربردهای آن
• 39. کنترل ترتیب عناصر با خصوصیت order
• 40. تراز کردن یک آیتم خاص با align-self
• 41. مثال عملی با Flexbox: ساخت یک نوار ناوبری (Navbar)
• 42. مثال عملی با Flexbox: طراحی کارت‌های واکنش‌گرا
• 43. مقدمه‌ای بر CSS Grid: قدرت چیدمان دوبعدی
• 44. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 45. واحد جدید fr و قدرت آن در تقسیم‌بندی فضا
• 46. قرار دادن آیتم‌ها بر اساس شماره خطوط گرید
• 47. قرار دادن آیتم‌ها با استفاده از نام خطوط گرید
• 48. تعریف نواحی نام‌گذاری شده با grid-template-areas
• 49. فاصله‌گذاری بین آیتم‌ها با خصوصیت gap
• 50. تراز کردن آیتم‌ها در گرید: justify-items و align-items
• 51. تراز کردن کل گرید در کانتینر: justify-content و align-content
• 52. ادغام سلول‌ها با grid-column و grid-row و کلمه کلیدی span
• 53. توابع قدرتمند در گرید: minmax(), repeat(), auto-fit, auto-fill
• 54. مفهوم Subgrid و کاربردهای آن در چیدمان‌های پیچیده
• 55. مثال عملی با Grid: ساخت یک گالری تصاویر واکنش‌گرا
• 56. مثال عملی با Grid: طراحی یک صفحه اصلی مجله‌ای
• 57. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 58. تنظیم Viewport با تگ متا
• 59. استفاده از Media Query برای اعمال استایل‌های شرطی
• 60. رویکرد Mobile First در مقابل Desktop First
• 61. نقاط شکست (Breakpoints) رایج و نحوه انتخاب آن‌ها
• 62. واحدهای وابسته به Viewport: vw, vh, vmin, vmax
• 63. تصاویر واکنش‌گرا: استفاده از max-width: 100%
• 64. تکنیک‌های پیشرفته تصاویر واکنش‌گرا با تگ picture و srcset
• 65. تایپوگرافی روان (Fluid Typography) با تابع clamp()
• 66. شبه‌کلاس‌ها (Pseudo-classes): استایل‌دهی به حالت‌های مختلف عنصر
• 67. شبه‌کلاس‌های تعاملی: :hover, :focus, :active
• 68. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child()
• 69. انتخاب بر اساس محتوا با شبه‌کلاس :empty
• 70. شبه‌کلاس‌های نفی و رابطه: :not() و :has()
• 71. شبه‌عناصر (Pseudo-elements): افزودن محتوای مجازی
• 72. کار با ::before و ::after و خصوصیت content
• 73. استایل‌دهی به اولین حرف و اولین خط با ::first-letter و ::first-line
• 74. استایل‌دهی به متن انتخاب شده با ::selection
• 75. متغیرها در CSS (Custom Properties): تعریف و استفاده
• 76. محدوده (Scope) متغیرها: ریشه (root:) در مقابل محلی
• 77. کاربردهای عملی متغیرها: ایجاد تم (Theming) و حالت تاریک
• 78. انتقال‌ها (Transitions): ایجاد انیمیشن‌های نرم بین حالت‌ها
• 79. کنترل زمان‌بندی انتقال با transition-timing-function
• 80. اعمال تاخیر در انتقال با transition-delay
• 81. انیمیشن‌های پیچیده با @keyframes
• 82. کنترل کامل انیمیشن‌ها با خصوصیت animation
• 83. تغییر شکل دوبعدی (2D Transforms): translate, rotate, scale, skew
• 84. نقطه مرجع تغییر شکل با transform-origin
• 85. تغییر شکل سه‌بعدی (3D Transforms) و مفهوم perspective
• 86. استایل‌دهی به پس‌زمینه: background-image, position, size, repeat
• 87. استفاده از چندین تصویر پس‌زمینه
• 88. گرادینت‌های خطی (Linear Gradients)
• 89. گرادینت‌های شعاعی (Radial Gradients)
• 90. ایجاد سایه برای جعبه‌ها با box-shadow
• 91. ایجاد سایه برای متن با text-shadow
• 92. گرد کردن گوشه‌ها با border-radius
• 93. استفاده از تصاویر برای حاشیه با border-image
• 94. فیلترهای گرافیکی در CSS با خصوصیت filter
• 95. حالت‌های ترکیبی (Blend Modes) برای لایه‌ها و پس‌زمینه‌ها
• 96. معماری CSS: چالش‌های مدیریت استایل در پروژه‌های بزرگ
• 97. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 98. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 99. استفاده از Sass: متغیرها و تودرتویی (Nesting)
• 100. استفاده از Sass: Mixinها و توابع

CSS در عمق: راهنمای جامع برای ساخت رابط‌های کاربری پویا و واکنش‌گرا

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

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

درباره دوره

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

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

• مقدمه‌ای بر معماری CSS: درک عمیق از نحوه عملکرد CSS و بهترین روش‌ها برای سازماندهی کدها.
• انتخابگرهای پیشرفته CSS: یادگیری نحوه استفاده از انتخابگرهای پیچیده برای هدف قرار دادن عناصر خاص در HTML.
• مدل جعبه‌ای (Box Model): تسلط بر مدل جعبه‌ای و نحوه تأثیر آن بر طرح‌بندی صفحات وب.
• طرح‌بندی‌های شناور (Float Layouts): درک و استفاده از شناورها برای ایجاد طرح‌بندی‌های چند ستونی.
• طرح‌بندی‌های فلکس‌باکس (Flexbox Layouts): استفاده از فلکس‌باکس برای ایجاد طرح‌بندی‌های انعطاف‌پذیر و واکنش‌گرا.
• طرح‌بندی‌های گرید (Grid Layouts): استفاده از گرید برای ایجاد طرح‌بندی‌های پیچیده و ساختارمند.
• واکنش‌گرایی (Responsiveness): طراحی وب‌سایت‌هایی که به طور خودکار با اندازه صفحه نمایش دستگاه‌های مختلف سازگار می‌شوند.
• انیمیشن‌ها و ترانزیشن‌های CSS: افزودن انیمیشن‌ها و ترانزیشن‌های جذاب به وب‌سایت‌ها برای بهبود تجربه کاربری.
• پیش‌پردازنده‌های CSS (Sass, Less): استفاده از پیش‌پردازنده‌های CSS برای نوشتن کد CSS منظم‌تر و قابل نگهداری‌تر.
• بهینه‌سازی CSS: بهبود عملکرد وب‌سایت‌ها با بهینه‌سازی کد CSS.
• CSS Custom Properties (متغیرها): استفاده از متغیرها در CSS برای مدیریت بهتر استایل‌ها.

مخاطبان دوره

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

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

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

گذراندن دوره CSS در عمق مزایای بی‌شماری برای شما به ارمغان می‌آورد:

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

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

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

• مقدمه‌ای بر CSS و نحوه عملکرد آن
• نحو (Syntax) CSS
• انتخابگرها (Selectors): ساده، ترکیبی، ویژگی‌ها، شبه‌کلاس‌ها، شبه‌عناصر
• مدل جعبه‌ای (Box Model): حاشیه (Margin)، حاشیه‌داخلی (Padding)، مرز (Border)، محتوا (Content)
• واحد‌های اندازه‌گیری: پیکسل (px)، درصد (%)، em، rem، viewport units (vw, vh, vmin, vmax)
• رنگ‌ها: نام رنگ‌ها، کد هگزادسیمال، RGB، RGBA، HSL، HSLA
• متن: فونت‌ها، اندازه فونت، وزن فونت، سبک فونت، رنگ فونت، تراز متن، فاصله‌گذاری خطوط
• پس‌زمینه: رنگ پس‌زمینه، تصویر پس‌زمینه، موقعیت پس‌زمینه، تکرار پس‌زمینه
• شناورها (Floats) و clear
• موقعیت‌یابی (Positioning): static, relative, absolute, fixed, sticky
• z-index
• فلکس‌باکس (Flexbox): flex-direction, justify-content, align-items, align-content, flex-grow, flex-shrink, flex-basis
• گرید (Grid): grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, grid-area
• رسانه‌ها (Media Queries): طراحی واکنش‌گرا (Responsive Design)
• انیمیشن‌ها (Animations): keyframes, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction
• ترانزیشن‌ها (Transitions): transition-property, transition-duration, transition-timing-function, transition-delay
• تبدیل‌ها (Transforms): rotate, scale, translate, skew
• فیلترها (Filters): blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia
• شبه‌عناصر (Pseudo-elements): ::before, ::after
• شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus, :visited, :nth-child
• متغیرهای CSS (CSS Custom Properties)
• سلسله مراتب (Specificity)
• بهینه‌سازی CSS: minify, gzip
• مفاهیم پیشرفته CSS: معماری CSS, BEM, SMACSS
• و بسیاری سرفصل دیگر...

همین امروز ثبت‌نام کنید و سفر خود را به سوی تسلط بر CSS آغاز کنید!