دوره آموزشی جعبه ابزار 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
سرفصل ها
0. مقدمه
- 01 - تکنیکهای قدرت CSS
- 02 - آنچه باید بدانید
- 03 - استفاده از GitHub Codespaces با این دوره
1. کار با CSS
- 04 - آیا باید از نرمال کردن، تنظیم مجدد یا روش دیگری استفاده کنید
- 05 - نوشتن CSS بهتر با stylelint
2. کار با کانتینرها
- 06 - واحد vw و مشکل نوار اسکرول کلاسیک
- 07 - سایزبندی منسجم با باکس سایزینگ - حاشیه-باکس
- 08 - استفاده از خواص جعبه منطقی در مقابل بالا، راست، پایین، چپ
- 09 - تغییر حالت نوشتن
- 10 - عناصر را در هر ظرفی به صورت افقی و عمودی تراز کنید
- 11 - مرکزیت عناصر شبه با موقعیت مطلق
- 12 - حفظ نسبت تصویر در کانتینرها و تصاویر
- 13 - استفاده از float و clear در CSS مدرن
- 14 - متن را در اطراف اشکال سفارشی با shape-out بپیچید
3. تایپوگرافی و جلوههای متن
- 15 - درک واحدهای px، em و rem
- 16 - تنظیم طول خطوط بهینه با واحد ch
- 17 - اندازهگیری پاسخگو با min()، max() و clamp()
- 18 - معنی دادن به ویژگی خط-ارتفاع
- 19 - متعادل کردن بسته بندی متن برای خوانایی بهتر
- 20 - کوتاه کردن طول متن و تعداد خطوط متن
- 21 - انتخاب متن و برجسته کردن سبک
- 22 - پر کردن متن با گرادیان یا تصویر
4. رنگها و خواص سفارشی
- 23 - استفاده از مقادیر بازگشتی با ویژگیهای سفارشی
- 24 - تودرتوی خواص سفارشی برای ایجاد توابع
- 25 - ایجاد حالت روشن یا تاریک با ویژگیهای سفارشی
- 26 - چرا رنگهای hsla() بهتر هستند
5. چیدمان و موقعیت
- 27 - از گرید، فلکس یا جریان استفاده کنید
- 28 - افزودن شکافها و ناودانها به شبکه و فلکس
- 29 - عناصر شبه، آیتمهای شبکه ای و انعطاف پذیر واقعی هستند
- 30 - چیدمان عناصر با استفاده از شبکه
- 31 - اقلام شبکه تودرتو با زیرشبکه
- 32 - افزودن عناصر ثابت و چسبنده
نتیجه گیری
- 33 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی زیباییشناسی طراحی برای تجربههای وب
- دوره آموزشی یادگیری Wix
- دوره آموزشی Canva برای پروژههای طراحی وب و دیجیتال
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی Figma: از طراحی تا پیاده سازی CSS
- دوره آموزشی اصول برنامه ریزی بدون کد برای وب
- دوره آموزشی نقشه برداری از فرایند طراحی وب مدرن