HTML، CSS، جاوا اسکریپت، ReactJS، NodeJS از صفر تا اکسپرت

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

اصول HTML HTML Fundamentals

• HTML چیست What is HTML

• عنصر HTML چیست؟ What is an HTML element?

• نحوه ایجاد فایل های HTML و نصب کد VS (حتما این ویدیو را تماشا کنید) How To Create HTML Files and install VS Code (MAKE SURE TO WATCH THIS VIDEO)

• ذخیره کد VS VS Code save

• نحوه اضافه کردن نظرات How to add comments

عناصر HTML و ویژگی های آنها HTML elements and their attributes

• بدن body

• سر head

• بخش div

• ویژگی های HTML HTML attributes

• لنگر anchor

• پاراگراف و عناصر سطح بلوک چیست؟ paragraph and what are block level elements?

• تصویر image

• لیست نامرتب unordered list

• سرفصل ها headings

• نشانه گذاری معنایی Semantic markup

فرم های HTML HTML forms

• فرم form

• انواع عناصر فرم types of form elements

• نگهدارنده مکان placeholder

مبانی CSS CSS Basics

• معرفی CSS CSS introduction

• یک یادداشت سریع هنگام تعریف ویژگی های CSS A quick note when defining CSS properties

• نظرات comments

• انتخابگر شناسه کلاس VS class VS id selector

• انتخابگر شناسه id selector

• انتخابگر کلاس class selector

• انتخابگر کلاس برای عنصر خاص class selector for specific element

• انتخابگر کلاس چند سبک class selector multiple styles

• اولویت سفارش در اعلان های CSS priority of order in CSS declarations

• انتخابگرهای ترکیبی combinator selectors

• انتخاب کننده نسل descendant selector

• انتخابگر کودک child selector

• انتخابگر خواهر و برادر مجاور adjacent sibling selector

• انتخابگر خواهر و برادر عمومی general sibling selector

• انتخابگر شبه کلاس (موتور، فعال، فوکوس، بازدید شده ....) pseudo class selector (hover,active,focus,visited ....)

• انتخابگر شبه عناصر pseudo elements selector

• انتخابگرهای ویژگی attribute selectors

• مرزها borders

فاصله CSS CSS Spacing

• حاشیه margin

• بالشتک padding

• مدل جعبه Box Model

واحدهای CSS CSS Units

• انواع واحدها Types of units

• پیکسل pixel

• درصد percent

• واحد em em unit

• واحد رم rem unit

• vw و vh vw and vh

• vmin و vmax vmin and vmax

ویژگی نمایش CSS و مقادیر آن: block، inline، inline-block، none و flex CSS display property and its values: block, inline, inline-block, none and flex

• نمایش ویژگی display property

• فلکس باکس flexbox

• ویژگی flexbox flex-direction flexbox flex-direction property

• ویژگی justify-content flexbox flexbox justify-content property

• ویژگی flexbox flex-wrap flexbox flex-wrap property

• ویژگی align-item flexbox flexbox align-items property

• ویژگی flexbox align-content flexbox align-content property

• چگونه با استفاده از شکاف بین عناصر flexbox فاصله ایجاد کنیم how to add space in between flexbox elements using gap

• ویژگی های flexbox برای عناصر فرزند flexbox properties for child elements

• ویژگی flexbox child element flex-basis flexbox child element property flex-basis

• ویژگی عنصر فرزند flexbox flex-grow flexbox child element property flex-grow

• ویژگی flexbox child element flex-shrink flexbox child element property flex-shrink

• ویژگی عنصر فرزند flexbox align-self flexbox child element property align-self

• سفارش ویژگی عنصر فرزند flexbox flexbox child element property order

طرح بندی شبکه CSS CSS grid layout

• چیدمان شبکه ای grid layout

• ستون های شبکه grid columns

• ردیف های شبکه ای grid rows

• گرید-ستون و گرید-ردیف grid-column and grid-row

• طرح های شبکه تودرتو nesting grid layouts

• شبکه-الگو-مناطق grid-template-areas

• ستون‌های شبکه‌ای خودکار و ردیف‌های شبکه‌ای خودکار grid-auto-columns and grid-auto-rows

• تراز کردن آیتم ها و توجیه کردن آیتم ها align-items and justify-items

• پاسخگو کردن طرح بندی شبکه برای اندازه های مختلف صفحه نمایش making grid layout responsive for different screen sizes

• سیستم شبکه 12 ستونی 12 column grid system

CSS متوسط CSS intermediate

• ویژگی های عرض و ارتفاع Width and Height properties

• دارایی موقعیت position property

• z-index z-index

• پرسش های رسانه ای media queries

• ویژگی انتقال transition property

• ترجمه اموال translate property

• تبدیل ویژگی transform property

• تصویر مرکزی و عناصر سطح بلوک به صورت افقی center image and block level elements horizontally

• مرکز تصویر به صورت افقی و عمودی با استفاده از ویژگی position و ترجمه center image horizontally and vertically using position property and translate

• خط مناسب ارتفاع line-height propery

• ویژگی عمودی تراز کردن vertical-align property

• خاصیت کدورت opacity property

• رنگ ها colors

• پروژه CSS CSS Project

جاوا اسکریپت برای مبتدیان JavaScript for Beginners

• جاوا اسکریپت چیست؟ What is JavaScript

• کجا کد جاوا اسکریپت را در HTML اضافه کنیم؟ where to add JavaScript code in HTML?

• console.log() console.log()

• نحوه اضافه کردن نظرات در جاوا اسکریپت how to add comments in JavaScript

• متغیرها variables

• انواع داده ها data types

• عبارات مشروط conditional statements

• عملگرهای حسابی Arithmetic Operators

• اپراتورهای واگذاری Assignment Operators

• اپراتورهای مقایسه Comparison Operators

• عملگرهای منطقی Logical Operators

• اپراتور سه تایی Ternary Operator

• اپراتورهای Unary Unary Operators

• اولویت اپراتور Operator Precedence

• رشته ها و الفاظ الگو Strings and Template Literals

جاوا اسکریپت متوسط JavaScript Intermediate

• اعلان تابع و عبارات تابع Function Declarations and Function Expressions

• اطلاعات بیشتر در مورد آرایه ها More on Arrays

• اطلاعات بیشتر در مورد اشیاء More on Objects

• حلقه زدن آرایه ها Looping Arrays

• حلقه کردن اشیاء Looping Objects

• اپراتور Spread The Spread Operator

• در حال تخریب Destructuring

• اپراتور ادغام ناقص Nullish Coalescing Operator

• Shallow Copy چیست؟ What is Shallow Copy?

• تنظیم کنید Set

• نقشه Map

• روش filter(). filter() method

• متد find() find() method

• متد map(). map() method

• عبارات منظم Regular Expressions

• مرتب سازی آرایه ها Sorting Arrays

• ایجاد تاریخ Creating Dates

• تایمر Timer

• سازنده شی Object Constructor

• کلمه کلیدی "این". The 'this' keyword

• روش bind The bind method

• تابع پیکان Arrow Function

• IIFE IIFE

• عملکرد برگشت به تماس Callback Function

جاوا اسکریپت پیشرفته JavaScript Advanced

• بسته شدن Closure

• شیء وعده Promise object

• واکشی fetch

• ناهمگام در انتظار async await

• کلاس ها Classes

• جاوا اسکریپت DOM JavaScript DOM

• json json

• رویدادهای HTML DOM HTML DOM events

React.js و Node.js React.js and Node.js

• React.js چیست؟ What is React.js?

• نصب تمیز Node از ابتدا A clean Node installation from scratch

• ساختار React، نحوه ایجاد برنامه واکنش با استفاده از Vite (راه جدید) و ایجاد-react-app React structure,how to create react app using Vite(new way) and create-react-app

• چگونه یک React Component بسازیم؟ How to Create a React Component?

• ایالت چیست؟ What is state?

• لوازم جانبی props

• کودکان children

• ذخیره مقادیر عناصر ورودی در حالت Storing input element values in state

• قلاب useEffect useEffect hook

• معرفی Nodejs Nodejs Introduction

• نحوه نصب ماژول خارجی در Node.js How to install an external module in Node.js

• نحوه نصب برنامه Node.js موجود How to install existing Node.js application

• نصب پستچی postman installation

• نحوه ایجاد سرور HTTP How to create an HTTP server

• میان افزار چیست و چگونه می توان آن را ایجاد کرد What is a middleware and how to create one

• نحوه رسیدگی به درخواست پست How to handle post request

پروژه بزرگ: پورتال پزشکی Big Project: Medical portal

• نحوه نصب Mongo DB و MongoDB Compass How to install Mongo DB and MongoDB Compass

• ایجاد پوشه های پروژه Creating Project folders

• ایجاد کامپوننت Home Creating the Home Component

• ایجاد کامپوننت دکمه Creating the Button Component

• ایجاد جزء سفارشی فرم Creating the Custom Form component

• ایجاد مؤلفه ثبت بیمار Creating the Register Patient Component

• ایجاد مؤلفه Register Doctor Creating the Register Doctor Component

• ایجاد مولفه SignIn Creating the SignIn Component

• ایجاد مؤلفه جستجوی دکتر Creating the Search Doctor Component

• ایجاد کامپوننت درباره Creating the About Component

• ایجاد کامپوننت هدر Creating the Header Component

• ایجاد کامپوننت پاورقی Creating the Footer Component

• ایجاد مولفه Layout Creating the Layout Component

• ایجاد مؤلفه جستجوی بیمار Creating the Search Patient Component

• ایجاد چیدمان اصلی Creating the Main Layout

• ایجاد کاربر ادمین Creating the admin user

• اتصال به DB از Backend Connecting to DB from Backend

• Json Web Token چیست؟ What is Json Web Token

• ایجاد JWT Creating JWT

• ایجاد وضعیت بازگشت Creating Return status

• ورود به جلو Signin Frontend

• ایجاد روترها و کنترلرها در Backend Creating Routers and controllers in the Backend

• ورود به سیستم پشتیبان Signin Backend

• ایجاد میان افزارهای سفارشی checkEmail و checkPassword Creating custom checkEmail and checkPassword middlewares

• ایجاد پنل مدیریت و تایید رمز Creating Admin Panel and verify token

• ثبت نام پزشک Registering a Doctor

• جستجو برای یک دکتر Search for a Doctor

• افزودن Redux Adding Redux

• ذخیره داده های کاربر وارد شده با استفاده از Redux Storing Signed in User Data using Redux

• دکتر به روز کنید Update Doctor

• ثبت نام بیمار Register Patient

• جستجو و به روز رسانی بیمار Search and update patient

• به روز رسانی صفحه اصلی و کد کامل Updating Home Page and THE COMPLETE CODE

• چگونه اپلیکیشن خود را برای تولید بسازیم و اجرا کنیم How to Build and run your application for production

چگونه برای مصاحبه آماده شویم؟ How to prepare for the Interview?

• استراتژی ها Strategies