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

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

عنوان دوره: CSS for Creative Pursuits

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

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

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

• 1. CSS چیست و چرا اهمیت دارد
• 2. تاریخچه CSS
• 3. CSS در مقابل HTML
• 4. ساختار اولیه CSS
• 5. نحوه ارتباط CSS با HTML (Inline, Internal, External)
• 6. انتخابگرهای اساسی (Basic Selectors)
• 7. انتخابگرهای کلاس (Class Selectors)
• 8. انتخابگرهای ID (ID Selectors)
• 9. انتخابگرهای تگ (Tag Selectors)
• 10. انتخابگرهای ترکیبی (Combinators)
• 11. انتخابگرهای صفات (Attribute Selectors)
• 12. انتخابگرهای عمومی (Universal Selector)
• 13. انتخابگرهای شبه کلاس (Pseudo-classes)
• 14. انتخابگرهای شبه المان (Pseudo-elements)
• 15. مقداردهی اولیه به خصوصیات CSS (Initial Values)
• 16. مقادیر و واحدها در CSS (Values and Units)
• 17. واحدها: پیکسل (px)
• 18. واحدها: درصد (%)
• 19. واحدها: em و rem
• 20. واحدها: vw و vh
• 21. واحدها: pt, pc, cm, mm, in
• 22. واحدها: ch, ex
• 23. واحدها: calc()
• 24. رنگ‌ها در CSS (Colors)
• 25. نام رنگ‌ها (Color Names)
• 26. مقادیر هگزادسیمال (Hexadecimal Values)
• 27. مقادیر RGB (RGB Values)
• 28. مقادیر RGBA (RGBA Values)
• 29. مقادیر HSL (HSL Values)
• 30. مقادیر HSLA (HSLA Values)
• 31. خصوصیت background-color
• 32. خصوصیت color
• 33. خصوصیت opacity
• 34. مدیریت پس‌زمینه (Background Management)
• 35. خصوصیت background-image
• 36. خصوصیت background-repeat
• 37. خصوصیت background-position
• 38. خصوصیت background-attachment
• 39. خصوصیت background-size
• 40. خصوصیت shorthand background
• 41. مدیریت متن (Text Management)
• 42. خصوصیت font-family
• 43. خصوصیت font-size
• 44. خصوصیت font-weight
• 45. خصوصیت font-style
• 46. خصوصیت text-decoration
• 47. خصوصیت text-align
• 48. خصوصیت line-height
• 49. خصوصیت letter-spacing
• 50. خصوصیت word-spacing
• 51. خصوصیت text-transform
• 52. خصوصیت text-shadow
• 53. مدیریت باکس مدل (Box Model)
• 54. عرض (width) و ارتفاع (height)
• 55. padding
• 56. border (سبک، عرض، رنگ)
• 57. margin
• 58. خصوصیت box-sizing (content-box vs border-box)
• 59. نمایش المان‌ها (Display Property)
• 60. display: block
• 61. display: inline
• 62. display: inline-block
• 63. display: none
• 64. display: flex
• 65. display: grid
• 66. خصوصیت position
• 67. position: static
• 68. position: relative
• 69. position: absolute
• 70. position: fixed
• 71. position: sticky
• 72. خصوصیت z-index
• 73. شناور کردن المان‌ها (Floats)
• 74. float: left
• 75. float: right
• 76. float: none
• 77. روش‌های پاکسازی float (Clearfix)
• 78. مدیریت طرح‌بندی (Layout Management)
• 79. CSS Grid Layout - مقدمه
• 80. CSS Grid Layout - ساختار کلی
• 81. CSS Grid Layout - نواحی (Areas)
• 82. CSS Grid Layout - ردیف‌ها (Rows) و ستون‌ها (Columns)
• 83. CSS Grid Layout - تراز کردن (Alignment)
• 84. CSS Flexbox - مقدمه
• 85. CSS Flexbox - خصوصیات نگهدارنده (Container Properties)
• 86. CSS Flexbox - خصوصیات آیتم (Item Properties)
• 87. CSS Flexbox - تراز کردن (Alignment)
• 88. مدیریت فهرست‌ها (List Management)
• 89. خصوصیت list-style-type
• 90. خصوصیت list-style-position
• 91. خصوصیت list-style-image
• 92. خصوصیت shorthand list-style
• 93. مدیریت جداول (Table Management)
• 94. خصوصیت border-collapse
• 95. خصوصیت border-spacing
• 96. خصوصیت caption-side
• 97. مدیریت فرم‌ها (Form Management)
• 98. استایل‌دهی به input, textarea, select
• 99. استایل‌دهی به دکمه‌ها
• 100. استایل‌دهی به برچسب‌ها (Labels)

CSS for Creative Pursuits: دروازه‌ای به سوی طراحی وب خلاقانه

آیا آماده‌اید دنیای طراحی وب را متحول کنید؟

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

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

درباره دوره

دوره CSS for Creative Pursuits یک دوره جامع و کاربردی است که به شما تمام مهارت‌های لازم برای تسلط بر CSS را آموزش می‌دهد. این دوره شامل ویدئوهای آموزشی با کیفیت بالا، تمرین‌های عملی، نمونه‌کارهای جذاب و پشتیبانی کامل است. ما شما را در هر مرحله از یادگیری همراهی می‌کنیم تا اطمینان حاصل کنیم که مفاهیم را به طور کامل درک می‌کنید و می‌توانید آن‌ها را در پروژه‌های واقعی به کار ببرید.

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

• مبانی CSS: انتخابگرها، قوانین، و ویژگی‌ها
• کار با متن و فونت‌ها: استایل‌دهی به نوشته‌ها و استفاده از فونت‌های جذاب
• طراحی چیدمان (Layout): استفاده از Flexbox و Grid برای ایجاد چیدمان‌های پیچیده
• استایل‌دهی به تصاویر و ویدئوها: بهینه‌سازی و طراحی المان‌های رسانه‌ای
• انیمیشن‌ها و ترانزیشن‌ها: ایجاد افکت‌های بصری جذاب و پویا
• CSS Responsive: طراحی وبسایت‌های واکنش‌گرا برای دستگاه‌های مختلف
• Sass و Preprocessors: آشنایی با ابزارهای پیشرفته CSS
• بهینه‌سازی CSS: افزایش سرعت و عملکرد وبسایت
• CSS Frameworks: معرفی و استفاده از Bootstrap و Tailwind CSS
• پروژه‌های عملی: ساخت وبسایت‌های واقعی و تمرین مهارت‌ها

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

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

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

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

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

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

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

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

بخش 1: آشنایی با CSS و مبانی

• مقدمه‌ای بر CSS و نقش آن در طراحی وب
• نحوه اتصال CSS به HTML (داخلی، خارجی، Inline)
• ساختار CSS: انتخابگرها، ویژگی‌ها، و مقادیر
• انتخابگرهای پایه: عنصر، کلاس، ID
• انتخابگرهای پیشرفته: فرزند، هم‌جوار، و …
• کار با واحدهای اندازه‌گیری (px, em, rem, %)
• قوانین وراثت و اولویت در CSS
• استفاده از کامنت‌گذاری در CSS
• نصب و راه‌اندازی محیط توسعه (VS Code و ...)
• ایجاد اولین وبسایت با CSS

بخش 2: استایل‌دهی به متن

• ویژگی font-family و انتخاب فونت مناسب
• ویژگی font-size و تنظیم اندازه متن
• ویژگی font-weight و تنظیم ضخامت فونت
• ویژگی font-style و ایتالیک کردن متن
• ویژگی text-align و تراز کردن متن
• ویژگی text-decoration و افزودن تزئینات به متن
• ویژگی text-transform و تبدیل حروف
• ویژگی line-height و تنظیم فاصله خطوط
• ویژگی letter-spacing و تنظیم فاصله بین حروف
• ویژگی word-spacing و تنظیم فاصله بین کلمات
• استفاده از فونت‌های وب (Google Fonts و ...)
• کار با سایه‌های متن (text-shadow)
• تمرین: استایل‌دهی به یک پاراگراف

بخش 3: کار با جعبه مدل (Box Model)

• مفاهیم padding، border و margin
• تنظیم padding، border و margin به صورت جداگانه
• کار با border-radius و ایجاد گوشه‌های گرد
• استفاده از box-sizing: border-box
• شناخت انواع display (block, inline, inline-block)
• ویژگی width و height
• ویژگی overflow و مدیریت محتوای سرریز شده
• ویژگی outline و افزودن حاشیه بیرونی
• تمرین: طراحی یک باکس با استفاده از Box Model

بخش 4: چیدمان (Layout) با Flexbox

• مقدمه‌ای بر Flexbox و مزایای آن
• ویژگی display: flex
• ویژگی flex-direction و تنظیم جهت قرارگیری المان‌ها
• ویژگی justify-content و تراز کردن المان‌ها در محور اصلی
• ویژگی align-items و تراز کردن المان‌ها در محور عمودی
• ویژگی align-content و تراز کردن خطوط (در صورت وجود)
• ویژگی flex-wrap و مدیریت المان‌های چند خطی
• ویژگی flex-grow، flex-shrink و flex-basis
• ویژگی order و تغییر ترتیب المان‌ها
• کاربرد Flexbox در طراحی منوهای ناوبری
• کاربرد Flexbox در طراحی قالب‌بندی وبسایت
• تمرین: طراحی یک چیدمان با Flexbox

بخش 5: چیدمان (Layout) با Grid

• مقدمه‌ای بر Grid و مزایای آن
• ویژگی display: grid
• تعریف ردیف‌ها و ستون‌ها با grid-template-columns و grid-template-rows
• تنظیم فاصله بین ردیف‌ها و ستون‌ها (gap, row-gap, column-gap)
• قرار دادن المان‌ها در Grid با grid-column-start, grid-column-end, grid-row-start, grid-row-end
• قرار دادن المان‌ها با grid-area
• ویژگی justify-items و align-items
• ویژگی justify-content و align-content
• کاربرد Grid در طراحی قالب‌بندی وبسایت
• تمرین: طراحی یک چیدمان با Grid

بخش 6: استایل‌دهی به تصاویر و ویدئوها

• ویژگی width و height برای تصاویر
• ویژگی object-fit و کنترل نحوه نمایش تصاویر
• ویژگی object-position و تنظیم موقعیت تصاویر
• ویژگی border-radius برای تصاویر
• افزودن سایه به تصاویر (box-shadow)
• استفاده از تصاویر پس‌زمینه (background-image)
• تنظیم موقعیت، اندازه و تکرار تصاویر پس‌زمینه
• استایل‌دهی به ویدئوها
• پشتیبانی از انواع فرمت‌های ویدئویی
• بهینه‌سازی تصاویر برای وبسایت
• تمرین: طراحی یک گالری تصاویر

بخش 7: انیمیشن‌ها و ترانزیشن‌ها

• مقدمه‌ای بر انیمیشن‌ها و ترانزیشن‌ها
• ویژگی transition و ایجاد ترانزیشن‌های ساده
• تنظیم مدت زمان، تاخیر، و نوع ترانزیشن
• ویژگی transform و تغییر شکل المان‌ها
• ایجاد انیمیشن‌های CSS با keyframes
• کار با انواع transform (translate, rotate, scale, skew)
• ایجاد انیمیشن‌های پیشرفته
• تمرین: طراحی یک دکمه با انیمیشن‌های جذاب

بخش 8: CSS Responsive و طراحی واکنش‌گرا

• مفاهیم Responsive Web Design
• استفاده از Media Queries
• طراحی چیدمان‌های واکنش‌گرا با Flexbox و Grid
• طراحی منوهای موبایل-فرندلی
• بهینه‌سازی تصاویر برای دستگاه‌های مختلف
• تست وبسایت در دستگاه‌های مختلف
• اصول طراحی موبایل‌اول (Mobile-First)
• تمرین: تبدیل یک وبسایت به واکنش‌گرا

بخش 9: CSS Preprocessors (Sass)

• مقدمه‌ای بر Sass و مزایای آن
• نصب و راه‌اندازی Sass
• متغیرها در Sass
• Nested Rules در Sass
• Mixins و Functions در Sass
• Inheritance و Extend در Sass
• کامپایل کردن Sass به CSS
• تمرین: استفاده از Sass در یک پروژه

بخش 10: CSS Frameworks (Bootstrap و Tailwind CSS)

• معرفی Bootstrap و مزایای آن
• نصب و راه‌اندازی Bootstrap
• استفاده از کلاس‌های از پیش تعریف شده Bootstrap
• طراحی یک صفحه وب با Bootstrap
• معرفی Tailwind CSS و مزایای آن
• نصب و راه‌اندازی Tailwind CSS
• استفاده از کلاس‌های utility Tailwind CSS
• طراحی یک صفحه وب با Tailwind CSS
• مقایسه Bootstrap و Tailwind CSS
• تمرین: استفاده از Bootstrap و Tailwind CSS در یک پروژه

بخش 11: بهینه‌سازی و عملکرد CSS

• کاهش حجم CSS
• فشرده‌سازی CSS
• استفاده از CSS Sprite
• بهینه‌سازی تصاویر
• استفاده از Cache
• بارگذاری غیر همزمان CSS
• ابزارهای بهینه‌سازی CSS

بخش 12: پروژه‌های عملی

• طراحی یک صفحه وب شخصی
• طراحی یک وبلاگ
• طراحی یک صفحه فرود (Landing Page)
• طراحی یک وبسایت فروشگاهی
• پروژه نهایی: طراحی یک وبسایت کامل

این فقط بخشی از سرفصل‌های دوره CSS for Creative Pursuits است. با شرکت در این دوره، شما به تمام این مباحث و موارد بیشتر دسترسی خواهید داشت. همین امروز ثبت‌نام کنید و سفر خود را به دنیای طراحی وب آغاز کنید!