telegram

توضیحات

بعد از مشاهده دوره Bootstrap ۵ نیاز هست که شما دوستان عزیز ‌Bootstrap ۵ را در دنیای واقعی مشاهده کنید. به این معنی که شما در قالب 4 پروژه (landing page,langing page with sass, coming soon, admin panel) بخش های مختلف قالب ها را یادبگیرید تا هر سایتی که مد نظرتون هست را بتونید به راحتی با Bootstrap ایجاد کنید.
بخش های مانند : نمایش هدر با اسکرول، layout بوت استرپ، ایجاد انیمیشن در اسکرول، شخصی سازی بوت استرپ با sass، تغییر اسلایدر بوت استرپ، حالت darkmode، شمارنده، افزودن map و chart به پروژه، deploy (آپلود پروژه در سرور) و ....
هدف از این دوره یادگیری بخش های مختلف در قالب های مختلف هست.

حتما ویدیو معرفی دوره را مشاهده کنید تا با پروژه های که توی این دوره ایجاد میشه آشنا بشید.

پیش نیاز های این دوره فوق العاده کاربردی:

HTML CSS طراحی وب طراحی واکنشگرا FlexBox grid Sass Bootstrap آموزش Bootstrap بوت استرپ

مدرس دوره علی شیخ
مدت دوره 08:43:02
تعداد ویدیو 54
وضعیت دوره : کامل شده
قیمت دوره : 399,000 359,000 تومان
% 10 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پیشنهادی

دوره های آموزشی
آموزش ویو ایکس (vuex) و pinia.js (پینیا جی اس) پروژه محور
کامل شده
% 5 تخفیف

آموزش ویو ایکس (vuex) و pinia.js (پینیا جی اس) پروژه محور

Vuex یک کتابخانه مدیریت وضعیت است که مخصوص ایجاد اپلیکیشن‌های متوسط، پیچیده و بزرگ در Vue.js است. Vue.js یکی از فریم ور...

199,000 189,000 تومان
05:16:05
آموزش Emmet
کامل شده

آموزش Emmet

Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی افزایش دهد. این ا...

رایگان
01:12:37
آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور
کامل شده

آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

برای اینکه وارد دنیای طراحی وب شوید اولین چیزی که باید با آن آشنا شوید HTML است، HTML یک زبانه نشانگذاری برای ایجاد وبسا...

رایگان
13:47:11
آموزش نست جی اس (nest.js)
کامل شده
% 10 تخفیف

آموزش نست جی اس (nest.js)

نست جی اس (nest.js) فریمورک یا چارچوبی برای ایجاد برنامه های کارآمد و مقیاس پذیر node.js در سمت سرور است. این فریمورک از...

699,000 629,000 تومان
12:52:59

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • reza nahrvanian

    میشه یک مقایسه بین bootstrap و uikit بفرمائید؟
    اینکه کدوم بهتره؟
    آیا اینکه uikit بیشتر از بوت استرپ به جاوا اسکریپت متکیه یک نقطه ضعف نیست؟

    • علی شیخ

      2 ماه پیش

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

  • reza nahrvanian

    با سلام خدمت شما و همه دوستانی که با بوت استرپ کار میکنند.
    یک تجربه ای داشتم خواستم با سایر دوستان به اشتراک بذارم.
    همانطور در جریان هستید یکی از مشکلات استفاده از فریم ورک هایی مانند بوت استرپ حجم بالای فایل css است.
    یکی از راههای حل این مشکل استفاده از purgecss است. به اینصورت:
    1- ابتدا node.js را نصب کنید تا npm نصب شود
    2- سپس cmd ویندوز را باز کنید. و به محل پروژه خود بروید.
    (می توانیدبه پوشه پروژه خود رفته و با راست کلیک و انتخاب ... مستقیما cmd را در پوشه جاری باز کنید )
    3- با تایپ دستور زیر، purgecss را نصب کنید.
    npm i purgecss -D
    4- سپس با دستور زیر، css های خود در مسیر myDire را که در فایل html استفاده شده پاکسازی کنید و در مسیر purgedDire ذخیره کنید.
    npx purgecss --css myDir/*.css --content *.html --output purgedDir

    • علی شیخ

      2 ماه پیش

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

  • ali VALI

    سلام و عرض ادب آیا فرانت سایت شما با بوت استرپ هست یا tailwind یا pwa و ... لطفا توضیح بدید و اینکه بنظر شما کدام فریموک کارآیی بهتری دارد ، البته اگه خودم بگم ، من react رو قوی تر از همه می دونم

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      فریمورک css سایت با UIkit ایجاد شده، در خصوص فریمورک های css فریمورک tailwind قابلیت شخصی سازی خیلی بیشتری داره. در کل انتخاب فریمورک بسته به نیاز های پروژه و همچنین طراحی اون داره
      react که فریمورک جاوااسکریپت هست و موضوع جدا، که دوباره وابسته به نیاز های پروژه هست و هم react و هم vue اوکی هستند و با هر کدوم راحتر باشید میتوانید استفاده کنید.

  • rohani

    سلام وقتتون بخیر
    تعداد پروژه هایی که برای بوت استرپ 4 در دنیای واقعی گفتید 9 تا هست اما برای بوت استرپ 5 فقط 4 تا ، آیا خرید دوره بوت استرپ 4 و انجام پروژه هاش چیزی به مهارتمون اضافه می کنه ؟

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      همین دوره ای بوت استرپ ۵ در دنیای کافی را ببینید و تمرین کنید اوکی هست و از طرفی آخرین ورژن بوت استرپ هست.

  • saeednk72

    سلام
    عرض ادب
    استاد توی ویدئوی معرفی دوره توی پروژه آخر که پنل مدیریت رو پیاده سازی کردید، در واقع تماما ساخت ظاهر هستش و هیچ ارتباطی با بکند نویسی نداره دیگه؟!
    منتها ظاهری هستش که صرفا برای مدیر سایت پیاده سازی میشه و سمت client نیستش. درسته دیدگاهم؟
    انگار یه فرانت هستش برای بکند :))

    • علی شیخ

      2 سال پیش

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

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      شما میتوانید محتوای فایل ها (زمانیکه لینکشون را توی مرورگر باز میکنید) را کپی و در یک فایل ذخیره و به پروژه اضافه ‌کنید.

    • mahmonir

      2 سال پیش

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

    • علی شیخ

      2 سال پیش

      ببینید شما دوتا cdn از aos به پروژه اضافه میکنید که یکیش css هست و دیگری js. اگه آدرس یا مسیر این cdn ها را توی مرورگر باز کنید سورس کدش را بر میگرده، حالا شما میتوانید مثلا سورس کد css را کپی و یک فایل css ایجاد و پیست کنید و حالا اون فایل را به پروژه اضافه کنید مانند افزودن فایل css به پروژه
      توی پیش نیاز های این دوره هم گفته شده، پیش نیاز دوره ها خیلی مهم هستند.

    • علی شیخ

      2 سال پیش

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

  • sepehr

    چه دوره عالی.. و همچنین پشتیبانی عالی که استاد مشکل دانشجوهارو حل میکنه همه چی عالی..
    استاد دوره (alpine.js) رو چیزی دربارش نمیدونم و اینکه تو توضیحاتش گفتین برای فریمورک لاراول هست. یعنی یجورای با php هم باید سروکار بزنیم؟ چون اصلا نمیخوام برم سمت php هدف بعدیم سمت بک اند جنگو هست

    ممنون از سایتتون از همه جهات عالی هست

    • علی شیخ

      2 سال پیش

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

  • mehdihasanpour

    سلام استاد وقت بخیر
    من tooltip و popover که میزارم در بوت استرپ 5 کار نمیکنه ممنون میشم این کد رو نگاه کنید مشکلش کجاست کلافه شدم حتی popper هم اسکریپتدهی کردم به سند
    ممنون از وقتی که میزارین 

    "<!DOCTYPE html>

    <html lang="en">

    

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>index</title>

        <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

    

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    

        <link rel="stylesheet" href="./style.css">

    </head>

    

    <body>

    

    

        <div class="container mt-5">

            <div class="row">

                <div class="col">

                    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" data-bs-container="body">Popover on bottom</button>

                    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

                </div>

            </div>

        </div>

    

    

    

    

        <script src="./production_jquery_3.6.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

        <script src="./js.js"></script>

    </body>

    

    </html>"

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      چرا فایل css برای بوت استرپ 4 هست، فایل js مربوط به ورژن 5 بوت استرپ ؟
      این سوال مربوط به چه قسمت و دوره ای هست؟ لطف کنید سوالاتتون را زیر قسمت مربوطه بپرسید و کد هاتون را بین سه عدد بک تیک قرار بدید و ارسال کنید.

    • علی شیخ

      2 سال پیش

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

  • mehdihasanpour

    سلام وقت بخیر
    برای اینکه وقتی اینپوت از نوع نامبر میزاریم اون فلشها رو نشون نده انتهای اینپوت باید چکار کنیم
    "<input type="number" class="form-control" placeholder="قیمت محصول را بنویسید..." required>"
    و اینکه من نمیدونم در Vscode چه هات کی رو میزنم سهوا که فاصیله میفته بین اول و آخر ایدی و کلاس ها و کلا داخل تگ ها مثل تگ زیر میشه ببینید همه تگهای سند html من اینجوری فاصله میفته بینش مثل فاصله " با modal بعد در js که میگیرم چون اینجا همش فاصله داره کار نمیکنه
    "<" div class=" modal fade " id=" city-choose-modal ">"
    ممنون میشم راهنمایی کنید این دو تا سوال رو

    • علی شیخ

      2 سال پیش

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

      /* Chrome, Safari, Edge, Opera */

      input::-webkit-outer-spin-button,

      input::-webkit-inner-spin-button {

        -webkit-appearance: none;

        margin: 0;

      }

      

      /* Firefox */

      input[type=number] {

        -moz-appearance: textfield;

      }

      برای سوال دوم نمیدونم،ریست کنید تنظیمات را و یا یکبار پاک کنید و دوباره نصب کنید

    • mehdihasanpour

      2 سال پیش

      ممنون استاد لطف کردین فقط یه سوال دیگه بپرسم برای اینکه از کاربر عکس بگیریم باید اینپوت تایپ image بزاریم یا file چون با تایپ file عکس میگیریم src میشه fake path/ و نمیتونیم عکسی که کاربر مثلا در فرم آپلود کرده رو نشون بدیم چون ادرسش c:/fakepath شده چه دستوری میفرمایید بتونم حلش کنم

    • علی شیخ

      2 سال پیش

      برای این موضوع باید از جاوااسکریپت استفاده کنید که اگه با js آشنا باشید کافیه سرچ کنید.

  • mohsenamiri

    سلام استاد وقتتون بخیر ببخشید من یه پروژه دارم که وقتی اجرا میشه نباید به اینترنت دسترسی داشته باشه چطوری میتونم alpine رو به پروژم اضافه کنم با دستور npm ?
    دوم اینکه کجا باید دستور import 'alpinejs' رو بنویسم ؟ ممنون میشم راهنمائیم کنین

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ببینید شما میتونید کد های alpine.js را توی یک فایل ذخیره و مثله بقیه فایل ها اضافه کنید از طریق npm هم میتونید، که نیاز هست دوره آلپاین و پیش نیازهاش را مشاهده کنید.

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      آیا پوشه node_modules را دارید توی پروژه ؟
      دستور npm i را وارد کردید که پکیج های مور نیاز نصب بشه ، که در عمل این پکیج ها توی پوشه node_modules هستند.

    • mehdihasanpour

      2 سال پیش

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

    • علی شیخ

      2 سال پیش

      در صورت امکان، سورس کدتون را از طریق تلگرام وب پروگ ارسال کنید تا بررسی بشه

    • mehdihasanpour

      2 سال پیش

      آیا منظورتون از
      npm i
      همان
      nom init هست؟
      چون من به ترتیب برا ی کار با sass طبق ویدئو شمادستورات زیر رو در ترمینال وارد میکنم
      npm init -y
      npm install bootstrap
      npm install node-sass
      تغییر متغیر در packaje json
      و د رآخر
      npm run sass

    • علی شیخ

      2 سال پیش

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

  • امیرعلی

    سلام استاد وقت بخیر
    یک سوال داشتم استاد من tailwind رو از دوره شما یادگرفتم و خیلی برای من راحت شده استفاده از اون به لطف شما. من استاد backend فعالیت می کنم laravel به نظر شما tailwind کافی هست یا اینکه این 2 دوره bootstrap شما رو تهیه و کامل یاد بگیرم ؟
    ممنون

    • علی شیخ

      2 سال پیش

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

  • armindev

    سلام
    مبحث css animation در اين دوره استفاده ميشه و بايد دوره جداگانه اون رو تهيه كنيم يا براي animation و transition از كتابخانه ها استفاده ميشه؟
    تشكر

    • علی شیخ

      2 سال پیش

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

    • armindev

      2 سال پیش

      ممنون
      پس براي اين دوره و پروژه هاش إلزامي نيست دوره animation در css شما رو ببينيم و از پكيج استفاده شده براي animation و transition پروژه ها ؟

    • علی شیخ

      2 سال پیش

      خیر الزامی نیست. توی توضیحات دوره، توی پیش نیاز ها برای دوره انیمیشن نوشته شده که بصورت اختیاری هست.

    • علی شیخ

      2 سال پیش

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

  • amirreza21

    سلام استاد وقت بخیر و خسته نباشید.
    جسارتا استاد دوتا موضوع:
    یک اینکه برای بوت استرپ دنیای واقعی اول بریم (جاوااسکریپت)و(اون فریمورکشو)یاد بگیریم بعد بیایم دنیای واقعیو ببینیم؟
    دو اینکه این دنیای واقعی 4-5 قسمتش مونده برای تکمیل کامل میشه؟
    ممنون

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      برای سوال اول، جاوااسکریپت جز جدا ناپذیر از فرانت هست و به نظر بنده حتما یادبگیرید.
      سوال دوم، بله قسمت های آخر دوره هست.