دوره کامل توسعه وب

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

قبل از سفر توسعه دهنده وب Before web dev Journey

• معرفی دوره - نقشه راه Course Introduction - Roadmap

• با مربی خود آشنا شوید - Hitesh Meet your Instructor - Hitesh

• بیایید در مورد تبلیغات هوش مصنوعی صحبت کنیم Lets talk about AI hype

• محدوده حقوق و مهارت های شغلی Jobs salary range and skills

• چه ابزارهایی برای توسعه وب نیاز دارید What tools you need for web development

• چگونه ویرایشگر کد خود را راه اندازی کنیم How to setup your code editor

فایل های کد - از اینجا دانلود کنید Code files - Download here

• دانلود فایل های دوره Download course files

مبانی توسعه وب Basics of web development

• اینترنت چگونه کار می کند How does the internet works

• تصویر بزرگی از برنامه وب A big picture of web application

• Frontend Backend و APIها Frontend backend and APIs

HTML را یاد بگیرید Learn HTML

• HTML چیست What is HTML

• Emmet، سرفصل‌ها و بلوک در مقابل درون خطی Emmet, headings and block vs inline

• جداول و فرم ها در HTML Tables and forms in HTML

• ساخت یک صفحه HTML معنایی Building a semantic HTML page

• چند رسانه ای و ARIA در HTML MultiMedia and ARIA in HTML

• یک مسابقه در HTML A quiz on HTML

چالش های عملی HTML Hands-On HTML Challenges

• یک عنوان ساده ایجاد کنید Create a Simple Heading

• یک پاراگراف با پیوند ایجاد کنید Create a Paragraph with a Link

• یک Tooltip در Hover ایجاد کنید Create a Tooltip on Hover

• یک دکمه ایجاد کنید Create a Button

• یک لیست نامرتب ایجاد کنید Create an Unordered List

• یک جدول ساده بسازید Create a Simple Table

• یک فرم با فیلدهای ورودی ایجاد کنید Create a Form with Input Fields

• یک فرم با منوی کشویی ایجاد کنید Create a Form with a Dropdown Menu

• یک تصویر با متن جایگزین ایجاد کنید Create an Image with Alt Text

• یک هایپرلینک ایجاد کنید که در یک برگه جدید باز شود Create a Hyperlink that Opens in a New Tab

• یک نوار پیشرفت ایجاد کنید Create a Progress Bar

با CSS آشنا شوید Learn about CSS

• وضعیت فعلی CSS The current state of CSS

• شما می توانید css را در 3 مکان بنویسید You can write css at 3 places

• ساخت یک پروژه وب - صفحه ورود Building a web project - Login page

• مسترکلاس بر روی انتخابگرهای CSS Masterclass on CSS selectors

• مدل جعبه، عناصر درون خطی و بلوک Box model, inline and block elements

• پروژه Navbar با عنصر شبه Navbar project with Pseudo element

• نوار ناوبری سبک توییتر در CSS Twitter style navbar in CSS

• نوارهای ناوبری کشویی و موقعیت ها Dropdown navbars and positions

• یک پروژه قالب سفارشی بزودی بسازید Build a custom coming soon template Project

• Flexbox Masterclass Flexbox Masterclass

• با چیدمان شبکه در CSS آشنا شوید - آن را دوست خواهید داشت Meet grid layout in CSS - You will love it

• Grid Masterclass Grid Masterclass

• تکلیف ساخت کارت از کدپن Assignment to build cards from codepen

• نقاط وقفه برای تبلت موبایل و وب Breakpoints for mobile tablet and web

• دست در ادغام بوت استرپ Hands on Bootstrap integration

• تکلیف - با این طرح یک صفحه کامل بسازید Assignment - Build a complete page with this design

• یک مسابقه در CSS A quiz on CSS

چالش های عملی CSS Hand-On CSS Challenges

• تغییر رنگ متن Change Text Color

• استایل یک دکمه Style a Button

• یک حاشیه چین دار با شعاع حاشیه اضافه کنید Add a Dashed Border with Border Radius

• استایل دادن به متن با خواص فونت Styling Text with Font Properties

• یک جعبه با Padding و Margin ایجاد کنید Create a Box with Padding and Margin

• با استفاده از Border Radius یک دایره ایجاد کنید Create a Circle Using Border Radius

• یک Box Shadow به یک عنصر اضافه کنید Add a Box Shadow to an Element

• موقعیت ها در CSS Positions In CSS

• یک طرح بندی Flexbox پاسخگو ایجاد کنید Create a Responsive Flexbox Layout

• یک طرح بندی شبکه ای 3x3 ایجاد کنید Create a 3x3 Grid Layout

Tailwind CSS را یاد بگیرید Learn Tailwind CSS

• راه اندازی Tailwind با CDN و NodeJS Tailwind setup with CDN and NodeJS

• پروژه صفحه ورود به سیستم آماده تولید Production ready login screen project

• پتانسیل کامل tailwind css Full potential of tailwind css

• نحوه ساخت طراحی واکنشگرا در tailwind How to build responsive design in tailwind

• هر طرحی را با Tailwind - Masterclass بسازید Build any layout with Tailwind - Masterclass

• مسابقه در Tailwind A quiz on Tailwind

چالش های عملی TailwindCSS Hands-On TailwindCSS Challenges

• یک دکمه را با Tailwind CSS سبک کنید Style A Button with Tailwind CSS

• یک Div را با استفاده از Flexbox مرکز کنید Center a Div Using Flexbox

• یک طرح بندی شبکه ای پایه ایجاد کنید Create a Basic Grid Layout

• با استفاده از Tailwind CSS، Box Shadow را روی یک کارت اعمال کنید Apply Box Shadow to a Card Using Tailwind CSS

• با استفاده از Tailwind CSS یک شکل دونات ایجاد کنید Create a Donut Shape Using Tailwind CSS

• افکت Blur را به تصویر اضافه کنید Add Blur Effect to an Image

• با استفاده از Tailwind CSS یک دکمه رنگی گرادیان ایجاد کنید Create a Gradient Colored Button Using Tailwind CSS

• با استفاده از Tailwind CSS یک مربع مربع چرخان ایجاد کنید Create a Rotating Square Box Using Tailwind CSS

بنیاد JS را یاد بگیرید Learn JS Foundation

• داستان جاوا اسکریپت - از کنسول تا موتور v8 Javascript story - from console to v8 engine

• چگونه جاوا اسکریپت کد را اجرا می کند - پشت صحنه How javascript executes the code - Behind the scene

• یک مسابقه کوچک JS A mini JS quiz

• انواع داده ها، متغیرها و ثابت ها در جاوا اسکریپت Datatypes, variables and constants in Javascript

• عملیات در جاوا اسکریپت Operations in javascript

• اصول اولیه در جاوا اسکریپت Primitives in javascript

• غیر اولیه در جاوا اسکریپت Non Primitives in javascript

• پنج چالش در مورد شرایط در جاوا اسکریپت Five challenges on conditions in javascript

• مواجهه با ده چالش در آرایه و متدها Facing ten challenges in Array and methods

• یک مسابقه در آرایه A quiz on Array

• آشنایی با حلقه ها در جاوا اسکریپت Introduction to loops in javascript

• 6 چالش حلقه در جاوا اسکریپت را شکست دهید Defeat 6 loop challenges in Javascript

• ده چالش حلقه برای یادگیری انواع حلقه ها در جاوا اسکریپت Ten loop challenges to learn all kind of loops in javascript

• مسابقه در حلقه A quiz on Loops

• تابع، تابع فلش، THIS و زمینه در جاوا اسکریپت Function, arrow function, THIS and context in javascript

• تابع مرتبه بالاتر و توابع تو در تو در جاوا اسکریپت Higher order function and nested functions in javascript

چالش های عملی بنیاد JS Hands-On JS Foundation Challenges

• بازی با انواع Playing with Types

• بازی با متغیرها Playing with Variables

• آرایه ها و روش ها Arrays and Methods

• حلقه ها Loops

• توابع مرتبه بالاتر و توابع پیکان Higher-Order Functions and Arrow Functions

• توابع و زمینه تو در تو Nested Functions and Context

جاوا اسکریپت - OOPS Javascript - OOPS

• یک استاد کلاس در مورد نمونه های اولیه در جاوا اسکریپت A masterclass on prototypes in javascript

• سازنده عملکردی و خطاها Functional constructor and Errors

• کلاس ها اشیاء و ارث در جاوا اسکریپت Classes Objects and inheritance in javascript

• کپسوله سازی، چند شکلی، انتزاع و تنظیم کننده ها Encapsulation, Polymorphism, Abstraction and getters setters

• یک مسابقه OOP در جاوا اسکریپت An OOP quiz in javascript

جاوا اسکریپت عملی - چالش های OOPS Hands-On Javascript - OOPS Challenges

• نمونه های اولیه در جاوا اسکریپت Prototypes in JavaScript

• سازنده عملکردی و خطاها Functional Constructor and Errors

• کلاس ها، اشیاء، و وراثت Classes, Objects, and Inheritance

• کپسوله سازی، چند شکلی، انتزاع، و گتر/ستتر Encapsulation, Polymorphism, Abstraction, and Getters/Setters

جاوا اسکریپت در مرورگر - DOM و BOM Javascript in Browser - DOM and BOM

• مبانی DOM و BOM در جاوا اسکریپت DOM and BOM basics in javascript

• حل 5 چالش DOM Solving 5 challenges of DOM

• فینال DOM با 5 چالش دیگر DOM finale with 5 more challenges

JS پیشرفته Advanced JS

• جاوا اسکریپت ناهمزمان با حلقه رویداد Asynchronous Javascript with event loop

• بسته شدن در جاوا اسکریپت Closures in javascript

• وعده و وعید زنجیر Promises and promise chaining

• وراثت اولیه در جاوا اسکریپت Prototypal Inheritance in javascript

• این و زمینه الزام آور THIS and binding context

• Aync-انتظار و وعده همه Aync-await and Promise all

• Iterator و ژنراتورها در جاوا اسکریپت Iterator and generators in javascript

• ماژول های ES6 و CommonJS ES6 Modules and CommonJS

• آزمون در مورد موضوعات پیشرفته جاوا اسکریپت Quiz on advance topics of Javascript

چالش های دستی و پیشرفته JS Hands-On Advanced JS Challenges

• جاوا اسکریپت ناهمزمان با حلقه رویداد Asynchronous JavaScript with Event Loop

• بسته شدن در جاوا اسکریپت Closures in JavaScript

• وراثت نمونه اولیه در جاوا اسکریپت Prototypal Inheritance in JavaScript

• این و زمینه الزام آور THIS and Binding Context

• Async-Await و Promise.all Async-Await and Promise.all

• Iterators و Generators در جاوا اسکریپت Iterators and Generators in JavaScript

پروژه ها در JS Projects in JS

• نسخه ی نمایشی پروژه 1 - کار با ذخیره سازی محلی Demo of project 1 - Todo with local Storage

• یک کار در آرایه اضافه کنید Add a task in array

• مدیریت حافظه محلی و رویداد DOM Handling local storage and DOM event

• حباب رویداد و عملیات CRUD Event bubbling and CRUD operations

• نسخه ی نمایشی پروژه مدیریت API Demo of API handling project

• هر نوع API را در کد خود مدیریت کنید Handle any type of API in your code

• نسخه ی نمایشی برنامه تجارت الکترونیک Project 3 Demo of Project 3 Ecommerce app

• ساخت صفحه سبد خرید تجارت الکترونیک Building ecommerce cart page

• تکلیف پروژه 3 Project 3 assignment

• نسخه ی نمایشی پروژه 4 Expense Tracker Demo of project 4 Expense Tracker

• ردیاب هزینه با ذخیره‌سازی محلی و تفکیک رویداد Expense tracker with localstorage and event deligation

• نسخه ی نمایشی پروژه 5 - برنامه مسابقه Demo of project 5 - quiz application

• ساخت یک برنامه مسابقه کامل Building a complete quiz app

Git و Github | کنترل نسخه اصلی Git and Github | Master version control

• مقدمه ای بر سری GIT Introduction to GIT series

• Git init و پوشه hidden Git init and hidden folder

• Git commit و لاگ می کند Git commits and logs

• Git داخلی کار و تنظیمات Git internal working and configs

• Git ادغام و تضادهای git Git merge and git conflicts

• Git Diff و stashing Git Diff and stashing

• Rebase Git آنقدرها هم ترسناک نیست Git rebase is not that scary

• بینش فشار دادن کد به github Insight of pushing code to github

• نحوه مشارکت در درخواست کشش و منبع باز How to make Pull Request and Open Source contribution

• یک مسابقه در GIT و Github A quiz on GIT & Github

Journey of Backend با NodeJS و پروژه ها Journey of Backend with NodeJS and Projects

• Backend - NodeJS LibUV و کد منبع Backend - NodeJS LibUV and source code

• مدیریت فایل ها در Nodejs به عنوان پروژه Handling files in Nodejs as Project

• سرور Nginx خود را با NodeJS بسازید Build your own Nginx server with NodeJS

• معماری رویداد محور - لاگر خود را بسازید Event Driven Architecture - Build your own logger

مقدمه ای بر پایگاه های داده Introduction to Databases

• مقدمه ای بر پایگاه های داده Introduction to databases

• SQL در مقابل پایگاه های داده NOSQL SQL vs NOSQL Databases

• یک تور سریع از MongoDB A Quick tour of MongoDB

پروژه مگا در باطن با MongoDB Mega project in backend with MongoDB

• مجموعه باطن کامل - راه اندازی Complete backend series - Launch

• ساخت وب سرور با گره و bun Building web server with node and bun

• دوره تصادف سریع با تست پستچی Express crash course with postman testing

• تست ها و مستندات را با Postman و Deployment بنویسید Write tests and documentation with Postman and deployment

• ورود به سیستم را با مورگان و وینستون انجام دهید Advance logging with morgan and winston

• از ایده تا طراحی پایگاه داده From idea to Database design

• طراحی پایگاه داده برای videoTube Database design for videoTube

• ساختار پروژه Backend Backend project structure

• پایگاه داده را به صورت حرفه ای در MERN متصل کنید Connect database professionally in MERN

• خطای استاندارد و پاسخ از سرور در MERN Standarized error and response from server in MERN

• مسیرهای بررسی سلامت و آزمایش با پستچی Healthcheck routes and testing with postman

• راهنمای ساخت مدل‌ها در MongoDB با افزونه تجمع A guide to build models in MongoDB with aggregation plugin

• قلاب ها و روش ها در مونگوس با JWT Hooks and methods in mongoose with JWT

• نحوه مدیریت فایل ها در برنامه MERN How to handle files in MERN application

• ثبت نام با Ultimate Debugging و Refractoring Registration with Ultimate debugging and refractoring

• نحوه نوشتن کنترل کننده ورود در باطن MERN How to write login controller in MERN backend

• نحوه ایجاد نشانه رفرش جدید در باطن MERN How to generate new refresh token in MERN backend

• نحوه نوشتن میان افزار در باطن MERN How to write middleware in MERN backend

• CRUD را در باطن MERN تمرین کنید Practice CRUD in MERN backend

• نحوه دریافت داده های پیچیده با خط لوله تجمع در MongoDB How to get complex data with aggregation pipeline in MongoDB

• یک ماموریت پستچی برای شما در مسیرها A postman assignment for you in routes

• تکلیف پروژه مگا باطن Mega backend project assignment

خطوط لوله تجمع پیشرفته MongoDB MongoDB advance aggregation pipelines

• راه اندازی توافقنامه MongoDB MongoDB agreegation setup

• گروه بندی در MongoDB Grouping in MongoDB

• جمع گروه و بیشتر Group sum and more

• برخورد با آرایه ها به صورت تجمعی Dealing with arrays in aggregation

• مطابقت و خط لوله پروژه Match and project pipeline

• همه عملگرهای تجمع را مطابقت دهید Match all operators of aggregation

• جستجو در تجمع MongoDB Lookup in MongoDB aggregation

یک دوره مگا در React with projects - 10 پروژه A mega course on React with projects - 10 projects

• نقشه راه واکنش React Roadmap

• پروژه های واکنش ایجاد کنید Create react projects

• جریان واکنش و ساختار را درک کنید Understand the react flow and structure

• کتابخانه react و JSX خود را ایجاد کنید Create your own react library and JSX

• چرا به قلاب و پروژه نیاز دارید Why you need hooks and project

• DOM مجازی، فیبر و آشتی Virtual DOM, Fibre and reconciliation

• Tailwind و Props در reactjs Tailwind and Props in reactjs

• ساخت یک پروژه react bgChanger Building a react project bgChanger

• useEffect، useRef و useCallback با 1 پروژه useEffect, useRef and useCallback with 1 project

• قلاب های سفارشی در react | پروژه ارز Custom hooks in react | Currency Project

• دوره آموزشی خرابی روتر React React router crash course

• 12 Context API در react | مفهوم را دریافت کنید 12 Context API in react | get the concept

• یک حالت روشن در حالت تاریک در reactjs با api متنی بسازید Build a dark mode light mode in reactjs with context api

• Context API با حافظه محلی Context API with local Storage

یک سیستم احراز هویت کامل پشته با mongoDB در NextJS بسازید Build a full stack Authentication system with mongoDB in NextJS

• Nextjs پشته کامل را تأیید می کند Nextjs auth full stack

• ثبت نام و وارد شوید Signup and login

• میان افزار در nextjs Middleware in nextjs

• ایمیل تایید کاربر در Nextjs User verification email in Nextjs

• استقرار NextJS در Vercel NextJS Deployment to Vercel

با NextJS و Appwrite یک سیستم QnA تمام پشته بسازید Build a full stack QnA system with NextJS and Appwrite

• ساخت یک کلون سرریز پشته با Next.js و Appwrite Building a stack overflow clone with Next.js and Appwrite

• بیایید Stack Overflow را با Next.js و Appwrite بسازیم Let's build Stack overflow with Next.js and Appwrite

• راه اندازی Appwrite و Next.js برای پروژه تمام پشته Appwrite and Next.js setup for full stack project

• مدل سازی داده ها در Appwrite با Node SDK Data modelling in Appwrite with Node SDK

• Zustand در Next.js با ذخیره سازی دائمی Zustand in Next.js with persistent storage

• دوره خرابی Appwrite Next.js Zustand Auth Appwrite Next.js Zustand Auth crash course

• مدیریت تنظیمات کاربر در Appwrite Handle User prefs in Appwrite

• رأی مثبت و منفی پیچیده، بررسی اجزای سرریز پشته، پروژه Complex upvote and downvote, Review of components for stack overflow , Project

مستقر کنید Deploy

• Deploy - مجموعه ای در مورد استقرار کد Deploy - A series on deployment of code

• نحوه راه اندازی VPC برای استقرار How to setup VPC for deployment

• نحوه پیکربندی ngnix در VPS برای اولین بار How to configure ngnix on VPS for the 1st time

• نحوه اضافه کردن محدودیت نرخ در ngnix How to add rate limiting in ngnix

• 05 نحوه پیکربندی دامنه به VPS 05 How to configure domain to a VPS

• نحوه نصب SSL روی ngnix در اوبونتو How to install SSL on ngnix on Ubuntu

• نحوه استقرار node api با ngnix در VPS How to deploy node api with ngnix on VPS

• Vercel خودتان در VPS - Coolify Your own Vercel on VPS - Coolify

ساختن هوش مصنوعی SAAS را با NextJS، Prisma، NeonDB تقویت کرد Building AI powered SAAS with NextJS, Prisma, NeonDB

• بیایید با Next.js و Cloudinary یک SAAS مجهز به هوش مصنوعی بسازیم Lets build an AI powered SAAS with Next.js and Cloudinary

• نحوه پیکربندی میان افزار برای اعتبارسنجی کارمند How to configure middleware for clerk auth

• نحوه راه اندازی clerk auth در Next.js How to setup clerk auth in Next.js

• Prisma را با NeonDB برای SAAS خود راه اندازی کنید Setup Prisma with NeonDB for your SAAS

• نحوه آپلود هر چیزی در ابری How to upload anything on cloudinary

• همه آنچه در مورد کامپوننت تصویر Cloudinary Next.js نیاز دارید All that you need about Cloudinary Next.js image component

• نحوه مدیریت آپلود ویدیو در Next.js How to handle video upload in Next.js

• پیش نمایش ویدیوی هوشمند با هوش مصنوعی ابری Smart video preview with cloudinary AI

• 09 جمع بندی نهایی و توصیه ویژگی های آینده 09 Final sum-up and future feature recommendation

خداحافظ Farewell

• خداحافظ Farewell