آموزش 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

نمایش نظرات

آموزش Next.js با Tailwind CSS-یک پروژه تجارت الکترونیک Frontend بسازید
جزییات دوره
2.5 hours
22
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,004
5 از 5
ندارد
دارد
دارد
Vapa Academy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Vapa Academy Vapa Academy

یک پلت فرم یادگیری