طراحی رابط کاربری با بوتسترپ(ورژن 4.4)

یادگیری آخرین ورژن بوتسترپ در قالب پروژه

بوتسترپ، یک فریم ورک محبوب css هست که امکانات زیادی از جمله ریسپانسیو کردن سایت رو در اختیار ما قرار میده. در این پروژه آموزشی 15 جلسه ای، به صورت عملی یک پروژه “وب سایت موسیقی” رو با هم با استفاده از بوتسترپ پیاده سازی می کنیم و اون رو کاملا ریسپانسیو(واکنش گرا) می کنیم.

در این پروژه آموزشی از آخرین ورژن بوتسترپ یعنی ورژن 4.4 استفاده میشه که تغییرات خیلی زیادی نسبت به ورژن قبلی خودش یعنی ورژن 3 داشته.

این پروژه به شما کمک میکنه تا بتونید هر وب سایتی رو کاملا ریسپانسیو کنید و علاوه بر اون بتونید بوتسترپ رو یاد بگیرید و از امکانات اون در سایت هایی که طراحی می کنید استفاده کنید. جدا از پروژه عملی که برای شما در نظر گرفته ایم، در 6 جلسه اول به صورت کامل با بوتسترپ و FLEX BOX آشنا میشیم که انعطاف بسیار زیادی به سایت ما میده.

پروژه طراحی رابط کاربری با بوتسترپ

 

چرا این دوره رایگان هست؟

چون پروژه محور سایت خوبیه 🙂

مطمئنا در وب سایت های مختلف دیدید که دوره های بوتسترپ با مبلغ های زیاد به فروش میره ضمن اینکه اکثر دوره ها پروژه محور نیست و صرفا شمارو با امکاناتی که در خود سایت رسمی بوتسترپ گفته شده آشنا میکنن. در حالیکه یادگیری بوتسترپ در قالب پروژه کاملا متفاوته و باعث میشه شما بعد از این دوره، به راحتی بتونید هر وب سایتی رو ریسپانسیو کنید و امکانات بوتسترپ رو در جاهای مختلف سایتتون به کار ببرید.

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

چه چیزهایی غیر از Bootstrap در این دوره یاد می گیرم؟

علاوه بر bootstrap، شما نه تنها تسلط خیلی بیشتری به html و css پیدا خواهید کرد بلکه با امکان جدید css به نام flex box آشنا خواهید شد که بوتسترپ در آخرین ورژن خودش از flex استفاده میکنه و ما هم قبل از شروع پروژه در 2 جلسه کامل اون رو خدمت شما تدریس می کنیم.

پروژه به گونه ای طراحی شده که شما با چالش ها و سوالات زیادی روبرو بشید و این باعث میشه خیلی عمیق و پخته تر bootstrap و html و css و flex رو یاد بگیرید.

چطور دوره رو تهیه کنم؟

اول در کمتر از 5 ثانیه در سایت عضو بشید و بعد از همین آدرس، بالا سمت چپ صفحه به لینک تمامی جلسات دسترسی خواهید داشت.

در فصل اول به مفاهیم Flex Box و اهمیت آن در استفاده از پروژه ها می پردازیم. تمرین ها و مثال های مختلف عملی زیادی از Flex میزنیم و با کاربرد استفاده آن در فریم ورک هایی مثل بوتسترپ آشنا می شویم.
بوتسترپ و امکانات آن و همچنین نحوه ریسپانسیو کردن وب سایت را به طور کامل با مستندات رسمی وب سایت بوتسترپ یاد می گیریم تا برای انجام یک پروژه تحت بوتسترپ آمادگی کامل را داشته باشیم.
در فصل پایانی با کمک از آموخته های فصل های پیشین، صفحه اصلی وب سایت مدرن دانلود موزیک را که شامل هدر، اسلایدر، سرچ باکس، منو ریسپانسیو، آهنگ ها، سایدبار، صفحه بندی و فوتر است را با یکدیگر پیاده سازی می کنیم.

دیدگاهها

  1. mamadbosqets

    سلام خسته نباشید لینک دانلود این آموزش چرا نیس؟

    • محمدرضا الطافی

      انشالله به زودی قرار داده میشن.

  2. niiightblog

    بسیار عالی! میشه بگید کی لینک های دانلود قرار میگیرن؟ یه تایم حدودی

    • محمدرضا الطافی

      امشب ۶ جلسه قرارداده میشه. بقیه جلسات انشالله تا آخر ماه

  3. niiightblog

    اولین سایتی که که بعد از اتصال اینترنت چک کردم اینجا بود.. شدیدا منتظر باقی اموزش 🙂

    • محمدرضا الطافی

      خیلی خوشحالیم از فیدبک شما. بله حتما ادامه آموزش به زودی منتشر خواهد شد.

  4. naserlotfi67

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

    • محمدرضا الطافی

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

  5. shahriar.jahanpour

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

    • محمدرضا الطافی

      انشالله به زودی تمام جلسات منتشر میشه

  6. naserlotfi67

    سلام استاد.بی صبرانه منتظر بقیه جلسات هستم

  7. naserlotfi67

    دوباره سلام استاد الطافی.ممنون بابت آموزش بی نظیرتون.ساده و کاربردی.استاد میشه زودتر حداقل چند جلسه بعدی رو بزارید؟ممنون

    • محمدرضا الطافی

      بله حتما تا انتهای هفته دیگه تمام جلسات اضافه میشه

  8. naserlotfi67

    سلام.خسته نباشید.استاد بقیه جلسات را برای دانلود نمیذارید؟

    • محمدرضا الطافی

      حتما

  9. naserlotfi67

    سلام.استاد بقیه جلسات رو کی میذارید؟من خیلی وقته منتظرم.ممنون

    • محمدرضا الطافی

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

  10. qray.hat

    با سلام و خسته نباشید آقای الطافی . دوره هاتون همیشه عالی بوده و ازین بابت خیلی از شما ممنونم .
    در مورد این دوره یعنی از جلسه ۱۰ دیگه ادامه نداره ؟؟
    چون من شدید منتظر جلسات بعدیتون بودم …

    • محمدرضا الطافی

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

  11. kafent2016

    سلام داش دم سایتتون گرم همیشه برقرار باشین .منتظر بقیه ویدیو ها هستم

  12. محمد

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

  13. tadownload33

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

    • محمدرضا الطافی

      ممنونم از بازخورد شما دوست عزیزم

  14. mozhgan.ne

    سلام خسته نباشید…. بقیه اموزش کی قرار داده میشود ؟

    • محمدرضا الطافی

      انشالله دوره دیگری جایگزین خواهد شد

  15. qray.hat

    با سلام خسته نباشید آقای الطافی و ممنونم از آموزشهای عالیتون
    یه سوال درباره این دوره داشتم ، میخواستم بدونم مشکلی نداره که توی پروژه از دو یا سه تا فریمورک سی اس اس استفاده بشه ؟
    مثلا من توی پروژم از بوت استرپ دارم استفاده میکنم همزمان از فریمورک متریال یا سمانتیک هم استفاده کنم .. مشکلی پیش میاد در این صورت ؟

    • محمدرضا الطافی

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

  16. محمد

    سلام
    خیلی ممنون بابت آموزش های رایگان و خوب شما .
    اما یه مشکلی که داره اینه که اصلا شروع آموزش بوتسترپ مثل شروع html,css,نبود و من نتونستم یاد بگیرم
    و اون نرم افزاری که توش شروع به کد نویسی کردید چه برنامه ای هست ؟ چون نمی‌دونم چیه فقط کلیپ ها تون رو نگاه میکنم و نمیتونم انجام بدم
    و یه سوالی داشتم اونم اینه که اون فایل های cssوjsکه تو فایل هست چی هستن؟ واصلا برا چی هستن ؟مگه خودمون نباید بنویسیم؟کاربردشون چیه
    بازم ممنون بابت زحمات شما

    • محمدرضا الطافی

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

  17. mwmalix79

    خیلی گلی داداش واقعا ازت ممنونم

  18. mjr0924

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

  19. dbstanymhmd464

    زود بزارین دیگه خیلی دارین طولش میدین

    • محمدرضا الطافی

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

  20. ali.asmandez

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

  21. سعید

    سلام خسته نباشید میگم خدمتتون مرسی از اموزشای خوبتون.
    یه سوال؟
    من یه سایت طراحی کردم با اما نتونستم ریسپانسیوش کنم کامل میشه از بوتسترپ استفده کرد برای اینکار -راهنمایی میکنین
    html-css-jquery

    • محمدرضا الطافی

      بله به راحتی با بوتسترپ امکان پذیره.

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

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

محمدرضا الطافی
مدرس دوره

محمدرضا الطافی

  • تاریخ انتشار: 23 اکتبر 2019
  • طول دوره: 03:56:30

پروژه های مشابه

طراحی رابط کاربری
05:42:11

پیاده سازی 12 پروژه کاربردی jQuery

رایگان!
طراحی رابط کاربری
03:38:18

طراحی رابط کاربری سایت(سطح مقدماتی)

رایگان!