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

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

عنوان دوره: CSS for Narrative Design

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

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

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

• 1. مقدمه ای بر CSS برای طراحی روایی
• 2. نقش CSS در داستان سرایی بصری
• 3. تفاوت بین HTML و CSS
• 4. محیط توسعه: ویرایشگر کد
• 5. محیط توسعه: مرورگر وب
• 6. اولین استایل ها: تگ استایل
• 7. لینک کردن CSS خارجی
• 8. اینلاین استایل ها
• 9. انتخابگرهای اولیه: تگ ها
• 10. انتخابگرهای اولیه: کلاس ها
• 11. انتخابگرهای اولیه: آیدی ها
• 12. انتخابگرهای گروهی
• 13. خاصیت (Property) و مقدار (Value)
• 14. دستورات CSS: سینتکس
• 15. واحدها در CSS: پیکسل (px)
• 16. واحدها در CSS: درصد (%)
• 17. واحدها در CSS: واحد های نسبی (em, rem)
• 18. واحدها در CSS: واحد های viewport (vw, vh)
• 19. رنگ ها در CSS: نام رنگ ها
• 20. رنگ ها در CSS: کدهای هگزادسیمال (Hex)
• 21. رنگ ها در CSS: مقادیر RGB
• 22. رنگ ها در CSS: مقادیر RGBA (با شفافیت)
• 23. رنگ ها در CSS: مقادیر HSL
• 24. رنگ ها در CSS: مقادیر HSLA (با شفافیت)
• 25. پس زمینه (Background): رنگ پس زمینه
• 26. پس زمینه (Background): تصویر پس زمینه
• 27. پس زمینه (Background): تکرار تصویر پس زمینه (repeat, no-repeat)
• 28. پس زمینه (Background): موقعیت تصویر پس زمینه (position)
• 29. پس زمینه (Background): اندازه تصویر پس زمینه (size)
• 30. پس زمینه (Background): پیوست تصویر پس زمینه (attachment)
• 31. پس زمینه (Background): خصوصیت خلاصه background
• 32. تنظیم فونت (Font): فونت فمیلی (font-family)
• 33. تنظیم فونت (Font): انتخاب فونت های استاندارد
• 34. تنظیم فونت (Font): فونت های گوگل (Google Fonts)
• 35. تنظیم فونت (Font): وزن فونت (font-weight)
• 36. تنظیم فونت (Font): استایل فونت (font-style)
• 37. تنظیم فونت (Font): اندازه فونت (font-size)
• 38. تنظیم فونت (Font): ارتفاع خط (line-height)
• 39. تنظیم فونت (Font): فاصله بین حروف (letter-spacing)
• 40. تنظیم فونت (Font): فاصله بین کلمات (word-spacing)
• 41. تنظیم فونت (Font): تراز متن (text-align)
• 42. تنظیم فونت (Font): دکوراسیون متن (text-decoration)
• 43. تنظیم فونت (Font): تغییر حروف (text-transform)
• 44. تنظیم فونت (Font): تورفتگی متن (text-indent)
• 45. کادربندی (Box Model): محتوا (Content)
• 46. کادربندی (Box Model): پدینگ (Padding)
• 47. کادربندی (Box Model): بوردر (Border): ضخامت
• 48. کادربندی (Box Model): بوردر (Border): استایل
• 49. کادربندی (Box Model): بوردر (Border): رنگ
• 50. کادربندی (Box Model): بوردر (Border): خصوصیت خلاصه border
• 51. کادربندی (Box Model): مارجین (Margin)
• 52. نمایش (Display): نوع بلاک (block)
• 53. نمایش (Display): نوع اینلاین (inline)
• 54. نمایش (Display): نوع اینلاین-بلاگ (inline-block)
• 55. نمایش (Display): نوع فلکس باکس (flex)
• 56. نمایش (Display): نوع گرید (grid)
• 57. نمایش (Display): نوع نان (none)
• 58. نمایش (Display): نوع لیست-ایتِم (list-item)
• 59. چیدمان (Layout): پوزیشنینگ (Positioning): استاتیک (static)
• 60. چیدمان (Layout): پوزیشنینگ (Positioning): نسبی (relative)
• 61. چیدمان (Layout): پوزیشنینگ (Positioning): مطلق (absolute)
• 62. چیدمان (Layout): پوزیشنینگ (Positioning): ثابت (fixed)
• 63. چیدمان (Layout): پوزیشنینگ (Positioning): چسبان (sticky)
• 64. چیدمان (Layout): خصوصیات top, right, bottom, left
• 65. چیدمان (Layout): خصوصیت z-index
• 66. چیدمان (Layout): شناور سازی (Float): left
• 67. چیدمان (Layout): شناور سازی (Float): right
• 68. چیدمان (Layout): شناور سازی (Float): none
• 69. چیدمان (Layout): پاک کردن شناور سازی (Clearfix)
• 70. فلکس باکس (Flexbox): مفاهیم پایه (Container, Items)
• 71. فلکس باکس (Flexbox): خصوصیت display: flex
• 72. فلکس باکس (Flexbox): خصوصیت flex-direction
• 73. فلکس باکس (Flexbox): خصوصیت flex-wrap
• 74. فلکس باکس (Flexbox): خصوصیت justify-content
• 75. فلکس باکس (Flexbox): خصوصیت align-items
• 76. فلکس باکس (Flexbox): خصوصیت align-content
• 77. فلکس باکس (Flexbox): خصوصیت order (برای آیتم ها)
• 78. فلکس باکس (Flexbox): خصوصیت flex-grow (برای آیتم ها)
• 79. فلکس باکس (Flexbox): خصوصیت flex-shrink (برای آیتم ها)
• 80. فلکس باکس (Flexbox): خصوصیت flex-basis (برای آیتم ها)
• 81. فلکس باکس (Flexbox): خصوصیت flex (خلاصه آیتم ها)
• 82. فلکس باکس (Flexbox): خصوصیت align-self (برای آیتم ها)
• 83. CSS Grid: مفاهیم پایه (Container, Items)
• 84. CSS Grid: خصوصیت display: grid
• 85. CSS Grid: خصوصیت grid-template-columns
• 86. CSS Grid: خصوصیت grid-template-rows
• 87. CSS Grid: خصوصیت grid-gap
• 88. CSS Grid: خصوصیت justify-items
• 89. CSS Grid: خصوصیت align-items
• 90. CSS Grid: خصوصیت justify-content
• 91. CSS Grid: خصوصیت align-content
• 92. CSS Grid: خصوصیت grid-column
• 93. CSS Grid: خصوصیت grid-row
• 94. CSS Grid: خصوصیت grid-area
• 95. انتخابگرهای پیشرفته: انتخابگرهای ترکیبی (Descendant)
• 96. انتخابگرهای پیشرفته: انتخابگرهای فرزند مستقیم (Child)
• 97. انتخابگرهای پیشرفته: انتخابگرهای همسایه برادر (Adjacent Sibling)
• 98. انتخابگرهای پیشرفته: انتخابگرهای برادر عمومی (General Sibling)
• 99. انتخابگرهای پیشرفته: انتخابگرهای صفتی (Attribute Selectors)
• 100. انتخابگرهای پیشرفته: انتخابگرهای شبه کلاس (Pseudo-classes): hover

CSS for Narrative Design: داستان‌سرایی با CSS و طراحی وب تعاملی

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

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

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

درباره دوره: سفری به دنیای طراحی وب تعاملی و جذاب

دوره CSS for Narrative Design یک دوره جامع و کاربردی است که به شما آموزش می‌دهد چگونه از CSS برای ایجاد وب‌سایت‌هایی استفاده کنید که نه تنها زیبا هستند، بلکه جذابیت و تعامل بیشتری را برای کاربران به ارمغان می‌آورند. در این دوره، شما با استفاده از مثال‌های عملی و پروژه‌های واقعی، تکنیک‌های پیشرفته CSS را یاد می‌گیرید و یاد می‌گیرید چگونه آن‌ها را برای داستان‌سرایی و طراحی تجربه کاربری به کار ببرید. این دوره شامل ویدئوهای آموزشی، تمرین‌های عملی، و منابع اضافی برای یادگیری عمیق‌تر است.

موضوعات کلیدی: آنچه در این دوره خواهید آموخت

• مقدمه‌ای بر Narrative Design و اهمیت آن در طراحی وب
• اصول اولیه CSS: انتخابگرها، خصوصیات و مقادیر
• مدل جعبه CSS: درک padding، margin، border و content
• layout های پیشرفته: Flexbox و Grid برای طراحی چیدمان‌های پیچیده
• انیمیشن‌ها و Transitions: ایجاد جلوه‌های بصری پویا و جذاب
• Transforms: تغییر شکل عناصر و ایجاد افکت‌های سه‌بعدی
• Selectors پیشرفته: انتخاب عناصر بر اساس حالت‌ها و ویژگی‌ها
• CSS Variables: مدیریت استایل‌ها با استفاده از متغیرها
• Responsive Design: طراحی وب‌سایت‌هایی که در تمام دستگاه‌ها به درستی نمایش داده می‌شوند
• داستان‌سرایی با CSS: استفاده از تکنیک‌ها برای روایت داستان
• بهینه‌سازی وب‌سایت برای عملکرد بهتر
• طراحی رابط کاربری تعاملی: ایجاد عناصر تعاملی جذاب

مخاطبان دوره: این دوره برای چه کسانی مناسب است؟

دوره CSS for Narrative Design برای طیف وسیعی از افراد مناسب است، از جمله:

• طراحان وب که می‌خواهند مهارت‌های CSS خود را ارتقا دهند.
• نویسندگان تعاملی که به دنبال ابزارهایی برای ایجاد تجربیات جذاب هستند.
• طراحان تجربه کاربری (UX) که می‌خواهند درک عمیق‌تری از CSS داشته باشند.
• برنامه‌نویسان فرانت‌اند که می‌خواهند در داستان‌سرایی با CSS مهارت پیدا کنند.
• علاقه‌مندان به طراحی وب که می‌خواهند یک مهارت ارزشمند را یاد بگیرند.

چرا این دوره را بگذرانیم؟: مزایای شرکت در دوره CSS for Narrative Design

با شرکت در دوره CSS for Narrative Design، شما مزایای زیر را به دست خواهید آورد:

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

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

سرفصل‌های دوره: سفری گام به گام به دنیای CSS

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

• بخش 1: مقدمه‌ای بر CSS و Narrative Design
  • معرفی CSS و اهمیت آن در طراحی وب
  • اصول Narrative Design و کاربرد آن
  • نصب و راه‌اندازی محیط کار
• بخش 2: مبانی CSS
  • انتخابگرها و انتخاب عناصر در CSS
  • استفاده از Properties و Values
  • استفاده از رنگ‌ها و فونت‌ها
  • مدل Box Model
• بخش 3: طراحی چیدمان (Layout)
  • مقدمه‌ای بر Flexbox
  • کار با Flexbox و ویژگی‌های آن
  • مقدمه‌ای بر Grid
  • کار با Grid و ایجاد چیدمان‌های پیچیده
  • Responsive Design با Flexbox و Grid
• بخش 4: انیمیشن و Transforms
  • انیمیشن‌های CSS: ساخت و استفاده
  • Transitions: ایجاد تغییرات بصری نرم
  • Transforms: تغییر شکل و موقعیت عناصر
  • کار با Transform Origin
• بخش 5: Advanced Selectors و CSS Variables
  • Pseudo-classes و Pseudo-elements
  • Advanced Selectors
  • CSS Variables: تعریف و استفاده
  • Custom Properties
• بخش 6: Responsive Design
  • مقدمه‌ای بر Responsive Design
  • Media Queries: تعریف و استفاده
  • طراحی وب‌سایت واکنش‌گرا
• بخش 7: داستان‌سرایی با CSS
  • ایجاد انیمیشن‌های داستانی
  • استفاده از Transitions برای روایت
  • ساخت Parallax Scrolling
  • ایجاد تعاملات و Micro-interactions
• بخش 8: بهینه‌سازی و Performance
  • بهینه‌سازی CSS برای سرعت بارگذاری
  • کاهش حجم فایل‌های CSS
• بخش 9: پروژه‌های عملی و نمونه کارها
  • ایجاد یک وب‌سایت شخصی
  • طراحی یک صفحه فرود تعاملی
  • ساخت یک وب‌سایت نمونه کار
• بخش 10: جمع‌بندی و آینده CSS
  • جمع‌بندی مطالب دوره
  • معرفی منابع بیشتر برای یادگیری
  • مروری بر آینده CSS و تکنولوژی‌های وب

این تنها بخشی از سرفصل‌های دوره است. با شرکت در دوره CSS for Narrative Design، شما به یک متخصص CSS تبدیل خواهید شد و می‌توانید پروژه‌های وب‌سایت خود را به سطح بالاتری ارتقا دهید. همین حالا ثبت‌نام کنید و به جمع ما بپیوندید!

📚 محتوای این محصول آموزشی (پکیج کامل)

🎁 محتویات کامل بسته دانلودی

• ویدیوهای آموزشی فارسی — آموزش قدم‌به‌قدم، کاربردی و قابل فهم
• پادکست‌های صوتی فارسی — توضیح مفاهیم کلیدی و نکات تکمیلی
• کتاب PDF فارسی — شامل کلیهٔ سرفصل‌ها و محتوای آموزشی
• کتاب خلاصه نکات ویدیوها و پادکست‌ها – نسخه PDF — مناسب مرور سریع و جمع‌بندی مباحث
• کتاب صدها نکته فارسی (خودمونی) – نسخه PDF — زبان ساده و کاربردی
• کتاب صدها نکته رسمی فارسی – نسخه PDF — نگارش استاندارد، علمی و مناسب چاپ
• کتاب صدها پرسش و پاسخ تشریحی – نسخه PDF
  — هر سؤال بلافاصله همراه با پاسخ کامل و شفاف ارائه شده است؛ مناسب درک عمیق مفاهیم و رفع ابهام.
• کتاب صدها پرسش و پاسخ چهارگزینه‌ای – نسخه PDF (نسخه یادگیری سریع)
  — پاسخ‌ها بلافاصله پس از سؤال قرار دارند؛ مناسب یادگیری سریع و تثبیت مطالب.
• کتاب صدها پرسش و پاسخ چهارگزینه‌ای – نسخه PDF (نسخه خودآزمایی پایان‌بخش)
  — پاسخ‌ها در انتهای هر بخش آمده‌اند؛ مناسب آزمون واقعی و سنجش میزان یادگیری.
• کتاب تمرین‌های درست / نادرست (True / False) – نسخه PDF
  — مناسب افزایش دقت مفهومی و تشخیص صحیح یا نادرست بودن گزاره‌ها.
• کتاب تمرین‌های جای خالی – نسخه PDF
  — تقویت یادگیری فعال و تسلط بر مفاهیم و اصطلاحات کلیدی.

🎯 این بسته یک دورهٔ آموزشی کامل و چندلایه است؛ شامل آموزش تصویری، صوتی، کتاب‌ها، تمرین‌ها و خودآزمایی .

---

ℹ️ نکات مهم هنگام خرید

• این محصول به صورت فایل دانلودی کامل ارائه می‌شود و نسخهٔ چاپی ندارد.
• تمامی فایل‌ها و کتاب‌ها کاملاً فارسی هستند.
• توجه: لینک‌های اختصاصی دوره طی ۴۸ ساعت پس از ثبت سفارش ارسال می‌شوند.
• نیازی به درج شماره موبایل نیست؛ اما برای پشتیبانی سریع‌تر توصیه می‌شود.
• در صورت بروز مشکل در دانلود با شماره 09395106248 تماس بگیرید.
• اگر پرداخت انجام شده ولی لینک‌ها را دریافت نکرده‌اید، نام و نام خانوادگی و نام محصول را پیامک کنید تا لینک‌ها دوباره ارسال شوند.

💬 راه‌های ارتباطی پشتیبانی:
واتس‌اپ یا پیامک: 09395106248
تلگرام: @ma_limbs