آموزش استاد CSS3 و ReactJs با توسعه 3 پروژه

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

معرفی و راه اندازی Introduction and Setup

• مرور دوره Course Overview

• نصب نرم افزار Software Installation

پروژه 1 - وب سایت واکنش گرا Project 1 - Responsive Website

• راه اندازی طرح بندی پروژه Project Layout Setup

• کار بر روی طرح کلی منو Working on the Menu Outline

• سبک دادن به بخش منو قسمت - 1 Styling the Menu section Part - 1

• حالت دادن به بخش منو قسمت - 2 Styling the Menu section Part - 2

• حالت دادن به بخش منو قسمت - 3 Styling the Menu section Part - 3

• مدل دادن به بخش بدن قسمت - 1 Styling the Body section Part - 1

• حالت دادن به بخش بدن قسمت - 2 Styling the Body section Part - 2

• ریسپانسیو کردن صفحه Making the page responsive

پروژه 2 - خدمات ما Project 2 - Our Services

• تنظیم اسکلت Setting up the skeleton

• کار بر روی نشانه گذاری و چیدمان Working on the markup and layout

• کار بر روی یک ظاهر طراحی و پاسخگویی Working on styling and responsiveness

پروژه 3 - برنامه ReactJS Listing Marketplace Project 3 - ReactJS Listing Marketplace Application

• Github-Repo-Local-Setup Github-Repo-Local-Setup

• Create-react-app Create-react-app

• پاکسازی کد Code-Cleanup

• اضافه کردن فونت گوگل Adding-Googlefonts

• React-How-it-it-works-VSC-Extension React-How-it-works-VSC-Extension

• Creating-TopBar-Component Creating-TopBar-Component

• درک JSX Understanding-JSX

• Styling-TopBar-Part-1 Styling-TopBar-Part-1

• Styling-TopBar-Part-2 Styling-TopBar-Part-2

• Adding-Fontawesome-Styling-TopBar-Part-3 Adding-Fontawesome-Styling-TopBar-Part-3

• Styling-TopBar-Part-4 Styling-TopBar-Part-4

• Styling-TopBar-Part-5 Styling-TopBar-Part-5

• Styling-TopBar-Part-6 Styling-TopBar-Part-6

• Styling-Hero-Section-Part-1 Styling-Hero-Section-Part-1

• Styling-Hero-Section-Part-2 Styling-Hero-Section-Part-2

• Styling-Hero-Section-Part-3 Styling-Hero-Section-Part-3

• Styling-Hero-Section-Part-4 Styling-Hero-Section-Part-4

• Styling-Sidebar-Section-Part-1 Styling-Sidebar-Section-Part-1

• Styling-Sidebar-Section-Part-2 Styling-Sidebar-Section-Part-2

• Styling-Sidebar-Section-Part-3 Styling-Sidebar-Section-Part-3

• Styling-Sidebar-Section-Part-4 Styling-Sidebar-Section-Part-4

• Styling-Sidebar-Section-Part-5 Styling-Sidebar-Section-Part-5

• Styling-Sidebar-Section-Part-6 Styling-Sidebar-Section-Part-6

• Styling-Sidebar-Section-Part-7 Styling-Sidebar-Section-Part-7

• کار بر روی مؤلفه مورد فهرست Working on Listing Item component

• استفاده از متغیرهای CSS Using CSS variables

• کار بر روی صفحه نمای کلی فهرست Working on Listing Overview screen

• دسته بندی و بخش زمان مورد فهرست بندی یک ظاهر طراحی شده Styling Listing Item category and time section

• بخش توضیحات مورد لیست استایلینگ Styling Listing Item description section

• کار بر روی طرح بندی جزء لیست جزئیات Working on layout of Listing Detail component

• افزودن نوار کناری در صفحه جزئیات فهرست Adding sidebar on Listing Detail page

• استایل دادن به صفحه جزئیات فهرست Styling the Listing Detail page

• کار بر روی بخش داده های متا صفحه جزئیات لیست Working on Listing Detail page meta data section

• حالت دادن به بخش تصویر صفحه جزئیات فهرست Styling the image section of Listing Detail page

• بخش عنوان و عملکرد صفحه فهرست بندی Styling Title and Action section of Listing Page

• حالت دادن به بخش نویسنده و زمان ارسال در صفحه جزئیات فهرست Styling the Author and Post time section of Listing Detail page

• حالت دادن به بخش توضیحات صفحه جزئیات فهرست Styling the Description section of Listing Detail page

• شکل دادن به حرف اول توضیحات در صفحه جزئیات فهرست Styling the first letter of Description on Listing Detail page

• راه اندازی Layout برای ایجاد صفحه فهرست Setting up Layout for Create Listing page

• کار بر روی صفحه ایجاد فهرست Workig on Create Listing page

• کار بر روی نماد آپلود در صفحه ایجاد فهرست Working on upload Icon on Create Listing page

• یک ظاهر طراحی صفحه ایجاد صفحه Styling the Create Listing page

• نصب کتابخانه React Router Dom برای مسیریابی بین اجزا Installing React Router Dom library for routing between components

• اضافه کردن ناوبری و مسیریابی برای آیتم های منو Adding Navigation and Routing for menu items

• ناوبری پویا برای نمایش جزئیات ملک Dynamic navigation for showing property detail

کد منبع Source code

• کد منبع برای 3 پروژه Source code for the 3 projects