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

آموزش ساخت نمونه کار با Next.js، Framer Motion و Tailwind CSS - آخرین آپدیت

دانلود Build Portfolio with Next.js, Framer Motion, & Tailwind CSS

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

ساخت و توسعه وبسایت شخصی واکنش‌گرا با Next.js، Framer Motion و Tailwind CSS

یک وبسایت شخصی کاملاً واکنش‌گرا با استفاده از NextJS، Tailwind CSS و Framer Motion بسازید.

با استفاده از Framer Motion، انیمیشن‌ها و انتقال‌های روان ایجاد کنید تا تجربه کاربری جذابی داشته باشید.

طراحی تمیز و حرفه‌ای را با Tailwind CSS پیاده‌سازی کنید و برای اندازه‌های مختلف صفحه نمایش بهینه کنید.

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

بیاموزید چگونه یک وبسایت نمونه کار کاملاً کاربردی را در پلتفرم‌هایی مانند Vercel مستقر کنید و آن را برای جهان در دسترس قرار دهید.

پیش نیازها

  • ویرایشگر متن
  • مرورگر وب مدرن
  • مبانی HTML، CSS، JavaScript
  • مبانی React

به این دوره جامع خوش آمدید، جایی که یاد خواهید گرفت چگونه یک وبسایت نمونه کار شخصی مدرن و کاملاً واکنش‌گرا را با استفاده از Next.js، Tailwind CSS و Framer Motion بسازید. این دوره مبتنی بر پروژه برای توسعه دهندگان در تمام سطوح که به دنبال ایجاد یک نمونه کار چشمگیر هستند، عالی است که نه تنها از نظر بصری خیره کننده به نظر می‌رسد، بلکه به طور یکپارچه در همه دستگاه‌ها نیز عمل می‌کند. چه قصد داشته باشید پروژه‌های خود را به کارفرمایان بالقوه، مشتریان یا به سادگی برای ارتقای مهارت‌های توسعه وب خود به نمایش بگذارید، این دوره هر آنچه را که برای ایجاد یک وبسایت درجه حرفه‌ای نیاز دارید، در اختیار شما قرار می‌دهد.

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

با پیشروی، یاد خواهید گرفت که چگونه بخش‌های ضروری مانند قهرمان، درباره ما، تجربه و پروژه‌ها را ادغام کنید، در حالی که واکنش‌گرایی و دسترسی را حفظ می‌کنید. هر بخش از ابتدا ساخته می‌شود و شما درک عمیقی از نحوه سازماندهی و ارائه محتوای خود به گونه‌ای خواهید داشت که تاثیر زیادی بگذارد. ما بر روی بهترین شیوه‌ها در طراحی وب واکنش‌گرا تمرکز خواهیم کرد و اطمینان حاصل خواهیم کرد که سایت شما در دستگاه‌های تلفن همراه به همان اندازه عالی به نظر می‌رسد که در صفحه‌های بزرگتر به نظر می‌رسد.

در مراحل نهایی، به مراحل حیاتی استقرار سایت خود در Vercel خواهیم پرداخت. شما یاد خواهید گرفت که چگونه پروژه خود را زنده کنید و اطمینان حاصل کنید که قابل دسترسی و اشتراک‌گذاری آنلاین است و اهمیت میزبانی و نگهداری سایت خود را درک کنید. در پایان دوره، نه تنها یک وبسایت نمونه کار کامل و زنده خواهید داشت، بلکه مهارت‌های لازم برای ساخت پروژه‌های مشابه و به کارگیری این مفاهیم در کار آینده را نیز خواهید داشت.

این دوره طوری طراحی شده است که برای مبتدیان قابل دسترس باشد، اما به اندازه کافی دقیق باشد تا برای توسعه دهندگان با تجربه ارزش ارائه دهد. چه یک فریلنسر باشید، چه جویای کار یا صرفاً به دنبال به نمایش گذاشتن توانایی‌های توسعه وب خود هستید، این دوره دانش عملی و کاربردی را برای کمک به شما در دستیابی به اهدافتان در اختیار شما قرار می‌دهد.

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

خوش آمدید Welcome

  • مقدمه Introduction

شروع به کار Getting Started

  • بررسی اجمالی پروژه Project Overview

  • فایل های منبع Source Files

  • بررسی اجمالی فناوری ها Overview of Technologies

  • راه اندازی پروژه Project Setup

بخش قهرمان Hero Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • نمایش آیکون ها Displaying Icons

  • اضافه کردن انیمیشن با Framer Motion Adding Animations with Framer Motion

بخش درباره ما About Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • اضافه کردن انیمیشن به دستاوردها Adding Animations to Achievements

بخش تجربه و تحصیلات Experience & Education Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • ایجاد عملکرد برای تایم لاین Making Timeline Functional

بخش مهارت ها Skills Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • اضافه کردن انیمیشن به لیست مهارت ها Adding Animations to Skills List

بخش نظرات Reviews Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • ایجاد عملکرد برای چرخ فلک نظرات Making Reviews Carousel Functional

بخش پروژه ها Projects Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • ایجاد عملکرد برای فیلتر ناوبری پروژه ها Making Projects Filter Navigation Functional

بخش طرح های قیمت گذاری و تماس Pricing Plans and Contact Sections

  • ایجاد و استایل دهی کارت های قیمت گذاری Creating and Styling Pricing Cards

  • اضافه کردن محتوا و انیمیشن به کارت ها Adding Content and Animations to Cards

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

بخش پرسش و پاسخ Q&A Section

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • اضافه کردن انیمیشن به پرسش و پاسخ Adding Animations to Q&A

نوار ناوبری Navbar

  • ایجاد محتوا و استایل دهی Creating Content & Styling

  • ایجاد عملکرد برای نوار ناوبری Making Navbar Functional

نهایی کردن Finishing Up

  • اضافه کردن حالت تاریک Adding Dark Mode

  • اضافه کردن لودر سفارشی Adding Custom Loader

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

  • استقرار وب سایت روی Vercel Deploying Website on Vercel

آموزش متخصص شبکه های پردیس Dell EMC PowerSwitch (DCS-IE)

آموزش متخصص شبکه های پردیس Dell EMC PowerSwitch (DCS-IE)

Dell EMC PowerSwitch Campus Networking Specialist (DCS-IE)

آموزش (آکسفورد) دیپلم: هنر درمانی برای PTSD

آموزش (آکسفورد) دیپلم: هنر درمانی برای PTSD

دانلود (Oxford) Diploma: Art Therapy for PTSD

آموزش Angular MCQ [2023]

آموزش Angular MCQ [2023]

Angular MCQ [2023]

نمایش نظرات

آموزش ساخت نمونه کار با Next.js، Framer Motion و Tailwind CSS
جزییات دوره
9.5 hours
29
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
280
4.7 از 5
دارد
دارد
دارد

https://donyad.com/d/ede256

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

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' شرکتی است که برای اهداف زیر عمل می کند: "دانش خود را برای بهتر کردن دنیا کدگذاری ، ایجاد و به اشتراک بگذارید!"