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

دانلود Master CSS3 and ReactJs by Developing 3 Projects

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش CSS3، ReactJs، Fontawesome، فونت های گوگل و طراحی وب ریسپانسیو با توسعه 3 پروژه دنیای واقعی شما با CSS3 و مفاهیم آن آشنا خواهید شد. React JS شما در مورد طراحی و توسعه وب ریسپانسیو خواهید آموخت. پروژه ها و یادگیری هر یک از مفاهیم HTML، CSS و ReactJS همچنین با تکنیک های مختلف اشکال زدایی آشنا می شوید. کد منبع کامل هر 3 پروژه را دریافت خواهید کرد.

در این دوره، تمام مفاهیم CSS3 و ReactJs را یاد می گیرید که نه تنها به شما در ساخت پروژه های دنیای واقعی کمک می کند، بلکه شما را قادر می سازد در مورد چگونگی طراحی و توسعه یک فرانت اند که پاسخگو و تولیدی باشد فکر کنید. درجه.

شما تمام اصول اولیه توسعه کامپوننت‌ها را در React یاد می‌گیرید و به سراغ یادگیری موضوعات پیچیده مانند مسیریابی استاتیک و پویا خواهید رفت.

ما در حال ساخت 3 پروژه خواهیم بود:

پروژه یک - وب سایت نمونه کارها پاسخگو

  • تنظیم طرح‌بندی پروژه

  • کار بر روی طرح کلی منو

  • استایل دادن به بخش منو قسمت - 1

  • استایل دادن به بخش منو قسمت - 2

  • استایل دادن به بخش منو قسمت - 3

  • استایل بخشیدن به بخش بدنه - 1

  • استایل دادن به بخش بدن قسمت - 2

  • پاسخگو کردن وب سایت

پروژه دوم - بخش خدمات ما شیک

  • تنظیم اسکلت

  • در حال کار بر روی نشانه گذاری و طرح بندی

  • کار بر روی استایل و پاسخگویی


پروژه سه - وب سایت بازار فهرست املاک

  • Github-Repo-Local-Setup

  • Create-react-app

  • پاکسازی کد

  • افزودن فونت های Google

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

  • Creating-TopBar-Component

  • درک-JSX

  • Styling-TopBar-Part-1

  • Styling-TopBar-Part-2

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

  • Styling-TopBar-Part-4

  • Styling-TopBar-Part-5

  • Styling-TopBar-Part-6

  • Styling-Hero-Section-Part-1

  • Styling-Hero-Section-Part-2

  • Styling-Hero-Section-Part-3

  • Styling-Hero-Section-Part-4

  • Styling-Sidebar-Section-Part-1

  • Styling-Sidebar-Section-Part-2

  • Styling-Sidebar-Section-Part-3

  • Styling-Sidebar-Section-Part-4

  • Styling-Sidebar-Section-Part-5

  • Styling-Sidebar-Section-Part-6

  • Styling-Sidebar-Section-Part-7

  • کار بر روی مؤلفه مورد فهرست

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

  • کار بر روی صفحه نمای کلی فهرست

  • دسته و بخش زمان مورد فهرست بندی استایل

  • بخش توضیحات مورد فهرست بندی استایل

  • در حال کار بر روی طرح بندی جزء جزئیات فهرست

  • افزودن نوار کناری در صفحه جزئیات فهرست

  • استایل دادن به صفحه جزئیات فهرست

  • در حال کار بر روی بخش متا داده صفحه جزئیات فهرست

  • استایل دادن به بخش تصویر صفحه جزئیات فهرست

  • عنوان سبک و بخش عملکرد صفحه فهرست

  • استایل دادن به بخش نویسنده و زمان ارسال در صفحه جزئیات فهرست

  • استایل دادن به بخش توضیحات صفحه جزئیات فهرست

  • استایل دادن به حرف اول توضیحات در صفحه جزئیات فهرست

  • تنظیم Layout برای ایجاد صفحه فهرست

  • کار بر روی صفحه ایجاد فهرست

  • در حال کار بر روی نماد آپلود در صفحه ایجاد فهرست

  • استایل دادن به صفحه ایجاد فهرست

  • نصب کتابخانه React Router Dom برای مسیریابی بین اجزا

  • افزودن پیمایش و مسیریابی برای موارد منو

  • ناوبری پویا برای نمایش جزئیات دارایی

همچنین کد منبع کامل هر سه پروژه را دریافت خواهید کرد که به شما کمک می کند هر زمان که بخواهید مرجعی را انتخاب کنید.


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

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

  • مرور دوره Course Overview

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

  • مربی خود را بشناسید و کمک/پشتیبانی دریافت کنید Know Your Instructor & Get Help/Support

پروژه 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

نمایش نظرات

آموزش استاد CSS3 و ReactJs با توسعه 3 پروژه
جزییات دوره
6 hours
60
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
17,052
4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Obify Consulting Obify Consulting

شرکت توسعه مهارت های نرم افزاری ما یک شرکت مشاوره نرم افزاری نسل بعدی هستیم که در زمینه توسعه برنامه های کاربردی وب ، سیستم مبتنی بر ابر ، راه حل های بلاک چین تا هوش مصنوعی فعالیت می کند. ما همچنین دارای امکانات پیشرفته آموزشی برای جوان حرفه ای یا حرفه ای با تجربه هستیم که می خواهد جدیدترین فناوری روز را بیاموزد و توسعه دهنده نرم افزار شود. چشم انداز ما این است که آموزش فنی را ساده و آسان کنیم تا بیشتر و بیشتر دانش آموزان بتوانند در حرفه خود بیاموزند و رشد کنند.