آموزش ReactJS و Tailwind CSS 4 - ساخت پروژههای وب کامل
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- تسلط به بروزرسانیهای Tailwind CSS v4 برای ساخت رابطهای وب مدرن و واکنشگرا با جدیدترین ویژگیها و بهترین شیوهها
- یادگیری ریاکت 19 با ساخت پروژههای واقعی، درک ساختار کامپوننت، مدیریت State و طراحی رابط کاربری
- ایجاد یک فروشگاه محصولات اپل با لیستهای محصولات، فیلترینگ و یک رابط کاربری تعاملی با ریاکت و Tailwind CSS
- طراحی و استقرار یک وبسایت پورتفولیوی واکنشگرا برای نمایش مهارتهایتان، شامل انیمیشنها و تکنیکهای مدرن طراحی رابط کاربری
پیشنیازهای دوره
- یک ویرایشگر کد (ویژوال استودیو کد را توصیه میکنیم) - دانشجویان باید یک ویرایشگر کد نصب کرده باشند و ویژوال استودیو کد به دلیل ویژگیها و افزونههایش انتخاب برتر است.
- یک مرورگر وب مدرن - نسخهای جدید از کروم، فایرفاکس، Edge یا سافاری برای تست و اشکالزدایی وب اپلیکیشنها بهطور مؤثر نیاز است.
- درک خوب از سی اس اس، اچ تی ام ال و جاوا اسکریپت - دانش قبلی از مفاهیم بنیادی توسعه وب برای ساخت پروژههای ریاکت و Tailwind ضروری است.
- دانش اولیه ریاکت و Tailwind CSS (اختیاری اما مفید) - آشنایی با ریاکت و Tailwind CSS سودمند است، اما الزامی نیست، زیرا این دوره مفاهیم کلیدی را پوشش میدهد.
توضیحات دوره
آیا میخواهید به ریاکت 19 و Tailwind CSS v4 مسلط شوید و پروژههای وب واقعی و کاملاً واکنشگرا بسازید؟ این دوره راهنمای عملی ایدهآل برای کمک به شما در کسب تجربه عملی در توسعه فرانتاند مدرن است.
در طول دوره، شما سه پروژه کامل را از اول خواهید ساخت که هرکدام طراحی شدهاند تا مهارتهای شما را تقویت کرده و تجربه کدنویسی واقعی به شما بدهند:
- فروشگاه محصولات اپل - یاد بگیرید چگونه یک فروشگاه محصول تعاملی با لیستهای پویا، فیلترینگ و یک رابط کاربری مدرن و شیک ایجاد کنید.
- سیستم سبد خرید - یک سبد خرید کاملاً کاربردی بسازید که قابلیت افزودن و حذف داشته باشد، در حالی که State را بهطور مؤثر در ریاکت مدیریت میکنید.
- وبسایت پورتفولیوی شخصی - یک پورتفولیو حرفهای طراحی و مستقر کنید تا کارهای خود را نمایش دهید و آن را با انیمیشنهای روان و طرحبندی مناسب برای موبایل تکمیل کنید.
چه چیزی این دوره را منحصر به فرد میکند؟
قبل از شروع به پروژهها، ما یک دوره فشرده و مختصر درباره Tailwind CSS v4 خواهیم داشت که آخرین ویژگیها، بروزرسانیها و بهترین شیوهها را پوشش میدهد. این امر اطمینان میدهد شما با جدیدترین بهبودها آشنا شوید و آنها را بهطور مؤثر در پروژههای خود اعمال کنید.
این دوره کاملا پروژه محور است، به این معنی که شما تنها تئوری را یاد نخواهید گرفت، شما دانش خود را با ایجاد اپلیکیشنهای واقعی و کاملاً کاربردی عملی میکنید. هر پروژه شامل مهارتهای اساسی مانند:
- ساختار کامپوننت ریاکت و مدیریت State
- بهینهسازی Tailwind CSS برای استایلدهی تمیز و کارآمد
- ایجاد کامپوننتهای رابط کاربری تعاملی با در نظر گرفتن واکنشگرایی
- پیادهسازی گردش کارهای توسعه فرانتاند مدرن
- پروژههای خود را برای مخاطب واقعی مستقر کنید.
آنچه بدست خواهید آورد:
تا پایان این دوره، شما سه پروژه وب کامل و واکنشگرا برای اضافه کردن به پورتفولیوی خود خواهید داشت و همچنین تسلط خوبی به ریاکت 19 و Tailwind CSS v4 خواهید داشت. شما نه تنها مهارتهای کدنویسی خود را بهبود خواهید داد، بلکه اعتماد به نفس لازم برای ساخت و استقرار وبسایتهای حرفهای خود را نیز کسب خواهید کرد.
همین حالا شروع کنید و مهارتهای توسعه وب خود را به سطح بعدی ببرید!
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان فرانتاند که میخواهند پروژههای واقعی ریاکت و Tailwind CSS با تکنیکهای رابط کاربری مدرن و واکنشگرا بسازند.
- توسعهدهندگان وب که به دنبال تسلط به Tailwind CSS v4 و ریاکت 19 با ساخت پروژههای عملی و کاربردی از ابتدا هستند.
- مبتدیانی که با ریاکت و Tailwind CSS آشنا هستند و میخواهند با ایجاد وب اپلیکیشنها کاملاً عملکردی و واکنشگرا اعتماد به نفس کسب کنند.
- فریلنسرها و جویندگان کار که میخواهند پورتفولیوی خود را با پروژههای حرفهای که مهارتهای ریاکت و Tailwind CSS آنها را به نمایش میگذارد، گسترش دهند.
- هر کسی که به توسعه وب مدرن علاقهمند است و میخواهد یاد بگیرد چگونه وبسایتهای پویا و واکنشگرا با جدیدترین فناوریها ایجاد کند.
آموزش ReactJS و Tailwind CSS 4 - ساخت پروژههای وب کامل
-
معرفی 04:37
-
چگونه Tailwind CSS 4 را نصب و استفاده کنیم؟ 14:52
-
نصب و راهاندازی با Vite 07:28
-
دایرکتیو theme@ 04:30
-
دایرکتیو utility@ 02:28
-
بهروزرسانیهای سبک پیشفرض 04:02
-
کاشف محتوا 01:57
-
دایرکتیو plugin@ 02:04
-
کوئری های کانتینر 07:34
-
3D Transform APIs 04:59
-
Gradient APIs 05:21
-
سایهها و حلقهها 04:00
-
ویژگیهای جدید دیگر 04:15
-
مهاجرت 03:31
-
پیشنمایش پروژه 05:12
-
نصب و راهاندازی 08:57
-
پیادهسازی عملکرد زوم 13:17
-
ایجاد ناوبار 21:00
-
ساخت صفحه اصلی 10:34
-
ایجاد صفحه iPhone 12:09
-
ساخت صفحه MacBook 37:48
-
ایجاد صفحه Apple Watch 17:04
-
ساخت صفحه iMac 25:50
-
پیادهسازی ترنزیشن های صفحه روان 23:27
-
افزودن طراحی واکنشگرا 10:30
-
ایجاد نوار ناوبری موبایل عملیاتی (منوی همبرگر) 14:15
-
پیشنمایش پروژه 03:50
-
نصب و راهاندازی 05:49
-
افزودن داده محصول و نمایش آیتمها 07:10
-
ایجاد کامپوننت CartItem 08:31
-
پیادهسازی Context API برای مدیریت استیت 12:00
-
پیادهسازی عملکرد 22:32
-
مدیریت استیت سبد و بهروزرسانی تعداد 06:28
-
ایجاد UI سبد خرید 18:13
-
افزودن و حذف آیتمهای سبد 13:57
-
محاسبه قیمت کل بهصورت دینامیک 11:20
-
افزودن عملکرد ذخیرهسازی محلی 20:40
-
ساختن پروژه واکنشگرا 04:29
-
پیشنمایش پروژه 06:13
-
نصب و راهاندازی 08:11
-
ساخت ناوبار و راه اندازی بخش Hero 13:14
-
افزودن افکت هاور به Hello در بخش Hero 13:33
-
افزودن انیمیشن چرخشی 15:03
-
تقویت بخش Hero: عناصر تعاملی و انیمیشنها 30:00
-
پیادهسازی حالت تاریک/روشن 32:47
-
ایجاد بخش خدمات 40:43
-
ساخت بخش تماس 08:19
-
ایجاد دایرههای ناوبری 07:57
-
پیادهسازی عملکرد اسکرول روان 20:57
-
ساختن پروژه واکنشگرا 07:35
-
افزودن عملکرد بارگذاری 08:40
مشخصات آموزش
آموزش ReactJS و Tailwind CSS 4 - ساخت پروژههای وب کامل
- تاریخ به روز رسانی: 1404/09/07
- سطح دوره:همه سطوح
- تعداد درس:51
- مدت زمان :10:19:52
- حجم :7.3GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy