آموزش ایجاد وب سایت با REACT، Bootstrap5، ANIME JS، SWIPER JS

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

معرفی Introduction

• معرفی Introduction

کار آماده سازی Prep Work

• نصب کد ویژوال استودیو Installing Visual Studio Code

• نصب Node Js Installing Node Js

• معرفی الگوی PSD ما و ایجاد پروژه React در VS Code Intro to our PSD Template and Creating React Project in VS Code

• آشنایی با گردش کار پروژه React Understanding React Project Workflow

• ایجاد کامپوننت جدید و خلاصه کردن جریان پروژه React Creating New Component and Summarization of React Project Flow

• استفاده از بوت استرپ در React Using Bootstrap in React

• الگوی PSD ما را مطالعه کنید و جزئیات کمی را یادداشت کنید Studying our PSD Template and Noting down Few details

• صادرات تصاویر از قالب PSD Exporting Images from PSD Template

• دریافت تصاویر با کیفیت بالا با وضوح بالا به صورت رایگان Getting High Res High Quality Images for Free

وب سایت PSD to REACT - بخش لغزنده PSD to REACT Website - Slider Section

• اسلایدر: قسمت 1 Slider : Part 1

• اسلایدر: قسمت 2 Slider : Part 2

• لغزنده: قسمت 3: دکمه‌های همپوشانی و Call to Action Slider : Part 3 : Overlay and Call to Action Buttons

• ایجاد اسلایدر متحرک Creating Animated Slider

• پیمایش و صفحه بندی اسلایدر سفارشی Custom Slider Navigation and Pagination

• پس زمینه بزرگنمایی: افکت Ken Burn Zooming Background : Ken Burn Effect

• دکمه های Call to Action جلوه های شناور Call to Action Buttons Hover Effects

وب سایت PSD to REACT - بخش سرصفحه PSD to REACT Website - Header Section

• کار آماده سازی هدر Header Prep work

• هدر ثابت Fixed Header

• هدر بوت استرپ سفارشی: نشانه گذاری و استایلینگ Custom Bootstrap Header : Markup and Styling

• چالش: اضافه کردن نمادهای اجتماعی به هدر Challenge : Adding Social Icons to Header

• راه حل: اضافه کردن نمادهای اجتماعی به هدر Solution : Adding Social Icons to Header

PSD to REACT Website - React Routing PSD to REACT Website - React Routing

• جریان مسیریابی Routing Flow

• پیاده سازی مسیریابی Implementing Routing

• حل مشکل هدر ثابت شد Fixed Header Issue Solution

• سبک های پویا: قسمت 1: حاشیه بالا Dynamic Styles : Part 1 : Margin Top

• سبک های پویا قسمت 2: رنگ پس زمینه Dynamic Styles Part 2 : Background Color

وب سایت PSD to REACT - بخش نیرو و ایجاد فروشگاه ما با استفاده از REDUX TOOLKIT PSD to REACT Website - Power Section & Creating our Store using REDUX TOOLKIT

• نشانه گذاری قدرت Power Markup

• ایجاد فروشگاه ما با استفاده از REDUX TOOLKIT Creating our Store using REDUX TOOLKIT

• بازیابی اطلاعات فروشگاه Retrieving Store Information

• افزودن سبک به بخش پاور Adding Styles to Power Section

وب سایت PSD to REACT - بخش پروفسور PSD to REACT Website - Professor Section

• استاد: قسمت 1 Professor : Part 1

• استاد: قسمت 2: اضافه کردن روکش و قرار دادن تصویر اصلی به درستی Professor : Part 2 : Adding Overlay and Placing main image properly

PSD to REACT Website - FIELDS بخش و فیلد تنها صفحه PSD to REACT Website - FIELDS Section and Field Single Page

• زمینه ها: قسمت 1 Fields : Part 1

• زمینه ها: قسمت 2 Fields : Part 2

• افزودن سبک به بخش فیلدها Adding Styles to Fields Section

• افزودن فیلدها به مسیریابی Adding Fields to Routing

• رندر پس زمینه هدر شرطی برای صفحه اصلی و سایر صفحات داخلی Conditional Header Background Rendering for Home Page and Other inner Pages

• فیلد تک : قسمت 1 : ادامه مطلب Field Single : Part 1 : Read More

• فیلد تک : قسمت 2 Field Single : Part 2

• تصدیق دو موضوع Acknowledgement of Two issues

• حل مسئله آرم - مفهوم مسیر مطلق و مسیر نسبی Solving Logo Issue - Concept of Absolute Path and Relative Path

• حل مشکل ناپدید شدن تصویر Solving Image Disappearing Issue

وب سایت PSD to REACT - بخش دکترا و کلاس PSD to REACT Website - Doctoral & Class Section

• طرح دکتری Doctoral Plan

• دکتری : قسمت 1 : قسمت چپ Doctoral : Part 1 : Left Part

• دکتری : قسمت 2 : قسمت راست Doctoral : Part 2 : Right Part

• بخش کلاس Class Section

وب سایت PSD to REACT - بخش خبرنامه و جوایز PSD to REACT Website - Newsletter and Awards Section

• خبرنامه: قسمت اول Newsletter : Part 1

• خبرنامه: قسمت 2 Newsletter : Part 2

• جوایز: قسمت 1 Awards : Part 1

• جوایز: قسمت 2: ایجاد چرخ فلک جوایز Awards : Part 2 : Creating Awards Carousel

• جوایز: قسمت 3: سفارشی کردن فلش های ناوبری و نقاط چرخ فلک Awards : Part 3 : Customizing Navigation arrows and carousel dots

وب سایت PSD to REACT - بخش امکانات PSD to REACT Website - Facilities Section

• امکانات: قسمت 1 Facilities : Part 1

• امکانات: قسمت 2: ایجاد امکانات ذخیره اطلاعات و بازیابی اطلاعات Facilities : Part 2 : Creating Facilities store info and retrieving info

• محدود کردن واکشی اطلاعات به تعداد خاصی برای صفحه اصلی Limiting information fetch to specific number for Home Page

• بخش تسهیلات: راه حل چالش چیدمان Facility Section : Solution to Layout Challenge

• مورد تسهیلات: جلوه همپوشانی Facility Item : Overlay effect

وب سایت PSD to REACT - بخش تماس و نقشه (موقعیت جغرافیایی) PSD to REACT Website - Contact & Map Section (Geolocation)

• تماس: قسمت 1 Contact : Part 1

• تماس: قسمت 2: پیکان کشویی سفارشی: قسمت 1 Contact : Part 2 : Custom Dropdown Arrow : Part 1

• تماس: قسمت 2: پیکان کشویی سفارشی: قسمت 2 (با استفاده از کلیدهای جهت دار) Contact : Part 2 : Custom Dropdown Arrow : Part 2 (using arrow keys)

• تماس: قسمت 2: پیکان کشویی سفارشی: قسمت 3 (با استفاده از عنصر شبه) Contact : Part 2 : Custom Dropdown Arrow : Part 3 (using Pseudo Element)

• نقشه: قسمت 1: پروژه مکان یابی جغرافیایی Map : Part 1 : Geolocation Project

• نقشه : قسمت 2 : پروژه مکان یابی جغرافیایی Map : Part 2 : Geolocation Project

وب سایت PSD to REACT - کار با Forms & Form Validation در React PSD to REACT Website - Working with Forms & Form Validation in React

• فرم: قسمت 1 Form : Part 1

• فرم: قسمت 2 Form : Part 2

• فرم: قسمت 3: یک ظاهر طراحی شده به فرم ما Form : Part 3 : Styling our Form

• نحوه کار با اعتبار سنجی فرم How to Work with Form Validation

PSD to REACT Website - Subscribe Subscribe and Footer PSD to REACT Website - Subscribe Section and Footer

• اشتراک: قسمت 1 Subscribe : Part 1

• اشتراک: قسمت 2 Subscribe : Part 2

• بخش پاورقی Footer Section

بخش منابع Resources Section

• لطفا فایل های منبع را از اینجا بگیرید Please Grab the Resource Files Here

• تصاویر مورد استفاده برای پروژه را بگیرید Grab the Images being used for the Project

بخش پاداش: دوره کرش بوت استرپ 5 Bonus Section : Bootstrap 5 Crash Course

• چرا از بوت استرپ استفاده می کنیم؟ Why do we use Bootstrap

• 2 روش استفاده از بوت استرپ در پروژه 2 Ways of using Bootstrap in Project

• متا تگ های ضروری Necessary Meta Tags

• ظروف توری Grid Containers

• درک مفهوم col-xx-y Understanding Concept of col-xx-y

• ستون می شکند Column Breaks

• درک افست Understanding Offset

• مفهوم سفارش Concept of Ordering

• وظیفه: محتوای با عرض برابر Task : Equal Width Content

• وظیفه: محتوای عرض متغیر Task : Variable Width Content

• مفهوم موقعیت یابی Positioning Concept

• نمایش ویژگی ها Display Properties

• تفاوت Flex و Inline Flex Difference between Flex and Inline Flex

• مفاهیم فلکس: جهت فلکس Flex Concepts : Flex Direction

• مفاهیم Flex: محتوا را توجیه کنید Flex Concepts : Justify Content

• مفاهیم انعطاف پذیر: موارد را تراز کنید Flex Concepts : Align Items

• مفاهیم انعطاف پذیر: خود را تراز کنید Flex Concepts : Align Self

• درک تفاوت بین em و rem Understanding Difference Between em and rem

• نحوه مدیریت حاشیه و padding در بوت استرپ How to handle margin and padding in Bootstrap

• کلاس های تصویر در بوت استرپ 5 Image Classes in Bootstrap 5

• مفاهیم مهم با استفاده از تصاویر Important Concepts using Images

• رنگ پس زمینه و گرادیان Background Color and Gradients

• رنگ متن Text Color

• تایپوگرافی Typography

• کار با آیکون ها Working with Icons

• افکت شناور: متحرک کردن نمادها Hover Effect : Animating Icons

• ایجاد کامپوننت: آکاردئون Component Creation : Accordion

• مفهوم مهم در بوت استرپ 5: فروپاشی Important Concept in Bootstrap 5 : Collapse

• پروژه فروپاشی Collapse Project

• ایجاد مؤلفه: مودال Component Creation : Modal

• ایجاد کامپوننت: کشویی Component Creation : Dropdown

• ایجاد مؤلفه: ناوبری Component Creation : Navigation

• افزودن کرکره به ناوبری Adding Dropdown to Navigation