مخصوص اعضای ویژه 
بلک فرایدی
🎉 بلک فرایدی تاپ لرن شروع شد! 🎉
🔥 70 درصد تخفیف ویژه روی تمامی دوره‌های آموزشی 🔥
اگر همیشه منتظر یک فرصت عالی برای یادگیری مهارت‌های جدید بودید، الان وقتشه! 🚀
🎯 دوره‌های متنوع و کاربردی در زمینه‌های:
✔️ برنامه‌نویسی و توسعه وب
✔️ طراحی و گرافیک
✔️ امنیت و شبکه
✔️ و ده‌ها موضوع جذاب دیگر
⏳ زمان محدوده! همین الان از بیشترین تخفیف‌ها استفاده کنید🔔
✨ آینده شغلی‌تون رو همین امروز بسازید! 🌟
قیمت این دوره: رایگانــ
- مدرس دوره : تاپ لرن ( رزومه )
- تعداد ویدیوها : 33 ویدیو
- مدت زمان دوره : 9:2:00
- سطح دوره : پیشرفته
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1400/09/11
آموزش طراحی سایت دیجیکالا با BootStrap 4
معرفی بوت استرپ ۴ و امکانات جدید آن
بعد از نزدیک به ۲ سال ارتقا و کدنویسی نسخه بوت استرپ ۴ توسط Mark otto و Jacob Thornton منتشر شد. نسخه ای که تغییرات اساسی به ویژه در ریسپانسیو سایت داشته است. درBootstrap 4 سایزبندی ریسپانسیو تغییرات اساسی داشته و بازه ۰ تا 576 پیکسل برای گوشی های همراه به آن اضافه شده که مشکلات بسیاری از طراحان وبسایت را برطرف خواهد کرد. اگر تاکنون با این فریم ورک و قابلیت های آن آشنا نشدید پیشنهاد میکنیم از این لینک استفاده کنی پس از آن به ادامه مطالعه این دوره بپردازید.
بررسی نسخه های پیشین Bootstrap
اولین نسخه بوت استرپ که ۴ سال پیش منتشر شد، امکانات کمی برای ریسپانسیو کردن همراه خود داشت و در طراحی آن از سایه ها استفاده شده بود. این نسخه چندان شناخته شده نبود و استقبال زیادی از آن نشد ولی بستری مناسب برای پیشرفت و ارایه نسخه های جدید فراهم کرد.
در نسخه دوم به صورت کامل طراحی ریسپانسیو پیاده سازی شد ولی در این نسخه کلیه کدها براساس پیکسل تعریف میشدند و عملا سایت های طراحی شده به جای ریسپانسیو انطباق پذیر یا همان Adaptive بودند. هردو تکنیک طراحی سایت ریسپانسیو و طراحی انطباقی نمایش سایت در موبایل را بهینه سازی میکنند ولی با روش هایی کاملا متفاوت، قبل از مقایسه هردو را معرفی میکنیم. همچنین در نسخه دوم دیگر اینترنت اکسپلورر ۷ توسط بوت استرپ پشتیبانی نمیشد
انتشار بوت استرپ ۳ با موج عظیمی از رضایت کاربران و رویکرد مثبت طراحان همراه بود و به قدری همه گیر شد که در حال حاضر ۱.۵ درصد از سایت های دنیا با این فریم ورک طراحی شده اند. این ارقام زمانی جالب تر میشود که سایت های پربازدید و مطرح را بررسی کنیم زیرا ۱۳.۵ درصد از سایت هایی که رنک الکسا آنها زیر ۱۰ هزار است از فریم ورک بوت استرپ در طراحی خود استفاده کرده اند.برای یادگیری این نسخه میتونی از این لینک استفاده کنی.
با ورود بوت استرپ ۴ به طوری کلی اینترنت اکسپلورر از لیست مرورگرهایی که با این فریم ورک انطباق دارند خارج شد زیرا این مرورگر از دستورات Flexbox پشتیبانی نمیکند و بستر اصلی نسخه ۴ براساس Flex نوشته شده است. میتوان گفت نسخه جدید بیشتر از آنکه ریسپانسیو باشد انعطاف پذیر است.
علاوه براین سایز بندی Media Query ها در نسخه جدید کاملا تغییر کرده و در بازه های ۵۷۶، ۷۶۸، ۹۹۲ و ۱۲۰۰ پیکسل تقسیم بندی شده است. این تقسیم بندی جدید به شما کمک میکند مرز مشخصی میان موبایل، تبلت و دسکتاپ داشته باشید.
طراحی سایت انعطاف پذیر چیست؟
عبارت Flexbox که مخفف Flexible Box است را میتوان از آخرین دستاوردها کنسرسیوم جهانی وب دانست که در دستورات CSS3 اضافه شده است. این سیستم جدید به شما اجازه میدهد انعطاف بیشتری در ستون بندی محتوا داشته باشید. در بوت استرپ ۳ شما یک ساختار ۱۲ ستونه در اختیار داشتید که هرکدام عرض یکسانی داشتند و فاصله میان آنها ۱۵ پیکسل بود، با ترکیب چند ستون میشد باکس بندی های مختلفی ایجاد نمود ولی امکان نداشت که شما ۵ یا ۷ المان با عرض مساوی در صفحه ایجاد کنید. بعنوان مثال در طراحی سایت شرکتی و نمایش لوگوی مشتریان شما باید همیشه از تعداد زوج برای مشتریان استفاده میکردید.
ولی طراحی انعطاف پذیر امکاناتی ایده آل برای ستون بندی و چیدمان المان ها در اختیار شما قرار میدهد. چند ویژگی مهم Flex به شرح زیر است:
تعداد المان های موجود در یک ردیف محدود نیست و براساس عرض هر کدام چیدمان انجام میشود. همچنین فاصله میان المان ها و عرض هرکدام در یک ردیف براساس عرض صفحه و تعداد آنها محاسبه میشود و عملا شما در هر سایزی نمایش صحیح خواهید داشت.
میتوان ترتیب چیدمان محتوا را به راحتی تغییر داد. چیدمان المان ها در راستای عمودی و محل قرارگیری آنها نسبت به هم به راحتی قابل انجام است.
فضای اختصاصی داده شده به هر المان قابل تعیین بوده و فضای باقی مانده به صورت مساوی بین سایر المان ها تقسیم میشود.
اینها تنها نمونه ای از امکانات Flex در طراحی سایت بود که همگی به خوبی در بوت استرپ ۴ به کار گرفته شده اند. استفاده از این ساختار جدید و البته grid که نسخه دو بعدی همین Flex محسوب میشود به شما امکان میدهد سایت هایی پیچیده تر و مدرن تر بسازید.
از اینها گذشته، شمااگر آشنایی کامل با بوت استرپ 4 را دارا هستید، بدون شک این دوره مکمل فوق العاده و نمونه یک پروژه عملی بی نقص هستش که میتونه در مسیر تکامل بهت کمک کنه. از نظر من تکامل یعنی تمرین. یعنی تکرار. و در پایان تبدیل حفظیجات و یافت شده ها به تخصص. من وقتی میخوام دوره ای رو ضبط کنم، میشینم و اول به نیاز های شما فکر میکنم و جالب اینجاست که به بهترین نتیجه هم میرسم.خیلی خوشحالم که تو یه دوره دیگه هم با هاتونم. تو این دوره با هدفی بزرگ میریم تو دل دیجیکالا. بله . همونطور که میدونید یکی از وبسایت های خیلی خفنه. ولی شما خفن ترین. پس میتونید. و در پایان دوره میتونید.
برای آشنایی بیشتر با دوره،جلسه معرفی رو همین زیر تماشا کن
پیش نیاز این دوره : دوره آموزش BootStrap 4
فهرستـــ ویدیوها
مدت زمان دوره 9:2:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
2
نصب و پیکربندی پیشنیاز ها
00:40:00
در این جلسه اقدام به نصب bootstrap و jquery میکنیم. اما این دو صرفا جنبه مرور داشتند. لذا به نصب فریمورک های دیگری که در جلسه قبل ذکر شد میپردازیم. یعنی swiper.js و popper.js. در این جلسه بطور کامل به شرح این دو می پردازیم. مهمترین نکته اینجاست که ما به سبب ورود کمتر به جاوااسکریپت و همچنین استفاده خیلی جزیی css خودمان، یه این دو فریمورک نیاز داریم. همچنین همانطور که میدانید نمیتوان دیجیکالا را صرفا بر پایه بوت استرپ بنیان نهاد. بعنوان مثال اسلایدر های دیجیکالا را در نظر بگیرید. شاید بتوان با بوت استرپ به ساخت اسلایدر اقدامی کرد، اما مسئله اینجاست که نیاز داریم که خودمان کد بنویسیم. کد css و جاوااسکریپت. درنتیجه میتوان گفت که چون قصد اصلی ما استفاده از بوت استرپ هست، ورود کمی به css خواهیم داشت، و با کمک سایر کتابخانه ها نیز آن را توسعه و به مباحثی چون عدم استفاده از جاوااسکریپت نیز ورود میکنیم. ر جلسه بعدی قصد داریم با این پشتکار و پیکربندی قوی، به طراحی اولیه و بخش نوار بالایی وبسایت دیجیکالا بپردازیم.
3
شروع به طراحی Navbar دیجیکالا
00:38:00
در این جلسه پس از نصب و پیکربندی پیشنیاز ها، و همچنین آشنایی با دوره وقت آن رسیده که بطور عملی وارد کار شویم و در کنار شروع کدنویسی و استفاده از اسکریپت های جلسه سوم. به بهترین نحو و با کیفیت بسیار بالا، نوار اصلی سایت دیجیکالا را طراحی کنیم.
4
طراحی اسلایدر(Slider) های اصلی دیجیکالا
00:30:00
در این جلسه پس اتمام بخش نوار بالایی سایت و انتظار کنونی برای طراحی زیر منو ها و تکمیل نوار سایت، ابتدا به طراحی و ساخت اسلاید تصاویر صفحه اصلی دیحیکالا میپردازیم و کمی کار رو جلوتر میبریم. به این شکل نه تنها آمادگی کامل برای ادامه کار، بلکه شرایط لازم برای طراحی وقتگیر زیر منو ها رو بدست میاریم. چرا که در این جلسه قراره وبسایتمون یک رنگ و بویی بگیره.
5
طراحی زیر منو های سایت دیجیکالا
00:18:00
امروز قراره کارمون رو شروع کنیم. این جلسه رو هم واستون رایگان گذاشتم که اگر مشکلی توی تهیه دوره و ... بود بتونید به راحتی ازش استفاده کنید و از فریمورک بوت استرپ بهره بگیرید. امروز قراره ۱۰۰۰ خط کد بنویسیم؛-* و زیر منو های سایت دیجیکالا رو طراحی کنیم؛-)
6
طراحی بخش پیشنهادات ویژه دیجی کالا
نمایش آنلاین این بخش رایگان است
00:26:00
امروز قراره یه ذره کارمون رو باحالتر کنیم. حالا که خیالمون از بخش های راحت اما وقتگیر راحت شده، می رسیم به طراحی بخش کالا های تخفیف دار یا همون پیشنهادات ویژه دیجیکالا
7
شروع طراحی محصولات صفحه اصلی
نمایش آنلاین این بخش رایگان است
00:11:00
در این جلسه قصد داریم به طراحی محصولات اصلی وبسایت دیجیکالا بپردازیم
8
طراحی اسلایدر محصولات دیجیکالا
نمایش آنلاین این بخش رایگان است
00:25:00
در این جلسه با طراحی بخش دیگری از اسلایدر های محصولات دیجیکالا بصورت تقریبی به پایان بخش فروشگاهی خواهیم رسید
9
طراحی card های اصلی دیجیکالا
نمایش آنلاین این بخش رایگان است
00:18:00
در این جلسه می پردازیم به طراحی تصاویر بین محصولات دریجیکالا. در جلسه بعدی من رو حتما دنبال کنید که قراره بخش محصولات رو هم تموم کنیم;-)
10
اتمام ساخت وبسایت دیجیکالا با بوت استرپ4
نمایش آنلاین این بخش رایگان است
00:47:00
در این جلسه که جلسه پایانی کد نویسی ماست، میخوایم بپردازیم به ساخت فوتر(ّFooter) وبسایت دیجیکالا. حالا چرا جلسه پایانی از کدنویسی و چرا جلسه پایانی دوره نه؟ چون که حتما حتما حتما باید ویدیوی بعدی رو پلی کنید. حتما حتما حتما. دارم تاکید میکنم که از دستت نره. این جلسه رو که دیده، پاشو بیا جلسه بعد رو پلی کن. من اونجا منتظرت نشستم ;-)
11
خ مثل خداحافظی(اما نه برای همیشه) ;-)
نمایش آنلاین این بخش رایگان است
00:18:00
خیلی خیلی مفتخرم که این دوره رو با تو دوست عزیزم به پایان رسوندم ;-) راستی یادم رفت توی ادیت آی دی تلگرام خودم رو بزارم => HelloHellWord@ امیدوارم تک تک لحظه های زنگیت قند باشه و به باگ نخوره. تا یه دوره دیگه خداحافظ ;-)
12
معرفی و شروع فصل دوم
00:10:00
عرض سلام و ادب خدمت دانشجویان عزیز فصل دوم رو استارت زدیم . قراره توی این آپدیت بترکونیم جلسه 12 رو از دست ندین(برای افرادی هم که دوره را همچنان خریداری نکردند کاملا رایگان است) محتویات فصل جدید: 1.آموزش 0 تا 100 بوت استرپ 5 2.طراحی کاملا ریسپانسیو صفحات دیجیکالا با بوت استرپ 3.انجام 10 ها پروژه عملی با بوت استرپ 4.انجام پروژه های درخواستی دانشجویان 5.پروژه های عملی دیجیکالا با زبان های دیگر از قبیل javascript و php
13
بوت استرپ ورژن 5 Bootstrap
00:12:00
برسی کامل ورژن پنجم کتابخانه Bootstrap و مقایسه تغییرات با نسخه قبلی
14
نصب و شروع کار با فریمورک بوت استرپ 5
00:08:00
چگونه بوت استرپ را دانلود و نصب کنیم؟
منبع اصلی یادگیری بوت استرپ 5 چیست؟
15
Bootstrap5 | Grid System
00:12:00
با استفاده از کلاس های بوت استرپ، در استاندارد ترین حالت ممکن سایت خود را ریسپانسیو کنید
16
Bootstrap5 | Responsive Web Pages
00:20:00
در این جلسه علاوه بر یادگیری اصولی ریسپانسیو سازی وبسایت با استفاده از بوت استرپ، یاد خواهیم گرفت:
container-gutter-cols in cols-col
20
Bootstrap5 | Spacing(padding-margin)
00:07:00
اعمال فواصل داخلی و خارجی (padding و margin) در بوت استرپ 5
21
آموزش 0 تا 100 بوت استرپ 5 | جدول ها (tables)
00:09:00
آموزش کامل استفاده از جدول ها در فریمورک بوت استرپ
22
آموزش 0 تا 100 بوت استرپ 5 | اعلان ها (alerts)
00:08:00
آموزش Bootstrap5 Alert Component + لینک کردن فایل bootstrap.js
23
آموزش 0 تا 100 بوت استرپ 5 | اسلایدر تصاویر (carousel)
00:10:00
بعنوان اولین استفاده از bootstrap.js به سراغ ساخت اسلایدر های حرفه ای بوت استرپ خواهیم رفت
24
آموزش 0 تا 100 بوت استرپ 5 | modals
00:09:00
در این جلسه با باکس های اعلان معروف بوت استرپ تحت عنوان MODAL کار خواهیم کرد
25
آموزش 0 تا 100 بوت استرپ 5 | کنترل فرم ها(Form Elements)
00:11:00
در این جلسه بصورت کامل یاد خواهیم گرفت چطور input ها و سایر المان های مختلف داخل یک فرم را با بوت استرپ 5 کنترل کنیم
26
آموزش 0 تا 100 بوت استرپ 5 | helpers
00:10:00
با یادگیری helperهای بوت استرپ دیگر نیازی به استفاده از css برای استایل دهی های مرسوم نخواهیم داشت
27
آموزش 0 تا 100 بوت استرپ 5 | رنگ ها(colors)
00:07:00
در این جلسه رنگ شناسی بوت استرپ را 0 تا 100 پوشش خواهیم داد. از تایپوگرافی و لینک ها گرفته تا بک گراند ها
30
آموزش 0 تا 100 بوت استرپ 5 | Flex Box
00:14:00
با یادگیری flex display با شیوه مدرن grid بندی سایت ها آشنا شوید و با بوت استرپ 5 به راحتی آن را بکار بگیرید
31
آموزش 0 تا 100 بوت استرپ 5 | فایل های بوت استرپ 5(Bootsrap5 Contents)
00:18:00
در این جلسه یکبار برای همیشه با تک تک فایل های فریمورک بوت استرپ 5 آشنا شوید
نظرات کاربران در رابطه با این دوره