ساخت بیش از 6 وبسایت متحرک - Framer Motion ،TailwindCSS و Next.js
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت بیش از 6 وبسایت مدرن و متحرک با Motion (Framer Motion) ،Next.js و Tailwind CSS
- ساخت وبسایتهای پورتفولیو یا صفحه فرود
- ایجاد کامپوننتهای قابلاستفادهمجدد مانند نوارهای ناوبری، بخشهای Hero و پورتفولیوها
- ساخت انیمیشنها و تعاملهای روان از ابتدا
- استقرار وبسایتها و فیکس کردن مشکلات رایج پس از استقرار
- تبدیل ایدههای وبسایت به پروژههای واقعی بدون کپی و پیست کردن کد
- استایلدهی وبسایتها با TailwindCSS
پیشنیازهای دوره
- دانش اولیه برنامهنویسی
- آشنایی اولیه با محیط توسعه یکپارچه
توضیحات دوره
سلام! قبل از شرکت در دوره، لطفاً نکات 1 و 2 زیر را بررسی کنید تا ببینید آیا این دوره برای شما مناسب است.
این دوره درباره کپیکردن طراحیها یا انیمیشنها از هوش مصنوعی نیست. بله، میتوانید از هوش مصنوعی بهعنوان الهام استفاده کنید، اما تمرکز اصلی روی درک چگونگی ساخت وبسایتهای متحرک با کد است، نه اینکه بدون فکر کردن اسنیپتها را کپی و پیست کنید.
آیا این دوره فقط درباره انیمیشنهاست؟ خیر، ما وبسایتها را با TailwindCSS استایلدهی میکنیم و به صورت گامبهگام توضیح میدهیم که هر کلاس چه کاری انجام میدهد.
در این دوره موارد زیر را بررسی میکنیم:
- طرحبندی و ساختار فولدر
- استایلدهی تمیز با Tailwind CSS
- انیمیشنها و تعاملها با (Motion (Framer Motion
- ساخت پروژهها از طریق ریاکت با Next.js یا Vite
ما فقط چند انیمیشن در جاهای مختلف و به صورت تصادفی قرار نمیدهیم. وبسایتها را به صورت گامبهگام میسازیم، درک میکنیم چرا چیزها کار میکنند، و بعد آنها را با motion بهبود میدهیم. با درک این بلوکهای سازنده، میتوانید وبسایتهای متحرک خودتان را بسازید، نه اینکه فقط همان چیزی را که در این دوره میسازیم تکرار کنید. شما به یک طرحبندی یا یک طراحی خاص محدود نخواهید بود.
1. هدف این دوره:
هدف این دوره این است که به شما کمک کند با اطمینان وبسایتهای مدرن و متحرک را با Next.js ،Tailwind CSS و Framer Motion بسازید.
2. آنچه دریافت میکنید
- وبسایتهای متحرک کامل با Next.js ،Tailwind CSS و Framer Motion
- کامپوننتها و بخشهای قابلاستفادهمجدد (نوارهای ناوبری، بخشهای Hero، پورتفولیوها و بخشهای تماس)
- الگوهای انیمیشن که میتوانید در پروژههای خودتان دوباره استفاده کنید.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگانی با دانش اولیه ریاکت
- توسعهدهندگانی که میخواهند وبسایتهای متحرک و زیباتر بسازند.
- توسعهدهندگانی که میخواهند انیمیشنهای وبسایت را درک کنند.
- توسعهدهندگانی که وبسایتهای پورتفولیو یا صفحه فرود میسازند.
ساخت بیش از 6 وبسایت متحرک - Framer Motion ،TailwindCSS و Next.js
-
مقدمه 01:08
-
انتخاب و دانلود ویرایشگر کد (محیط توسعه یکپارچه) 01:59
-
نود جی اس چیست و چرا به آن نیاز داریم؟ 00:48
-
نقطه شروع برای TailwindCSS 02:21
-
چگونه پروژه را با Vite و ریاکت راهاندازی و ایجاد کنیم؟ 07:56
-
چگونه پروژه را با Next.js راهاندازی و ایجاد کنیم؟ 06:29
-
اولین گامها با Motion 05:17
-
کتابخانه Motion 00:35
-
انیمیشنهای وب: چالش 1 01:51
-
انیمیشنهای وب: چالش 2 01:38
-
مراحل بهبود رابط کاربری 03:45
-
مقدمه 01:26
-
بخش Hero 23:58
-
بخش استک 14:50
-
بخش درباره 11:50
-
Logo Ticker 04:42
-
بخش تماس و فوتر 00:43
-
نوار ناوبری و تست نهایی 01:58
-
مقدمه - استایلدهی فرانتاند Next.js با TailwindCSS 00:48
-
راهاندازی 01:57
-
بخش Hero 13:54
-
بخش درباره 16:05
-
انیمیشن لوگو 05:21
-
بخش پورتفولیو 09:08
-
بخش معیارهای کلیدی 05:28
-
بخش استک 09:53
-
بخش خدمات 04:19
-
بخش تماس 07:08
-
بخش فوتر 05:30
-
نوار ناوبری 08:45
-
تست و فیکس کردن 03:31
-
مقدمه 01:02
-
راهاندازی 01:23
-
چگونه افکت Grain را اضافه کنیم؟ 01:35
-
بخش Hero 06:16
-
بخش خدمات 06:37
-
بخش تماس 07:33
-
بخش فوتر 04:21
-
نوار ناوبری و تست نهایی 04:28
-
راهاندازی 00:37
-
کامپوننت بخش 05:41
-
دکمه فراخوان به اقدام 04:57
-
کامپوننت دکمه درخشان 05:27
-
بخش Hero 10:17
-
مقدمه 03:17
-
بخش Hero 20:56
-
نوار ناوبری 11:34
-
بخش پورتفولیو 11:58
-
بخش استک 09:13
-
بخش خدمات 03:53
-
بخش تماس 12:50
-
بخش فوتر 12:43
-
فیکس کردن رابط کاربری 07:38
-
بخش استقرار 03:21
-
پیشنمایش صفحه فرود SaaS 01:24
-
راهاندازی صفحه فرود و بخش Hero 17:54
-
کامپوننت دکمه درخشان 05:32
-
مقدمه کامپوننتهای قابلاستفادهمجدد 01:08
-
قالب نوار ناوبری 08:45
-
قالب معیارهای کلیدی 04:53
-
قالب انیمیشن لوگو 04:06
-
قالب پورتفولیو 11:58
-
قالب پورتفولیو - بخش 2 08:21
-
قالب خدمات 03:54
-
قالب استک 09:14
-
قالب تماس 06:18
-
قالب تماس - بخش 2 12:50
-
قالب فوتر 05:12
-
راهاندازی 04:01
-
نوار ناوبری 10:16
-
بخش Hero 09:22
-
بخش درباره 10:33
-
بخش پورتفولیو 12:45
-
بخش تماس 11:06
-
بخش فوتر 03:26
-
افکت درخشان 07:28
-
مقدمه 01:02
-
نوار ناوبری 10:52
-
بخش Hero 11:40
-
بخش درباره 08:49
-
بخش پورتفولیو 08:49
-
بخش تجربه 09:30
-
بخش تماس 17:54
-
بخش فوتر 11:49
-
بروزرسانیهای نهایی 06:50
-
راهاندازی 02:23
-
راهاندازی 02:39
-
نوار ناوبری 12:00
-
بخش Hero 09:52
-
بخش پورتفولیو 13:35
-
بخش تماس 09:59
-
بخش درباره 06:53
-
بخش فوتر 01:53
-
فیکس کردن نهایی 06:56
-
مقدمه و راهاندازی 06:35
-
نوار ناوبری 13:54
-
بخش Hero 14:04
-
بخش درباره 10:22
-
بخش پورتفولیو 10:53
-
بخش تماس 11:39
-
بخش فوتر 01:19
-
فیکس کردن نهایی و بروزرسانیها 07:06
-
راهاندازی 00:52
-
نوار ناوبری 04:02
-
بخش Hero 05:26
-
بخش درباره 03:29
-
بخش پورتفولیو 04:19
-
بخش تماس و فوتر 02:41
-
فیکس کردن نهایی 03:31
مشخصات آموزش
ساخت بیش از 6 وبسایت متحرک - Framer Motion ،TailwindCSS و Next.js
- تاریخ به روز رسانی: 1405/04/02
- سطح دوره:Alls
- تعداد درس:109
- مدت زمان :14:32:58
- حجم :5.94GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
- زمان: 09:44:25
- تعداد درس: 67
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 03:02:02
- تعداد درس: 14
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 58:00
- تعداد درس: 12
-
سطح دوره:
-
زبان: دوبله فارسی
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 11:25:13
- تعداد درس: 94
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 06:58:57
- تعداد درس: 60
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 02:27:39
- تعداد درس: 24
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 08:11:21
- تعداد درس: 28
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 04:52:43
- تعداد درس: 38
-
سطح دوره:
-
زبان: دوبله فارسی