کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش ReactJS و Tailwind CSS 4: ساخت 3 پروژه کامل وب - آخرین آپدیت

دانلود ReactJS & Tailwind CSS 4: Build 3 Complete Web Projects

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

آموزش React 19 و Tailwind CSS 4: ساخت فروشگاه اپل، سبد خرید و نمونه کار

آموزش جامع React 19 و Tailwind CSS 4 با ساخت پروژه‌های واقعی. یک فروشگاه اپل، سبد خرید و وب‌سایت نمونه کار طراحی کنید!

یادگیری Tailwind CSS v4

با یادگیری به‌روزرسانی‌های Tailwind CSS v4، رابط‌های کاربری مدرن و واکنش‌گرا بسازید. با جدیدترین ویژگی‌ها و بهترین روش‌ها آشنا شوید.

آموزش React 19 با پروژه‌های عملی

با ساخت پروژه‌های واقعی React 19 را بیاموزید. ساختار کامپوننت، مدیریت state و طراحی UI را درک کنید.

ساخت فروشگاه محصولات اپل

یک فروشگاه محصولات اپل با لیست محصولات، فیلترها و یک رابط کاربری تعاملی با استفاده از React و Tailwind CSS ایجاد کنید.

طراحی وب‌سایت نمونه کار واکنش‌گرا

یک وب‌سایت نمونه کار واکنش‌گرا برای نمایش مهارت‌های خود طراحی و مستقر کنید، با استفاده از انیمیشن‌ها و تکنیک‌های مدرن UI.

پیش‌نیازها

  • ویرایشگر کد (توصیه می‌شود VS Code): داشتن یک ویرایشگر کد نصب‌شده ضروری است، VS Code به دلیل ویژگی‌ها و افزونه‌هایش پیشنهاد می‌شود.
  • مرورگر وب مدرن: یک نسخه جدید از Chrome، Firefox، Edge یا Safari برای تست و دیباگ کارآمد برنامه‌های وب مورد نیاز است.
  • درک خوب از HTML، CSS و JavaScript: دانش قبلی از مفاهیم اساسی توسعه وب برای ساخت پروژه‌های React و Tailwind ضروری است.
  • دانش اولیه از ReactJS و Tailwind CSS (اختیاری اما مفید): آشنایی با React و Tailwind CSS مفید است اما الزامی نیست، زیرا مفاهیم کلیدی در طول دوره پوشش داده خواهند شد.

توضیحات دوره:

می‌خواهید با ساخت پروژه‌های واقعی و کاملاً واکنش‌گرا، بر React 19 و Tailwind CSS v4 مسلط شوید؟ این دوره راهنمای عملی مناسبی است تا به شما کمک کند تجربه عملی در توسعه فرانت‌اند مدرن کسب کنید.

در طول دوره، سه پروژه کامل از ابتدا خواهید ساخت، که هر یک برای تقویت مهارت‌های شما و ارائه تجربه کدنویسی واقعی طراحی شده‌اند:

  1. فروشگاه محصولات اپل: یاد بگیرید چگونه یک فروشگاه محصول تعاملی با لیست‌های پویا، فیلترها و یک رابط کاربری شیک و مدرن ایجاد کنید.

  2. سیستم سبد خرید: یک سبد خرید کاملاً کاربردی با قابلیت اضافه و حذف بسازید، در حالی که به طور موثر state را در React مدیریت می‌کنید.

  3. وب‌سایت نمونه کار شخصی: یک نمونه کار حرفه‌ای برای نمایش کار خود طراحی و مستقر کنید، که با انیمیشن‌های روان و یک طرح‌بندی سازگار با موبایل تکمیل شده است.

چه چیزی این دوره را منحصر به فرد می‌کند؟

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

این دوره 100٪ مبتنی بر پروژه است، به این معنی که شما فقط تئوری را یاد نخواهید گرفت - شما دانش خود را با ساخت برنامه‌های کاربردی واقعی و کاملاً کاربردی عملی خواهید کرد. هر پروژه مهارت‌های اساسی مانند:

  • ساختار کامپوننت React و مدیریت state

  • بهینه‌سازی Tailwind CSS برای استایل‌دهی تمیز و کارآمد

  • ایجاد کامپوننت‌های UI تعاملی با در نظر گرفتن واکنش‌گرایی

  • پیاده‌سازی جریان‌های کاری توسعه فرانت‌اند مدرن

  • استقرار پروژه‌های خود برای یک مخاطب واقعی

این دوره برای چه کسانی مناسب است؟

این دوره برای:

توسعه‌دهندگان فرانت‌اند که به دنبال ساخت پروژه‌های عملی و واقعی هستند.

توسعه‌دهندگان وب که می‌خواهند بر React 19 و Tailwind CSS v4 مسلط شوند.

مبتدیان در React & Tailwind که به دنبال تجربه عملی با راهنمایی گام به گام هستند.

فریلنسرها و جویندگان کار که به دنبال گسترش نمونه کار خود با برنامه‌های وب مدرن و واکنش‌گرا هستند.

هرکسی که به توسعه وب مدرن علاقه دارد و مشتاق ایجاد پروژه‌های حرفه‌ای با کیفیت بالا است.

چه چیزی به دست خواهید آورد؟

در پایان این دوره، شما سه پروژه وب کامل و واکنش‌گرا برای اضافه کردن به نمونه کار خود، به همراه درک قوی از React 19 و Tailwind CSS v4 خواهید داشت. شما نه تنها مهارت‌های کدنویسی خود را بهبود خواهید بخشید، بلکه اعتماد به نفس لازم برای ساخت و استقرار وب‌سایت‌های حرفه‌ای خود را با سهولت به دست خواهید آورد.

همین حالا شروع کنید و مهارت‌های توسعه وب خود را به سطح بعدی ببرید!

سرفصل ها و درس ها

مقدمه Introduction

  • مقدمه Introduction

به‌روزرسانی Tailwind CSS 4 - ویژگی‌های جدید (اختیاری) Tailwind CSS 4 Update - New Features (Optional)

  • نحوه نصب و استفاده از Tailwind CSS 4 How to Install and Use Tailwind CSS 4

  • نصب و راه‌اندازی با Vite Installation & Setup with Vite

  • دستورtheme@ @theme Directive

  • دستورutility@ @utility Directive

  • به‌روزرسانی‌های استایل پیش‌فرض Default Style Updates

  • تشخیص محتوا Content Detection

  • دستورplugin@ @plugin Directive

  • پرس‌وجوهای کانتینر Container Queries

  • APIهای تبدیل سه‌بعدی 3D Transform APIs

  • APIهای گرادیان Gradient APIs

  • سایه‌ها و حلقه‌ها Shadows and Rings

  • سایر ویژگی‌های جدید Other New Features

  • انتقال Migrating

فروشگاه محصولات اپل Apple Products Store

  • پیش‌نمایش پروژه Project Preview

  • نصب و راه‌اندازی Installation & Setup

  • پیاده‌سازی قابلیت زوم Implementing Zooming Functionality

  • ایجاد نوار ناوبری Creating Navbar

  • ساخت صفحه اصلی Building the Home Page

  • ایجاد صفحه آیفون Creating the IPhone Page

  • ساخت صفحه مک‌بوک Building the MacBook Page

  • ایجاد صفحه اپل واچ Creating the Apple Watch Page

  • ساخت صفحه آی‌مک Building the IMac Page

  • پیاده‌سازی انتقال صفحه روان Implementing Smooth Page Transitions

  • اضافه کردن طراحی واکنش‌گرا Adding Responsive Design

  • ایجاد نوار ناوبری موبایل کاربردی (منوی همبرگری) Creating a Functional Mobile Navbar (Hamburger Menu)

سبد خرید Shopping Cart

  • پیش‌نمایش پروژه Project Preview

  • نصب و راه‌اندازی Installation & Setup

  • اضافه کردن داده‌های محصول و نمایش موارد Adding Product Data & Displaying Items

  • ایجاد کامپوننت CartItem Creating the CartItem Component

  • پیاده‌سازی Context API برای مدیریت حالت Implementing Context API for State Management

  • پیاده‌سازی قابلیت‌های 'افزودن به سبد خرید' و 'حذف' Implementing 'Add to Cart' and 'Remove' Functionality

  • مدیریت حالت سبد خرید و به‌روزرسانی مقادیر Managing Cart State & Updating Quantities

  • ایجاد رابط کاربری سبد خرید Creating the Shopping Cart UI

  • اضافه و حذف کردن آیتم‌های سبد خرید Adding and Removing Cart Items

  • محاسبه پویای قیمت کل Calculating Total Price Dynamically

  • اضافه کردن قابلیت Local Storage Adding Local Storage Functionality

  • واکنش‌گرا کردن پروژه Making Project Responsive

وب‌سایت نمونه کار شخصی Personal Portfolio Website

  • پیش‌نمایش پروژه Project Preview

  • نصب و راه‌اندازی Installation & Setup

  • ساخت نوار ناوبری و تنظیم بخش Hero Building the Navbar & Setting Up the Hero Section

  • اضافه کردن جلوه‌های Hover به 'Hello' در بخش Hero Adding Hover Effects to 'Hello' in the Hero Section

  • اضافه کردن انیمیشن چرخشی Adding Rotating Animation

  • بهبود بخش Hero: عناصر تعاملی و انیمیشن‌ها Enhancing the Hero Section: Interactive Elements & Animations

  • پیاده‌سازی حالت تاریک / روشن Implementing the Dark / Light Mode

  • ایجاد بخش خدمات Creating the Services Section

  • ساخت بخش تماس Building the Contact Section

  • ایجاد دایره‌های ناوبری Creating Navigation Circles

  • پیاده‌سازی قابلیت پیمایش روان Implementing Smooth Scrolling Functionality

  • واکنش‌گرا کردن پروژه Making Project Responsive

  • اضافه کردن قابلیت بارگذاری Adding Loading Functionality

آموزش استقرار نسخه سالگرد ویندوز 10 (v1607) با MDT

آموزش استقرار نسخه سالگرد ویندوز 10 (v1607) با MDT

Deploying Windows 10 Anniversary Edition (v1607) with MDT

آموزش انیمیشن های پیشرفته و تعامل با فریمر x

آموزش انیمیشن های پیشرفته و تعامل با فریمر x

دانلود Advanced Animations and Interactions with Framer X

آموزش UX/UI را متحول کنید: استراتژی های طراحی هوش مصنوعی با ChatGPT

آموزش UX/UI را متحول کنید: استراتژی های طراحی هوش مصنوعی با ChatGPT

Revolutionize UX/UI: AI-Design Strategies with ChatGPT

نمایش نظرات

آموزش ReactJS و Tailwind CSS 4: ساخت 3 پروژه کامل وب
جزییات دوره
10.5 hours
51
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
170
4.4 از 5
دارد
دارد
دارد

https://donyad.com/d/a4308e

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Code And Create Code And Create

توسعه وب / طراحی وب 'کد و ایجاد' یک شرکت توسعه وب است که متشکل از توسعه دهندگان حرفه ای وب ، طراحان وب و مدرسان آنلاین باتجربه است. 'Code And Create' دوره های آموزشی آنلاین ایجاد می کند. بیشتر آنها پرفروش ترین ها در بستر Udemy هستند. ما در چندین فن آوری و زبان برنامه نویسی مانند HTML5 ، CSS3 ، SASS ، Bootstrap ، Material Design ، JavaScript ، ReactJS ، Angular ، VueJS ، NodeJS ، MongoDB ، PHP ، MySQL ، Python و موارد دیگر تخصص داریم ... "Code And Create" همچنین یک کانال YouTube به نام "Code And Create" را اجرا می کند ، جایی که ما محتوای آموزشی رایگان را در توسعه وب / طراحی / برنامه نویسی ایجاد می کنیم. ما از حضور در اینجا هیجان زده ایم و مشتاقیم دانش و تجربه خود را به اشتراک بگذاریم. مشتاقانه منتظر دیدن شما در دوره های ما هستیم.

George Lomidze George Lomidze

توسعه دهنده/طراح/معلم آنلاین

سلام،

من جورج هستم، یک برنامه‌نویس/طراح وب کامل، یکی از بنیانگذاران 'Code And Create' و نویسنده چندین کلاس در Skillshare.

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

من تصمیم گرفتم دانش و تجربه خود را با جهان به اشتراک بگذارم و این دلیل اصلی حضور من در Skillshare است.

من در فناوری‌های زیر تخصص دارم: HTML، CSS، SASS، Bootstrap، JavaScript، jQuery، React، React Native، NodeJS، Git و موارد دیگر...

منتظر دیدار شما در کلاس‌هایم هستم و به شما کمک می‌کنم تا یک توسعه‌دهنده وب حرفه‌ای شوید.

Lasha Nozadze Lasha Nozadze

توسعه دهنده وب و نرم افزار بنیانگذار 'CodeAndCreate'. سلام من لاشا هستم! من یک توسعه دهنده / طراح وب کاملاً پشته و کاملاً پشته ، مهندس نرم افزار با چندین سال تجربه و نویسنده چندین دوره پرفروش در Udemy هستم. وقتی وارد برنامه نویسی شدم ، حدس زدم که زندگی جدیدی پیدا کرده ام و از آن احساس هیجان می کنم ، زیرا معتقدم برنامه نویسی یکی از داغ ترین زمینه ها در قرن 21 است. تجربه من در توسعه وب شامل فن آوری های زیر است ، مانند HTML5 ، CSS3 ، SASS ، Bootstrap ، JavaScript ، React ، Node.js ، PHP ، MySQL و موارد دیگر ... خوشحالم که به شما گفتم ، تدریس اشتیاق دیگر من شد. من بسیار سپاسگزار و هیجان زده هستم که فرصتی پیدا کردم تا دانش و تجربه خود را با شما در میان بگذارم. من یک شرکت توسعه وب ایجاد کرده ام ، به نام 'CodeAndCreate' ، با دوستم جورج. 'CodeAndCreate' شرکتی است که برای اهداف زیر عمل می کند: "دانش خود را برای بهتر کردن دنیا کدگذاری ، ایجاد و به اشتراک بگذارید!"