آموزش وبسایت پورتفولیو React JS با قابلیت شخصی‌سازی قالب - آخرین آپدیت

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

مقدمه Introduction

• مقدمه (آنچه خواهید آموخت) Introduction (What you'll learn)

• دموی کامل پروژه Full Project Demo

هاستینگ و دامنه، ابزارها و افزونه‌ها، و ساختار پوشه پروژه Hosting & Domain, Tools & Extensions, and Project Folder Structure

• لینک دموی زنده پروژه و اطلاعات مختصر Project Live Demo link & Brief Info

• هاستینگ و دامنه رایگان Hosting & Free Domain Name

• نصب ابزارهای ضروری Installing Necessary Tools

• ایجاد اپلیکیشن React و نصب افزونه‌های کاربردی Creating Our React App & Installing Helpful Extensions

• ساختار پوشه پروژه Project Folder Structure

• متغیرهای CSS3 و استایل‌های عمومی CSS CSS3 Variables & General CSS Styles

• مدیا کوئری‌ها برای CSS عمومی Media Queries for General CSS

نوار ناوبری Navbar

• JSX نوار ناوبری و استفاده از آیکون‌های React Navbar JSX & Using React Icons

• CSS نوار ناوبری Navbar CSS

سربرگ Header

• JSX سربرگ Header JSX

• CSS سربرگ Header CSS

• مدیا کوئری‌های سربرگ (طراحی واکنش‌گرا) Header Media Queries (Responsive Design)

درباره About

• JSX بخش درباره About JSX

• ساخت کامپوننت کارت قابل استفاده مجدد Creating Re-Usable Card Component

• CSS کامپوننت کارت Card Component CSS

• استفاده از کامپوننت کارت در JSX بخش درباره Making use of the Card Component in About JSX

• CSS بخش درباره About CSS

• مدیا کوئری‌های بخش درباره (طراحی واکنش‌گرا) About Media Queries (Responsive Design)

خدمات Services

• JSX بخش خدمات Services JSX

• CSS بخش خدمات Services CSS

• مدیا کوئری‌های بخش خدمات (طراحی واکنش‌گرا) Services Media Queries (Responsive Design)

نمونه کارها Portfolio

• JSX نمونه کارها (هوک useState) Portfolio JSX (useState Hook)

• JSX پروژه‌ها Projects JSX

• JSX پروژه Project JSX

• CSS پروژه‌ها Projects CSS

• دریافت دسته‌بندی‌های منحصربه‌فرد از آرایه داده Getting Unique Categories From data array

• JSX دسته‌بندی‌های پروژه‌ها Projects Categories JSX

• JSX دکمه دسته‌بندی Category Button JSX

• CSS دسته‌بندی‌های پروژه‌ها Projects Categories CSS

• قابلیت فیلتر کردن پروژه‌ها Filter Projects Functionality

• مدیا کوئری‌های نمونه کارها (طراحی واکنش‌گرا) Portfolio Media Queries (Responsive Design)

نظرات مشتریان Testimonials

• JSX نظرات مشتریان Testimonials JSX

• ساخت اسلایدر/چرخ فلک با Swiper JS Creating Carousel/Slides with Swiper JS

• JSX نظر مشتری Testimonial JSX

• CSS نظرات مشتریان Testimonials CSS

• رفع باگ فایرفاکس Firefox Bug Fix

• ایجاد نقاط شکست برای Swiper JS (طراحی واکنش‌گرا) Creating Breakpoints for Swiper JS (Responsive Design)

سوالات متداول FAQs

• JSX سوالات متداول FAQs JSX

• JSX سوال متداول FAQ JSX

• CSS سوالات متداول FAQs CSS

• تغییر وضعیت سوالات متداول با هوک useState FAQs Toggle using useState Hook

تماس با ما Contacts

• افزودن جزئیات تماس شما Adding your contact details

• JSX بخش تماس Contact JSX

• CSS بخش تماس Contact CSS

پاورقی Footer

• JSX پاورقی Footer JSX

• CSS پاورقی Footer CSS

شخصی‌سازی پوسته Theme Customization

• JSX مودال پوسته و React Fragment Theme Modal JSX & React Fragment

• پورتال‌های React React Portals

• کنتکست مودال (مدیریت وضعیت سراسری اپلیکیشن با Context API) Modal Context (App-Wide State Management using Context API)

• ساخت هوک سفارشی برای استفاده از مقدار کنتکست (با هوک useContext) Creating a Custom Hook to Consume our Context Value (with useContext Hook)

• افزودن پراپ‌های رویداد برای باز و بسته کردن مودال پوسته Adding Event props to Open & Close Theme Modal

• ترفند (رویکرد من برای دستیابی به شخصی‌سازی پوسته) The Trick (My Approach To Achieve The Theme Customization)

• JSX پوسته Theme JSX

• CSS پوسته Theme CSS

• مدیا کوئری‌های پوسته (طراحی واکنش‌گرا برای صفحات کوچک مانند تلفن‌ها) Theme Media Queries (Responsive Design for small screens like phones)

• کنتکست پوسته (Context API و هوک useReducer) Theme Context (Context API & useReducer Hook)

• ساخت هوک سفارشی برای استفاده از مقدار پوسته با هوک useContext Creating a Custom Hook to Consume Theme Value with useContext Hook

• تغییر پوسته از طریق پراپ className Changing Theme via className prop

• افزودن رنگ‌های پوسته در CSS Adding Theme Colors in CSS

• ذخیره وضعیت پوسته در Local Storage با هوک useEffect Storing Theme State in Local Storage with useEffect Hook

نوار ناوبری شناور Floating Navbar

• JSX نوار ناوبری شناور Floating Navbar JSX

• JSX نوار ناوبری Nav JSX

• CSS نوار ناوبری شناور Floating Navbar CSS

• قابلیت نمایش/پنهان کردن نوار ناوبری شناور (useRef، useState و useEffect Hook) Show/Hide Floating Navbar Feature (useRef, useState & useEffect Hook)

• جذاب‌تر کردن با انیمیشن Spice this up with Animation

انیمیشن هنگام اسکرول و استقرار پروژه Animate-On-Scroll & Project Deployment

• انیمیشن هنگام اسکرول Animate On Scroll

• استقرار وب‌سایت (عمومی کردن پروژه در اینترنت) Website Deployment (Making project live on the internet)

• دموی زنده پروژه Project Live Demo