آموزش css دومین قدم شما برای تبدیل شدن به برنامه نویس فرانت اند می‌باشد. برای زیبا کردن صفحات وب شما باید بتوانید با css کار کنید. ما در این دوره صفر تا صد css را به شما آموزش می‌دهیم.
قیمت دوره: رایگان 🙂
آیدی تلگرام پشتیبانی: afrazedu_support@
تکمیل شده
12 ساعت
1404/02/13
تلگرام
دوره html
از همین صفحه
جلسه اول: سینتکس CSS
جلسه دوم: اضافه کردن فایل css به پروژه
جلسه سوم: سلکتورها - قسمت اول
جلسه چهارم: سلکتورها - قسمت دوم
جلسه پنجم: ویژگی‌های مربوط به رنگ
جلسه ششم: CSS Background
جلسه هفتم: ویژگی Border
جلسه هشتم: ویژگی margin
جلسه نهم: ویژگی padding
جلسه دهم: CSS Units
جلسه یازدهم: BoxModel و ویژگی BoxSizing
جلسه دوازدهم: ویژگی outline
جلسه سیزدهم: ویژگی text-align
جلسه چهاردهم: text-decoration و text-formating
جلسه پانزدهم: ویژگی line-height
جلسه شانزدهم: ویژگی text shadow
جلسه هفدهم: بررسی Pseudo Classes
جلسه هجدهم: ویژگی display
جلسه نوزدهم: ویژگی position
جلسه بیستم: ویژگی z-index
جلسه بیست و یکم: ویژگی overflow
جلسه بیست و دوم: box-shadow و drop-shadow
جلسه بیست و سوم: Pseudo Elements
جلسه بیست و چهارم: ویژگی opacity
جلسه بیست و پنجم: attributes selectors
جلسه بیست و ششم: اولویت‌ها و Specificity
جلسه بیست و هفتم: توابع ریاضی
جلسه بیست و هشتم: CSS Gradients
جلسه بیست و نهم: text-overflow و white-space
جلسه سی ام: ویژگی transition
جلسه سی و یکم: ویژگی transform
جلسه سی و دوم: ویژگی animation
جلسه سی و سوم: filter و backdrop-filter
جلسه سی و چهارم: inherit و initial و cursor و...
جلسه سی و پنجم: پایان دوره - ارائه نقشه راه
مسیر شما...
مدرس دوره احمدرضا ابراهیمی پور می‌باشد و چندین سال تجربه طراحی سایت دارد و قرار است تجربیات خودش را به ساده‌ترین شکل ممکن به شما انتقال دهد. همچنین آقای احمدرضا ابراهیمی پور مدیر و موسس سایت افراز ادیو می‌باشد و در آموزشگاه‌های فنی و حرفه ای تدریس می‌کند.
CSS (مخفف Cascading Style Sheets) زبانیه که برای طراحی ظاهر و استایل صفحات وب استفاده می‌شه. با استفاده از CSS می‌تونید رنگ، فونت، فاصله، موقعیت عناصر، طراحی واکنش‌گرا و بسیاری از ویژگی‌های بصری یک سایت رو مشخص کنید. بدون CSS، صفحات وب فقط شامل ساختار خشک HTML خواهند بود.
HTML ساختار صفحه رو تعیین می‌کنه (مثل اینکه یه دکمه کجاست یا یه تصویر قراره نمایش داده بشه) اما CSS مشخص می‌کنه که اون دکمه یا تصویر چه رنگی داشته باشه، چقدر بزرگ باشه یا کجا قرار بگیره. به‌عبارت ساده، HTML استخوان‌بندیه و CSS ظاهر بدنه‌ی سایت رو می‌سازه.
یادگیری CSS بدون آشنایی اولیه با HTML امکان‌پذیر نیست، چون CSS روی ساختار HTML پیاده‌سازی می‌شه. بهتره ابتدا اصول پایه HTML رو بلد باشی تا بدونی روی چه عناصری قراره CSS بنویسی.
تقریباً همه‌ی وب‌سایت‌هایی که ظاهر حرفه‌ای و کاربرپسند دارن، از CSS استفاده می‌کنن؛ از وبلاگ‌های ساده گرفته تا فروشگاه‌های آنلاین، پلتفرم‌های آموزشی، صفحات فرود (landing page) و… .
برخلاف JavaScript و Python که برای منطق، تعامل و پردازش اطلاعات استفاده می‌شن، CSS فقط برای ظاهر و طراحی استفاده می‌شه. یعنی CSS کنترل رنگ، شکل، فاصله و ترتیب نمایش رو در اختیار شما قرار می‌ده، اما باهاش نمی‌تونید کارهای دیگر مثل دریافت اطلاعات از کاربر انجام بدید.
برای شروع CSS کافیه مفاهیم پایه HTML رو بلد باشید. نیازی به دانش قبلی از برنامه‌نویسی ندارید، فقط باید بدونید که ساختار HTML چطور کار می‌کنه.
با روزی ۱ تا ۲ ساعت تمرین مداوم، طی ۲ تا ۴ هفته می‌تونید به درک مناسبی از اصول CSS برسید. البته یادگیری کامل‌تر مفاهیمی مثل طراحی واکنش‌گرا و Flexbox زمان بیشتری می‌طلبه و به تمرین بستگی داره.
CSS به همراه HTML، ظاهر سایت رو می‌سازه. اما برای ساخت سایت‌های کاملاً کاربردی یا تعاملی (مثلاً فرم‌هایی که اطلاعات ذخیره می‌کنن) به زبان‌هایی مثل JavaScript و بک‌اند نیاز دارید. با این حال برای طراحی قالب، CSS کاملاً کافیه.
یادگیری CSS یکی از مهارت‌های پایه‌ای برای ورود به دنیای طراحی وب محسوب می‌شه. بدون تسلط بر CSS، امکان ساخت سایت‌هایی با ظاهر حرفه‌ای وجود نداره و شرکت‌ها هم اغلب دنبال افرادی هستن که این مهارت رو داشته باشن.
بسیاری از پروژه‌های ساده، صفحات فرود، طراحی قالب ایمیل یا سایت‌های استاتیک با همین دو مهارت انجام می‌شن. اگر طراحی خوبی داشته باشی، همین‌ها هم می‌تونن درآمدزا باشن، مخصوصاً برای شروع.
با فریم‌ورک‌هایی مثل React Native یا Flutter، نقش CSS به‌طور مستقیم وجود نداره، اما مفاهیم CSS (مثل Flexbox) در اون‌ها استفاده می‌شن. همچنین در توسعه‌ی اپ‌های تحت وب (PWA)، CSS به‌طور کامل استفاده می‌شه.
CSS ابزار اصلی برای پیاده‌سازی طرح‌های UI هست. حتی اگر با Figma یا Adobe XD طراحی کنی، در نهایت باید اون طرح رو با CSS زنده کنی. بنابراین طراح UI حرفه‌ای بدون CSS عملاً نمی‌تونه وارد دنیای اجرا بشه.
CSS زبان برنامه‌نویسی نیست، پس برای شروع نیازی به منطق کدنویسی نداری. فقط باید با مفاهیم ساختاری HTML و اصول طراحی آشنا باشی.
CSS از نظر ساختار ساده‌ست، ولی چالش‌هایی مثل مدیریت چیدمان یا طراحی واکنش‌گرا ممکنه کمی زمان‌بر باشه. با تمرین و پروژه عملی، این سختی‌ها خیلی زود برطرف می‌شن.
اگر قبلاً با آموزش‌های پراکنده یا بدون تمرین یاد نگرفتی، طبیعیه. این بار با یک مسیر مشخص، پروژه‌محور و منابع درست شروع کن. یادگیری CSS نیاز به استمرار و صبر داره.
CSS برخلاف زبان‌های بک‌اند، به‌آرامی تغییر می‌کنه و اغلب تغییرات به‌صورت افزوده‌شدن قابلیت‌های جدید هستن. چیزی که امروز یاد می‌گیری، سال‌ها کاربرد داره.
پیشرفتت رو با ساختن پروژه واقعی بسنج. مثلاً طراحی یک صفحه فرود ساده، کلون‌کردن یک سایت معروف، یا طراحی تم برای بلاگ شخصی. اگر می‌تونی ایده‌ات رو به ظاهر وب تبدیل کنی، یعنی مسیر رو درست رفتی.
دوره آموزش رایگان CSS افراز ادیو، یک مسیر آموزشی کامل از سطح مقدماتی تا پیشرفته است که به شما کمک می‌کند صفر تا صد طراحی ظاهری صفحات وب را به صورت پروژه‌محور و کاربردی یاد بگیرید. در این دوره، مفاهیم پایه مانند سلکتورها، رنگ‌ها و فاصله‌گذاری تا تکنیک‌های پیشرفته‌ای مانند انیمیشن، فیلترها و اولویت‌بندی استایل‌ها را با زبانی ساده و قابل فهم آموزش می‌دهیم. اگر می‌خواهید بدون پرداخت هزینه و با برنامه‌ای منظم وارد دنیای حرفه‌ای طراحی وب شوید، این دوره دقیقاً برای شما طراحی شده است.
جلسه اول: سینتکس CSS
با ساختار نوشتاری CSS آشنا می‌شوید. یاد می‌گیرید چطور دستورات را بنویسید و قوانین را تعریف کنید. این پایه‌ی تمام جلسات بعدی است.
جلسه دوم: اضافه کردن فایل CSS به پروژه
روش‌های مختلف اتصال CSS به HTML را یاد می‌گیرید. از استایل داخلی گرفته تا فایل خارجی. این جلسه نشان می‌دهد چطور CSS را در پروژه واقعی استفاده کنید.
جلسه سوم: سلکتورها – قسمت اول
یاد می‌گیرید چگونه عناصر مختلف HTML را با استفاده از سلکتورها انتخاب کنید. این جلسه به سراغ پایه‌ترین انواع سلکتورها می‌رود. بدون تسلط بر این بخش، کنترل روی استایل سخت خواهد بود.
جلسه چهارم: سلکتورها – قسمت دوم
در این بخش سلکتورهای پیشرفته‌تر را بررسی می‌کنیم. مثل سلکتورهای ترکیبی یا نسبی. این مهارت به شما کمک می‌کند دقیق‌تر و هدفمندتر طراحی کنید.
جلسه پنجم: ویژگی‌های مربوط به رنگ
یاد می‌گیرید چطور رنگ‌ها را در CSS تعریف کنید. با کدهای رنگ، rgb و نام‌های رنگ آشنا می‌شوید. تنظیم رنگ متن، پس‌زمینه و دیگر اجزا را تمرین می‌کنیم.
جلسه ششم: CSS Background
این جلسه به ویژگی‌های پس‌زمینه اختصاص دارد. مثل تصویر، تکرار، موقعیت و اندازه‌ی پس‌زمینه. یاد می‌گیرید چطور طراحی جذاب‌تری با استفاده از پس‌زمینه‌ها بسازید.
جلسه هفتم: ویژگی Border
با انواع حاشیه‌ها (Border) آشنا می‌شوید. ضخامت، رنگ، و شکل‌های مختلف حاشیه را بررسی می‌کنیم. این ویژگی برای تفکیک بخش‌ها کاربرد زیادی دارد.
جلسه هشتم: ویژگی margin
یاد می‌گیرید چطور فاصله بیرونی عناصر (Margin) را تنظیم کنید. این ویژگی برای فاصله‌گذاری بین بخش‌های مختلف سایت بسیار مهم است. به صورت عملی آن را تمرین می‌کنیم.
جلسه نهم: ویژگی padding
در این جلسه فاصله داخلی عناصر (Padding) را بررسی می‌کنیم. تفاوت آن با Margin را یاد می‌گیرید. تنظیم درست Padding ظاهر تمیزتری به سایت می‌دهد.
جلسه دهم: CSS Units
با واحدهای اندازه‌گیری در CSS آشنا می‌شوید. مثل px، em، rem، vw و درصد. این دانش به شما دقت بیشتری در طراحی می‌دهد.
جلسه یازدهم: Box Model و ویژگی Box Sizing
مفهوم جعبه (Box Model) را یاد می‌گیرید. متوجه می‌شوید که Margin، Border، Padding و Content چطور کنار هم کار می‌کنند. Box Sizing کمک می‌کند اندازه‌گیری‌ها دقیق‌تر باشند.
جلسه دوازدهم: ویژگی outline
Outline شبیه به Border است اما تفاوت‌هایی دارد. در این جلسه نحوه‌ی استفاده از آن را یاد می‌گیرید. برای برجسته‌سازی یا تمرکز روی عناصر کاربرد دارد.
جلسه سیزدهم: ویژگی text-align
نحوه تراز کردن متن‌ها در CSS را یاد می‌گیرید. مثل وسط‌چین، چپ‌چین یا راست‌چین. این ویژگی ظاهر متون را منظم‌تر می‌کند.
جلسه چهاردهم: text-decoration و text-formatting
با ابزارهای تزیین متن مثل زیرخط، خط زدن یا تغییر حالت نوشتار آشنا می‌شوید. این جلسه به جذاب‌تر کردن نوشته‌ها کمک می‌کند. برای طراحی تیتر و لینک‌ها بسیار کاربردی است.
جلسه پانزدهم: ویژگی line-height
نحوه‌ی تنظیم فاصله بین خطوط متنی را یاد می‌گیرید. این ویژگی در خوانایی متن نقش مهمی دارد. با مثال‌های عملی آن را درک می‌کنید.
جلسه شانزدهم: ویژگی text-shadow
یاد می‌گیرید چطور سایه به متن اضافه کنید. این ویژگی برای طراحی‌های مدرن‌تر کاربرد دارد. می‌تونید جلوه‌های خاص‌تری به نوشته‌ها بدهید.
جلسه هفدهم: بررسی Pseudo Classes
با شبه کلاس‌های (مثل :hover و :first-child) آشنا می‌شوید. این ابزارها تعامل‌پذیری بیشتری به سایت می‌دهند. ظاهر عناصر را در شرایط خاص تغییر می‌دهند.
جلسه هجدهم: ویژگی display
با انواع نمایش عناصر مثل block، inline آشنا می‌شوید. این ویژگی برای چینش درست اجزای سایت بسیار مهم است.
جلسه نوزدهم: ویژگی position
نحوه موقعیت‌دهی به عناصر را یاد می‌گیرید. مفاهیم relative، absolute، fixed و sticky را بررسی می‌کنیم. این جلسه کنترل کامل روی چینش عناصر به شما می‌دهد.
جلسه بیستم: ویژگی z-index
با استفاده از z-index می‌تونید ترتیب لایه‌ها را تعیین کنید. این ویژگی برای عناصر روی‌هم‌افتاده کاربرد دارد. مفید برای طراحی منوها و پنجره‌های بازشو.
جلسه بیست و یکم: ویژگی overflow
تنظیم رفتار محتوا وقتی از کادر خارج می‌شود را یاد می‌گیرید. مثل مخفی‌سازی یا اسکرول کردن. برای کنترل ظاهری تمیز بسیار مهم است.
جلسه بیست و دوم: box-shadow و drop-shadow
ایجاد سایه برای جعبه‌ها و عناصر مختلف را یاد می‌گیرید. این افکت‌ها به طراحی شما عمق و جذابیت می‌دن. با مثال‌های کاربردی تمرین می‌کنیم.
جلسه بیست و سوم: Pseudo Elements
با شبه المنت‌ها (مثل ::before و ::after) آشنا می‌شوید. این ابزارها اجازه می‌دن بدون اضافه‌کردن HTML، عناصر بصری ایجاد کنید. در طراحی جزئیات خیلی مفیدن.
جلسه بیست و چهارم: ویژگی opacity
تنظیم شفافیت عناصر با opacity انجام می‌شه. این ویژگی به شما اجازه می‌ده جلوه‌های بصری خاص بسازید. برای طراحی مدرن بسیار کاربردی.
جلسه بیست و پنجم: attribute selectors
یاد می‌گیرید چطور عناصر HTML را بر اساس ویژگی‌های آن‌ها انتخاب کنید. این روش پیشرفته‌تر از سلکتورهای ساده است. قدرت بیشتری برای هدف‌گیری دقیق به شما می‌ده.
جلسه بیست و ششم: اولویت‌ها و Specificity
در این جلسه می‌فهمید چرا بعضی استایل‌ها اعمال نمی‌شن. با قوانین اولویت‌بندی آشنا می‌شوید. دانستن این نکات از خطاهای رایج جلوگیری می‌کنه.
جلسه بیست و هفتم: توابع ریاضی
با توابعی مثل calc() آشنا می‌شوید. این ابزارها به شما کمک می‌کنن طراحی‌های داینامیک‌تری بسازید. بسیار مفید در طراحی‌های پیچیده.
جلسه بیست و هشتم: CSS Gradients
یاد می‌گیرید چطور گرادینت (رنگ‌های ترکیبی) بسازید. این ویژگی برای پس‌زمینه‌های جذاب بسیار محبوب است. طراحی شما حرفه‌ای‌تر خواهد شد.
جلسه بیست و نهم: text-overflow و white-space
کنترل رفتار متن‌هایی که طولانی‌تر از کادر هستن. یاد می‌گیرید چطور متن رو قطع، مخفی یا خلاصه کنید. ظاهر متون در طراحی شما مرتب‌تر خواهد شد.
جلسه سی‌ام: ویژگی transition
با transition می‌تونید افکت‌های تغییر نرم ایجاد کنید. مثلاً تغییر رنگ یا اندازه با انیمیشن ملایم. جلوه‌های حرفه‌ای با همین ویژگی ساخته می‌شن.
جلسه سی و یکم: ویژگی transform
یاد می‌گیرید چطور عناصر رو بچرخونید، جابه‌جا کنید یا مقیاس شون رو تغییر بدید. این ابزار برای طراحی‌های پویا بسیار کاربرد دارد. تجربه کاربر رو بهتر می‌کنه.
جلسه سی و دوم: ویژگی animation
با CSS Animation می‌تونید انیمیشن‌های کامل بسازید. این جلسه به شما یاد می‌ده چطور حرکات پیچیده ایجاد کنید. جذابیت بصری سایت چند برابر می‌شه.
جلسه سی و سوم: filter و backdrop-filter
فیلترهایی مثل blur، روشنایی، کنتراست و… رو اعمال می‌کنید. با این ابزارها می‌تونید افکت‌های تصویری حرفه‌ای بسازید. مناسب برای طراحی‌های مدرن و خاص.
جلسه سی و چهارم: inherit و initial و cursor و…
ویژگی‌های عمومی CSS رو بررسی می‌کنیم. مثل نحوه ارث‌بری استایل، مقداردهی اولیه و تنظیم حالت نشانگر ماوس. این موارد به درک عمیق‌تر از CSS کمک می‌کنه.
جلسه سی و پنجم: پایان دوره – ارائه نقشه راه
جمع‌بندی دوره و بررسی مسیر ادامه یادگیری. به شما یک نقشه راه داده می‌شه تا بدونید بعد از CSS چه مهارت‌هایی رو یاد بگیرید. انگیزه و هدف‌گذاری برای ادامه‌ی مسیر.
