آموزش طراحی کامل وب: HTML، CSS، Javascript، jQuery و Vue JS

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

گام های اول با HTML و CSS First Steps with HTML & CSS

• دانلود کد ویژوال استودیو Downloading Visual Studio Code

• ساختار اصلی یک سند HTML Basic Structure of an HTML Document

• عناصر HTML (برچسب ها) HTML Elements (Tags)

• لیست ها و پیوندها Lists and Links

• تصاویر و فیلم ها Images and Videos

• سبک ها Styles

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

• ابزارهای توسعه‌دهنده و ویژگی‌های بیشتر CSS (قسمت 1) The Developer Tools & More CSS Properties (Part 1)

• ابزارهای توسعه دهنده و ویژگی های بیشتر CSS (قسمت 2) The Developer Tools & More CSS Properties (Part 2)

• کلاس ها، شناسه ها و انتخابگرهای CSS Classes, IDs, and CSS Selectors

• سبک دادن به محتوای مقاله Styling the Content of the Article

• شکل دادن به لیست پیوندها Styling the List of Links

• فونت ها Fonts

• سبک دادن به پیوندهای اجتماعی Styling the Social Links

• رنگ ها Colors

گام های اول با HTML و CSS First Steps with HTML & CSS

• دانلود کد ویژوال استودیو Downloading Visual Studio Code

• ساختار اصلی یک سند HTML Basic Structure of an HTML Document

• عناصر HTML (برچسب ها) HTML Elements (Tags)

• لیست ها و پیوندها Lists and Links

• تصاویر و فیلم ها Images and Videos

• سبک ها Styles

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

• ابزارهای توسعه‌دهنده و ویژگی‌های بیشتر CSS (قسمت 1) The Developer Tools & More CSS Properties (Part 1)

• ابزارهای توسعه دهنده و ویژگی های بیشتر CSS (قسمت 2) The Developer Tools & More CSS Properties (Part 2)

• کلاس ها، شناسه ها و انتخابگرهای CSS Classes, IDs, and CSS Selectors

• سبک دادن به محتوای مقاله Styling the Content of the Article

• شکل دادن به لیست پیوندها Styling the List of Links

• فونت ها Fonts

• سبک دادن به پیوندهای اجتماعی Styling the Social Links

• رنگ ها Colors

غواصی عمیق تر در HTML و CSS Diving Deeper Into HTML & CSS

• معرفی پروژه بعدی و راه اندازی Introducing the Next Project & Setup

• با هدر شروع کنید Starting with the Header

• تراز کردن آیتم های هدر با Flexbox Alignment of Header Items With Flexbox

• موقعیت ثابت روی هدر Fixed Position on Header

• انجام لوگو در HTML و CSS Doing the Logo in HTML & CSS

• تصویر پس زمینه از بخش قهرمان Background Image of Hero Section

• ناحیه متنی بخش قهرمان (قسمت 1) Text Area of Hero Section (Part 1)

• ناحیه متنی بخش قهرمان (قسمت 2) Text Area of Hero Section (Part 2)

• راه اندازی منطقه پرفروش Starting the Best Sellers Area

• بخش 3 محصول The 3 Products Section

• جعبه های محصول فردی Individual Product Boxes

• اطلاعات محصول Product information

• اعمال تگ جدید Applying the New Tag

• قیمت با تخفیف Discounted price

• بخش خبرنامه Newsletter Section

• سبک دادن به عناصر خبرنامه Styling the newsletter elements

• عنصر پاورقی The Footer Element

• ناوبری پایین Bottom Navigation

• موجودیت های HTML HTML Entities

• ایالت هاور Hover states

غواصی عمیق تر در HTML و CSS Diving Deeper Into HTML & CSS

• معرفی پروژه بعدی و راه اندازی Introducing the Next Project & Setup

• با هدر شروع کنید Starting with the Header

• تراز کردن آیتم های هدر با Flexbox Alignment of Header Items With Flexbox

• موقعیت ثابت روی هدر Fixed Position on Header

• انجام لوگو در HTML و CSS Doing the Logo in HTML & CSS

• تصویر پس زمینه از بخش قهرمان Background Image of Hero Section

• ناحیه متنی بخش قهرمان (قسمت 1) Text Area of Hero Section (Part 1)

• ناحیه متنی بخش قهرمان (قسمت 2) Text Area of Hero Section (Part 2)

• راه اندازی منطقه پرفروش Starting the Best Sellers Area

• بخش 3 محصول The 3 Products Section

• جعبه های محصول فردی Individual Product Boxes

• اطلاعات محصول Product information

• اعمال تگ جدید Applying the New Tag

• قیمت با تخفیف Discounted price

• بخش خبرنامه Newsletter Section

• سبک دادن به عناصر خبرنامه Styling the newsletter elements

• عنصر پاورقی The Footer Element

• ناوبری پایین Bottom Navigation

• موجودیت های HTML HTML Entities

• ایالت هاور Hover states

طراحی پاسخگو با پرس و جوهای رسانه ای CSS Responsive Design with CSS Media Queries

• مقدمه ای بر CSS Media Queries Intro to CSS Media Queries

• تنظیم نقاط شکست Setting up the Breakpoints

• یادداشتی درباره سازمان پرسش‌های رسانه‌ای A Note About Media Queries Organization

• طراحی هدر ناوبری Designing the Header Navigation

• طراحی بخش قهرمان Designing the Hero Section

• تصاویر پاسخگو با عنصر تصویر HTML5 Responsive Images with HTML5's Picture Element

• بخش پرفروش ها The Best Sellers Section

• خبرنامه و پاورقی Newsletter and Footer

• لینک های داخلی Internal Links

طراحی پاسخگو با پرس و جوهای رسانه ای CSS Responsive Design with CSS Media Queries

• مقدمه ای بر CSS Media Queries Intro to CSS Media Queries

• تنظیم نقاط شکست Setting up the Breakpoints

• یادداشتی درباره سازمان پرسش‌های رسانه‌ای A Note About Media Queries Organization

• طراحی هدر ناوبری Designing the Header Navigation

• طراحی بخش قهرمان Designing the Hero Section

• تصاویر پاسخگو با عنصر تصویر HTML5 Responsive Images with HTML5's Picture Element

• بخش پرفروش ها The Best Sellers Section

• خبرنامه و پاورقی Newsletter and Footer

• لینک های داخلی Internal Links

میزبانی و دامنه - انتشار وب سایت ما به صورت آنلاین Hosting & Domain - Publishing Our Website Online

• هاست و دامنه - توضیح مختصر Hosting and Domain - A Brief Explanation

• استفاده از سرویس هاست رایگان Using a Free Hosting Service

• پیکربندی FTP Configuring FTP

• استفاده از خدمات هاستینگ پولی Using a Paid Hosting Service

• تنظیم یک نام دامنه سفارشی COM Setting up a Customized .COM Domain Name

میزبانی و دامنه - انتشار وب سایت ما به صورت آنلاین Hosting & Domain - Publishing Our Website Online

• هاست و دامنه - توضیح مختصر Hosting and Domain - A Brief Explanation

• استفاده از سرویس هاست رایگان Using a Free Hosting Service

• پیکربندی FTP Configuring FTP

• استفاده از خدمات هاستینگ پولی Using a Paid Hosting Service

• تنظیم یک نام دامنه سفارشی COM Setting up a Customized .COM Domain Name

مبانی جاوا اسکریپت Javascript Basics

• معرفی دوره جاوا اسکریپت Javascript Course Intro

• مراحل اول با جاوا اسکریپت First Steps With Javascript

• نحو جاوا اسکریپت Javascript Syntax

• DOM - مدل شیء سند DOM - Document Object Model

• کار با DOM Working With The DOM

• دستکاری عناصر HTML Manipulate HTML elements

• متغیرها Variables

• انواع داده ها: رشته ها Data Types: Strings

• انواع داده ها: اعداد (قسمت 1) Data Types: Numbers (Part 1)

• انواع داده ها: اعداد (قسمت 2) Data Types: Numbers (Part 2)

• انواع داده ها: Booleans Data Types: Booleans

• انواع داده ها: تهی و تعریف نشده Data Types: Null and Undefined

• لیست تمرینات شماره 1 List Of Exercises # 1

• لیست تمرینات شماره 1 (راه حل - قسمت 1) List Of Exercises # 1 (Solution - Part 1)

• لیست تمرینات شماره 1 (راه حل - قسمت 2) List Of Exercises # 1 (Solution - Part 2)

• کارکرد Functions

• کارکرد Functions

• انواع داده ها: آرایه ها Data Types: Arrays

• انواع داده ها: اشیاء Data Types: Objects

• روش های اشیاء Objects Methods

• لیست تمرینات شماره 2 List Of Exercises # 2

• لیست تمرینات شماره 2 (راه حل - قسمت 1) List Of Exercises # 2 (Solution - Part 1)

• لیست تمرینات شماره 2 (راه حل - قسمت 2) List Of Exercises # 2 (Solution - Part 2)

مبانی جاوا اسکریپت Javascript Basics

• معرفی دوره جاوا اسکریپت Javascript Course Intro

• مراحل اول با جاوا اسکریپت First Steps With Javascript

• نحو جاوا اسکریپت Javascript Syntax

• DOM - مدل شیء سند DOM - Document Object Model

• کار با DOM Working With The DOM

• دستکاری عناصر HTML Manipulate HTML elements

• متغیرها Variables

• انواع داده ها: رشته ها Data Types: Strings

• انواع داده ها: اعداد (قسمت 1) Data Types: Numbers (Part 1)

• انواع داده ها: اعداد (قسمت 2) Data Types: Numbers (Part 2)

• انواع داده ها: Booleans Data Types: Booleans

• انواع داده ها: تهی و تعریف نشده Data Types: Null and Undefined

• لیست تمرینات شماره 1 List Of Exercises # 1

• لیست تمرینات شماره 1 (راه حل - قسمت 1) List Of Exercises # 1 (Solution - Part 1)

• لیست تمرینات شماره 1 (راه حل - قسمت 2) List Of Exercises # 1 (Solution - Part 2)

• کارکرد Functions

• کارکرد Functions

• انواع داده ها: آرایه ها Data Types: Arrays

• انواع داده ها: اشیاء Data Types: Objects

• روش های اشیاء Objects Methods

• لیست تمرینات شماره 2 List Of Exercises # 2

• لیست تمرینات شماره 2 (راه حل - قسمت 1) List Of Exercises # 2 (Solution - Part 1)

• لیست تمرینات شماره 2 (راه حل - قسمت 2) List Of Exercises # 2 (Solution - Part 2)

غواصی عمیق تر در جاوا اسکریپت Diving Deeper into Javascript

• مناسبت ها Events

• دستکاری CSS CSS Manipulation

• روش های بیشتر getElement More getElement Methods

• For و For در حلقه ها For and For in Loops

• در حالی که حلقه ها While Loops

• شرایط Conditionals

• شرایط (قسمت 2) Conditionals (Part 2)

• حلقه های تو در تو و شرایط Nested Loops and Conditionals

• دامنه متغیر Variable Scope

• لیست تمرینات شماره 3 List Of Exercises # 3

• لیست تمرینات شماره 3 (راه حل - قسمت 1) List Of Exercises # 3 (Solution - Part 1)

• لیست تمرینات شماره 3 (راه حل - قسمت 2) List Of Exercises # 3 (Solution - Part 2)

• لیست تمرینات شماره 3 (راه حل - قسمت 3) List Of Exercises # 3 (Solution - Part 3)

• BOM - مدل شیء مرورگر BOM - Browser Object Model

• زمان قرار Date & Time

• زمان قرار Date & Time

• چالش - محاسبه فواصل تاریخ Challenge - Calculating Date Intervals

• روش های زمانی Time Methods

• چالش ساعت Clock Challenge

• شکستن و ادامه دادن Break and Continue

• تشکیل می دهد Forms

• فرم ها (قسمت 2) Forms (Part 2)

• رویداد onchange The onchange Event

• لیست تمرینات شماره 4 List Of Exercises # 4

• لیست تمرینات شماره 4 (راه حل - قسمت 1) List Of Exercises # 4 (Solution - Part 1)

• لیست تمرینات شماره 4 (راه حل - قسمت 2) List Of Exercises # 4 (Solution - Part 2)

• لیست تمرینات شماره 4 (راه حل - قسمت 3) List Of Exercises # 4 (Solution - Part 3)

• لیست تمرینات شماره 4 (راه حل - قسمت 4) List Of Exercises # 4 (Solution - Part 4)

• لیست تمرینات شماره 4 (راه حل - قسمت 5) List Of Exercises # 4 (Solution - Part 5)

غواصی عمیق تر در جاوا اسکریپت Diving Deeper into Javascript

• مناسبت ها Events

• دستکاری CSS CSS Manipulation

• روش های بیشتر getElement More getElement Methods

• For و For در حلقه ها For and For in Loops

• در حالی که حلقه ها While Loops

• شرایط Conditionals

• شرایط (قسمت 2) Conditionals (Part 2)

• حلقه های تو در تو و شرایط Nested Loops and Conditionals

• دامنه متغیر Variable Scope

• لیست تمرینات شماره 3 List Of Exercises # 3

• لیست تمرینات شماره 3 (راه حل - قسمت 1) List Of Exercises # 3 (Solution - Part 1)

• لیست تمرینات شماره 3 (راه حل - قسمت 2) List Of Exercises # 3 (Solution - Part 2)

• لیست تمرینات شماره 3 (راه حل - قسمت 3) List Of Exercises # 3 (Solution - Part 3)

• BOM - مدل شیء مرورگر BOM - Browser Object Model

• زمان قرار Date & Time

• زمان قرار Date & Time

• چالش - محاسبه فواصل تاریخ Challenge - Calculating Date Intervals

• روش های زمانی Time Methods

• چالش ساعت Clock Challenge

• شکستن و ادامه دادن Break and Continue

• تشکیل می دهد Forms

• فرم ها (قسمت 2) Forms (Part 2)

• رویداد onchange The onchange Event

• لیست تمرینات شماره 4 List Of Exercises # 4

• لیست تمرینات شماره 4 (راه حل - قسمت 1) List Of Exercises # 4 (Solution - Part 1)

• لیست تمرینات شماره 4 (راه حل - قسمت 2) List Of Exercises # 4 (Solution - Part 2)

• لیست تمرینات شماره 4 (راه حل - قسمت 3) List Of Exercises # 4 (Solution - Part 3)

• لیست تمرینات شماره 4 (راه حل - قسمت 4) List Of Exercises # 4 (Solution - Part 4)

• لیست تمرینات شماره 4 (راه حل - قسمت 5) List Of Exercises # 4 (Solution - Part 5)

پروژه شماره 3 - وب سایت WeDesign Project # 3 - WeDesign Website

• ارائه Presentation

• منوی موبایل Mobile Menu

• بخش درباره ما About Us Section

• بخش خدمات ما Our Services Sections

• فرم تماس Contact Form

• سال حق چاپ در پاورقی Copyright Year on Footer

پروژه شماره 3 - وب سایت WeDesign Project # 3 - WeDesign Website

• ارائه Presentation

• منوی موبایل Mobile Menu

• بخش درباره ما About Us Section

• بخش خدمات ما Our Services Sections

• فرم تماس Contact Form

• سال حق چاپ در پاورقی Copyright Year on Footer

جی کوئری jQuery

• معرفی جی کوئری jQuery Intro

• نحو jQuery jQuery Syntax

• دستکاری DOM DOM Manipulation

• تشکیل می دهد Forms

• فرم ها (قسمت 2) Forms (Part 2)

• دستکاری کلاس های CSS CSS Classes Manipulation

• مناسبت ها Events

• چالش رویدادها Events Challenge

• جلوه ها Effects

• روش متحرک سازی The Animate Method

• فایل scripts.js مورد استفاده در طول دوره را دانلود کنید Download The scripts.js File Used Throughout The Course

جی کوئری jQuery

• معرفی جی کوئری jQuery Intro

• نحو jQuery jQuery Syntax

• دستکاری DOM DOM Manipulation

• تشکیل می دهد Forms

• فرم ها (قسمت 2) Forms (Part 2)

• دستکاری کلاس های CSS CSS Classes Manipulation

• مناسبت ها Events

• چالش رویدادها Events Challenge

• جلوه ها Effects

• روش متحرک سازی The Animate Method

• فایل scripts.js مورد استفاده در طول دوره را دانلود کنید Download The scripts.js File Used Throughout The Course

پروژه شماره 4 - فروشگاه اینترنتی تیشرت Project # 4 - Online T-Shirt Store

• ارائه پروژه Presentation of the project

• دریافت پارامترهای جستجو Getting the Search Parameters

• به روز رسانی جزئیات سفارش Update Order Details

• قیمت را محاسبه کنید Calculate the Price

• عکس محصول را به روز کنید Update the Product Photo

• رویداد تغییر برای فیلترهای کمیت و سبک The Change Event For The Quantity and Style Filters

• رویداد تغییر برای فیلترهای رنگ و کیفیت The Change Event For The Color and Quality Filters

• قالب بندی قیمت Formatting the Price

پروژه شماره 4 - فروشگاه اینترنتی تیشرت Project # 4 - Online T-Shirt Store

• ارائه پروژه Presentation of the project

• دریافت پارامترهای جستجو Getting the Search Parameters

• به روز رسانی جزئیات سفارش Update Order Details

• قیمت را محاسبه کنید Calculate the Price

• عکس محصول را به روز کنید Update the Product Photo

• رویداد تغییر برای فیلترهای کمیت و سبک The Change Event For The Quantity and Style Filters

• رویداد تغییر برای فیلترهای رنگ و کیفیت The Change Event For The Color and Quality Filters

• قالب بندی قیمت Formatting the Price

مبانی Vue JS - پروژه شماره 5 Vue JS Basics - Project #5

• راه اندازی فضای کاری Setting up the Workspace

• رندر اعلامی و اشیاء داده Declarative Rendering and Data Objects

• راه اندازی Vue Dev Tools Setting up Vue Dev Tools

• دستورالعمل ها و حلقه های For Directives and For Loops

• رویداد Handlers - دستورالعمل v-on Event Handlers - The v-on Directive

• اشکال در ابزارهای توسعه دهنده کروم A Bug in Chrome Dev Tools

• اصلاح کننده رویداد (توقف انتشار) و اتصال ویژگی Event Modifiers (Stop Propagation) and Attribute Binding

• پر کردن بخش جزئیات سفارش Filling up The Order Details Section

• کار با متدها Working with Methods

• ورودی کاربر و اتصال داده دو طرفه (قسمت 1) User Input and Two-Way Data Binding (Part 1)

• ورودی کاربر و اتصال داده دو طرفه (قسمت 2) User Input and Two-Way Data Binding (Part 2)

مبانی Vue JS - پروژه شماره 5 Vue JS Basics - Project #5

• راه اندازی فضای کاری Setting up the Workspace

• رندر اعلامی و اشیاء داده Declarative Rendering and Data Objects

• راه اندازی Vue Dev Tools Setting up Vue Dev Tools

• دستورالعمل ها و حلقه های For Directives and For Loops

• رویداد Handlers - دستورالعمل v-on Event Handlers - The v-on Directive

• اشکال در ابزارهای توسعه دهنده کروم A Bug in Chrome Dev Tools

• اصلاح کننده رویداد (توقف انتشار) و اتصال ویژگی Event Modifiers (Stop Propagation) and Attribute Binding

• پر کردن بخش جزئیات سفارش Filling up The Order Details Section

• کار با متدها Working with Methods

• ورودی کاربر و اتصال داده دو طرفه (قسمت 1) User Input and Two-Way Data Binding (Part 1)

• ورودی کاربر و اتصال داده دو طرفه (قسمت 2) User Input and Two-Way Data Binding (Part 2)

پروژه شماره 6 - برنامه لیست کارها Project #6 - To-Do List App

• ارائه پروژه - برنامه فهرست کارها Project Presentation - To-Do List App

• راه اندازی Vue JS Setting up Vue JS

• افزودن To-Dos Adding To-Dos

• تنظیم عملکرد Done & Undone Setting the Done & Undone Functionality

• استفاده از Localstorage برای بارگیری کارهای انجام شده Using Localstorage to Load To-dos

• قلاب چرخه حیات Lifecycle Hooks

• بارگیری داده ها از Localstorage Loading Data from Localstorage

• به روز رسانی Localstorage در Clear and Update Updating Localstorage on Clear and Update

پروژه شماره 6 - برنامه لیست کارها Project #6 - To-Do List App

• ارائه پروژه - برنامه فهرست کارها Project Presentation - To-Do List App

• راه اندازی Vue JS Setting up Vue JS

• افزودن To-Dos Adding To-Dos

• تنظیم عملکرد Done & Undone Setting the Done & Undone Functionality

• استفاده از Localstorage برای بارگیری کارهای انجام شده Using Localstorage to Load To-dos

• قلاب چرخه حیات Lifecycle Hooks

• بارگیری داده ها از Localstorage Loading Data from Localstorage

• به روز رسانی Localstorage در Clear and Update Updating Localstorage on Clear and Update

پروژه شماره 7 - پروژه بازی مسابقه با استفاده از Vue CLI Project #7 - Quiz Game Project using the Vue CLI

• ارائه پروژه - بازی مسابقه Project Presentation - Quiz Game

• یک برنامه Vue JS با Vue CLI ایجاد کنید Create a Vue JS Application with the Vue CLI

• صفحه بویلر کاربرد The Application Boiler Plate

• اجزای استفاده نشده و ساختار HTML را پاک کنید Clean up Unused Component and HTML Structure

• درخواست های HTTP با Axios HTTP Requests with Axios

• درخواست برای Open Trivia API Making Requests to the Open Trivia API

• نمایش داده های سوال در صفحه Showing the Question Data on the Page

• آرایه پاسخ - ویژگی های محاسبه شده The Answers Array - Computed Properties

• مخلوط کردن آرایه پاسخ ها Shuffling the Answers Array

• نمایش دکمه های رادیویی پاسخ ها Rendering the Answers Radio Buttons

• ارسال پاسخ Submitting the Answer

• ارائه نتیجه Presenting the Result

• گرفتن سوال بعدی Getting the Next Question

• مؤلفه امتیاز The Score Component

• انتقال داده به اجزای کودک Passing Data to Child Components

پروژه شماره 7 - پروژه بازی مسابقه با استفاده از Vue CLI Project #7 - Quiz Game Project using the Vue CLI

• ارائه پروژه - بازی مسابقه Project Presentation - Quiz Game

• یک برنامه Vue JS با Vue CLI ایجاد کنید Create a Vue JS Application with the Vue CLI

• صفحه بویلر کاربرد The Application Boiler Plate

• اجزای استفاده نشده و ساختار HTML را پاک کنید Clean up Unused Component and HTML Structure

• درخواست های HTTP با Axios HTTP Requests with Axios

• درخواست برای Open Trivia API Making Requests to the Open Trivia API

• نمایش داده های سوال در صفحه Showing the Question Data on the Page

• آرایه پاسخ - ویژگی های محاسبه شده The Answers Array - Computed Properties

• مخلوط کردن آرایه پاسخ ها Shuffling the Answers Array

• نمایش دکمه های رادیویی پاسخ ها Rendering the Answers Radio Buttons

• ارسال پاسخ Submitting the Answer

• ارائه نتیجه Presenting the Result

• گرفتن سوال بعدی Getting the Next Question

• مؤلفه امتیاز The Score Component

• انتقال داده به اجزای کودک Passing Data to Child Components

پروژه شماره 8 - روتر Vuex و Vue Project #8 - Vuex & Vue Router

• ارائه پروژه شماره 8 Presentation of Project #8

• مشکلات هنگام اجرای پروژه شماره 8 Issues When Running Project #8

• راه اندازی Vue Router Setting up Vue Router

• استفاده از Axios برای دریافت اطلاعات محصولات Using Axios to Get Products Data

• کار با Vuex Working with Vuex

• راه اندازی کنش ها و جهش ها - قسمت 1 Setting Up Actions and Mutations - Part 1

• راه اندازی کنش ها و جهش ها - قسمت 2 Setting Up Actions and Mutations - Part 2

• رندر کردن محصولات Rendering the Products

• افزودن محصولات به کیف Adding Products to Bag

• اجتناب از اقلام تکراری در کیف خرید Avoiding Repeated Items on Shopping Bag

• حذف اقلام از کیف Removing Items from Bag

• Mapstate Helper The Mapstate Helper

• لیست اقلام در کیف خرید Listing items in the Shopping Bag

• محاسبه مجموع سفارش Calculating the Order Total

پروژه شماره 8 - روتر Vuex و Vue Project #8 - Vuex & Vue Router

• ارائه پروژه شماره 8 Presentation of Project #8

• مشکلات هنگام اجرای پروژه شماره 8 Issues When Running Project #8

• راه اندازی Vue Router Setting up Vue Router

• استفاده از Axios برای دریافت اطلاعات محصولات Using Axios to Get Products Data

• کار با Vuex Working with Vuex

• راه اندازی کنش ها و جهش ها - قسمت 1 Setting Up Actions and Mutations - Part 1

• راه اندازی کنش ها و جهش ها - قسمت 2 Setting Up Actions and Mutations - Part 2

• رندر کردن محصولات Rendering the Products

• افزودن محصولات به کیف Adding Products to Bag

• اجتناب از اقلام تکراری در کیف خرید Avoiding Repeated Items on Shopping Bag

• حذف اقلام از کیف Removing Items from Bag

• Mapstate Helper The Mapstate Helper

• لیست اقلام در کیف خرید Listing items in the Shopping Bag

• محاسبه مجموع سفارش Calculating the Order Total