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

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

مقدمه‌ای بر توسعه وب Introduction to Web Development

• مقدمه‌ای بر توسعه وب Introduction to Web Development

• نصب VS Code و آماده‌سازی محیط توسعه Installing VS Code & Setting up our environment

• تاریخچه توسعه وب History of Web Development

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

• جلسه تعاملی درباره توسعه وب Interactive session on Web Development

• مبانی اولیه توسعه وب Web Development Basics

مبانی HTML HTML Basics

• آشنایی با HTML Introduction to HTML

• تیترها و پاراگراف‌ها Headings and Paragraphs

• فرمت‌بندی متن: ضخیم، کج، زیرخط و غیره Formatting Text: Bold, Italics, Underline, etc.

• کامنت‌ها و فضاهای خالی در HTML HTML Comments and Whitespace

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

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

• لیست‌ها: مرتب و نامرتب Lists: Ordered and Unordered

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

• فرم‌های HTML: ورودی‌ها، لیبل‌ها و دکمه‌ها HTML Forms: Inputs, Labels, and Buttons

HTML پیشرفته Advanced HTML

• المان‌های فرم: رادیو، چک‌باکس، انتخاب‌گر و ناحیه متنی Form Elements: Radio, Checkbox, Select, Textarea

• المان‌های Inline در مقابل Block و تگ‌های معنایی HTML5 Inline vs Block Elements & HTML5 Semantic Tags

• موجودیت‌های HTML و کاراکترهای خاص HTML Entities & Special Characters

• جایگذاری صوت و ویدیو Audio and Video Embedding

• استفاده از iFrames و جاسازی محتوا iFrames and Embedding Content

• استفاده از متا تگ‌ها و مبانی SEO Using Meta Tags and SEO Basics

• لینک‌های داخلی در مقابل خارجی Internal vs External Links

• بهترین روش‌ها برای نوشتن HTML تمیز Best Practices for Writing Clean HTML

پروژه اول: یوتیوب بدون حواس‌پرتی Project 1 - Distraction Free YouTube

• مقدمه پروژه یوتیوب بدون حواس‌پرتی Introduction to DF YouTube

• افزودن ویدیوها Adding Videos

• ایجاد صفحات بیشتر Creating More Pages

• جمع‌بندی پروژه یوتیوب Wrapping Up DF YouTube

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

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

• سینتکس و انتخاب‌گرهای CSS CSS Syntax and Selectors

• رنگ‌ها در CSS Colors in CSS

• مدل جعبه‌ای (Box Model) در CSS Box Model in CSS

• واحدها در CSS Units in CSS

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

• پس‌زمینه‌ها و حاشیه‌ها Backgrounds and Borders

• فاصله‌های Margin و Padding Margin and Padding

• خاصیت Display The Display Property

• جای‌گذاری (Positioning) در CSS Positioning in CSS

CSS پیشرفته Advanced CSS

• فلکس‌باکس (Flexbox) در CSS Flexbox in CSS

• سیستم گرید (Grid Layout) در CSS Grid Layout in CSS

• طراحی ریسپانسیو با Media Queries Responsive Design with Media Queries

• متغیرها و ویژگی‌های سفارشی CSS CSS Variables and Custom Properties

• انیمیشن‌ها و Transitionها در CSS Transitions and Animations in CSS

• تغییر شکل‌ها (Transformations) در CSS CSS Transformations

پروژه دوم: طراحی وب‌سایت پورتفولیو شخصی با HTML و CSS Project 2: Personal Portfolio Website using HTML & CSS

• مقدمه و آماده‌سازی پروژه Introduction & Project Setup

• طراحی نوار ناوبری (Navbar) Designing the Navbar

• افزودن گوگل فونت به وب‌سایت پورتفولیو Adding Google Fonts to our Portfolio Website

• طراحی بخش Hero Designing the Hero Section

• افزودن دکمه‌ها به بخش Hero Adding buttons to Hero Section

• افزودن بخش پروژه‌ها به پورتفولیو Adding Projects Section to our Portfolio Website

• افزودن افکت‌های Hover به وب‌سایت Adding Hover Effects to our Portfolio Website

• ریسپانسیو کردن وب‌سایت پورتفولیو Making the Portfolio Website Responsive

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

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

• متغیرها و انواع داده‌ها در جاوا اسکریپت Variables and Data Types in JavaScript

• قوانین نام‌گذاری متغیرها Rules for Naming Variables in JavaScript

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

• دستورات شرطی If Else If Else Statements in JavaScript

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

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

• دستورات Break و Continue Break and Continue in JavaScript

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

• آرایه‌ها در جاوا اسکریپت Arrays in JavaScript

• متدهای آرایه در جاوا اسکریپت Array Methods in JavaScript

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

• استفاده از Template Literals Template Literals in JavaScript

• متدهای رشته در جاوا اسکریپت String Methods in JavaScript

کار با DOM (دستکاری مدل شیء مدل) DOM Manipulation

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

• دسترسی به DOM Accessing the DOM

• انتخاب المان‌ها Selecting Elements

• انتخاب المان با استفاده از ID (getElementById) getElementById: Selecting HTML Element using ID

• انتخاب المان‌ها با نام کلاس (getElementsByClassName) getElementsByClassName: Selecting HTML Elements using class name

• انتخاب المان‌ها با نام تگ (getElementsByTagName) getElementsByTagName: Selecting HTML Elements using tag name

• استفاده از querySelector و querySelectorAll querySelector & querySelectorAll: Selecting Elements using CSS Selector

DOM پیشرفته Advanced DOM Manipulation

• تغییر محتوا و استایل با جاوا اسکریپت Changing Content & Styling using JavaScript

• کار با اتریبیوت‌ها و کلاس‌ها در JS Working with Attributes and Classes in JavaScript

• ایجاد، افزودن و حذف المان‌ها در JS Creating, Appending, and Removing Elements in JavaScript

رویدادها در جاوا اسکریپت Events in JavaScript

• مقدمه‌ای بر رویدادها (Events) Introduction to Events in JavaScript

• شنونده‌های رویداد (Event Listeners) Event Listeners in JavaScript

• انتشار و تفویض رویداد (Propagation & Delegation) Event Propagation and Delegation

• جلوگیری از رفتارهای پیش‌فرض و توقف انتشار Preventing Default Actions and Stopping Propagation

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

• کار با localStorage در جاوا اسکریپت Working with localStorage in JavaScript

• پردازش JSON در جاوا اسکریپت Parsing JSON in JavaScript

• مدیریت خطاها (Error Handling) Error Handling in JavaScript

• استفاده از setTimeout و setInterval setTimeout & setInterval

پروژه سوم: اپلیکیشن لیست انجام کار (Todo List) با HTML، CSS و JS Project 3: Todo List App using Pure HTML, CSS & JavaScript

• مقدمه و آماده‌سازی پروژه Todo Introduction & Project Setup

• افزودن Event Listener به دکمه افزودن Adding Event Listeners to "Add Todo" Button

• ذخیره لیست‌ها در localStorage Saving Todos to localStorage

• نمایش لیست‌ها روی صفحه Populating Todos on the Screen

• برنامه‌ریزی چک‌باکس‌ها برای پاسخ به کلیک Making the checkboxes respond to clicks

• به‌روزرسانی وضعیت لیست‌ها هنگام کلیک Updating Todos when checkboxes are clicked

• افزودن دکمه حذف آیتم Adding Delete Todo Button

• بهینه‌سازی حذف و رفع باگ‌ها Refining Delete Todos and Bug Fixes

• افزودن دیالوگ تایید قبل از حذف Adding Confirm Dialogue before deleting todos

• پیاده‌سازی منطق پاک‌سازی آیتم‌های تکمیل شده Adding Logic for Clear Completed Todos

کار با Node.js Working with Node.js

• مقدمه‌ای بر Node.js Introduction to Node.js

• نصب Node.js و npm Installing Node.js and npm

• استفاده از پکیج‌های npm Using npm Packages

• ساخت یک اپلیکیشن ساده با Node.js Creating a Simple Node.js Application

• ماژول‌ها در Nodejs Modules in Nodejs

• مقایسه ماژول‌های ES6 و CommonJs Es6 vs CommonJs Modules

• توابع Wrapper در Node.js Node.js Wrapper Function

• جاوا اسکریپت همگام (Sync) در مقابل ناهمگام (Async) Synchronous vs Asynchronous JavaScript

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

• Promiseها در جاوا اسکریپت Promises in JavaScript

• استفاده از Async Await Async Await in JavaScript

• کار با Fetch API Fetch API in JavaScript

توسعه وب با استفاده از Express.js Web Development Using Express.js

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

• نصب Express js Installing Express js

• درخواست‌های GET, POST, PUT و DELETE GET, POST, PUT & DELETE requests

• پارامترهای Query Query Parameters

• ارائه فایل‌های استاتیک Serving Static Files

• رندر کردن فایل‌های HTML Rendering HTML Files

• موتورهای Template و Ejs Template Engines & Ejs

• استفاده از حلقه‌ها و شرط‌ها در EJS Using Loops & Conditions in EJS

کار با پایگاه داده MongoDB Working with MongoDB

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

• نصب MongoDB Installing MongoDB

• اتصال MongoDB به اپلیکیشن Express Connecting MongoDB to an Express App

• ایجاد و خواندن داده‌ها در MongoDB Creating and Reading in MongoDB

• به‌روزرسانی و حذف داده‌ها در MongoDB Updating and Deleting in MongoDB

• عملگرهای کوئری و فیلتر کردن در MongoDB Query Operators and Filtering in MongoDB

کنترل نسخه: Git برای توسعه‌دهندگان وب Version Control: Git for Web Developers

• مقدمه‌ای بر Git و GitHub Introduction to Git and GitHub

• نصب Git Installing Git

• گردش کار (Workflow) پایه در Git Basic Git Workflow

• نوشتن دستورات برای گردش کار گیت Writing commands for git workflow

• کلون کردن یک مخزن (Repository) Cloning a repository

• ردیابی و مدیریت تغییرات Tracking and managing changes

• ایجاد فایل gitignore Creating a gitignore file

• حذف فایل‌ها از مخزن گیت Removing files from git repository

• شاخه ها (Branches) در Git Branches in Git

• ادغام شاخه‌ها و حل تداخلات (Merge Conflict) Merging Branches & Merge Conflict

• کار با Github Working with Github

• کار با مخازن Remote Working with Remote Repositories

• کار با Github Desktop Working with Github Desktop

• استفاده از Git Stash Git Stash

• استفاده از گیت در VS Code Using git in VS Code

• استفاده از افزونه GitLens در VS Code Using GitLens VS Code Extension

ضروریات React React Essentials

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

• درک فایل‌های مهم React Understanding Important React Files

• کامپوننت‌های React React Components

• استفاده از Props در React React Props

• مدیریت Stateها در React States in React

• مدیریت رویدادها در React Event Handling in React

• لیست‌ها و کلیدها (Keys) در React Lists and Keys in React

• رندرینگ شرطی (Conditional Rendering) Conditional Rendering

• فرم‌ها و کامپوننت‌های کنترل‌شده Form & Controlled Components

• استفاده از CSS در React CSS in React

• سیستم مسیریابی React Router DOM React Router DOM

• استفاده از هوک useEffect در React useEffect Hook in React

• پروژه React: ساخت اپلیکیشن یادداشت‌ها React Project: Lets build a Notes app using React