دوره آموزشی جعبه ابزار CSS: نکات و روش‌های طراحی و چینش صفحه

دوره آموزشی جعبه ابزار CSS: نکات و روش‌های طراحی و چینش صفحه

1 ساعت 58 دقیقهمتوسط2025-04-23

مدرسین

Carrie Dils

Carrie Dils

Development, WordPress

جزئیات دوره

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

بعدش می‌ری سراغ روش‌های مدیریت کانتینرها، اندازه‌گیری‌های دقیق، حفظ نسبت ابعاد و حل مشکلات مربوط به تراز کردن المان‌ها. تو بخش تایپوگرافی پیشرفته، با تکنیک‌هایی مثل استفاده از متغیرهای سفارشی، تنظیم رنگ‌های پویا و ساخت تم‌های قابل تنظیم (مثلاً حالت تاریک و روشن) آشنا می‌شی.

همچنین نحوه کار با مدل‌های لایه‌بندی و موقعیت‌دهی مثل Grid، Flexbox و Float رو یاد می‌گیری تا بتونی طراحی‌های واکنش‌گرا و چشم‌نواز بسازی. وقتی این دوره رو تموم کنی، ابزارها و دانش لازم رو داری تا مهارت CSS خودت رو حسابی بالا ببری و طرح‌های منظم و جذابی خلق کنی.

اهداف یادگیری
بررسی گزینه‌های مختلف راه‌اندازی CSS مثل Normalize و Reset و استفاده از ابزارهایی مثل Stylelint برای نوشتن کدهای تمیز و قابل نگهداری
استفاده از واحدهای CSS، box-sizing، ویژگی‌های منطقی و تکنیک‌های Float برای ساخت کانتینرهای قابل تنظیم در شرایط مختلف
طراحی متن‌های واکنش‌گرا و جذاب با استفاده از واحدها، ویژگی‌ها و افکت‌هایی مثل drop caps، گرادیانت و کوتاه کردن متن
ادغام متغیرهای سفارشی، مقادیر جایگزین و رنگ‌های HSLA در کد برای ساخت تم‌های پویا از جمله حالت تاریک و روشن
انتخاب مناسب‌ترین مدل لایه‌بندی (Grid، Flexbox یا Float) برای نیازهای مختلف طراحی و ساخت طرح‌های پیچیده با تکنیک‌های پیشرفته موقعیت‌دهی CSS

مهارت ها

Web Design BusinessCSSWeb StandardsWeb DesignSmall Business and EntrepreneurshipFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

سرفصل ها

مقدمه

  • تکنیک‌های قدرت CSS
  • آنچه باید بدانید
  • استفاده از GitHub Codespaces با این دوره

کار با CSS

  • آیا باید از نرمال کردن، تنظیم مجدد یا روش دیگری استفاده کنید
  • نوشتن CSS بهتر با stylelint

کار با کانتینرها

  • واحد vw و مشکل نوار اسکرول کلاسیک
  • سایزبندی منسجم با باکس سایزینگ - حاشیه-باکس
  • استفاده از خواص جعبه منطقی در مقابل بالا، راست، پایین، چپ
  • تغییر حالت نوشتن
  • عناصر را در هر ظرفی به صورت افقی و عمودی تراز کنید
  • مرکزیت عناصر شبه با موقعیت مطلق
  • حفظ نسبت تصویر در کانتینرها و تصاویر
  • استفاده از float و clear در CSS مدرن
  • متن را در اطراف اشکال سفارشی با shape-out بپیچید

تایپوگرافی و جلوه‌های متن

  • درک واحدهای px، em و rem
  • تنظیم طول خطوط بهینه با واحد ch
  • اندازه‌گیری پاسخگو با min()، max() و clamp()
  • معنی دادن به ویژگی خط-ارتفاع
  • متعادل کردن بسته بندی متن برای خوانایی بهتر
  • کوتاه کردن طول متن و تعداد خطوط متن
  • انتخاب متن و برجسته کردن سبک
  • پر کردن متن با گرادیان یا تصویر

رنگ‌ها و خواص سفارشی

  • استفاده از مقادیر بازگشتی با ویژگی‌های سفارشی
  • تودرتوی خواص سفارشی برای ایجاد توابع
  • ایجاد حالت روشن یا تاریک با ویژگی‌های سفارشی
  • چرا رنگ‌های hsla() بهتر هستند

چیدمان و موقعیت

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

نتیجه گیری

  • مراحل بعدی
۴۰,۰۰۰ تومان