بوت‌کمپ جامع توسعه وب فول‌استک ۲۰۲۶ | آموزش کامل - آخرین آپدیت

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

مقدمه Introduction

• سرفصل‌های آموزشی Curriculum

• اینترنت چگونه کار می‌کند How Does the Internet Work

• وب‌سایت‌ها چگونه کار می‌کنند How Do Websites Work

• نکاتی برای موفقیت در دوره Tips For the Course

آشنایی با HTML Introduction To HTML

• HTML چیست؟ What is HTML?

• المان‌های تیتر (Heading) The Heading Element

• تست ویرایشگر Test Editor

• اولین کد HTML من My First HTML Code

• المان پاراگراف The Paragraph Element

• تگ‌های خودبسته (Self Closing) Self Closing Tags

• تمرین پروژه اول Project 1 Assignment

• پاسخ پروژه اول Project 1 Solution

HTML سطح متوسط Intermediate HTML

• المان لیست The List Element

• لیست‌های تو در تو Nested List

• ویژگی‌ها و المان لینک (Anchor) Attributes & Anchor element

• المان تصویر Image Element

• پروژه ۲ (پورتفولیو پروفایل) Project 2 (Profile Portfolio)

• پاسخ پروژه ۲ Project 2 Solution

• وب‌سایت‌های چند صفحه‌ای Multi Page Websites

• میزبانی وب‌سایت Website Hosting

• استقرار پروژه Deploy Project

CSS CSS

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

• نحوه افزودن CSS به صفحه HTML How to Add CSS To HTML Page

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

• رنگ‌ها Colors

CSS سطح متوسط Intermediate CSS

• مدل باکس (BOX Model) The BOX Model

• متون و فونت‌ها Texts & Fonts

• انواع نمایش (Display) Display Types

• مقایسه Grid و FlexBox Grid vs FlexBox

• موقعیت‌دهی (Relative, Static, Absolute, Sticky) Positioning(Relative, Static, Absolute, Sticky e.t.c)

• پروژه پروفایل (پروژه ۳) Profile Project(Project 3)

• مدیا کوئری (Media Query) Media Query

پروژه HTML و CSS (صفحه رزرو هتل) HTML & CSS Project (Hotel Booking Page)

• صفحه اصلی هتل Hotel Home Page

• استایل‌دهی صفحه اصلی Home Page Styling

• صفحه اتاق‌ها Rooms Page

• استایل‌دهی صفحه اتاق‌ها Rooms Page Styling

• صفحه رزرو Booking Page

• استایل‌دهی صفحه رزرو Booking Page Styling

• آپلود پروژه در گیت‌هاب Upload Project To Github

• میزبانی پروژه به عنوان وب‌سایت Host Project As Website

بوت‌استرپ (همراه با پروژه) Bootstrap (with project)

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

• راه‌اندازی (Setup) Setup

• مرور کلی و معرفی پروژه Project Overview & Intro

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

• Padding, Margin, Button, Container Padding, Margin, Button, Container

• Grid, Row, Col, Card grid, row,col,card

• بخش نظرات (Testimonials) testimonials

• بخش فراخوان (CTA) cta

• فوتر (Footer) footer

• فرم‌های بوت‌استرپ bootstrap forms

مقدمات جاوااسکریپت Javascript Introduction

• جاوااسکریپت چیست و کاربردهای آن What is Javascript & Uses

• تفاوت Java و JavaScript Java vs JavaScript

• اولین کد JS First JS Code

• کنسول (Console) The Console

• کامنت‌گذاری Comments

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

• متغیرها Variables

• قواعد نام‌گذاری Naming Conventions

• انواع داده‌ها Data Types

• نمادهای برنامه‌نویسی Programming Symbol

• عملیات ریاضی Arithmetic Operations

• متدهای ریاضی (Math Methods) Math Methods

• تمرینات ۱ و ۲ Task Assignment 1 & 2

• پاسخ تمرینات ۱ و ۲ Task 1 & 2 Solutions

• رشته‌ها (Strings) Strings

• کار با رشته‌ها - بخش ۱ String Manipulation Part 1

• کار با رشته‌ها - بخش ۲ String Manipulation Part 2

• کار با رشته‌ها - بخش ۳ String Manipulation Part 3

• مقایسه‌های برابری (== vs ===) Equality Comparison (== vs ===)

• تمرینات ۳ و ۴ Task Assignment 3 & 4

• پاسخ تمرینات ۳ و ۴ Task 3 & 4 Solutions

کنترل جریان برنامه Controlling Program Flow

• دستورات شرطی Conditional Statement

• دستور Switch Switch

• عملگر سه تایی (Ternary) Ternary Operator

• حلقه For For-Loop

• حلقه For Each For Each-Loop

• حلقه‌های While و Do While While & Do-While Loop

• دستورات Break و Continue Break & Continue

کار با ساختارهای داده Working with Data Structures

• آرایه‌ها Arrays

• متدهای آرایه Array Methods

• مپ کردن آرایه (متد map) Mapping an Array (the map() Method)

• اشیاء (Objects) چیستند؟ What are Objects

• ساخت و تغییر اشیاء Object Creation & Modification

• اشیاء تو در تو Nested Objects

• متدهای شیء Object Methods

• کلمه کلیدی "this" "this" keyword

• تمرینات ۵ و ۶ Tasks 5 & 6

• پاسخ تمرین ۵ Task 5 Solution

• پاسخ تمرین ۶ Task 6 Solution

توابع و کلاس‌ها Functions & Class

• توابع Functions

• توابع پیکانی (Arrow Functions) Arrow Function

• آرگومان‌ها و پارامترها Arguments & Parameters

• محدوده دسترسی (Scope) Scope

• کلاس‌ها Class

• سازنده (Constructor) Constructor

• وراثت (Inheritance) Inheritance

مدل شیء سند (DOM) The Document Object Model (DOM)

• DOM چیست What is DOM

• دستکاری DOM DOM Manipulation

• دستکاری DOM - بخش ۲ DOM Manipulation Part 2

گیت (Git) Git

• گیت چیست What is Git

• نصب گیت Git Installation

• چرخه حیات گیت Git Lifecycle

• افزودن گیت به پروژه Adding Git to a Project

• رهگیری تغییرات فایل‌ها Tracking file changes

• فایل ".gitignore" The ".gitignore" File

• تغییر نام کاربری و ایمیل گیت Git Username & email Modification

• شاخه‌ها و مدیریت آن‌ها در گیت Git Branches & Management

• بازگرداندن تغییرات Reverting Changes

گیت‌هاب (GitHub) GitHub

• گیت‌هاب چیست What is Github

• ورود به گیت‌هاب Login to Github

• مخزن (Repo) گیت‌هاب Github Repo

• کلون و پوش کردن در گیت‌هاب Clone & Push to GitHub

• راه‌اندازی SSH SSH Set-Up

بک‌اند Backend

• فول‌استک چیست What is Full-Stack

• بک‌اند The Backend

• سرور چیست What is a Server

• اپلیکیشن بک‌اند چیست What is a Backend App

• پایگاه داده چیست What is a Database

آشنایی با Node.js Node.js Introduction

• نود (Node) چیست What is node

• نصب نود Node Installation

• مدیریت پکیج‌های نود (NPM) Node Package Manager

• اولین اپلیکیشن نود ما Our First Node App

• Express.js چیست What is Express.js

پروژه ساده نود (اپلیکیشن Todo) Simple Node Project (Todo App)

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

• مقداردهی اولیه پروژه initialize Project

• فایل Package.json The Package.json File

• افزودن Express.js به پروژه Adding Express.js to project

• میان‌افزارها (Middleware) Middleware

• مسیرها (Routes) Routes

• درخواست GET The GET Request

• راه‌اندازی Postman Postman Setup

• اسکریپت شروع سفارشی Custom Start Script

• درخواست "POST" The "POST" Request

• داده‌های درون‌حافظه‌ای (InMemory) InMemory Data

• اندپوینت "PUT" The "PUT" Endpoint

• کامیت و پوش کد در مخزن Commit & Push Code to Repo

• اندپوینت "DELETE" The "DELETE" Endpoint

• تست جامع (End to End) End-To-End Testing

پایگاه داده Database

• پایگاه داده‌ها چیستند What are databases

• انواع پایگاه داده Types of database

• اصطلاحات دیتابیس Database Terminologies

SQL SQL

• مقدمه Introduction

• نصب MySQL MySQL Installations

• نصب برای کاربران مک‌بوک Installations for MacBooks Users

• مرور کلی Workbench Workbench Overview

• انواع داده‌های SQL SQL DataTypes

• سینتکس SQL SQL Syntax

کار عملی با MySQL Hands-On MySQL

• ساخت جدول Create table

• دستور Insert Insert Statement

• بازیابی داده‌ها Retrieve Data

• مرتب‌سازی داده‌ها Sorting Data

• محدود کردن نتایج Limiting Result

• به‌روزرسانی داده‌ها Update Data

• دستور Delete Delete Statement

• فیلتر کردن داده‌ها Filtering data

• کاراکترهای جایگزین (Wildcard) Wildcard

• توابع Functions

پروژه API محصولات (Node.js + MySQL) Product API Project (Node.js + MySQL)

• راه‌اندازی مخزن Repo Set-up

• ساخت پروژه و افزودن وابستگی‌ها Create Project & add Dependencies

• ساختاربندی پروژه Structure Project

• ساخت دیتابیس و جدول Create Database & Table

• پیکربندی دیتابیس Db Config

• مقایسه ESModule و Common ESModule vs Common

• اجرای اپلیکیشن Run App

• کنترلر محصول (Product Controller) Product Controller

• متدهای ساخت، ویرایش و حذف Create, Update, Delete Methods

• مسیرها Routes

• اتصال مسیر به فایل اصلی Connect Route to root file

• بررسی اتصال دیتابیس db connectivity check

• تست API API testing

• پوش کد در مخزن Push code to Repo

مبانی React React Fundamentals

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

• نحوه ساخت React App How to create ReactApp

• توضیح فایل‌ها و پوشه‌های React React Files & Folder Explained

• اولین کامپوننت ما Our First Component

• درک JSX Understanding JSX

• کامپوننت‌های قابل استفاده مجدد Reusable Component

• Props Props

React سطح متوسط (State, Lifecycle, Events, Navigation, Routing) Intermediate React (State, Lifecycle, Events, Navigation, Routing e.t.c)

• چرخه حیات و State در React React Lifecycle & State

• هوک UseState UseState Hook

• هوک UseEffect The UseEffect Hook

• استایل‌دهی Post CSS Post CSS Styling

• مدیریت رویدادها - بخش ۱ Event Handling Part 1

• مدیریت رویدادها - بخش ۲ Event Handling Part 2

• مسیریابی و ناوبری (Routing & Navigation) Routing & Navigation

پروژه فرانت‌اند (وب‌سایت وبلاگ با React و Bootstrap) Frontend Project (Blog Website Using React & Boostrap)

• مرور کلی پروژه Project Overview

• ساخت پروژه Create Project

• افزودن وابستگی‌ها Add Dependencies

• ساختاربندی پوشه‌ها Structure Folders

• متدهای API API Methods

• نوار ناوبری و فوتر Navbar & Footer

• صفحه اصلی Home Page

• صفحه درباره ما About Page

• صفحه تماس با ما Contact Page

• کامپوننت فرم پست Post Form Component

• صفحه پست - بخش ۱ Post Page Part 1

• صفحه پست - بخش ۲ Post Page Part 2

• رفع خطاها Error Fixed

• جزئیات پست وبلاگ - بخش ۱ Blog Post Details Part 1

• جزئیات پست وبلاگ - بخش ۲ Blog Post Details Part 2

• صفحه ۴۰۴ (یافت نشد) 404_Page_Not-Found

• پوش کد در مخزن گیت‌هاب Push Code To Github Repo

پروژه فول‌استک (مدیریت رویدادها) Full-Stack Project (Event Manager)

• مرور کلی پروژه Project Overview

• مرور طراحی مدل Model design overview

• راه‌اندازی پروژه Set-Up Project

• افزودن وابستگی‌ها Add Dependencies

• ساختاربندی پوشه Structure folder

• متغیرهای محیطی (Environment variables) Environment variables

• فایل پیکربندی Config file

مدل‌ها، میان‌افزارها و مسیرها Models, Middleware & Routes

• مدل کاربر User Model

• مدل رویداد Event Model

• مدل شرکت‌کننده Attendee Model

• مقداردهی اولیه دیتابیس و لینک روابط جداول Db Initialization & Tables Relationship Linking

• تست اتصال دیتابیس و اجرای اپلیکیشن Db Connection Test & Run App

• میان‌افزار احراز هویت (Auth Middleware) Auth Middleware

• مسیرها Routes

متدهای API و تست API Methods & Testing

• متدهای ثبت‌نام کاربر User registration methods

• تست API ثبت‌نام Registration API test

• متد ورود (Login) Login Method

• تست API ورود Login API testing

• متدهای دریافت رویدادها Get events methods

• تست API دریافت رویدادها Get events API testing

• متد ایجاد رویداد Create event method

• تست API ایجاد رویداد Create event API testing

• متد فیلتر رویداد Filter event method

• تست API فیلتر رویداد Filter event API testing

• متد ثبت‌نام شرکت‌کننده Attendee registration method

• تست API شرکت‌کننده Attendee API testing

• پوش کد در مخزن Push code to repo

بخش فرانت‌اند با React و Bootstrap Frontend Part using React, Boostrap

• ساخت پروژه Create project

• افزودن وابستگی‌ها Add Dependencies

• ساختاربندی پروژه Structure project

• متدهای API API Methods

• نوار ناوبری - بخش ۱ Navbar Part 1

• نوار ناوبری - بخش ۲ Navbar Part 2

• فوتر Footer

صفحات و مسیرها (خانه، احراز هویت، رویدادها) Pages & Routes (Home, Auth, Events)

• صفحه اصلی - بخش ۱ Home Page Part 1

• صفحه اصلی - بخش ۲ Home Page Part 2

• صفحه ثبت‌نام Registration Page

• صفحه ورود Login Page

• صفحه ۴۰۴ 404 Page

• صفحه رویداد - بخش ۱ Event Page Part 1

• صفحه رویداد - بخش ۲ Event Page Part 2

• صفحه رویداد - بخش ۳ Event Page Part 3

• رفع خطای صفحه رویداد Event Page Error Fix

• صفحه ایجاد رویداد Create-Event Page

• محافظت از مسیرها (Routes Protection) Routes Protection

• پوش در مخزن Push to repo

بخش استقرار ابری (AWS Cloud) Cloud Deployment Section (AWS Cloud )

• مقدمه‌ای بر فضای ابری Introduction to cloud

• ثبت‌نام و ورود به AWS Signup & Login to AWS

• ساخت دیتابیس ریموت Create Remote Database

• پیکربندی امنیتی VPC VPC Security Config

• تست اتصال دیتابیس Test Database Connection

• اتصال دیتابیس به سرویس بک‌اند Connect DB to backend service

• ساخت نمونه سرور EC2 Create EC2 Server Instance

• امنیت EC2 EC2 Security

• اتصال SSH به سرور SSH Into Server

• نصب نود روی سرور Install Node on server

• کپی سرویس بک‌اند به سرور Copy Backed service to server

• اجرای سرویس روی سرور Run Service on Server

• تست اپلیکیشن Test App

استقرار ابری فرانت‌اند (AWS S3) Frontend Cloud Deployment (AWS S3)

• آماده‌سازی پروژه فرانت‌اند Prepare frontend project

• ساخت S3 Bucket Create s3 bucket

• سطح دسترسی Bucket Bucket permission

• استقرار فرانت‌اند Deploy Frontend

• تست نهایی جامع End to End Testing