دوره آموزشی یادگیری اصولی CSS
5 ساعت 3 دقیقهمبتدی2025-10-21
مدرسین

Christina Truong
Educator, Front-End Developer
جزئیات دوره
اگه میخوای صفحات وب حرفهای بسازی و ظاهر سایتت جذاب و مدرن باشه، این دوره آموزش CSS دقیقاً همون چیزییه که نیاز داری. تو این دوره، کریستینا ترونگ، کارشناس و مدرس فناوری، همه مفاهیم پایه CSS و سینتکس اون رو بهت یاد میده تا بتونی HTML خودت رو سریع و بهینه استایل بدی.
تو این آموزش، اول با اصول پایه CSS و نحوهی نوشتن کدهای مرتب و قابل فهم آشنا میشی. بعد یاد میگیری چطور با Box Model کنترل کاملی روی فاصلهها، حاشیهها و اندازه عناصر داشته باشی. ابزارهای قدرتمند مثل Flexbox و Grid هم بهت نشون داده میشن تا صفحات داینامیک و مدرن بسازی که هم زیبا باشن و هم کاربردی.
یاد میگیری چطور رنگ، فونت و تایپوگرافی رو به شکل حرفهای روی صفحاتت اعمال کنی تا ظاهر سایتت چشمنواز و کاربرپسند بشه. علاوه بر این، با طراحی ریسپانسیو و استفاده از Media Queries آشنا میشی تا صفحات وبت روی انواع دستگاهها مثل موبایل، تبلت و دسکتاپ عالی و بدون مشکل نمایش داده بشه.
این دوره شامل پروژههای عملی و تمرینهای کاربردیه که بهت کمک میکنه مفاهیم CSS رو روی پروژههای واقعی به کار ببری. بعد از گذروندن دوره، میتونی با اعتماد به نفس کامل تکنیکهای CSS رو برای طراحی صفحات وب جذاب و ریسپانسیو پیاده کنی. این آموزش مخصوص تازهکارها و کسایی که میخوان دانش CSS خودشون رو بهروز کنن عالیه.
🎯 اهداف یادگیری
یاد میگیری چطور CSS تمیز و منظم بنویسی تا صفحات وبت ظاهر حرفهای داشته باشن.
با مفاهیم پایه CSS مثل Box Model، انتخابگرها (Selectors) و Specificity آشنا میشی و میتونی اونها رو درست به کار ببری.
مهارت استفاده از Flexbox و Grid برای طراحی لایهبندی صفحات داینامیک و پیشرفته رو یاد میگیری.
با استایل دادن به فونتها و متون، ظاهر محتوا و تجربه کاربری صفحاتت رو بهبود میبخشی.
یاد میگیری چطور با Media Queries صفحات ریسپانسیو بسازی تا سایتت روی همه دستگاهها بدون مشکل نمایش داده بشه.
تو این آموزش، اول با اصول پایه CSS و نحوهی نوشتن کدهای مرتب و قابل فهم آشنا میشی. بعد یاد میگیری چطور با Box Model کنترل کاملی روی فاصلهها، حاشیهها و اندازه عناصر داشته باشی. ابزارهای قدرتمند مثل Flexbox و Grid هم بهت نشون داده میشن تا صفحات داینامیک و مدرن بسازی که هم زیبا باشن و هم کاربردی.
یاد میگیری چطور رنگ، فونت و تایپوگرافی رو به شکل حرفهای روی صفحاتت اعمال کنی تا ظاهر سایتت چشمنواز و کاربرپسند بشه. علاوه بر این، با طراحی ریسپانسیو و استفاده از Media Queries آشنا میشی تا صفحات وبت روی انواع دستگاهها مثل موبایل، تبلت و دسکتاپ عالی و بدون مشکل نمایش داده بشه.
این دوره شامل پروژههای عملی و تمرینهای کاربردیه که بهت کمک میکنه مفاهیم CSS رو روی پروژههای واقعی به کار ببری. بعد از گذروندن دوره، میتونی با اعتماد به نفس کامل تکنیکهای CSS رو برای طراحی صفحات وب جذاب و ریسپانسیو پیاده کنی. این آموزش مخصوص تازهکارها و کسایی که میخوان دانش CSS خودشون رو بهروز کنن عالیه.
🎯 اهداف یادگیری
یاد میگیری چطور CSS تمیز و منظم بنویسی تا صفحات وبت ظاهر حرفهای داشته باشن.
با مفاهیم پایه CSS مثل Box Model، انتخابگرها (Selectors) و Specificity آشنا میشی و میتونی اونها رو درست به کار ببری.
مهارت استفاده از Flexbox و Grid برای طراحی لایهبندی صفحات داینامیک و پیشرفته رو یاد میگیری.
با استایل دادن به فونتها و متون، ظاهر محتوا و تجربه کاربری صفحاتت رو بهبود میبخشی.
یاد میگیری چطور با Media Queries صفحات ریسپانسیو بسازی تا سایتت روی همه دستگاهها بدون مشکل نمایش داده بشه.
سرفصل ها
مقدمه
- چرا باید CSS یاد بگیرید
شروع کار
- HTML و CSS
- کار با فایلهای وبسایت
- تنظیم ویرایشگر متن شما
- پروژه - بررسی اجمالی
- پروژه - سفارشیسازی محتوا
- پروژه - مشاهده فایلها با سرور زنده
- تصاویر را از کجا پیدا کنیم
- ایجاد تصاویر آماده برای وب
- پروژه - اضافه کردن تصاویر
مفاهیم اصلی CSS
- مشخصات CSS و W3C
- سینتکس و اصطلاحات CSS
- انواع دادههای CSS
- انتخابگرهای نوع و عمومی
- انتخابگرهای شناسه
- انتخابگرهای کلاس
- ترکیبکنندهها و فهرستهای انتخابگر
- شبه کلاسها و شبه عناصر
- وراثت، آبشاری و اختصاصی بودن
- ویژگیهای سفارشی
- ارجاع به CSS
- پروژه - ایجاد یک فایل CSS
رنگ و سبکهای پسزمینه
- ویژگی و مقدار رنگ
- ایجاد پالت رنگ
- پروژه - تعریف ویژگیهای سفارشی
- ویژگی پسزمینه
- استفاده از چندین سبک پسزمینه
- پروژه - رنگهای پسزمینه و متن
- پروژه - سبکهای تصویر پسزمینه
مدل جعبهای CSS
- مقدمهای بر مدل جعبهای CSS
- عرض، ارتفاع و نمایش
- فاصلهگذاری، حاشیه و مرز
- ترازبندی وسط با حاشیه
- اندازهبندی جعبه و اصلاح مدل جعبه
- کار با ابزارهای توسعهدهندگان
- جمع شدن حاشیه و فاصلهگذاری درونخطی
- ایجاد طرحبندیهای تمامقد
- پروژه - تنظیم مجدد لیست و بهروزرسانیهای هدر
- پروژه - وسطچین کردن محتوا با حاشیه
- پروژه - تنظیم مجدد عنوان و سبکهای حاشیه
طرحبندیها با Flexbox
- مقدمهای بر Flexbox
- کار با آیتمهای انعطافپذیر
- اندازهگذاری با ویژگیهای flex
- تمرین تعیین اندازه Flexbox
- ترازبندی آیتمهای فلکس
- پروژه - ترازبندی عناصر با Flexbox
طرحبندی با شبکه
- مقدمهای بر CSS Grid
- شبکه صریح
- شبکه ضمنی
- ویژگی شکاف
- موقعیتیابی با خطوط شبکهای
- پروژه - طرح شبکهای
- پروژه - موقعیتیابی خطوط شبکهای
- پروژه - ابزارهای شبکه و توسعه
طرحبندی با شناوری و موقعیت
- طرحبندی با float
- ویژگی موقعیت
- موقعیت و شاخص z
- پروژه - رفع مشکل بهروزرسانیهای ناوبری و هدر
تایپوگرافی
- تایپوگرافی برای وب
- تغییر فونتها با استفاده از font-family
- کار با font-weight و font-style
- فونتهای وب با @font-face
- سرویسهای فونت آنلاین
- پروژه - افزودن فونتهای سفارشی
- ویژگی اندازه فونت
- اندازه فونت و قابلیت دسترسی
- ترازبندی متن، تبدیل متن و تزئین متن
- ارتفاع خط و فاصله حروف
- پروژه - سبکهای فونت و متن
- پروژه - استایلهای دکمه
- پروژه - margins , فاصلهگذاری و رنگ
طرحبندیهای واکنشگرا
- مقدمهای بر طراحی واکنشگرا
- مقدمهای بر مدیا کوئریها
- نقاط شکست و پرسوجوهای رسانهای
- ایجاد طرحبندیهای سیال
- متا تگ viewport
- آزمایش طرحبندیهای واکنشگرا
- پروژه - نقاط شکست
- پروژه - پرسوجوهای رسانهای
نتیجهگیری
- مراحل بعدی