لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش Next.js با Tailwind CSS-یک پروژه تجارت الکترونیک Frontend بسازید
Next.js With Tailwind CSS-Build a Frontend Ecommerce Project
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
آموزش طراحی برنامه های Next.js با Tailwind CSS. یک پروژه تجارت الکترونیکی کامل پاسخگو Frontend بسازید. بعدی JS برای ساخت یک پروژه کامل فرانت اند JS بعدی با Tailwind CSS نحوه طراحی یک برنامه فرانت اند با استفاده از Tailwind CSS یک پروژه تجارت الکترونیکی کامل Fronted نحوه ساخت یک پروژه تجارت الکترونیکی پاسخگو با Tailwind CSS پیش نیازها: هیچ تجربه قبلی لازم نیست برای یادگیری Next Js و Tailwind CSS یک لپ تاپ یا کامپیوتر برای نوشتن کد لازم است دانش پایه HTML و CSS
در این دوره آموزشی، Next.js و Tailwind CSS را یاد خواهید گرفت. شما یک پروژه تجارت الکترونیک frontend کامل خواهید ساخت.
ویژگی های کلیدی که در این دوره خواهید آموخت عبارتند از:
نحوه کار با Next.js و سازماندهی پروژه Next.js.
نحوه استفاده از Tailwind CSS و ادغام آن با پروژه Next.js.
نحوه ایجاد یک برنامه تجارت الکترونیک پاسخگو کامل با استفاده از Tailwind CSS.
درکی کامل از نحوه ایجاد یک پروژه Frontend Next.js از ابتدا تا انتها به دست خواهید آورد. هنگام توسعه آن، یاد خواهید گرفت که چگونه پروژه را به طور مؤثر سازماندهی کنید.
هنگامی که کل برنامه را با استفاده از این چارچوب طراحی میکنید، برنامههای دنیای واقعی Tailwind CSS را کاوش خواهید کرد.
نحوه کار با Next.js و ویژگیهای مختلف آن، مانند انتقال داده با استفاده از props و اشتراکگذاری دادهها بین اجزا.
میآموزید که چگونه از بستههای npm خارجی مختلف با Next.js استفاده کنید.
در برنامه کاملی که در این دوره خواهید ساخت، یاد خواهید گرفت که چگونه یک نوار لغزنده چرخ فلک اضافه کنید و آن را برای همه دستگاهها با استفاده از Tailwind CSS پاسخگو کنید.
شما با بخشهای مختلفی در پروژه مواجه خواهید شد که در آن با چالشهای طراحی مختلف با استفاده از Tailwind CSS مقابله میکنید و نحوه حل آنها را یاد میگیرید.
سرفصل ها و درس ها
معرفی
Introduction
نسخه ی نمایشی پروژه
Project Demo
ایجاد پروژه بعدی JS
Creating a Next JS Project
ایجاد یک پروژه بعدی JS قسمت 1
Creating a Next JS Project Part-1
فایل ها و پوشه های Next JS
Files and Folders of Next JS
فایل ها و پوشه های Next JS Part-2
Files and Folders of Next JS Part-2
شروع با Top Header
Starting With Top Header
شروع با Top Header Part-3
Starting With Top Header Part-3
افزودن مطالب به عنوان بالا
Adding Contents to Top Header
افزودن مطالب به قسمت بالای سربرگ قسمت 4
Adding Contents to Top Header Part-4
حالت دادن به سربرگ بالا
Styling the Top Header
مدل دادن به سربرگ بالا قسمت 5
Styling the Top Header Part-5
حالت دادن به هدر بالای باقیمانده
Styling the Remaining Top Header
مدل دادن به سربرگ باقی مانده قسمت 6
Styling the Remaining Top Header Part-6
ایجاد سربرگ اصلی
Creating the Main Header
ایجاد هدر اصلی قسمت 7
Creating the Main Header Part-7
حالت دادن به سربرگ اصلی
Styling the Main Header
سبک دادن به سربرگ اصلی قسمت 8
Styling the Main Header Part-8
ایجاد و استایل دهی نوار ناوبری
Creating and Styling the Navbar
ایجاد و استایل دهی به Navbar Part-9
Creating and Styling the Navbar Part-9
ایجاد و استایل سازی نوار ناوبری موبایل
Creating and Styling Mobile Navbar
ایجاد و استایل دهی نوار ناوبری موبایل قسمت 10
Creating and Styling Mobile Navbar Part-10
ایجاد داده برای بنرها چرخ فلک
Creating the Data for Banners Carousel
ایجاد داده برای بنرها چرخ فلک قسمت 11
Creating the Data for Banners Carousel Part-11
ایجاد کامپوننت اسلاید بنر
Creating the Banner Slide Component
ایجاد مؤلفه اسلاید بنر قسمت 12
Creating the Banner Slide Component Part-12
سبک دادن به لغزنده بنر
Styling the Banner Slider
سبک دادن به اسلایدر بنر قسمت 13
Styling the Banner Slider Part-13
ایجاد بخش محصولات
Creating the Products Section
ایجاد بخش محصولات قسمت 14
Creating the Products Section Part-14
ایجاد کارت محصول
Creating the Product Card
ایجاد کارت محصول قسمت 15
Creating the Product Card Part-15
مدل دادن به کارت های محصول
Styling the Product Cards
مدل دادن به کارت های محصول قسمت 16
Styling the Product Cards Part-16
ایجاد بخش توصیفات
Creating the Testimonials Section
ایجاد بخش توصیفات قسمت 17
Creating the Testimonials Section Part-17
سبک بخشیدن به بخش توصیفات
Styling the Testimonials Section
مدل دادن به بخش توصیفات قسمت 18
Styling the Testimonials Section Part-18
ایجاد بخش پاورقی
Creating the Footer Section
ایجاد بخش پاورقی قسمت 19
Creating the Footer Section Part-19
استقرار پروژه و کنترل نسخه (Github و Vercel)
Project Deployment and Version Control (Github and Vercel)
افزودن فایل به Github - قسمت 20
Adding Files to Github - Part 20
اعزام به Vercel - قسمت 21
Deploy to Vercel - Part 21
نمایش نظرات