آموزش طراحی قالب فروشگاهی مشابه دیجی کالا با vuejs و Tailwind CSS

آموزش طراحی قالب فروشگاهی مشابه دیجی کالا با vuejs و Tailwind CSS

در این دوره آموزشی به طراحی قالب فروشگاهی مشابه دیجی کالا با NuxtJs و Tailwind CSS

۲,۱۷۸,۰۰۰ تومان
👨‍🏫
مدرسعلی صدیقی
🎬
تعداد قسمت‌ها۶۹
⏱️
مدت کل دوره۴۱ ساعت
enamadbehpardakht

توضیحات

به دنبال یادگیری طراحی یک قالب فروشگاهی مدرن و حرفه‌ای هستید که تجربه کاربری فوق‌العاده‌ای در موبایل، تبلت و دسکتاپ ارائه دهد؟

در این دوره آموزشی، گام‌به‌گام یاد می‌گیرید چگونه با استفاده از Vue.js و Nuxt.js به صورت SPA و SSR، یک قالب فروشگاهی کاملاً ریسپانسیو و ماژولار طراحی کنید. این دوره شما را با جدیدترین تکنیک‌های طراحی رابط کاربری (UI) و تجربه کاربری (UX) آشنا می‌کند و مناسب کسانی است که می‌خواهند قالب‌هایی مشابه وب‌سایت‌های بزرگ فروشگاهی مانند دیجی‌کالا طراحی کنند.

ویژگی‌های برجسته این دوره:

  • طراحی کاملاً ریسپانسیو و بهینه‌شده برای همه دستگاه‌ها:در این آموزش یاد می‌گیرید چگونه یک قالب فروشگاهی را به گونه‌ای طراحی کنید که تجربه کاربری در هر دستگاه (موبایل، تبلت و دسکتاپ) به بهترین شکل ممکن ارائه شود. برای دستیابی به این هدف، قالب‌های جداگانه‌ای برای موبایل و تبلت طراحی شده است تا تجربه‌ای اختصاصی و جذاب برای کاربران فراهم شود.
  • طراحی ماژولار و توسعه‌پذیر: ساختار این پروژه کاملاً ماژولار است. این بدان معناست که هر بخش از قالب به صورت جداگانه طراحی و مدیریت می‌شود تا بتوانید به راحتی آن را گسترش دهید یا تغییرات دلخواه خود را اعمال کنید.
  • هره‌گیری از Nuxt.js با قابلیت SSR و SPA:این آموزش به شما نشان می‌دهد چگونه از قابلیت‌های قدرتمند Nuxt.js مانند Server-Side Rendering (SSR) برای بهبود سرعت و بهینه‌سازی سئو استفاده کنید و در عین حال از انعطاف‌پذیری Single Page Application (SPA) بهره ببرید.
  • طراحی مدرن با Tailwind CSS:با استفاده از Tailwind CSS، یاد می‌گیرید چگونه یک رابط کاربری مدرن و چشم‌نواز طراحی کنید که هم زیبا و هم کارآمد باشد.
  • تمرکز بر تجربه کاربری پیشرفته (Advanced UX): در این دوره به جزئیات طراحی مانند موقعیت‌گذاری صحیح اجزا، طراحی رابط کاربری ساده و در عین حال قدرتمند برای کاربران، و ساخت المان‌های تعاملی توجه ویژه‌ای شده است.



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

  • معرفی Vue.js و Nuxt.js و تفاوت‌های SPA و SSR.
  • آشنایی با اصول طراحی ریسپانسیو و تنظیمات اولیه Tailwind CSS.
  • طراحی قالب دسکتاپ و ایجاد بخش‌های فروشگاهی (صفحه اصلی، محصولات، سبد خرید و ...).
  • طراحی قالب موبایل و تبلت به صورت جداگانه برای بهبود تجربه کاربری.
  • ایجاد ساختار ماژولار برای مدیریت بهتر بخش‌های مختلف قالب.
  • پیاده‌سازی SEO-Friendly با Nuxt.js.
  • نکات بهینه‌سازی و رفع مشکلات معمول.

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

  • آشنایی اولیه با Vue.js و مفاهیم پایه آن.
  • دانش پایه‌ای از HTML و CSS.

قسمت های منتشر شده

در صورت عدم پخش ویدیو به صورت آنلاین ،فایل را دانلود نمایید

۱
معرفی دوره
۰۰:۳۴:۳۳
۲
ساخت پروژه با nuxtjs
۰۰:۳۰:۵۶
۳
آموزش شروع کار با سرور و Tailwind CSS
۰۰:۲۷:۲۲
۴
نمایش اسلایدر تصاویر
۰۰:۴۱:۵۹
۵
نمایش بنر ها در صفحه اصلی
۰۰:۲۳:۱۵
۶
ساخت اسلایدر محصولات (بخش اول)
۰۰:۴۵:۰۴
۷
نمایش اسلایدر محصولات (بخش دوم)
۰۰:۳۸:۲۳
۸
نمایش اسلایدر محصولات (بخش سوم)
۰۰:۲۳:۱۹
۹
نمایش اسلایدر محصولات (بخش چهارم)
۰۰:۲۴:۲۱
۱۰
نمایش اسلایدر محصولات (بخش پنجم)
۰۰:۳۰:۴۴
۱۱
ادامه کد نویسی صفحه اصلی
۰۰:۴۰:۳۷
۱۲
نمایش پیشنهادات شگفت انگیز در صفحه اصلی
۰۰:۳۵:۳۳
۱۳
تکمیل محتوای صفحه اصلی
۰۰:۲۴:۱۸
۱۴
طراحی فوتر
۰۰:۴۵:۳۰
۱۵
طراحی هدر قالب (بخش اول)
۰۰:۳۱:۰۰
۱۶
طراحی کادر سرچ سریع (بخش اول)
۰۰:۳۰:۱۸
۱۷
طراحی کادر سرچ سریع (بخش دوم)
۰۰:۳۵:۰۰
۱۸
طراحی کادر سرچ سریع (بخش سوم)
۰۰:۳۲:۱۷
۱۹
ادامه کد نویسی هدر قالب دسکتاپ
۰۰:۳۱:۴۹
۲۰
نمایش دسته بندی محصولات در هدر
۰۰:۳۲:۴۱
۲۱
آموزش کش کردن data سرور
۰۰:۲۶:۵۶
۲۲
انتخاب شهر و استان
۰۰:۳۸:۰۸
۲۳
طراحی قالب موبایل فروشگاه (بخش اول)
۰۰:۳۴:۲۷
۲۴
طراحی قالب موبایل فروشگاه (بخش دوم)
۰۰:۲۹:۳۶
۲۵
طراحی صفحه معرفی محصول (بخش اول)
۰۰:۲۶:۰۹
۲۶
طراحی صفحه معرفی محصول (بخش دوم)
۰۰:۴۳:۲۴
۲۷
طراحی صفحه معرفی محصول (بخش سوم)
۰۰:۳۶:۴۴
۲۸
طراحی صفحه معرفی محصول (بخش چهارم)
۰۰:۳۶:۳۴
۲۹
طراحی صفحه معرفی محصول (بخش پنجم)
۰۰:۴۰:۳۰
۳۰
طراحی باکس نمایش تنوع قیمت (بخش اول)
۰۰:۳۳:۱۶
۳۱
طراحی باکس نمایش تنوع قیمت (بخش دوم)
۰۰:۳۴:۳۲
۳۲
طراحی باکس نمایش تنوع قیمت (بخش سوم)
۰۰:۳۰:۵۵
۳۳
نمایش تب بندی توضیحات در صفحه محصول
۰۰:۳۲:۰۱
۳۴
نمایش توضیحات و مشخصات فنی محصول
۰۰:۳۶:۴۵
۳۵
تکمیل تب بندی و نمایش نقد و بررسی تخصصی محصول
۰۰:۲۹:۱۵
۳۶
طراحی صفحه محصول (بخش ششم)
۰۰:۲۷:۵۰
۳۷
نمایش گالری تصاویر محصول (بخش اول)
۰۰:۳۹:۴۲
۳۸
نمایش گالری تصاویر محصول (بخش دوم)
۰۰:۲۶:۱۴
۳۹
کد نویسی بخش پرسش ها در صفحه محصول (بخش اول)
۰۰:۳۳:۵۹
۴۰
کد نویسی کامپوننت Form
۰۰:۴۳:۵۲
۴۱
تکمیل بخش پرسش ها در صفحه محصول
۰۰:۴۵:۵۸
۴۲
طراحی بخش نظرات در صفحه محصول (بخش اول)
۰۰:۴۰:۱۶
۴۳
طراحی بخش نظرات در صفحه محصول (بخش دوم)
۰۰:۴۱:۱۰
۴۴
طراحی بخش نظرات در صفحه محصول (بخش سوم)
۰۰:۴۰:۳۶
۴۵
تکمیل طراحی صفحه محصول در قالب موبایل
۰۰:۳۲:۲۱
۴۶
طراحی صفحه پرسش های متداول (بخش اول)
۰۰:۴۱:۴۲
۴۷
طراحی صفحه پرسش های متداول (بخش دوم)
۰۰:۳۵:۴۹
۴۸
تکمیل صفحه لیست پرفروش ترین محصولات
۰۰:۴۱:۴۶
۴۹
طراحی صفحه پیشنهادات شگفت انگیز
۰۰:۳۳:۱۹
۵۰
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش اول)
۰۰:۳۹:۰۹
۵۱
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش دوم)
۰۰:۴۰:۳۳
۵۲
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش سوم)
۰۰:۲۹:۱۴
۵۳
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش چهارم)
۰۰:۴۹:۲۲
۵۴
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش پنجم)
۰۰:۴۴:۴۷
۵۵
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش ششم)
۰۰:۴۲:۱۹
۵۶
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش هفتم)
۰۰:۴۲:۰۰
۵۷
کد نویسی صفحه جست و جوی پیشرفته محصولات (بخش هشتم)
۰۰:۵۰:۰۶
۵۸
طراحی صفحه پروفایل (بخش اول)
۰۰:۳۸:۲۲
۵۹
طراحی صفحه پروفایل (بخش دوم)
۰۰:۳۳:۵۰
۶۰
مدیریت سفارشات در پنل کاربری (بخش اول)
۰۰:۳۴:۴۸
۶۱
مدیریت سفارشات در پنل کاربری (بخش دوم)
۰۰:۴۲:۴۵
۶۲
مدیریت سفارشات در پنل کاربری (بخش سوم)
۰۰:۳۶:۵۴
۶۳
کد نویسی فاکتور سفارش
۰۰:۳۷:۱۹
۶۴
ثبت و مدیریت آدرس ها در پنل کاربری (بخش اول)
۰۰:۴۱:۵۷
۶۵
ثبت و مدیریت آدرس ها در پنل کاربری (بخش دوم)
۰۰:۴۳:۱۷
۶۶
ثبت و مدیریت آدرس ها در پنل کاربری (بخش سوم)
۰۰:۳۲:۰۵
۶۷
کد نویسی کامپوننت SelectTag
۰۰:۳۲:۰۲
۶۸
ثبت و مدیریت اطلاعات پروفایل (بخش اول)
۰۰:۲۴:۳۸
۶۹
طراحی و کد نویسی فرم ثبت اطلاعات شخصی در پنل کاربری
۰۰:۳۴:۱۳

گالری تصاویر

پرسش و پاسخ

ثبت پرسش

قیمت
۲,۱۷۸,۰۰۰ تومان