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

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

عنوان دوره: CSS for Green Building

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

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

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

• 1. مقدمه: CSS و نقش آن در وب‌سایت‌های ساختمان سبز
• 2. CSS چیست و چرا اهمیت دارد؟
• 3. ارتباط بین HTML (ساختار) و CSS (طراحی)
• 4. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 5. آشنایی با سینتکس CSS: انتخابگر، خصوصیت و مقدار
• 6. اولین استایل‌دهی: تغییر رنگ و پس‌زمینه
• 7. کامنت‌گذاری در CSS
• 8. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 9. انتخابگرهای ترکیبی (Combinators)
• 10. انتخابگرهای ویژگی (Attribute Selectors)
• 11. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 12. شبه‌المان‌ها (Pseudo-elements): ::before, ::after
• 13. اولویت در CSS: مفهوم Specificity
• 14. مفهوم وراثت (Inheritance)
• 15. مقدار !important و خطرات استفاده از آن
• 16. آشنایی با Box Model: محتوا، Padding، Border، Margin
• 17. خصوصیت box-sizing: content-box در مقابل border-box
• 18. تنظیم عرض (width) و ارتفاع (height) المان‌ها
• 19. استفاده از min-width و max-width برای طراحی انعطاف‌پذیر
• 20. کنترل سرریز محتوا با خصوصیت overflow
• 21. واحدهای اندازه‌گیری مطلق: px, pt
• 22. واحدهای اندازه‌گیری نسبی: em, rem
• 23. واحدهای نسبی به Viewport: vw, vh, vmin, vmax
• 24. درصد (%) به عنوان واحد اندازه‌گیری
• 25. استایل‌دهی به حاشیه‌ها (Borders)
• 26. ایجاد گوشه‌های گرد با border-radius
• 27. ایجاد سایه برای جعبه‌ها با box-shadow
• 28. رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و RGBA
• 29. مدل رنگی HSL و HSLA برای رنگ‌های طبیعی‌تر
• 30. تنظیم رنگ متن (color)
• 31. تنظیم رنگ پس‌زمینه (background-color)
• 32. استفاده از تصویر پس‌زمینه (background-image)
• 33. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 34. تنظیم اندازه تصویر پس‌زمینه با background-size
• 35. ایجاد گرادینت‌های خطی و شعاعی در پس‌زمینه
• 36. مبانی تایپوگرافی در وب
• 37. خصوصیت font-family و فونت‌های امن وب
• 38. افزودن فونت‌های سفارشی با @font-face
• 39. تنظیم اندازه فونت (font-size)
• 40. تنظیم وزن فونت (font-weight)
• 41. استایل‌دهی به متن: font-style و text-decoration
• 42. تنظیمات فاصله‌گذاری متن: line-height و letter-spacing
• 43. تراز کردن متن با text-align
• 44. تغییر حالت حروف با text-transform
• 45. استایل‌دهی به لیست‌های مرتب و نامرتب
• 46. خصوصیت display: block, inline, inline-block
• 47. پنهان کردن المان‌ها با display: none و visibility: hidden
• 48. مفهوم جریان عادی سند (Normal Flow)
• 49. موقعیت‌دهی (Positioning): static و relative
• 50. موقعیت‌دهی مطلق (absolute)
• 51. موقعیت‌دهی ثابت (fixed) و چسبان (sticky)
• 52. کنترل لایه‌ها با z-index
• 53. استفاده از Float برای چیدمان (روش قدیمی)
• 54. پاک‌سازی Float با Clearfix
• 55. مقدمه‌ای بر Flexbox: چیدمان یک‌بعدی مدرن
• 56. ایجاد یک Flex Container: خصوصیت display: flex
• 57. محور اصلی و محور متقاطع در Flexbox
• 58. تنظیم جهت چیدمان با flex-direction
• 59. شکستن خط در Flexbox با flex-wrap
• 60. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 61. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 62. تراز کردن خطوط چندگانه با align-content
• 63. تغییر ترتیب آیتم‌ها با order
• 64. رشد و کوچک شدن آیتم‌ها: flex-grow و flex-shrink
• 65. اندازه پایه آیتم‌ها با flex-basis
• 66. مقدمه‌ای بر Grid: چیدمان دوبعدی قدرتمند
• 67. ایجاد یک Grid Container: خصوصیت display: grid
• 68. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 69. واحد fr برای چیدمان انعطاف‌پذیر در Grid
• 70. ایجاد فاصله بین آیتم‌ها با gap
• 71. موقعیت‌دهی آیتم‌ها در Grid با شماره خطوط
• 72. نام‌گذاری خطوط در Grid
• 73. استفاده از grid-template-areas برای چیدمان معنایی
• 74. مفهوم طراحی وب واکنش‌گرا (Responsive Web Design)
• 75. تنظیم Viewport با تگ متا
• 76. معرفی Media Queries
• 77. رویکرد Mobile-First در طراحی واکنش‌گرا
• 78. استفاده از Media Queries برای Breakpoint‌های مختلف
• 79. ایجاد تصاویر واکنش‌گرا
• 80. تایپوگرافی واکنش‌گرا
• 81. مخفی کردن یا نمایش المان‌ها در اندازه‌های مختلف صفحه
• 82. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده واکنش‌گرا
• 83. ایجاد Transition برای انیمیشن‌های نرم
• 84. خصوصیات Transition: property, duration, timing-function, delay
• 85. مفهوم Transform: حرکت، چرخش و تغییر اندازه
• 86. توابع Transform دوبعدی: translate, rotate, scale, skew
• 87. توابع Transform سه‌بعدی
• 88. انیمیشن‌های پیچیده‌تر با @keyframes
• 89. کنترل انیمیشن با خصوصیت animation
• 90. متغیرها در CSS (Custom Properties) برای تم‌سازی
• 91. استفاده از تابع calc() برای محاسبات دینامیک
• 92. انتخابگرهای پیشرفته: nth-child, nth-of-type
• 93. اعمال فیلترهای بصری با خصوصیت filter
• 94. ایجاد افکت شیشه مات با backdrop-filter
• 95. برش المان‌ها به اشکال غیرمستطیلی با clip-path
• 96. کنترل نحوه نمایش تصویر در کادر با object-fit
• 97. ترکیب رنگ لایه‌ها با-blend-mode
• 98. سازماندهی فایل‌های CSS
• 99. معماری CSS: مفاهیم BEM
• 100. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS

CSS for Green Building: وبسایت‌های سازگار با محیط زیست را طراحی کنید!

معرفی دوره

آیا می‌خواهید وبسایت‌هایی طراحی کنید که نه تنها زیبا و کاربردی باشند، بلکه به حفظ محیط زیست نیز کمک کنند؟ آیا به دنبال راهی برای ادغام دانش برنامه‌نویسی خود با اصول معماری سبز هستید؟ دوره CSS for Green Building دقیقا برای شما طراحی شده است!

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

فرصت را از دست ندهید! همین حالا در دوره CSS for Green Building ثبت نام کنید و به جمع طراحان وب آگاه به محیط زیست بپیوندید.

درباره دوره

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

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

• مبانی CSS و اصول طراحی وب
• بهینه‌سازی تصاویر برای کاهش حجم و مصرف انرژی
• استفاده از فونت‌های بهینه و کم حجم
• طراحی وبسایت‌های واکنش‌گرا (Responsive) برای دستگاه‌های مختلف
• بهینه‌سازی کد CSS برای کاهش حجم و سرعت بارگذاری
• پیاده‌سازی طرح‌های رنگی پایدار و سازگار با محیط زیست
• استفاده از CSS برای ایجاد انیمیشن‌های سبک و بهینه
• آشنایی با ابزارهای تست و بهینه‌سازی وبسایت
• معماری سبز و تاثیر آن بر طراحی وب
• پیاده‌سازی استانداردهای دسترسی‌پذیری وب (Accessibility)

مخاطبان دوره

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

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

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

دلایل زیادی وجود دارد که چرا باید در دوره CSS for Green Building شرکت کنید:

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

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

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

• مقدمه‌ای بر CSS و معماری سبز:
  • آشنایی با تاریخچه و مفاهیم اولیه CSS
  • معرفی معماری سبز و پایداری
  • ارتباط بین طراحی وب و حفظ محیط زیست
• انتخاب رنگ‌ها و فونت‌های پایدار:
  • نظریه رنگ و تاثیر آن بر مصرف انرژی
  • انتخاب پالت‌های رنگی سازگار با محیط زیست
  • معرفی فونت‌های بهینه و کم حجم
• بهینه‌سازی تصاویر و ویدیوها:
  • فرمت‌های مختلف تصاویر و ویدیوها
  • تکنیک‌های فشرده‌سازی و کاهش حجم تصاویر
  • استفاده از lazy loading برای بارگذاری تصاویر
• طراحی واکنش‌گرا (Responsive Design):
  • مفاهیم و تکنیک‌های طراحی واکنش‌گرا
  • استفاده از media queries برای سازگاری با دستگاه‌های مختلف
  • بهینه‌سازی تصاویر و ویدیوها برای دستگاه‌های موبایل
• بهینه‌سازی کد CSS:
  • حذف کدهای اضافی و غیرضروری
  • استفاده از minification و compression
  • استفاده از preprocessors مانند Sass و Less
• دسترسی‌پذیری وب (Accessibility):
  • استانداردهای دسترسی‌پذیری وب (WCAG)
  • ایجاد وبسایت‌هایی که برای همه افراد، از جمله افراد دارای معلولیت، قابل استفاده باشند
  • استفاده از ARIA attributes
• انیمیشن‌های CSS و عملکرد:
  • ایجاد انیمیشن‌های سبک و بهینه با CSS
  • بهینه‌سازی انیمیشن‌ها برای کاهش مصرف CPU و GPU
  • استفاده از transforms و transitions
• تست و عیب‌یابی:
  • استفاده از ابزارهای تست سرعت وبسایت
  • شناسایی و رفع مشکلات عملکرد
  • بهینه‌سازی برای موتورهای جستجو (SEO)
• پروژه عملی:
  • طراحی و پیاده‌سازی یک وبسایت سبز و پایدار از ابتدا تا انتها
  • دریافت بازخورد و راهنمایی از متخصصان
  • ارائه پروژه نهایی
• و بسیاری موضوعات دیگر...