دوره جامع CSS

59,000 تومان

تعداد دانشجوها: 288

 

بعد از ثبت نام در دوره، برای دانلود ویدیوها وارد قسمت “حساب کاربری” شوید.

آخرین به روز رسانی: ۲ شهریور ۹۹

مدت زمان دوره: ۷ ساعت و ۳۵ دقیقه

توضیحات

CSS یک زبان نشانه گذاری است که برای پیاده سازی رابط کاربری صفحات وب استفاده می‌شود. همچنین اگر نرم افزارهای موبایل را با چهارچوب‌هایی مثل React Native توسعه دهیم، برای قسمت رابط کاربری برنامه باید از CSS استفاده کنیم. زبان‌های CSS و HTML به عنوان مبانی توسعه وب در نظر گرفته می‌شوند. بنابراین یادگیری و تسلط بر این دو، بسیار مهم است.

توسعه دهنده‌های بک‌اند و مخصوصا فرانت‌اند، باید CSS و HTML را به خوبی درک کنند. ممکن است تمرکز اصلی شما بر روی منطق توسعه با زبان‌هایی مثل جاوااسکریپت باشد. ولی باید بدانیم که ادامه مسیر یادگیری دقیق مفاهیم برنامه نویسی، بدون تسلط بر این زبان‌ها بسیار پیچیده خواهد بود. همچنین تمام موقعیت‌های شغلی در شرکت‌های پیشرو فناوری، تسلط بر سی‌اس‌اس را یکی از مهم‌ترین پارامترها در نظر می‌گیرند.

به همین دلیل دوره جامع CSS را در فرانت کست آماده کرده‌ایم. در طول این دوره با پیاده سازی تمرین‌ها و پروژه‌های واقعی، تلاش می‌کنیم تا تمام مفاهیم این زبان را به طور کامل بررسی کنیم. این دوره از مبانی سی‌اس‌اس شروع شده و تا قسمت‌های پیشرفته‌تر مانند یادگیری Flexbox، Sass و Grid پیش خواهیم رفت.

شما می‌توانید بعد از ثبت نام برای دوره، فایل‌های ویدیویی و تمرین‌های دوره را از پنل کاربری خود دانلود کنید.

 

سرفصل‌ها:

معرفی دوره. بررسی کاربردهای CSS

۱. مسیر یادگیری و سرفصل‌های دوره – مشاهده ویدیو

۲. یادگیری دقیق‌تر مفاهیم – مشاهده ویدیو

۳. بررسی ابزارهای مورد نیاز – مشاهده ویدیو

۴. ساخت و اجرای پروژه – مشاهده ویدیو

۵. روش‌های اضافه کردن استایل‌ها

۶. استفاده از فونت‌ها

۷. بررسی Selectorها

۸. ابزارهای مرورگر برای توسعه فرانت‌اند

۹. استفاده از Selectorهای متعدد

۱۰. درک بهتر Box Model

۱۱. بررسی دستورهای کوتاه

۱۲. مقدارهای عرض و ارتفاع

۱۳. بررسی Box Sizing

۱۴. اضافه کردن Header

۱۵. مقادیر Display

۱۶. توسعه Navigation

۱۷. کار با دستورات text-decoration و vertical-align

۱۸. توسعه استایل برای لینک‌ها

۱۹. کلاس‌ها و المنت‌های Pseudo

۲۰. بهینه سازی کد برای کلاس‌ها

۲۱. استایل متفاوت برای یک لینک

۲۲. افزودن تصویر پس زمینه

۲۳. قسمت پلن‌های وب‌سایت

۲۴. دستورات box-shadow و rgba

۲۵. تکمیل استایل‌های پلن‌ها

۲۶. استایل‌ دهی به Button

۲۷. اضافه کردن قسمت ویژگی‌ها

۲۸. تکمیل استایل‌های Section جدید

۲۹. افزودن قسمت Footer

۳۰. بررسی تمرین شماره ۱

۳۱. ساختار فایل‌های پروژه

۳۲. توسعه صفحه پلن‌ها

۳۳. استفاده از دستور float

۳۴. بررسی دستورات Position

۳۵. استفاده از Position برای تصویر پس‌زمینه

۳۶. دستور z-index

۳۷. افزودن پیشنهاد ویژه به پلن‌ها

۳۸. استایل دهی به قسمت پیشنهادهای ویژه

۳۹. درک بهتر دستورات Background

۴۰. استفاده از دستور کوتاه برای Background

۴۱. افزودن صفحه مشتریان

۴۲. توسعه استایل‌های صفحه مشتریان

۴۳. استایل‌ دهی به تصاویر

۴۴. استفاده از Linear Gradient

۴۵. استفاده از Radial Gradients

۴۶. افزودن Backgroundهای متنوع

۴۷. دستورات Filters

۴۸. بررسی max-width و min-width

۴۹. بررسی واحد‌های em و rem

۵۰. استفاده از rem در پروژه

۵۱. تکمیل مقادیر rem

۵۲. بررسی واحدهای Viewport

۵۳. استفاده از مقدار auto برای margin

۵۴. افزودن Modal به پروژه

۵۵. تغییر استایل‌ها با جاوااسکریپت

۵۶. بررسی متد addEventListener

۵۷. دکمه بستن Modal

۵۸. بررسی طراحی Responsive

۵۹. درک بهتر viewport در Meta Tag

۶۰. طراحی Mobile First

۶۱. افزودن دستورات Media Query

۶۲. بررسی Mobile First و Desktop First

۶۳. سایزهای مختلف برای دیوایس‌ها

۶۴. طراحی Mobile First برای پلن‌ها

۶۵. افزودن Media Query برای پلن‌ها

۶۶. طراحی Responsive برای قسمت ویژگی‌ها

۶۷. طراحی Responsive برای صفحه مشتریان

۶۸. افزودن فرم سفارش

۶۹. توسعه استایل برای فرم

۷۰. طراحی Responsive قسمت فرم

۷۱. بررسی استایل برای Checkbox

۷۲. بررسی Flexbox

۷۳. توسعه Flex Container

۷۴. دستورات flex-direction و flex-wrap

۷۵. دستورات align-items و justify-content

۷۶. استفاده از align-content

۷۷. افزودن Flexbox به Navigation

۷۸. بهینه سازی Footer

۷۹. افزودن Flexbox به صفحه مشتریان

۸۰. دستور order برای آیتم‌های Flexbox

۸۱. استفاده از align-self

۸۲. دستور flex-shrink

۸۳. بررسی Grid

۸۴. ستون‌ها و ردیف‌ها در Grid

۸۵. موقعیت المنت‌های زیرمجموعه

۸۶. استفاده از تابع repeat

۸۷. درک بهتر موقعیت المنت‌ها در Grid

۸۸. استفاده از دستورات gap

۸۹. موقعیت المنت‌ها در Grid

۹۰. طراحی Responsive در Grid

۹۱. استفاده از Grid در پروژه

۹۲. مقایسه Grid و Flexbox

۹۳. بررسی Sass

۹۴. نصب و استفاده از Sass

۹۵. بهینه سازی کد با Sass

۹۶. دستورات Nested

۹۷. استفاده از مقادیر Nested

۹۸. متغیرها

۹۹. استفاده از Map

۱۰۰. استفاده از توابع

۱۰۱. دستور Import

۱۰۲. دستور Mixin

۱۰۳. دستورات rotate و transform

۱۰۴. دستورات rotate و translate

۱۰۵. استفاده از skew و scale

۱۰۶. استفاده از transition

۱۰۷. درک بهتر دستور transition

۱۰۸. بررسی انیمیشن‌ها در CSS

۱۰۹. ادامه مسیر بعد از یادگیری CSS

66 پاسخ به “دوره جامع CSS”

  1. mamadranaee گفت:

    من تا حدی به css آشنایی دارم
    دوره جاوا اسکریپت رو خریداری کردم و میتونم همزمان این دوره رو هم ببینم یا اینکه خیلی سخت میشه ؟
    من در شبانه روز ۳ ساعت تایم آزاد دارم

  2. عرفان سرائی گفت:

    سلام
    دوره بسیار عالی بود ، ممنون استاد گرامی

    فقط خواستم چند سوال، پیشنهاد و نکته رو بیان کنم که شاید به دوستان کمکی کرده باشم.

    چند سوال خدمتتون داشتم:
    ۱- با وجود قدرت SASS ، آیا نیازی به یادگیری LESS وجود دارد؟
    ۲- آپدیت بعدی دوره کی خواهد بود و شامل چه مواردی؟

    و پیشنهادی جهت بهبود تدریس بخش FlexBox:
    اگر از تصویری که ساختار کلی فلکس باکس و axis ها را نشان می دهد استفاده کنید، به نظر مطلب بهتر انتقال پیدا می کند.
    تصویر: http://s15.picofile.com/file/8409005384/flex_terms.png

    نکات:
    در کل شما جزو مدرسانی هستید که چشم بسته میشه دوره هاتون خرید و از یادگیری لذت برد.
    این نکته هم به دوستانی که قصد سرمایه گذاری در این دوره را دارند عرض کنم که از هیچ دوره ای توقع یادگیری ۱۰۰ درصدی نداشته باشید و به قول خود جناب صدری ، ۱۰ دقیقه یادگیری + ۴۰ دقیقه تمرین پاسخگو خواهد بود.
    با این دوره شما میتونید مفاهیم اصلی و مهم را “”اصولی”” یاد بگیرید و با انجام پروژه های مختلف و برخورد به مشکلات ، بهترین یادگیری را داشته باشید.
    و باز هم روی واژه “”””” اصولی “””” تاکید می کنم زیرا تجربه این را داشتم که سایتی بسیار معروف در حوزه آموزش آنلاین آموزش “”غیر اصولی فرانت اند “” را به قیمت بالا و به هوای مدرک می فروشد، شاید بردن نام این سایت مناسب نباشد.
    یادگیری پایه غیر اصولی منجر به سردرگمی میشه(دیوار کج).

    و نکته دیگر اینکه گول زمان دوره ها را نخورید زیرا تجربه این را داشتم که برخی دوره ها با زمان چند برابر این دوره، یک دهم این دوره محتوا داشتند. این هنر مدرسه که بتونه تو کمترین زمان بیشترین مفاهیم رو منتقل کنه و از اضافه گویی دوری کنه، که جناب صدری به درستی قادر به انجام این کار هستند.

    در کل اگر میخواید پایه قوی و سالم در css داشته باشید ، این دوره رو از دست ندید.

    بی صبرانه منتظر بروزرسانی دوره هستم.
    موفق باشید

    • سلام

      اول از همه خیلی ممنونم از لطف و محبت شما.
      قطعا برای من باعث افتخار هست و خیلی خوشحالم که دوره براتون مفید بوده.

      در مورد سوالاتتون باید عرض کنم که به نظرم یادگیری Sass کافی باشه.
      برای به روز رسانی هم یک پروژه در نظر دارم. شما هم اگر پیشنهادی دارید حتما بهم بگید.

  3. alireza memarzade گفت:

    سلام
    مثل باقی دوره عالی بود
    اگر براتون مقدور بود هر زمان که بوت استرپ ۵ ریلیز شد ، اون رو هم به عنوان آپدیت این دوره آموزش بدید
    ممنون

  4. sisi گفت:

    سلام وقتتون بخیر
    در حال حاضر دوره شامل ۱۰۹ مبحثی که نوشته شده هست؟؟

  5. mowjo گفت:

    سلام استاد وقت بخیر،
    اوایل دوره درخواست زیاد شد گفته بودید که مبحث گالپ روهم اضافه می کنین. میخواستم ببینم اون ویدیو رو هم قراره داشته باشیم؟ و اینکه لطفا یکم زودتر تموم کنین دوره رو. ما از زمستون منتظر تموم شدن این دوره ایم.
    ممنون بابت تدریس خلاصه و خوبتون

    • سلام، وقت بخیر.
      این دوره هفته آینده تکمیل می‌شه و مباحث مربوط به Gulp به عنوان به روز رسانی‌های بعدی دوره در نظر گرفته شده.
      با توجه به گستردگی مطالب و جامع بودن دوره، یک مقدار زمان دوره طولانی شد.
      البته برای تشکر بابت حضور دانشجوها در این دوره، یک هدیه از طرف فرانت کست تا هفته آینده به ایمیل دانشجوهای دوره ارسال می‌شه.
      ممنون و موفق باشید.

  6. artindev گفت:

    bebakhshid key dore tamom mishe?

  7. شهاب الدین دهقانپور گفت:

    سلام استاد وقت تون بخیر ای کاش دوره css تموم می شد بعد دوره جدید برگزار می کردید.زمان آپدیت ها خیلی زیاد هست امکانش نیست سریع تر پیش بره؟می دونم می خواین دوره عالی مثل دوره های دیگه سایت باشه ولی زمان آپدیت ها خیلی هست امکانش نیست تا یک ماه دیگر تکمیل بشود؟

    • سلام
      بله حق کاملا با شماست.
      واقعیتش برای دوره جامع و پیشرفته React و Redux درخواست‌های زیادی بود، برای همین سعی کردم زودتر منتشر بشه.
      اما نهایت تلاشم رو می‌کنم که دوره جامع CSS هر چه زودتر تکمیل بشه.
      ممنون که پیگیر هستید.

  8. alireza گفت:

    سلام استاد صدری وقتتون بخیر.
    این دوره برای کسی که پیش زمینه ای راجب html va css نداره میتونه مفید باشه؟ یا باید قبل از تهیه این آموزش دوره html رو آموزش دیده باشیم؟

    • سلام
      در طول دوره همراه با CSS مفاهیم HTML رو هم بررسی کردیم، ولی برای درک بهتر HTML مستندات وب‌سایت MDN رو بهتون پیشنهاد می‌کنم.
      این دوره از مفاهیم اولیه‌ شروع می‌شه و تا قسمت‌های پیشرفته ادامه داره.

  9. مریم گفت:

    سلام. ممنون بابت دوره های خیلی خوبتون.
    داخل سرفصل های این دوره انیمیشن رو اصلا نمی بینم. جایی توضیح داده شده یا اینکه اضافه خواهد شد یا دوره ای برای انیمیشن قرار میدین؟
    ممنون

  10. شهاب الدین دهقانپور گفت:

    سلام استاد صدری وقت تون بخیر آموزش شماره ۴۶ واقعا عالی بود و کاربردی من این رو نمیدونستم و جایی هم بهش برنخورده بودم میشه به اینگونه گرادینت داد و همیشه توی فتوشاپ انجام می دادم بعد استفاده می کردم.ممنون
    ما توی کل دوره فقط روی همین قالب جلو میریم؟آیا با قالب های دیگه کار میشه؟که چالش ها بیشتر باشن؟و میشه آموزش ساخت اسلایدر فقط با HTML و CSS رو آموزش بدید؟ممنونم از شما

  11. شهاب الدین دهقانپور گفت:

    سلام جناب صدری وقت تون بخیر
    واقعا آموزش به زبان ساده و روان هست و بسیار عالی
    من بشخصه بسیار راضی هستم
    فقط بسیار دیر آپلود میشن اگر امکانش باشه زمان آپلود ویدیوهای جدید رو کمتر کنید
    از آخرین آپدیت دوهفته گذشته!
    و دوره چه مدت دیگه تمام میشه؟
    از شما سپاسگزارم
    فقط

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

  12. mohammed15 گفت:

    in dore dige update nemishe?

  13. آیلا گفت:

    سلام. لطف میکنید یک کد تخفیف بفرستید که با نصف قیمت من بتونم دوره css روتهیه کنم .برام مقدور نیست که کل هزینه رو پرداخت کنم وگرنه تهیه میکردم. ممنونم

  14. محمد گفت:

    با سلام،
    دوره هاتون عالیه فقط اینکه اگه بشه زود زود قسمت های دیگه روهم بذارین. من دوره های دیگه رو خریداری کردم و منتظر پایان این دوره ام. ظاهرا گفته بودین تا یه ماه تموم میشه ولی ما الان دوماهه که منتظر پایان دوره ایم.
    خیلی ممنون

  15. hadi_chaloos گفت:

    واسه این آموزش دیگه تخفیفی نداره
    درسته؟؟

  16. hadi_chaloos گفت:

    من آشنایی اولیه با HTML و CSS دارم…
    به نظرتون این مجموعه رو تهیه کنم نیاز به تهیه جداگانه آموزش HTML ندارم؟؟

  17. hadi_chaloos گفت:

    شما که تو مسیر یادگیریتون میگید HTML و CSS پایه یادگیری وب هستش… کاش قبل آموزش CSS و JavaScript یه آموزش جامع HTML تو سایتتون داشتید که اون رو هم از همین سایت یاد بگیریم نیاز به سایت دیگه و آموزش های سایت های دیگه نباشه…

    • سلام
      به نظرم برای یادگیری HTML می‌شه از مستندات وب‌سایت MDN استفاده کرد، چون مفاهیم خیلی پیچیده‌ای نداره.
      اما در این دوره ما HTML رو هم همراه با CSS تا اندازه‌ای که لازم هست بررسی می‌کنیم.

  18. دانیال فیروزی گفت:

    سلام خسته نباشید
    میخواستم بدونم بحث sass کی شروع میشه؟

  19. Ali گفت:

    سلام، gulp چی هست که دوستان همش میگم؟

  20. mohsen-jam گفت:

    سلام من این دوره را تهیه کردم خیلی خوب و روان توضیح میدین و من قدم به قدم با شما پیش میرم
    یه سوال داشتم آیا در این دوره یک یا چندتا وبسایتی رو میاید از ابتدا با html css felebox grid sass بطور کامل پیاده سازی کنید ؟
    ممنون

    • سلام
      ممنونم که برای دوره ثبت نام کردین، امیدوارم براتون مفید باشه.
      برای مواردی که گفتین تمرین‌های زیادی داریم و در نهایت پروژه واقعی هم خواهیم داشت.
      موفق باشید.

  21. mohsen-jam گفت:

    سلام
    با توجه به سرفصل هایی که قرار است در این دوره تدریس کنید به نظرم دوره جذاب و پرباری باشه
    اما قبل از شروع نیازمند این هستم که بدونم دوره چه زمانی تکمیل میشه ؟ یه زمان تقریبی هم بگید خوبه
    ممنون

  22. BroTher_ReZa گفت:

    خسته نباشی مهندس

  23. hossein.art1 گفت:

    سلام grid و flex-box هم شامل این دوره میشه

  24. ali.dev گفت:

    سلام وقتتون بخیر
    ممنون که دوره‌هارو با قیمت مناسب قرار می‌دید

  25. naeim گفت:

    درود بر شما
    فکر می کنید چقدر زمان ببره تکمیل دوره؟

  26. محسن گفت:

    دمتگرم
    پشتیبانی خوب به این میگن 🙂

  27. محسن گفت:

    سلام ، خسته نباشی اقا مسعود گل
    میخواستم بدونم تصمیم بر این شد که gulp رو هم به دوره اضافه کنید یا نه هنوز ؟
    و اینکه پروژه های عملی با گرافیک مدرن رو هم در دوره خواهید داشت ؟
    باتشکر

    • سلام
      خیلی ممنونم.
      بله انشاالله اضافه می‌کنم.
      قطعا دوره همراه با پروژه واقعی و تمرین هست. چون یادگیری بدون انجام پروژه امکان پذیر نیست.

  28. sian zare گفت:

    سلام خسته نباشید
    منم مثل سایر دوستان درخواست دارم اگر میشه sass و گالپ رو کامل بگید و کمی هم به سی اس اس انیمیشن بپردازید واقعا جای خالی این دو مورد اخر حس میشه
    تشکر

  29. hooman_sarv گفت:

    سلام. ممنون از آموزشای خوبتون. معلومه که واقعا برای هر قسمت وقت گذاشته و میدونین چی میخواین بگین. ی سوال داشتم . در صورت خرید دوره اگر آپدیتی به آن اضافه بشه باز هم باید هزینه ای پرداخت بشه؟ یا اگه الان خرید کنیم دیگه نیازی به پرداخت هزینه نیست.

    • سلام
      خیلی ممنونم از لطفتون.
      تمام به روز رسانی‌ها به صورت رایگان انجام می‌شن.
      اگر یک بار برای دوره ثبت نام کنید، برای دریافت به روز رسانی‌ها نیازی به ثبت نام مجدد نیست.

  30. غلی گفت:

    سلام. روش دیگه‌ای برای خرید نیست؟ خارج از ایران هستم رمز پویا رو نمیتونم فعال کنم

  31. morteza0936 گفت:

    در این دوره gulp هم آموزش داده میشه یا خیر ؟

  32. سیروان گفت:

    سلام
    ایا sass و گالپ به طور کامل اموزش داده خواد شد ؟
    لطفا گالپ رو هم اضافه کنید و کامل اموزششون بدید ممنون

  33. aminda گفت:

    خیلی عالیه استاد
    ممنون از دوره های خیلی خوب شما
    واقعا یک نعمت هستین شما برای دانشجو ها به خاطر دورهای بسیار خوبتون
    برای انتقال دانش به روز خودتون
    برای اینکه پشتیانی خیلی خوبی از دورها دارین و واقعا پاسخگو هستید به سوالات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای اطلاع از به روز رسانی دوره‌ها عضو کانال تلگرام فرانت کست شوید