آموزش طراحی سایت پورتفولیو ریسپانسیو با ری‌اکت جی‌اس (React Js) - جامع‌ترین دوره ۲۰۲۴ - آخرین آپدیت

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

مقدمه Introduction

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

• مرور دوره و نحوه پرسیدن سوال Course Review and How To Ask Questions

• ایجاد برنامه ری اکت Create React App

• قالب آماده ری اکت React Boiler Plate

به‌روزرسانی دوره (به‌روزرسانی بسیار مهم) Course Update (Very important Update)

• به‌روزرسانی تصویر (img) Image Update (img)

• عملکرد جیمیل (دریافت رمز برنامه) Gmail Functionality (Get App password)

کامپوننت خانه Home Component

• تنظیم ساختار پروژه Setting Up project Structure

• کامپوننت پروفایل ۱ Profile Component 1

• کامپوننت پروفایل ۲ Profile Component 2

• به‌روزرسانی افکت تایپ ری اکت React Type Effect Update

• نمایش تصویر پروفایل و اصلاحات Display Profile Picture And Corrections

• استایل‌دهی کامپوننت پروفایل Styling Profile Component

• پاسخ‌گویی پروفایل Profile Responsiveness

• پاورقی پروفایل Profile Footer

• نمایش پاورقی Display The Footer

• پاک‌سازی کد و حفظ ساختار برنامه Clean up the code and maintain the app structure

• رندر کامپوننت Component Rendering

RxJs RxJs

• مقدمه‌ای بر Rxjs Introduction to Rxjs

• سرویس اسکرول Scroll Service

• انیمیشن‌ها Animations

کامپوننت هدر Header Component

• نصب بسته و صفحه به‌روزرسانی Package Installation and Update Screen

• ناوبری و عملکرد کلیک Navigations and Click Functionality

• استایل‌دهی کامپوننت هدر Styling the Header Component

• پاسخ‌گویی هدر Header Responsiveness

کامپوننت قابل استفاده مجدد ReUseAble Component

• ایجاد کامپوننت قابل استفاده مجدد Create Reuseable Component

• استایل‌دهی کامپوننت قابل استفاده مجدد Styling the ReuseAble Component

کامپوننت درباره من About Me Component

• طراحی کامپوننت درباره من About Me Component Design

• استایل‌دهی کامپوننت درباره من Styling About Me Component

• پاسخ‌گویی کامپوننت درباره من About Me Component Responsiveness

کامپوننت رزومه Resume Component

• ایجاد کامپوننت رزومه و متغیرهای وضعیت برای استفاده Creating the Resume Component and state variables to be used

• آماده‌سازی داده‌های استاتیک رزومه ۱ Preparing Resume Static Data 1

• آماده‌سازی داده‌های استاتیک رزومه ۲ Preparing Resume Static Data 2

• ایجاد رابط کاربری و توابع برای نمایش داده‌های رزومه روی صفحه Creating the UI and Functions to display the Resume Data on the screen

• استایل‌دهی کامپوننت رزومه Styling the Resume Component

• پاسخ‌گویی موبایل رزومه Resume Mobile Responsiveness

کامپوننت شهادت‌نامه Testimonial Component

• کامپوننت شهادت‌نامه و کاروسل جغد Testimonial Component and Owl carousel

• پیاده‌سازی کاروسل شهادت‌نامه با استفاده از ری اکت جغد کاروسل Implementing Testimonial carousel using React Owl Carousel

• استایل‌دهی کامپوننت شهادت‌نامه Styling Testimonial Component

کامپوننت تماس با من Contact Me Component

• ایجاد کامپوننت تماس با من Creating the Contact Me Component

• فرم تماس با من و متغیرهای وضعیت Contact Me Form and State Variables

• استایل‌دهی کامپوننت تماس با من Styling Contact Me Component

• رفع فرم تماس با من (استایل‌دهی) Fixing the Contact Me Form (Styling)

• عملکرد فرم Form Functionality

• دکمه فراخوان به اقدام و انیمیشن محو شدن Call to Action Button And Fade In Animation

بک‌اند (Node Js) Backend (node Js )

• مقداردهی اولیه بک‌اند Backend Initialization

• ایجاد سرور Creating The Server

• مسیر تماس Contact Route

• پیکربندی جیمیل Gmail Configuration

• رفع اشکالات Fixing Bugs

• به‌روزرسانی جیمیل Gmail Update

استقرار Deployment

• پاک‌سازی کد و آماده‌سازی آن برای استقرار Clean Up The code and prepare it for deployment

• استقرار برنامه وب در سرور Heroku Deploy the Web App to Heroku Server

• ارسال کد منبع به GitHub Push the Source code to GitHub

• کد منبع نهایی Final Source Code

• کد منبع نهایی به‌روز شده Updated Final Source code