دوره آموزش طراحی سایت: از مبتدی تا پیشرفته - آخرین آپدیت

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

Adobe Photoshop - مبانی گرافیک Adobe Photoshop - Graphic Fundamentals

• همیشه برای کمک اینجا هستیم. Always Here to Help.

• فتوشاپ: مقدمه Photoshop: Introduction

• ایجاد سند جدید Creating New Document

• نمای کلی فضای کاری Workspace Overview

Adobe Photoshop - ابزارهای پایه Adobe Photoshop - Basic Tools

• کار با لایه‌ها Working with Layers

• ابزار انتخاب مارکی Marquee Selection Tool

• ابزارهای لاسو Lasso Tools

Adobe Photoshop - ساخت یک صحنه Adobe Photoshop - Creating a Scene

• معرفی صحنه Scene Introduction

• ایجاد آسمان Creating Sky

• ایجاد خورشید Creating Sun

• ایجاد کوه‌ها Creating Mountains

• ایجاد ابرها Creating Clouds

• اصلاحات نهایی صحنه دوبعدی 2D Scene Final Touch-Ups

Adobe Photoshop - کار با تصاویر Adobe Photoshop - Working with Images

• باز کردن تصویر Opening an Image

• تصویر رستر در مقابل اسمارت آبجکت‌ها Raster Image VS Smart Objects

• حذف پس‌زمینه از محصولات Remove Background from Products

• حذف پس‌زمینه از مو Removing Background from Hair

Adobe Photoshop - روتوش Adobe Photoshop - Retouching

• کار با تنظیمات Working with Adjustments

• افکت‌ها در ادوبی فتوشاپ Effects in Adobe Photoshop

• ابزارهای ترمیم Healing Tools

• ابزار Content Aware Content Aware Tool

• Dodge و Burn Dodge & Burn

• ابزار Clone Stamp Clone-Stamp Tool

Adobe Photoshop - مبانی تایپوگرافی Adobe Photoshop - Typography Basics

• افزودن فونت‌های جدید در فتوشاپ Adding New Fonts in Photoshop

• مبانی تایپوگرافی Basics of Typography

Adobe Photoshop - فیلترها Adobe Photoshop - Filters

• فیلترهای پایه در فتوشاپ Basic Filters in Photoshop

• چگونه پس‌زمینه را بدون ایجاد ناهمواری حذف کنم؟ How Do I Remove the Background Without Making It Look Choppy?

HTML5 - معرفی HTML HTML5 - Introduction to HTML

• انتخاب مرورگر مناسب Choosing The Right Browser

• انتخاب ویرایشگر کد مناسب Choosing the right code editor

• دانلود و نصب VS Code Download and Install VS Code

• HTML چیست؟ What is HTML

• وب از چه چیزی ساخته شده است؟ What is the web made of

• HTML، CSS و جاوااسکریپت چه کارهایی انجام می‌دهند؟ What do HTML, CSS, and JavaScript do

HTML5 - فرمت‌بندی متن در HTML HTML5 - Text Formatting in HTML

• سینتکس HTML HTML Syntax

• تگ Paragraph در عمل Paragraph Tag in Practical

• سربرگ‌ها در HTML Headings in HTML

• تگ‌های Bold و Italic در HTML Bolds and Italics in HTML

• لیست‌ها در HTML Lists in HTML

• انواع عناصر Types of Elements

• نقل قول‌ها در HTML Quotes in HTML

• تاریخ و زمان در HTML Date and Time in HTML

• تگ‌های Kbd، Code، Pre و Br Kbd Code Pre and Br Tag

• تگ‌های Subscript، Superscript و Small Subscript Superscript and Small Tag

HTML5 - ضروریات HTML HTML5 - HTML Essentials

• ویژگی‌ها در HTML Attributes in HTML

• ARIA در HTML ARIA in HTML

• فضاهای خالی و کامنت‌ها Blank Spaces and Comments

• حروف بزرگ و کوچک Uppercase and Lowercase

• انواع تگ‌ها Types of Tags

• فاصله غیرشکستنی Non Breaking Space

• لینک‌ها و تگ‌های Anchor Links and Anchor Tags

• URLهای مطلق Absolute URLs

• URLهای نسبی Relative URLs

• سازماندهی فایل‌ها Organizing Files

• نام‌گذاری فایل‌ها Naming Files

• ناوبری HTML HTML Navigation

HTML5 - تصاویر در HTML HTML5 - Images in HTML

• تصاویر در HTML Images in HTML

• فرمت‌های فایل تصویر Image File Formats

• تصاویر واکنش‌گرا در HTML Responsive Images in HTML

• تصاویر واکنش‌گرا بر اساس عرض Responsive Images Based on Width

• تگ Picture واکنش‌گرا Responsive Picture Tag

• تگ‌های Figure و Fig-Caption Figure and Fig-Caption Tag

HTML5 - چندرسانه‌ای در HTML HTML5 - Multimedia in HTML

• صدا در HTML Audio in HTML

• ویدئو در HTML Video in HTML

• زیرنویس و کپشن ویدئو Video Captions and Subtitles

• جاسازی ویدئو با iFrame Embedding Video with iFrame

HTML5 - محتوا در HTML HTML5 - Content in HTML

• زبان‌ها در HTML Languages in HTML

• تگ‌های Div و Span The Div and The Span Tag

• ساختار سند The Document Structure

• داخل تگ Head Inside the Head Tag

• داخل تگ Body Inside the Body Tag

• ساخت یک صفحه پایه Creating a Basic Page

HTML5 - عناصر فرم در HTML HTML5 - Form Elements in HTML

• عناصر فرم Form Elements

• انواع ورودی در فرم‌ها Input Types in Forms

• فیلدهای تلفن و رمز عبور Phone and Password Field

• فیلدهای URL و عدد URL and Number Field

• تاریخ، زمان، ماه، هفته و موارد دیگر Date Time Month Week and More

• دکمه‌های رادیویی Radio Buttons

• فیلدهای چک‌باکس Checkbox Fields

• فیلدهای جستجو و آپلود Search and Upload Fields

• فیلد رنگ The Color Field

• فیلدهای دراپ‌داون در فرم‌ها Dropdown Fields in Forms

• فیلدهای پیام و محدوده Message and Range Field

• محدوده، دکمه فانتزی، فیلد مخفی و بازنشانی (Reset) Range Fancy Button Hidden Field and Reset

• پیچیدن فیلدهای فرم Wrapping Form Fields

HTML5 - جداول در HTML HTML5 - Tables in HTML

• جداول در HTML Tables in HTML

• کار با جداول در HTML Working with Tables in HTML

CSS3 - شروع کار با CSS CSS3 - Getting started with CSS

• شروع کار با CSS Getting Started with CSS

• ابزارهای توسعه‌دهنده مرورگر Browser Developer Tools

• محل قرارگیری CSS CSS Placements

• سینتکس CSS CSS Syntax

CSS3 - ضروریات CSS CSS3 - CSS Essentials

• مفاهیم اصلی CSS CSS Core Concepts

• مقادیر ویژگی رنگ Color Property Values

• انتخابگرهای CSS CSS Selectors

• کلاس و ID در CSS Class and ID in CSS

• مثال زنده از کلاس و ID Live Example of Class and ID

• انتخابگرهای فرزند در CSS Descendant Selectors in CSS

• انتخابگرهای گروهی Grouping Selectors

• وراثت در CSS Inheritance in CSS

• شبه کلاس‌ها در CSS Pseudo Classes in CSS

CSS3 - درک Box Model در CSS CSS3 - Understanding Box Model in CSS

• شروع کار با Box Model Getting Started with Box Model

• Inline، Block و Display Inline Block and Display

• تست Box Model Box Model Testing

CSS3 - تایپوگرافی در CSS CSS3 - Typography in CSS

• مقدمه‌ای بر تایپوگرافی Introduction to Typography

• وزن و استایل فونت Font Weight and Style

• اندازه‌ی فونت و فرمت‌بندی Font-Size and Formatting

CSS3 - طرح‌بندی‌ها در CSS CSS3 - Layouts in CSS

• Floats و Clear Floats and Clear

• ساخت یک طرح‌بندی با Floats Build a Layout with Floats

• پوزیشن‌ها در CSS Positions in CSS

• Z-Index The Z-Index

CSS3 - فلکس‌باکس و گرید در CSS CSS3 - Flexbox and Grid in CSS

• سیستم‌های فلکس‌باکس و گرید Flexbox and Grid Systems

• جهت‌های فلکس و موارد دیگر Flex Directions and More

• ضروریات CSS Grid CSS Grid Essentials

CSS3 - انتخابگرهای پیشرفته CSS CSS3 - Advanced CSS Selections

• انتخابگرهای پیشرفته CSS Advanced CSS Selectors

• شبه انتخابگرها Pseudo Selectors

CSS3 - ساخت وب‌سایت CSS3 - Building The Website

• ساختار وب‌سایت The Website Structure

• نصب فونت‌های گوگل برای وب‌سایت Installing Google Fonts for Website

• استایل‌دهی به سربرگ سایت Styling The Site Header

• ساخت نوار ناوبری Building The Navigation Bar

• ساخت اسلایدر تصویر واکنش‌گرا Creating a Responsive Image Slider

• استایل‌دهی به نگهدارنده محتوا Styling The Content Holder

• استایل‌دهی به فوتر Styling The Footer

• ایجاد و استایل‌دهی صفحه خدمات و محصولات Creating and Styling Services and Products Page

• ایجاد و استایل‌دهی صفحه درباره ما Creating and Styling About Page

• ایجاد و استایل‌دهی صفحه تماس با ما Creating and Styling Contact Page

Responsive Web Design (RWD) - طراحی وب واکنش‌گرا (RWD) Responsive Web Design (RWD)

• مقدمه‌ای بر طراحی وب واکنش‌گرا (RWD) Introduction to Responsive Web Design (RWD)

• طراحی وب واکنش‌گرا چگونه کار می‌کند How Responsive Web Design Works

• ساخت سربرگ واکنش‌گرا Creating Responsive Header

• ساخت نوار ناوبری واکنش‌گرا Creating Responsive Navigation Bar

• ساخت اسلایدر بنر واکنش‌گرا Creating Responsive Banner Slider

• ساخت نگهدارنده محتوای واکنش‌گرا Creating Responsive Content Holder

• ساخت فوتر واکنش‌گرا Creating Responsive Footer

• وقتی هاور می‌کنم هیچ اتفاقی نمی‌افتد – قسم می‌خورم CSS را درست نوشتم! Nothing Happens When I Hover – I Swear I Wrote the CSS Right!

• چرا ستون‌های من به جای کنار هم ماندن روی هم قرار می‌گیرند؟ Why Do My Columns Stack Instead of Staying Side-by-Side?

JavaScript - مقدمه‌ای بر جاوااسکریپت JavaScript - Introduction

• مقدمه‌ای بر جاوااسکریپت Introduction to JavaScript

• آنچه باید بدانید What you should know

• سلام دنیا Hello World

• دستورات جاوااسکریپت JavaScript Statements

• محل قرارگیری در جاوااسکریپت (بخش ۱) Placement in JavaScript (Part 1)

• محل قرارگیری در جاوااسکریپت (بخش ۲) Placement in JavaScript (Part 2)

JavaScript - مبانی جاوااسکریپت JavaScript - Fundamentals

• متغیرها در جاوااسکریپت Variables in JavaScript

• شرط‌ها در جاوااسکریپت Conditions in JavaScript

• عملگرها در جاوااسکریپت Operators in JavaScript

• کار با کنسول مرورگر Working with Browser Console

• حلقه‌ها در جاوااسکریپت Loops in JavaScript

• توابع در جاوااسکریپت Functions in JavaScript

• ایجاد حلقه‌های سفارشی با توابع Creating Custom Loops with Functions

JavaScript - انواع داده JavaScript - Data Types

• کار با آرایه‌ها Working with Arrays

• اعداد در جاوااسکریپت Numbers in JavaScript

• رشته‌ها در جاوااسکریپت Strings in JavaScript

• کار با شیء تاریخ‌ها Working with Dates Object

• اشیاء در جاوااسکریپت Objects in JavaScript

JavaScript - DOM (مدل شیء سند) در جاوااسکریپت JavaScript - DOM (Document Object Model)

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

• انواع گره‌های عنصر Element Node Types

• کار با عناصر DOM Working with DOM Elements

• تغییر محتویات DOM Changing Contents of DOM

• ایجاد عناصر جدید با جاوااسکریپت Creating New Elements with JavaScript

• افزودن رویدادها به عناصر DOM Adding Events to DOM Elements

• کار با عناصر فرم Working with Form Elements

• تایمرها در جاوااسکریپت Timers in JavaScript

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

• دیباگ کردن در جاوااسکریپت Debugging in JavaScript

• ساخت فرم‌های اعتبارسنجی زنده مدرن Creating Modern Live Validation Forms

• کوچک‌سازی و اعتبارسنجی جاوااسکریپت Minify & Validate JavaScript

• استفاده از کتابخانه‌های جاوااسکریپت Using JavaScript Libraries

• کار با جاوااسکریپت مدرن Working with Modern JavaScript

• استفاده از Use Strict Making Use Of Use Strict

• روش‌های نادرست جاوااسکریپت JavaScript Bad Practices

• عبارات منظم جاوااسکریپت JavaScript Regular Expressions

Bootstrap 5 - شروع کار با Bootstrap 5 Bootstrap 5 - Getting Started

• مقدمه‌ای بر Bootstrap 5 Introduction to Bootstrap 5

• آنچه نیاز خواهید داشت What you will need

• سلام دنیا Hello World

• ساختار سند Bootstrap 5 Bootstrap 5 Document Structure

Bootstrap 5 - طرح‌بندی‌ها Bootstrap 5 - Layouts

• Breakpoint ها Breakpoints

• کانتینرها Containers

• گرید Grid

• گزینه‌های گرید Grid Options

• تو در تو کردن ردیف‌ها و ستون‌ها Nesting Rows and Columns

• تراز عمودی ستون Column Vertical Alignment

• تراز افقی ستون Column Horizontal Alignment

• شکستن ستون و Wrap کردن ستون Column Wrapping and Column Breaks

• تغییر ترتیب و Offset ستون‌ها Reordering and Offsetting Columns

• ابزارهای Margin Margin Utilities

• گاترها (فاصله‌های بین ستون‌ها) Gutters

• گاترهای افقی Horizontal Gutters

• گاترهای عمودی Vertical Gutters

• گاترهای افقی و عمودی Horizontal and Vertical Gutters

Bootstrap 5 - محتویات Bootstrap 5 - Contents

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

• عناصر متنی Inline Inline Text Elements

• اختصارات و Blockquote ها Abbreviations and Blockquotes

• کار با لیست‌ها Working with Lists

• تصاویر در Bootstrap Images in Bootstrap

• جداول در Bootstrap Tables in Bootstrap

• تراز جدول، تو در تویی و ساختار آن Table Alignment, Nesting and Anatomy

• Figureها در Bootstrap Figures in Bootstrap

Bootstrap 5 - فرم‌ها Bootstrap 5 - Forms

• فرم‌ها در Bootstrap Forms in Bootstrap

• کنترل فرم Form Control

• چک‌ها و رادیوها Checks and Radios

• محدوده Range

• گروه‌های ورودی Input Groups

• لیبل‌های شناور Floating Labels

• طرح‌بندی فرم Form Layout

• فرم‌های افقی Horizontal Forms

• فرم‌های اندازه‌گیری خودکار Auto Sizing Forms

• فرم‌های Inline Inline Forms

• اعتبارسنجی فرم Form Validation

Bootstrap 5 - کامپوننت‌ها Bootstrap 5 - Components

• آکاردئون‌ها Accordions

• هشدارها Alerts

• رد کردن هشدارها Dismissing Alerts

• نشان‌ها Badges

• بردکرامب Breadcrumb

• دکمه‌ها Buttons

• گروه دکمه Button Group

• نوار ابزار دکمه Button Toolbar

• تغییر گروه دکمه Button Group Alteration

• کارت Card

• اندازه‌گذاری کارت Card Sizing

• ناوبری کارت Card Navigation

• تصاویر کارت Card Images

• استایل‌های کارت Card Styles

• کاروسل Carousel

• کنترل‌های کاروسل Carousel Controls

• نشانگرهای کاروسل Carousel Indicators

• کپشن کاروسل Carousel Caption

• افکت محو شدن کاروسل Carousel Fade Effect

• زمان‌بندی کاروسل Carousel Timing

• غیرفعال کردن کشیدن (Swiping) لمسی کاروسل Disable Carousel Touch Swiping

• حالت تیره کاروسل Carousel Dark Variant

• (به‌روزرسانی Bootstrap 5.3) منسوخ شدن Carousel Dark و روش جدید (Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method

• دکمه بستن Close Button

• (به‌روزرسانی Bootstrap 5.3) منسوخ شدن "btn-close-white" و روش جدید (Bootstrap 5.3 Update) Deprecation of "btn-close-white" & The New Method

• Collapse (جمع‌شونده) Collapse

• Collapse افقی Horizontal Collapse

• هدف‌های چندگانه Multiple Targets

• دراپ‌داون‌ها Dropdowns

• دکمه Split Split Button

• اندازه‌گذاری دراپ‌داون Dropdown Sizing

• دراپ‌داون‌های تیره Dark Dropdowns

• (به‌روزرسانی Bootstrap 5.3) منسوخ شدن Dark Dropdowns و روش جدید (Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method

• جهت‌های دراپ‌داون Dropdown Directions

• تراز Dropup و Dropdown Dropup and Dropdown Alignment

• آیتم‌های منو Menu Items

• تراز منو Menu Alignment

• گزینه‌های تراز دراپ‌داون Dropdown Alignment Options

• محتویات منو Menu Contents

• فرم‌های دراپ‌داون Dropdown Forms

• گزینه‌های دراپ‌داون Dropdown Options

• بستن خودکار دراپ‌داون Dropdown Auto Close

• گروه لیست List Group

• لینک‌ها و دکمه‌های گروه لیست List Group Links and Buttons

• گروه لیست Flush List Group Flush

• لیست شماره‌گذاری شده Numbered List

• گروه‌های لیست افقی Horizontal List Groups

• کلاس‌های گروه لیست متنی Contextual List Group Classes

• گروه لیست با نشان‌ها List Group with Badges

• گروه لیست با محتوای سفارشی List Group with Custom Content

• چک‌باکس‌ها و رادیوهای گروه لیست List Group Checkboxes and Radios

• تب‌های جاوااسکریپت گروه لیست List Group JavaScript Tabs

• مودال‌ها Modals

• پس‌زمینه ثابت Static Backdrop

• پیمایش محتوای طولانی Scrolling Long Content

• تراز عمودی Vertically Centered

• تولتیپ‌ها و پاپ‌اورهای مودال Modal Tooltips and Popovers

• استفاده از سیستم گرید در مودال Using Grid system in Modal

• محتوای مودال متغیر Varying Modal Content

• جابجایی بین مودال‌ها Toggle Between Modals

• اندازه‌های اختیاری مودال Optional Modal Sizes

• نوبار (Navbar) Navbar

• (به‌روزرسانی Bootstrap 5.3) "bg-body-tertiary" کاملاً جدید (Bootstrap 5.3 Update) The All New "bg-body-tertiary"

• لینک‌های ناوبری Navigation Links

• دراپ‌داون نوبار Navbar Dropdown

• دراپ‌داون تو در توی نوبار Navbar Nested Dropdown

• فرم‌های نوبار Navbar Forms

• گروه ورودی نوبار Navbar Input Group

• متن ساده نوبار Navbar Plain Text

• رنگ‌های نوبار Navbar Colors

• (به‌روزرسانی Bootstrap 5.3) حالت تیره نوبار (Bootstrap 5.3 Update) The Navbar Dark-Mode

• (به‌روزرسانی Bootstrap 5.3) رنگ جدید نوبار (Bootstrap 5.3 Update) The New Navbar Color

• کانتینرهای نوبار Navbar Containers

• محل قرارگیری نوبار Navbar Placement

• پیمایش نوبار Navbar Scrolling

• نوبار Off Canvas Off Canvas Navbar

• Nav و تب‌ها Navs and Tabs

• ابزارهای فلکس Nav Nav Flex Utilities

• تب‌ها و Pill های Nav با دراپ‌داون Nav Tabs and Pills with Dropdown

• رفتارهای تب‌ها و Pills Tabs and Pills Behaviors

• Offcanvas به صورت عمیق Offcanvas In-Depth

• (به‌روزرسانی Bootstrap 5.3) حالت تیره Offcanvas (Bootstrap 5.3 Update) Offcanvas Dark-Mode

• پیمایش Offcanvas Offcanvas Scrolling

• محل قرارگیری Offcanvas Offcanvas Placement

• صفحه‌بندی Pagination

• PlaceHolder ها Placeholders

• Popoverها به صورت عمیق Popovers In-Depth

• جهت Popover Popover Direction

• Popoverهای سفارشی Custom Popovers

• بستن با کلیک بعدی Dismiss on next click

• فعال کردن Popover با هاور Enable Popover on Hover

• نوارهای پیشرفت Progress Bars

• ارتفاع و پس‌زمینه نوار پیشرفت Progress bar height and Background

• راه‌راه‌ها و انیمیشن Stripes and Animation

• (به‌روزرسانی Bootstrap 5.3) نوار پیشرفت جدید (Bootstrap 5.3 Update) The New Progress Bar

• (به‌روزرسانی Bootstrap 5.3) ارتفاع نوار پیشرفت (Bootstrap 5.3 Update) Progress Bar Height

• (به‌روزرسانی Bootstrap 5.3) لیبل‌ها و پس‌زمینه‌ها در نوارهای پیشرفت (Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars

• (به‌روزرسانی Bootstrap 5.3) نوارهای پیشرفت چندگانه روی هم (Bootstrap 5.3 Update) Multiple Stacked Progress Bars

• (به‌روزرسانی Bootstrap 5.3) نوارهای پیشرفت راه‌راه و انیمیشن‌دار (Bootstrap 5.3 Update) Stripped and Animated Progress Bars

• Scrollspy Scrollspy

• اسپینرها Spinners

• اسپینر در حال رشد Growing Spinner

• تراز اسپینر Spinner Alignment

• اندازه‌های اسپینر Spinner Sizes

• اسپینر در دکمه‌ها Spinner in Buttons

• توست‌ها Toasts

• تراز توست Toast Alignment

• تولتیپ‌ها به صورت عمیق Tooltips In-Depth

• تولتیپ سفارشی Custom Tooltip

• جهت‌های تولتیپ Tooltip Directions

• HTML در تولتیپ HTML in Tooltip

• تولتیپ روی عناصر غیرفعال Tooltip on Disabled Elements

Bootstrap 5 - ابزارهای کمکی Bootstrap 5 - Helpers

• Clearfix Clearfix

• رنگ‌ها و پس‌زمینه Colors and Background

• لینک‌های رنگی Colored Links

• (به‌روزرسانی Bootstrap 5.3) ابزارهای لینک (Bootstrap 5.3 Update) Link Utilities

• (به‌روزرسانی Bootstrap 5.3) حلقه‌های فوکوس (Bootstrap 5.3 Update) Focus Rings

• (به‌روزرسانی Bootstrap 5.3) لینک‌های آیکونی (Bootstrap 5.3 Update) Icon Links

• نسبت‌ها Ratios

• پوزیشن‌ها Positions

• استک‌ها Stacks

• مخفی از نظر بصری Visually Hidden

• لینک کشیده شده Stretched Link

• کوتاه کردن متن Text Truncate

• خط عمودی Vertical Rule

Bootstrap 5 - ابزارهای کاربردی Bootstrap 5 - Utilities

• پس‌زمینه‌ها Backgrounds

• (به‌روزرسانی Bootstrap 5.3) رنگ‌های پس‌زمینه اضافی (Bootstrap 5.3 Update) Additional Background Colors

• گرادیانت‌های پس‌زمینه Background Gradients

• شفافیت پس‌زمینه Background Opacity

• حاشیه‌ها Borders

• رنگ حاشیه Border Color

• شفافیت حاشیه Border Opacity

• عرض حاشیه Border Width

• شعاع حاشیه (گوشه‌های گرد) Border Radius

• اندازه‌های حاشیه گرد Rounded Border Sizes

• رنگ‌های متن Text Colors

• شفافیت متن Text Opacity

• نمایش Inline و Block Display Inline and Block

• مخفی کردن عناصر Hiding Elements

• نمایش در چاپ Display in Print

• فلکس Flex

• جهت فلکس Flex Direction

• توجیه محتوای فلکس Flex Justify Content

• تراز آیتم‌های فلکس Flex Align Items

• تراز خودکار فلکس Flex Align Self

• پر کردن فلکس Flex Fill

• رشد و کوچک شدن فلکس Flex Grow and Shrink

• Margin های خودکار فلکس Flex Auto Margins

• فلکس با تراز آیتم‌ها Flex with Align Items

• Flex Wrap Flex Wrap

• ترتیب فلکس Flex Order

• تراز محتوای فلکس Flex Align Content

• شیء رسانه‌ای فلکس Flex Media Object

• شناور واکنش‌گرا Responsive Float

• تعاملات Interactions

• (به‌روزرسانی Bootstrap 5.3) شفافیت لینک (Bootstrap 5.3 Update) Link Opacity

• (به‌روزرسانی Bootstrap 5.3) زیرخط لینک (Bootstrap 5.3 Update) Link Underlines

• (به‌روزرسانی Bootstrap 5.3) لینک‌های رنگی (Bootstrap 5.3 Update) Colored Links

• (به‌روزرسانی Bootstrap 5.3) Object Fit (Bootstrap 5.3 Update) Object Fit

• (به‌روزرسانی Bootstrap 5.3) Object Fit واکنش‌گرا (Bootstrap 5.3 Update) Responsive Object Fit

• شفافیت Opacity

• سرریز Overflow

• موقعیت Position

• قرار دادن عناصر در مرکز Position Center Elements

• قرار دادن عناصر در مرکز داخل لبه‌ها Position Center Elements within Edges

• نمونه‌های موقعیت‌دهی – بخش ۱ Position Examples Part 1

• نمونه موقعیت‌دهی – بخش ۲ Position Example Part 2

• سایه Shadow

• اندازه‌بندی Sizing

• فاصله‌گذاری Spacing

• فاصله (Gap) Gap

• چینش متن Text Alignment

• پیچیدن متن Text Wrap

• شکستن متن Text Break

• تغییر شکل متن Text Transform

• اندازه فونت Font Size

• وزن فونت و ایتالیک Font weights and italics

• ارتفاع خط Line Height

• فونت Monospace Monoscope

• بازنشانی رنگ Reset Color

• دکوراسیون متن Text Decoration

• چینش عمودی Vertical Alignment

• قابلیت مشاهده Visibility

• (آپدیت بوت‌استرپ ۵.۳) Z-Index (Bootstrap 5.3 Update) The Z-Index

• آیکون‌های بوت‌استرپ Bootstrap Icons

پروژه – اپلیکیشن EMS (سیستم مدیریت کارکنان) Project - EMS App (Employee Management System App)

• معرفی پروژه اپلیکیشن EMS2.0 Introduction To EMS2.0 Application Project

• ایجاد صفحه ورود Creating The Login Page

• ایجاد نوار پیمایش داشبورد و لوگوی برند Creating Dash Nav and Brand Logo

• ایجاد دکمه تغییر وضعیت نوار پیمایش Creating The Navbar Toggler

• ایجاد آیتم‌های نوار پیمایش Creating Navbar Items

• ایجاد فیلدهای فرم برای نوار پیمایش Creating Form Fields For Navbar

• ایجاد کارت‌ها برای داشبورد Creating Cards For Dashboard

• ایجاد صفحه لیست کارکنان Creating Employees List Page

• ایجاد نوار کناری صفحه کارکنان Creating Employees Page Sidebar

• ایجاد جدول لیست کارکنان Creating Employees List Table

• ایجاد مودال افزودن کارمند Creating Add Employee Modal

• ایجاد فرم مودال افزودن کارمند Creating Add Employee Modal Form

• ایجاد مودال جزئیات برای لیست کارکنان Creating Details Modal For Employee List

• ایجاد ویرایش جزئیات برای لیست کارکنان Creating Edit Details For Employee List

• ایجاد مودال حذف برای لیست کارکنان Creating Delete Modal For Employees List

• ایجاد صفحه لیست مشاغل Creating Jobs List Page

• به‌روزرسانی صفحه لیست مشاغل Updating The Job List Page

• ایجاد جدول لیست مشاغل Creating Job List Table

• ایجاد مودال افزودن شغل Creating Add Job Modal

• ایجاد مودال جزئیات برای شغل Creating Details Modal For Job

• ایجاد ویرایش جزئیات برای مودال شغل Creating Edit Details For Job Modal

• ایجاد مودال حذف برای لیست مشاغل Creating Delete Modal For Job List

پروژه – اپلیکیشن وبلاگ با بوت‌استرپ ۵ Project - Blog App with Bootstrap 5

• معرفی پروژه وبلاگ Blog Project Introduction

• آنچه برای ساخت قالب لازم است What's Required For Template Building

• ایجاد فایل Index Creating The Index File

• ایجاد نوار پیمایش و لوگوی برند Creating The Navbar and Brand Logo

• ایجاد دکمه تغییر وضعیت نوار پیمایش Creating Navbar Toggler

• ایجاد آیتم‌های نوار پیمایش Creating Navbar Items

• ایجاد فیلد جستجو Creating The Search Field

• ایجاد بنر صفحه اصلی Creating The Home Banner

• ایجاد مودال اشتراک Creating The Subscribe Modal

• ایجاد بخش پست‌های صفحه اصلی Creating Home Posts Section

• ایجاد فوتر وبلاگ Creating Blog Footer

• افزودن افکت‌های سفارشی به نوار پیمایش Adding Custom Effects To Navbar

• ایجاد هدر پیش‌فرض صفحه Creating Default Page Header

• ایجاد حلقه پست برای صفحه پیش‌فرض Creating Post Loop For Default Page

• ایجاد فرم اشتراک نوار کناری Creating Sidebar Subscribe Form

• ایجاد ویجت‌های دسته‌بندی‌ها و آرشیو Creating Categories and Archive Widgets

• ایجاد بخش محتوای صفحه و پست Creating Page and Post Content Area

• ایجاد فرم دیدگاه برای پست‌ها Creating Comment Form For Posts

• ایجاد صفحه جستجو Creating The Search Page

• لینک کردن همه چیز به یکدیگر Linking Everything Together

پروژه – پروژه آموزشی دنیای واقعی Project - Real-World Education Project

• معرفی پروژه Introduction To Project

• راه‌اندازی پوشه پروژه Setting Up Project Folder

• ایجاد نوار پیمایش و برند Creating Navbar and Brand

• ایجاد دکمه تغییر وضعیت نوار پیمایش Creating Navbar Toggler

• ایجاد آیتم‌های نوار پیمایش Creating Nav Items

• ایجاد فیلد جستجوی نوار پیمایش Creating Navbar Search Field

• ایجاد دکمه‌های ثبت‌نام و ورود نوار پیمایش Creating Navbar Sign-Up And Login Buttons

• ایجاد متن بنر Creating The Banner Text

• افزودن تصویر بنر Adding Banner Image

• ایجاد مجموعه ویژگی‌های سایت Creating Site Feature Set

• ایجاد هدر حلقه دوره Creating Course Loop Header

• ایجاد فیلتر حلقه دوره Creating Course Loop Filter

• ایجاد هدر حلقه دوره Creating Course Loop Header

• ایجاد آیتم لیست دوره تکی Creating Single Course List Item

• ایجاد نسخه‌های تکراری از آیتم‌های دوره Creating Duplicates of Course Items

• ایجاد محتوای صفحه اصلی Creating Home Page Content

• افزودن تصویر محتوای صفحه اصلی Adding Home Content Image

• ایجاد ناحیه اشتراک Creating Subscribe Area

• ایجاد فوتر اصلی Creating Main Footer

• ایجاد آدرس فوتر Creating Footer Address

• ایجاد آیتم‌های لینک برای فوتر Creating Link Items For Footer

• ایجاد آیکون‌های شبکه اجتماعی Creating Social Icons

• ایجاد اطلاعات حق تکثیر Creating Copyright Info

• ایجاد فوتر چسبان Creating Sticky Footer

• ایجاد هدر صفحه درباره ما Creating About Page Header

• ایجاد بخش محتوای درباره ما Creating About Content Section

• ایجاد صفحه دوره‌ها Creating The Courses Page

• ایجاد صفحه تک دوره و بردکرامب Creating Single Course Page and Breadcrumb

• ایجاد توضیحات هدر دوره و فراداده (Meta Data) Creating Course Header Description and Meta Data

• ایجاد فراداده دوره Creating Course Meta Data

• افزودن آیکون‌ها به فراداده دوره Adding Icons To Course Meta Data

• افزودن دکمه‌های دوره Adding Course Buttons

• ایجاد تصویر تک دوره Creating Single Course Image

• ایجاد محتویات تک دوره Creating Single Course Contents

• ایجاد هدر سوالات متداول Creating FAQ Header

• ایجاد لیست سوالات متداول Creating FAQ List

• ایجاد فرم ارسال سوال Creating Post Question Form

• ایجاد صفحه وبلاگ و هدر Creating Blog Page and Header

• ایجاد لیست پست‌های وبلاگ Creating Blog Posts List

• ایجاد نوار کناری وبلاگ Creating Blog Sidebar

• ایجاد مودال اشتراک Creating Subscribe Modal

• ایجاد فرم اشتراک Creating The Subscribe Form

• ایجاد صفحه تک پست Creating Single Post Page

• ایجاد هدر صفحه تماس Creating Contact Page Header

• ایجاد کارت‌های صفحه تماس Creating Contact Page Cards

• ایجاد مودال تماس Creating Contact Modal

• لینک کردن همه چیز به یکدیگر Linking Everything Together

Adobe Dreamweaver CC – شروع به کار Adobe Dreamweaver CC - Getting Started

• معرفی Dreamweaver CC Introduction to Dreamweaver CC

• آنچه نیاز دارید What you need

• ایجاد فضای کاری جدید Creating New Workspace

• راه‌اندازی پروژه در Dreamweaver Setting up Project in Dreamweaver

• سلام دنیا Hello World

Adobe Dreamweaver CC – مؤلفه‌های HTML Adobe Dreamweaver CC - HTML Components

• ایجاد تگ‌های Div با کلاس‌ها و IDها Creating Div Tags with Classes & ID's

• ایجاد تگ‌های Div بدون کلاس‌ها و IDها Creating Div Tags without Classes & ID's

• افزودن تصاویر به پروژه Dreamweaver Adding Images to Dreamweaver project

• سربرگ‌ها و پاراگراف‌ها Headings & Paragraphs

• کار با جداول در Dreamweaver CC Working with Tables in Dreamweaver CC

• افزودن عنصر Figure به صفحه Adding Figure Element to Page

• ایجاد لیست‌ها و لینک‌ها Creating Lists & Links

• عناصر معنایی HTML5 HTML5 Semantic Elements

• هدر، فوتر، متا و اسکریپت‌ها Header, Footer, Meta & Scripts

• رسانه در Dreamweaver CC Media in Dreamweaver CC

• صوتی HTML5 در Dreamweaver CC HTML5 Audio in Dreamweaver CC

• مؤلفه‌ها و ابزارهای HTML اضافی Additional HTML Components & Tools

Adobe Dreamweaver CC – فرم‌ها Adobe Dreamweaver CC - Forms

• تگ فرم و ویژگی‌های آن The Form Tag & Its Attributes

• کار با فیلدهای متنی Working with Text Fields

• فیلدهای ورودی در Dreamweaver CC Input Fields in Dreamweaver CC

• سایر فیلدهای ورودی در Dreamweaver CC Other Input Fields in Dreamweaver CC

Adobe Dreamweaver CC – سایت پایه Adobe Dreamweaver CC - Basic Site

• راه‌اندازی پروژه Setting up Project

• استایل‌دهی تگ Body با CSS Designer Styling the Body tag with CSS Designer

• ایجاد نگهدارنده هدر Creating the Header Holder

• ایجاد کانتینر Creating The Container

• افزودن لوگو به سایت ما Adding Logo to Our Site

• ایجاد منو Creating The Menu

• ایجاد بنر برای وب‌سایت Creating Banner for Website

• ایجاد محتوای بدنه Creating Body Content

• ایجاد بخش فوتر Creating Footer Section

Adobe Dreamweaver CC – طراح سایت زنده Adobe Dreamweaver CC - Live Site Designer

• معرفی بوت‌استرپ برای Dreamweaver CC Introduction to Bootstrap for Dreamweaver CC

• افزودن CSS سفارشی به بوت‌استرپ Adding Custom CSS to Bootstrap

• کار با گرید بوت‌استرپ Working with Bootstrap Grid

• سفارشی‌سازی نوار پیمایش Customizing the Navbar

• انواع نوار پیمایش Navbar Types

• کاروسل در بوت‌استرپ Carousel in Bootstrap

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

• تصاویر کوچک (Thumbnail) بوت‌استرپ Bootstrap Thumbnails

• آیتم‌های رسانه و آیکون‌های گلیف Media Items & Glyph Icons

• جاسازی ویدیوی واکنش‌گرا Responsive Video Embed

• جامبوترون در بوت‌استرپ Jumbotron in Bootstrap

• دکمه‌های بوت‌استرپ Bootstrap Buttons

• انواع و گروه‌های دکمه Botton Types & Groups

• گروه‌های ورودی، پنل‌ها و Wells Input Groups, Panels, & Wells

• تب‌ها، آکاردئون‌ها و پیجر Tabs, Accordions & Pager

Adobe Dreamweaver CC – jQuery Mobile Adobe Dreamweaver CC - jQuery Mobile

• ایجاد یک صفحه پایه Creating a Basic Page

• گزینه‌های لیست jQuery Mobile jQuery Mobile List Options

• گرید jQuery Mobile jQuery Mobile Grid

• جمع‌شونده jQuery Mobile jQuery Mobile Collapse

• مؤلفه‌های فرم jQuery Mobile jQuery Mobile Form Components

• سایر مؤلفه‌های فرم jQuery Mobile jQuery Mobile Other Form Components

Adobe Dreamweaver CC – jQuery UI Adobe Dreamweaver CC - jQuery UI

• آکاردئون jQuery UI jQuery UI Accordion

• تب‌های jQuery UI jQuery UI Tabs

• تاریخ، اسلایدر و مودال jQuery UI jQuery UI Date, Slider, & Modal

• سایر مؤلفه‌های فرم jQuery UI jQuery UI Other Forms Components

پروژه Adobe Dreamweaver – اپلیکیشن وب EMS Adobe Dreamweaver Project - EMS Web App

• راه‌اندازی پروژه Setting up The Project

• ایجاد صفحه ورود Creating The Login Page

• ایجاد داشبورد Creating The Dashboard

• ایجاد صفحه کارمند Creating The Employee Page

• ایجاد جدول کارکنان Creating Employees Table

• ایجاد فرم افزودن کارمند Creating Add Employee Form

• ایجاد صفحه به‌روزرسانی کارمند Creating Update Employee Page

• ایجاد صفحه لیست مشاغل Creating Jobs List Page

• ایجاد فرم افزودن شغل Creating Add Job Form

• صفحه به‌روزرسانی شغل Update Job Page

• لینک کردن صفحات به یکدیگر Linking Pages Together

• ایجاد صفحه تک داده Creating Single Data Page

پروژه Adobe Dreamweaver – اپلیکیشن وبلاگ Adobe Dreamweaver Project -Blog App

• راه‌اندازی برای اپلیکیشن وبلاگ Setting up for Blog Application

• ایجاد صفحه اصلی Creating Home Page

• ایجاد ویجت نوار کناری Creating Sidebar Widget

• ایجاد پست و صفحه Creating Post & Page

• ایجاد قالب صفحه استاتیک Creating Static Page Template

وردپرس – مقدمه‌ای بر وردپرس WordPress - Introduction to WordPress

• نسخه‌ها و ویژگی‌های وردپرس WordPress Versions and Features

• WordPress.Org در مقابل WordPress WordPress.Org vs WordPress

وردپرس – شروع به کار WordPress - Getting Started

• چیزهایی که نیاز خواهید داشت Things you will need

• دانلود و نصب XAMPP Download and Install XAMPP

• دانلود و نصب وردپرس به صورت محلی Download and Install WordPress Locally

• ورود، خروج و بازنشانی رمز عبور ادمین Login Logout and Reset Amin Password

• ایجاد و مدیریت کاربران در وردپرس Creating and Managing Users in WordPress

وردپرس – داشبورد ادمین WordPress - The Admin Dashboard

• منوی اصلی در وردپرس The Main Menu in WordPress

• داشبورد خوش‌آمدگویی The Welcome Dashboard

• نوار ابزار وردپرس The WordPress Toolbar

وردپرس – تنظیمات در وردپرس WordPress - Settings in WordPress

• تنظیمات عمومی در وردپرس General Settings in WordPress

• تنظیمات نوشتن در وردپرس Writing Settings in WordPress

• تنظیمات خواندن در وردپرس Reading Settings in WordPress

• تنظیمات بحث در وردپرس Discussion Settings in WordPress

• تنظیمات رسانه در وردپرس Media Settings in WordPress

• پیوندهای یکتا در وردپرس Permalinks in WordPress

• تنظیمات حریم خصوصی در وردپرس Privacy Settings in WordPress

وردپرس – تنظیمات سفارشی‌سازی سایت WordPress - Site Customization Settings

• انتخاب و مدیریت پوسته‌ها (Theme) Choose and Manage Themes

• چگونه یک پوسته انتخاب کنیم How to Choose a Theme

• تنظیم رنگ‌ها و فونت‌ها Setting Colors and Fonts

• راه‌اندازی لوگوی برند Setting up Brand Logo

وردپرس – سفارشی‌سازی هدر و فوتر WordPress - Header and Footer Customization

• نوار پیمایش یا منو Navigation or Menu Bar

• فوتر در ویرایشگر کامل سایت وردپرس Footer in WordPress Full Site Editor

وردپرس – صفحات در وردپرس WordPress - Pages in WordPress

• ایجاد یک صفحه جدید در وردپرس Creating a New Page in WordPress

• مدیریت صفحات در وردپرس Managing Pages in WordPress

وردپرس – پست‌ها در وردپرس WordPress - Posts in WordPress

• ایجاد یک پست جدید Creating a New Post

• مدیریت پست‌ها در وردپرس Managing Posts in WordPress

• دسته‌بندی‌ها و برچسب‌ها در وردپرس Categories and Tags in WordPress

• تصویر شاخص در وردپرس Featured Image in WordPress

• ساخت یک صفحه اصلی سفارشی Making a Custom Home Page

وردپرس – بلاک‌ها در وردپرس WordPress - Blocks in WordPress

• ایجاد یک بلاک جدید Creating a New Block

• سفارشی‌سازی بلاک‌ها در وردپرس Customizing Blocks in WordPress

• نوار کناری بلاک‌ها در وردپرس Blocks Sidebar in WordPress

• بلاک‌های قابل استفاده مجدد یا الگوهای سفارشی Reusable Blocks or Custom Patterns

• الگوها در وردپرس Patterns in WordPress

وردپرس – کتابخانه رسانه در وردپرس WordPress - Media Library in WordPress

• افزودن فایل‌های رسانه‌ای جدید Adding New Media Files

• مدیریت فایل‌های رسانه‌ای در وردپرس Managing Media Files in WordPress

وردپرس – افزونه‌ها در وردپرس WordPress - Plugins in WordPress

• یافتن افزونه‌های وردپرس عالی Finding Perfect WordPress Plugins

• نصب افزونه‌ها در وردپرس Installing Plugins in WordPress

• مدیریت افزونه‌ها در وردپرس Managing Plugins in WordPress

وردپرس – امنیت وردپرس WordPress - WordPress Security

• ایجاد و ایمن‌سازی حساب‌های کاربری Creating and Securing User Accounts

• گواهی‌نامه‌های SSL SSL Certificates

• پشتیبان‌گیری از وردپرس Backing up WordPress

• چرا فرم تماس من ایمیل ارسال نمی‌کند؟ Why Is My Contact Form Not Sending Emails?

ووکامرس – شروع به کار WooCommerce - Getting Started

• معرفی ووکامرس Introduction to WooCommerce

• آنچه باید بدانید What you sould know

• چرا ووکامرس را انتخاب کنید Why choose WooCommerce

• راه‌اندازی وردپرس برای تجارت الکترونیک Setting up WordPress for E-Commerce

• دانلود و نصب ووکامرس Downloading & Installing WooCommerce

ووکامرس – ایجاد و مدیریت محصولات WooCommerce - Creating & Managing products

• ایجاد محصول جدید با ووکامرس Creating New Product with WooCommerce

• نصب پوسته جدید Installing New Theme

• افزودن محصول و گالری تصویر Adding Product & Image Gallery

• کار با داده‌های اطلاعات محصول Working with Product Information Data

• راه‌اندازی کامل محصول متغیر Variable Product Complete Setup

• ایجاد محصولات دیجیتال Creating Digital Products

• ایجاد توضیحات کوتاه Creating Short Descriptions

• ایجاد محصولات گروهی در ووکامرس Creating Grouped Products in WooCommerce

• وارد کردن داده‌های نمونه در ووکامرس Importing Sample Data in WooCommerce

ووکامرس – راه‌اندازی‌های اضافی WooCommerce - Additional Setup

• افزودن جزئیات حمل و نقل به ووکامرس Adding Shipping Details to WooCommerce

• راه‌اندازی درگاه پرداخت Setting up Payment Gateway

• راه‌اندازی مالیات‌های ووکامرس Setting up WooCommerce Taxes

• نصب پوسته Storefront Installing Storefront Theme

• کار با ویجت‌های ووکامرس Working with WooCommerce Widgets

ووکامرس – تنظیمات WooCommerce - Settings

• راه‌اندازی عمومی ووکامرس WooCommerce General Setup

• تنظیمات محصول در ووکامرس Product Settings in WooCommerce

• حساب و حریم خصوصی در ووکامرس Account & Privacy in WooCommerce

• تنظیمات ایمیل در ووکامرس Email Settings in WooCommerce

• تنظیمات پیشرفته در ووکامرس Advanced Settings in WooCommerce

ووکامرس – تست سفارش‌، گزارش‌ها و کوپن‌ها WooCommerce - Testing Ordered, Reports & Coupons

• تست سایت ووکامرس Testing WooCommerce Site

• کار با سفارش‌ها در ووکامرس Working With Orders in WooCommerce

• کار با گزارش‌های ووکامرس Working with WooCommerce Reports

• ایجاد و مدیریت کوپن‌ها Creating & Managing Coupons