دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
1 ساعت 58 دقیقهمتوسط2025-04-23
مدرسین

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
بعدش میری سراغ روشهای مدیریت کانتینرها، اندازهگیریهای دقیق، حفظ نسبت ابعاد و حل مشکلات مربوط به تراز کردن المانها. تو بخش تایپوگرافی پیشرفته، با تکنیکهایی مثل استفاده از متغیرهای سفارشی، تنظیم رنگهای پویا و ساخت تمهای قابل تنظیم (مثلاً حالت تاریک و روشن) آشنا میشی.
همچنین نحوه کار با مدلهای لایهبندی و موقعیتدهی مثل 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() بهتر هستند
چیدمان و موقعیت
- از گرید، فلکس یا جریان استفاده کنید
- افزودن شکافها و ناودانها به شبکه و فلکس
- عناصر شبه، آیتمهای شبکه ای و انعطاف پذیر واقعی هستند
- چیدمان عناصر با استفاده از شبکه
- اقلام شبکه تودرتو با زیرشبکه
- افزودن عناصر ثابت و چسبنده
نتیجه گیری
- مراحل بعدی