آموزش صفرتاصد CSS

دوره آموزش جامع CSS: جادوگر طراحی وب شوید!

اگر HTML اسکلت وب‌سایت شماست، CSS روح و استایلی است که به آن جان می‌بخشد! آیا آماده‌اید تا وب‌سایت‌های بی‌روح و ساده را به شاهکارهای بصری خیره‌کننده تبدیل کنید؟ دوره آموزش کامل و جامع CSS، شما را از دنیای رنگ‌ها و فونت‌ها تا انیمیشن‌های پیچیده و طراحی‌های واکنش‌گرا (ریسپانسیو) همراهی می‌کند. این دوره به شما یاد می‌دهد که چطور کنترل کامل ظاهر وب‌سایت خود را در دست بگیرید و هر طرحی که در ذهن دارید را با قدرت CSS پیاده‌سازی کنید. تمامی مطالب به صورت به‌روز و پروژه‌محور تدریس شده‌اند تا نه تنها یاد بگیرید، بلکه از ساختن لذت ببرید!

یک پیشنهاد دوستانه برای شما

این دوره به صورت کامل و رایگان در کانال یوتیوب «نیکول وب» نیز منتشر شده است. اگر دوست دارید از ما حمایت کنید و به رشد کانال کمک کنید، تماشای دوره از طریق یوتیوب بهترین گزینه است و ما را بسیار خوشحال می‌کند. البته در همین سایت نیز می‌توانید دوره را به صورت کاملا رایگان و دسته‌بندی شده دنبال کنید. انتخاب با شماست!

در این سفر هیجان‌انگیز چه چیزهایی یاد می‌گیرید؟

این دوره یک نقشه راه کامل برای تبدیل شدن به یک متخصص CSS است. از مبانی اولیه شروع می‌کنیم و تا پیشرفته‌ترین تکنیک‌ها پیش می‌رویم:

بخش اول: مبانی و استایل‌دهی اولیه

  • روش‌های مختلف استایل‌دهی در CSS
  • کار با رنگ‌ها و واحدهای اندازه‌گیری
  • استایل‌دهی به نوشته‌ها، لینک‌ها و لیست‌ها
  • کار با فونت‌های سفارشی و وب‌فونت‌ها

بخش دوم: جعبه‌ابزار طراحان (Layout و Box Model)

  • مفاهیم حیاتی Padding, Margin, Border و Outline
  • کنترل کامل چیدمان با ویژگی‌های Display, Position و Float
  • مدیریت سرریز محتوا با overflow و visibility
  • طراحی ستون‌های حرفه‌ای و واکنش‌گرا

بخش سوم: جادوی بصری و افکت‌های گرافیکی

  • کار با پس‌زمینه‌ها (Backgrounds) از رنگ ساده تا تصاویر پیچیده
  • ایجاد سایه‌های زیبا برای جعبه‌ها (box-shadow) و متون
  • خلق طیف‌های رنگی جذاب با گرادیانت‌ها (Gradients)
  • استفاده از فیلترهای تصویری برای افکت‌های خلاقانه
  • به کارگیری شبه‌عناصرهای قدرتمند ::before و ::after

بخش چهارم: انیمیشن و طراحی‌های پیشرفته

  • ایجاد حرکت و تغییرات نرم با transitionها
  • دنیای دگرگونی‌های دو بعدی و سه بعدی با transform
  • ساخت انیمیشن‌های پیچیده و چشم‌نواز از صفر تا صد
  • طراحی واکنش‌گرا (Responsive) برای نمایش بی‌نقص سایت در موبایل و تبلت

پروژه‌های عملی:

  • طراحی یک صفحه محصولات ساده
  • طراحی یک هدر کاربردی
  • پروژه پایانی: ساخت یک سایت نمونه کار کامل با تمام تکنیک‌های آموخته شده

این دوره برای چه کسانی طراحی شده؟

  • توسعه‌دهندگان وب که می‌خواهند به طراحی‌های خود عمق و زیبایی ببخشند.
  • فارغ‌التحصیلان دوره HTML که آماده برداشتن قدم بعدی در مسیر طراح وب شدن هستند.
  • طراحان UI/UX که قصد دارند طرح‌های خود را به کد قابل استفاده تبدیل کنند.
  • هر فرد خلاقی که می‌خواهد قدرت استایل‌دهی به صفحات وب را به دست آورد.
اگر آماده‌اید تا کنترل ظاهر وب را در دست بگیرید و طرح‌های خود را زنده کنید، این دوره بهترین نقطه شروع برای شماست!
Headlines

سرفصل‌های دوره

  • درس اول: مقدمه و معرفی دوره (۸:۳۶)
  • درس دوم: بررسی استایل دهی در CSS (بخش اول) (۲۰:۱۵)
  • درس سوم: بررسی استایل دهی در CSS (بخش دوم) (۱۸:۲۹)
  • درس چهارم: بررسی استایل دهی در CSS (بخش سوم) (۲۱:۱۲)
  • درس پنجم: استایل دهی به تگ a (بخش اول) (۱۷:۴۵)
  • درس ششم: استایل دهی به تگ a (بخش دوم) (۱۳:۲۱)
  • درس هفتم: رنگ‌ها در CSS (۱۷:۵۴)
  • درس هشتم: واحدهای اندازه‌گیری در CSS (۱۵:۳۷)
  • درس نهم: افزودن ویژگی‌ها به تگ div و معرفی یک وبسایت کاربردی (۱۴:۴۵)

  • درس دهم: استایل دهی به نوشته‌ها (بخش اول) (۱۱:۵۰)
  • درس یازدهم: استایل دهی به نوشته‌ها (بخش دوم) (۱۵:۴۰)
  • درس دوازدهم: استایل دهی به نوشته‌ها (بخش سوم) و آشنایی با کامنت‌گذاری (۱۴:۵۷)
  • درس سیزدهم: ویژگی overflow در CSS (۱۵:۳۱)
  • درس چهاردهم: ویژگی Text overflow در CSS (۷:۳۳)
  • درس پانزدهم: فونت‌ها در CSS (بخش اول) (۲۱:۴۹)
  • درس شانزدهم: فونت‌ها در CSS (بخش دوم) (۲۰:۵۱)
  • درس هفدهم: استایل دهی به لیست‌ها در CSS (۱۵:۰۴)

  • درس هجدهم: آشنایی با Padding و Margin (۲۶:۲۶)
  • درس نوزدهم: border در CSS (بخش اول) (۱۳:۱۵)
  • درس بیستم: border در CSS (بخش دوم) (۱۱:۳۰)
  • درس بیست و یکم: ویژگی Display (۱۷:۱۶)
  • درس بیست و دوم: ویژگی Outline (۷:۱۴)
  • درس بیست و سوم: مقدار min و max در طول و عرض (۲۰:۱۴)
  • درس بیست و چهارم: ویژگی Float (۱۵:۱۰)
  • درس بیست و پنجم: طراحی یک صفحه محصولات ساده (۲۷:۵۶)
  • درس بیست و ششم: ویژگی Clear (۱۵:۳۰)
  • درس بیست و هفتم: ویژگی Position (۱۹:۰۲)
  • درس بیست و هشتم: راست‌چین کردن و منتقل کردن عناصر به وسط صفحه (۱۹:۴۰)
  • درس بیست و نهم: روشی دیگر برای استفاده از کلاس‌ها (۱۰:۵۷)
  • درس سی‌ام: استایل دهی به Textarea (۱۵:۳۳)

  • درس سی و یکم: Background در CSS (بخش اول) (۱۴:۲۷)
  • درس سی و دوم: Background در CSS (بخش دوم) (۱۵:۳۶)
  • درس سی و سوم: Background در CSS (بخش سوم) (۱۰:۱۷)
  • درس سی و چهارم: Background در CSS (بخش چهارم) (۲۵:۲۹)
  • درس سی و پنجم: Background در CSS (بخش آخر) (۱۹:۴۲)
  • درس سی و ششم: استایل دهی به ستون‌ها (بخش اول) (۱۲:۲۶)
  • درس سی و هفتم: استایل دهی به ستون‌ها (بخش دوم) (۱۵:۱۰)
  • درس سی و هشتم: استایل دهی به ستون‌ها (بخش آخر) (۹:۴۴)
  • درس سی و نهم: ویژگی Visibility (۱۴:۴۸)

  • درس چهلم: طراحی یک هدر ساده (۳۱:۰۱)
  • درس چهل و یکم: After و Before (۱۷:۴۸)
  • درس چهل و دوم: مثالی از After و Before (۲۱:۴۲)
  • درس چهل و سوم: box-shadow در CSS (بخش اول) (۱۳:۲۴)
  • درس چهل و چهارم: box-shadow در CSS (بخش دوم) (۱۳:۲۴)
  • درس چهل و پنجم: ایجاد سایه برای متن‌ها (۱۱:۰۰)
  • درس چهل و ششم: گرادیانت در CSS (بخش اول) (۲۵:۴۵)
  • درس چهل و هفتم: گرادیانت در CSS (بخش دوم) (۲۶:۴۷)
  • درس چهل و هشتم: گرادیانت در CSS (بخش سوم) (۲۵:۲۴)
  • درس چهل و نهم: background-blend-mode (بخش اول) (۱۴:۴۵)
  • درس پنجاهم: background-blend-mode (بخش دوم) (۱۲:۵۱)

  • درس پنجاه و یکم: transform دو بعدی (بخش اول) (۱۴:۴۰)
  • درس پنجاه و دوم: transform دو بعدی (بخش دوم) (۱۳:۰۹)
  • درس پنجاه و سوم: transform دو بعدی (ادامه بخش دوم) (۱۷:۵۸)
  • درس پنجاه و چهارم: transform دو بعدی (بخش سوم) (۱۶:۲۲)
  • درس پنجاه و پنجم: transform سه بعدی (بخش اول) (۱۹:۱۲)
  • درس پنجاه و ششم: transform سه بعدی (بخش دوم) (۱۵:۲۷)
  • درس پنجاه و هفتم: transform سه بعدی (بخش سوم) (۱۵:۲۴)
  • درس پنجاه و هشتم: ویژگی transform-origin (۱۴:۴۹)
  • درس پنجاه و نهم: بررسی ویژگی‌های باقی‌مانده از transform (۱۶:۳۵)
  • درس شصتم: فیلترها در CSS (بخش اول) (۲۰:۵۶)
  • درس شصت و یکم: فیلترها در CSS (بخش دوم) (۱۵:۴۷)
  • درس شصت و دوم: فیلترها در CSS (بخش سوم) (۲۱:۰۷)

  • درس شصت و سوم: transition ها در CSS (بخش اول) (۱۲:۵۴)
  • درس شصت و چهارم: transition ها در CSS (بخش دوم) (۲۱:۲۸)
  • درس شصت و پنجم: transition ها در CSS (بخش سوم) (۱۸:۱۳)
  • درس شصت و ششم: transition ها در CSS (بخش چهارم) (۱۸:۲۴)
  • درس شصت و هفتم: مینی پروژه نمونه کار (۲۷:۴۹)
  • درس شصت و هشتم: انیمیشن‌ها در CSS (بخش اول) (۲۳:۴۴)
  • درس شصت و نهم: انیمیشن‌ها در CSS (بخش دوم) (۲۱:۴۸)
  • درس هفتادم: انیمیشن‌ها در CSS (بخش سوم) (۱۷:۳۹)
  • درس هفتاد و یکم: انیمیشن‌ها در CSS (بخش چهارم) (۲۰:۰۱)
  • درس هفتاد و دوم: ریسپانسوسازی در CSS (بخش اول) (۱۶:۲۴)
  • درس هفتاد و سوم: ریسپانسوسازی در CSS (بخش دوم) (۲۴:۰۱)
Headlines

سوالات متداول

CSS CSS یا Cascading Style Sheets، یک زبان استایل‌دهی است که برای زیبایی‌بخشی و طراحی صفحات وب استفاده می‌شود. از طریق CSS می‌توان ظاهر و استایل یک وب‌سایت را به طور جداگانه از محتوا تعیین کرد، از جمله تنظیم رنگ‌ها، فونت‌ها، فضاها و سایر ویژگی‌های ظاهری

یادگیری CSS برای هر کسی که به طراحی و توسعه وب علاقه‌مند است ضروری است. CSS ابزار اساسی در طراحی وب است و بدون آن امکان طراحی وب‌سایت‌های زیبا و کارآمد وجود ندارد.

پپیشنیازهای این دوره عموماً شامل آشنایی با HTML می‌شود، زیرا CSS برای استایل‌دهی به ساختارهای HTML استفاده می‌شود. بنابراین، اگر می‌خواهید CSS را به خوبی یاد بگیرید، نیاز به آشنایی با HTML دارید.

پس از یادگیری CSS، می‌توانید به مواردی مانند جاوااسکریپت، فریمورک‌های جاوااسکریپت مانند React یا Angular، و همچنین مفاهیم پیشرفته‌تر طراحی وب مانند CSS پیشرفته، Responsive Web Design و CSS Preprocessors مانند Sass و Less بپردازید.
Headlines

نظرات دوره

برای ثبت نظر، ابتدا باید وارد حساب کاربری خود شوید.

ورود / ثبت نام

نظرات کاربران

هنوز نظری برای این دوره ثبت نشده است. اولین نفری باشید که نظر می‌دهد!

آموزش صفرتاصد CSS

رایگان

CSS یاد بگیرید و جادوی زیبایی را در وبسایت‌هایتان ایجاد کنید.

اطلاعات دوره
  • professor-icon مدرس محمدرضا مهاجری
  • courses-icon درس‌ها ۷۳ قسمت
  • duration-icon مدت زمان +۲۱ ساعت
  • student-icon دانشجوها +۲۷۵
  • calendar-icon وضعیت دوره دوره ‌تکمیل شده
  • signal-icon سطح دوره مقدماتی تا پیشرفته
  • scroll-icon پیشنیازها HTML