آموزش توسعه وب Full Stack با Django 5، TailwindCSS، HTMX

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

مقدمه Introduction

• نمای کلی پروژه دوره جنگو Overview of the Django course project

• الزامات فنی این دوره Technical requirements for this course

• مروری بر برنامه درسی Curriculum overview

• چگونه می توان کمک گرفت How to get help

• کد پروژه جنگو را از کجا دریافت کنیم Where to get the Django project code

اصول HTML HTML Fundamentals

• عناصر سر و بدن The head and body elements

• بررسی: عناصر سر و بدن Review: the head and body elements

• عناصر بلوک و درون خطی Block and inline elements

• بررسی: بلوک و عناصر درون خطی Review: block and inline elements

تمام عناصر اصلی HTML All the main HTML elements

• سرفصل ها (h1 تا h6) Headings (h1 to h6)

• بیایید چند عنوان را کدگذاری کنیم! Let's code some headings!

• پاراگراف های (ص) Paragraphs (p)

• پیوندها (الف) Links (a)

• بیایید یک صفحه متنی HTML را کدنویسی کنیم! Let's code a text HTML page!

• تصاویر (IMG) Images (img)

• فهرست ها (ul، ol، و li) Lists (ul, ol, and li)

• بیایید یک صفحه کامل HTML را کدنویسی کنیم! Let's code a full HTML page!

• Divs و Spans Divs and Spans

فرم های HTML HTML Forms

• مقدمه ای بر فرم های HTML Introduction to HTML forms

• فیلدهای ورودی متن HTML (ورودی) HTML text input fields (input)

• بیایید یک فرم HTML را کد کنیم! Let's code an HTML form!

• چک باکس های HTML و دکمه های رادیویی (ورودی) HTML checkboxes and radio buttons (input)

• مناطق متن HTML (textarea) HTML text areas (textarea)

• کشویی HTML (انتخاب و گزینه) HTML dropdowns (select and option)

• فرم ارسالی (روش و اقدام) Form submissions (method and action)

• قابلیت دسترسی به فرم و تکمیل خودکار Form accessibility and autocomplete

• بیایید یک فرم کامل HTML با انواع ورودی های متعدد کدنویسی کنیم! Let's code a complete HTML form with multiple input types!

HTML معنایی Semantic HTML

• مقدمه ای بر HTML معنایی Introduction to semantic HTML

• عناصر هدر و ناو Header and nav elements

• اصلی، بخش و مقاله Main, section, and article

• کنار و پاورقی Aside and footer

• بیایید یک صفحه کامل را با استفاده از HTML معنایی کدنویسی کنیم! Let's code a complete page using semantic HTML!

متا تگ های HTML HTML meta tags

• متا تگ ها و viewport Meta tags and the viewport

• متا تگ های گراف و توییتر را باز کنید Open graph and Twitter meta tags

• بررسی: متا تگ های HTML! Review: HTML meta tags!

اصول CSS CSS Fundamentals

• مقدمه ای بر CSS و انتخابگرها Introduction to CSS and selectors

• واحدهای CSS CSS units

• بررسی: اصول CSS! Review: CSS fundamentals!

• مدل جعبه CSS The CSS box model

• جعبه مرزی چگونه کار می کند؟ How does border-box work?

• بررسی: مدل جعبه CSS Review: the CSS box model

• ویژگی انتخابگر CSS CSS selector specificity

• موقعیت یابی CSS (نسبی، مطلق، ثابت و چسبنده) CSS positioning (relative, absolute, fixed, and sticky)

• بررسی: انتخابگرها و موقعیت یابی CSS Review: CSS selectors and positioning

• کار با رنگ ها در CSS Working with colors in CSS

• کار با تایپوگرافی در CSS Working with typography in CSS

• بررسی: رنگ ها و تایپوگرافی در CSS Review: colors and typography in CSS

• شبه کلاس ها و شبه عناصر Pseudoclasses and pseudoelements

CSS انعطاف پذیر و شبکه CSS flex and grid

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

• توجیه و تراز انعطاف پذیر CSS CSS flex justification and alignment

• ویژگی های آیتم فرزند انعطاف پذیر CSS CSS flex child item properties

• شکاف های انعطاف پذیر CSS و بسته بندی خطوط CSS flex gaps and line wrapping

• ستون ها و ردیف های شبکه CSS CSS grid columns and rows

• مناطق قالب شبکه CSS CSS grid template areas

• شبکه CSS تکرار و تنظیم خودکار CSS grid repeating and auto-fit

• قرار دادن شبکه CSS CSS grid placement

• توجیه و تراز شبکه CSS CSS grid justification and alignment

یک تجدید کننده کامل پایتون A Complete Python Refresher

• مقدمه بخش، و آیا می توانید از آن صرف نظر کنید؟ Section intro, and can you skip it?

• متغیرها در پایتون Variables in Python

• بررسی: متغیرها در پایتون Review: variables in Python

• قالب بندی رشته با رشته های f (و موارد دیگر) String formatting with f-strings (and other)

• دریافت ورودی کاربر با پایتون Getting user input with Python

• بررسی: قالب بندی رشته و ورودی کاربر Review: string formatting and user input

• لیست ها، تاپل ها و مجموعه ها در پایتون Lists, tuples, and sets in Python

• بررسی: لیست ها، تاپل ها و مجموعه ها Review: lists, tuples, and sets

• عملیات مجموعه پیشرفته پایتون Advanced Python set operations

• کار با بولین ها در پایتون Working with booleans in Python

• کنترل جریان: if دستورات در پایتون Flow control: if statements in Python

• بررسی: Booleans و عبارات if Review: booleans and if statements

• کلمه کلیدی "in" در پایتون The 'in' keyword in Python

• استفاده از کلمه کلیدی "in" در عبارات if با پایتون Using the 'in' keyword in if statements with Python

• بررسی: عبارت کلید واژه "in" و "اگر". Review: The 'in' keyword and 'if' statements

• حلقه های پایتون: برای و در حالی که Python loops: for and while

• بررسی: حلقه ها در پایتون Review: loops in Python

• فهرست درک در پایتون List comprehensions in Python

• بررسی: درک فهرست Review: list comprehensions

• کار با دیکشنری پایتون Working with Python dictionaries

• بررسی: دیکشنری های پایتون Review: Python dictionaries

• تخریب متغیرها در پایتون Destructuring variables in Python

• بررسی: متغیرهای ساختارشکن Review: destructuring variables

• توابع در پایتون Functions in Python

• بررسی: توابع Review: functions

• آرگومان ها و پارامترهای تابع در پایتون Function arguments and parameters in Python

• نحوه تنظیم مقادیر پارامترهای پیش فرض برای توابع در پایتون How to set default parameter values for functions in Python

• نحوه برگرداندن مقادیر از توابع در پایتون How to return values from functions in Python

• توابع ناشناس یا لامبدا در پایتون Anonymous or lambda functions in Python

• درک فرهنگ لغت در پایتون Dictionary comprehensions in Python

• باز کردن آرگومان ها با پایتون (*args) Unpacking arguments with Python (*args)

• باز کردن آرگومان های کلمه کلیدی با پایتون (**kwargs) Unpacking keyword arguments with Python (**kwargs)

• برنامه نویسی شی گرا در پایتون Object-Oriented Programming in Python

• متدهای Magic Python: __str__ و __repr__ Magic Python methods: __str__ and __repr__

• @classmethod و @staticmethod در پایتون @classmethod and @staticmethod in Python

• ارث بری کلاس در OOP با پایتون Class inheritance in OOP with Python

• ترکیب کلاس در OOP با پایتون Class composition in OOP with Python

• Hinting را با پایتون تایپ کنید Type hinting with Python

• واردات در پایتون چگونه کار می کند؟ How do imports work in Python?

• واردات نسبی در پایتون (و چرا باید از آنها اجتناب کنید) Relative imports in Python (and why you should avoid them)

• مقابله با خطاها و استثناها در پایتون Dealing with errors and exceptions in Python

• ایجاد کلاس های خطای سفارشی در پایتون Create custom error classes in Python

• توابع درجه یک در پایتون چیست؟ What are first-class functions in Python?

• دکوراتورهای ساده در پایتون Simple decorators in Python

• نحو "at" برای دکوراتورها در پایتون The 'at' syntax for decorators in Python

• تزئین توابع با پارامترها Decorating functions with parameters

• کدگذاری دکوراتورها با پارامترها Coding decorators with parameters

• تغییرپذیری در پایتون به چه معناست؟ What does 'mutability' mean in Python?

• پارامترهای تابع پیش فرض قابل تغییر (و چرا ایده بدی هستند) Mutable default function parameters (and why they're a bad idea)

محیط توسعه دهنده محلی Django (راه اندازی و پیکربندی پروژه) Django local dev environment (project setup and configuration)

• معرفی این بخش Intro to this section

• نحوه نصب pyenv و Python در ویندوز How to install pyenv and Python on Windows

• نحوه نصب pyenv و Python در مک How to install pyenv and Python on Mac

• چگونه Poetry را روی ویندوز نصب کنیم How to install Poetry on Windows

• نحوه نصب Poetry در مک How to install Poetry on Mac

• نحوه نصب VSCode در ویندوز How to install VSCode on Windows

• نحوه نصب VSCode در مک How to install VSCode on Mac

• نحوه راه اندازی virtualenv و نصب وابستگی ها در ویندوز How to set up a virtualenv and install dependencies on Windows

• نحوه راه اندازی virtualenv و نصب وابستگی ها در مک How to set up a virtualenv and install dependencies on Mac

• نحوه شروع پروژه جنگو در ویندوز How to start a Django project on Windows

• نحوه شروع پروژه جنگو در مک How to start a Django project on Mac

• نحوه اجرای migrations، ایجاد یک ابرکاربر و دسترسی به پنل مدیریت در ویندوز How to run migrations, create a superuser, and access the admin panel on Windows

• نحوه اجرای مهاجرت، ایجاد یک ابرکاربر و دسترسی به پنل مدیریت در مک How to run migrations, create a superuser, and access the admin panel on Mac

• نحوه ایجاد برنامه جنگو در ویندوز How to create a Django app on Windows

• نحوه ایجاد یک برنامه جنگو در مک How to create a Django app on Mac

با جنگو یک برنامه "Hello World" بسازید Build a "Hello World" App with Django

• معرفی این بخش Intro to this section

• MVT (Model View Template) در جنگو چیست؟ What is MVT (Model View Template) in Django?

• نوشتن برنامه Hello World با جنگو Writing the Hello World App with Django

پروژه Capstone قسمت 1 - اصول جنگو Capstone Project Part 1 — Django Fundamentals

• معرفی این بخش Intro to this section

• نحوه ایجاد و ثبت مدل های جنگو How to create and register Django models

• نحوه ایجاد و اجرای مهاجرت پایگاه داده How to create and run database migrations

• چگونه همه مقالات خود را در صفحه اصلی نشان دهیم How to show all our articles in the homepage

• آشنایی با فرم های جنگو Introduction to Django Forms

• کوکی های مرورگر چیست؟ What are browser cookies?

• حملات CSRF چیست؟ What are CSRF attacks?

• ایجاد نمای با استفاده از فرم با جنگو Creating a view that uses a form with Django

• ایجاد مقاله در برنامه ما با نماهای مبتنی بر کلاس Creating articles in our app with Class-Based Views

• افزودن سایر نقاط پایانی برنامه با CBV Adding the other app endpoints with CBVs

• در حال تمیز کردن URL های مقاله ما Cleaning up our article URLs

• HTML فرار چیست و چگونه در جنگو کار می کند؟ What is HTML escaping and how does it work in Django?

پروژه Capstone قسمت 2 - جنگو و سفارشی سازی پیشرفته Capstone Project Part 2 — Advanced Django and Customization

• معرفی این بخش Intro to this section

• نحوه ایجاد یک قالب پایه در جنگو How to create a base template in Django

• در حال به روز رسانی الگوهای ما برای گسترش الگوی پایه ما Updating our templates to extend our base template

• فیلترهای جنگو چیست؟ What are Django filters?

• نحوه اضافه کردن ناوبری بین صفحات در جنگو How to add navigation between pages in Django

• نحوه رندر کردن چیزها به صورت مشروط در قالب های جنگو How to render things conditionally in Django templates

• محاسبه تعداد کلمات به صورت پویا در مقالات ما Calculating the word count dynamically in our articles

• چگونه تعداد کلمات را به قالب های خود اضافه کنیم How to add the word count to our templates

• نحوه سفارشی سازی فیلدهای پنل مدیریت جنگو How to customize the Django admin panel fields

اجرای برنامه های جنگو با داکر Running Django Apps with Docker

• معرفی این بخش Intro to this section

• چگونه یک تصویر داکر برای برنامه جنگو خود بسازیم How to build a Docker image for our Django app

• چگونه کانتینر Docker را با برنامه جنگو اجرا کنیم How to run the Docker container with our Django app

بهبود تنظیمات برنامه جنگو Django App Setup Improvements

• معرفی این بخش Intro to this section

• نوار ابزار Django Debug (فوق العاده مفید!) The Django Debug Toolbar (super helpful!)

• چگونه ایجاد یک ابرکاربر را خودکار کنیم How to automate the creation of a superuser

احراز هویت جنگو و ثبت نام اجتماعی با django-allauth Django authentication and social-sign on with django-allauth

• معرفی این بخش Intro to this section

• چگونه یک رابطه کاربری را به مدل جنگو اضافه کنیم How to add a user relationship to a Django model

• نحوه تنظیم سازنده مقاله در قالب یک نمای کلاسی How to set the article creator in the form of a Class-Based View

• چگونه صفحات ورود و خروج را با جنگو اضافه کنیم How to add log in and log out pages with Django

• نحوه نیاز به ورود در Django CBVs How to require login in Django CBVs

• نحوه راه اندازی django-allauth How to set up django-allauth

• نحوه استفاده از URL های جنگو-آلاوت در پروژه ما How to use django-allauth URLs in our project

• نحوه تنظیم احراز هویت اجتماعی با django-allauth How to set up social authentication with django-allauth

• نحوه ایجاد یک برنامه GitHub OAuth How to create a GitHub OAuth app

• نحوه اضافه کردن برنامه های اجتماعی جدید با django-allauth How to add new social apps with django-allauth

• چگونه جنگو را برای ورود با ایمیل به جای نام کاربری با allauth تنظیم کنیم How to set up Django to log in with email instead of username with allauth

• نحوه سفارشی سازی صفحه مدیریت UserProfile How to customize the UserProfile admin page

• ترجمه و بومی سازی در جنگو چگونه کار می کند؟ How do translations and localization work in Django?

• چگونه ترجمه ها را به پنل مدیریت جنگو اضافه کنیم How to add translations to our Django admin panel

• یک UserManager سفارشی برای استفاده از فیلد ایمیل در جنگو ایجاد کنید Create a custom UserManager to use the email field in Django

ویژگی های مقاله و ویرایشگر نشانه گذاری بیشتر More article features and markdown editor

• معرفی این بخش Intro to this section

• چگونه ویژگی های محاسبه شده سفارشی را به مدل های خود اضافه کنیم How to add custom computed properties to our models

• نمایش آمار مقاله کاربر در قالب Displaying user article statistics in the template

• چگونه یک ویرایشگر علامت گذاری به پروژه جنگو اضافه کنیم How to add a markdown editor to our Django project

• حذف موارد تکراری از قالب های فرم ما Removing duplication from our form templates

در حال اجرا با Docker Compose Running with Docker Compose

• معرفی این بخش Intro to this section

• نحوه تنظیم اتصالات PostgreSQL در پایتون با psycopg How to set up PostgreSQL connections in Python with psycopg

• اجرای برنامه و پایگاه داده جنگو با Docker Compose Running the Django app and database with Docker Compose

• اجرای انتقال پایگاه داده با Docker Compose Running database migrations with Docker Compose

• دستورات Handy Docker Compose Handy Docker Compose commands

یک ظاهر طراحی کامل با TailwindCSS Complete Styling with TailwindCSS

• نحوه نصب NodeJS در macOS How to install NodeJS on macOS

• نحوه نصب NodeJS در ویندوز How to install NodeJS on Windows

• نحوه نصب و راه اندازی TailwindCSS How to install and set up TailwindCSS

• پلاگین های اختیاری TailwindCSS Optional TailwindCSS plugins

• بارگذاری مجدد خودکار مرورگر با بارگذاری مجدد مرورگر django Automatic browser reloading with django-browser-reload

• افزودن django_widget_tweaks Adding django_widget_tweaks

• ایجاد استایل دکمه با TailwindCSS Creating button styles with TailwindCSS

• با TailwindCSS نوار پیمایش خود را طراحی کنید Styling our navigation bar with TailwindCSS

• تم TailwindCSS خود را با ایجاد یک زیر خط سایه جعبه سفارشی کنید Customize your TailwindCSS theme by creating a box shadow underline

• تغییر سبک منو بسته به اینکه در کدام صفحه هستیم Changing menu styles depending on which page we're on

• طراحی داشبورد کاربر Styling the user's dashboard

• سبک دادن به فرم حذف مقاله (+ کار با نمادهای svg در جنگو) Styling the article delete form (+ working with svg icons in Django)

• بازسازی قالب پایه_فرم برای کاهش تکرار Refactoring the base_form layout template to reduce duplication

• استایل دادن به الگوهای فرم مقاله (استایل دادن به فرم ها با Django و widget_tweaks) Styling the article form templates (styling forms with Django and widget_tweaks)

• طراحی صفحه ورود به سیستم جنگو allauth Styling the Django allauth log in page

• نگاهی به ساختار عنصر Django allauth A look at the Django allauth element structure

• حالت دادن به علامت اجتماعی در عنصر ارائه دهنده Styling the social sign on provider element

• شکل دادن به لیست خطاها در صفحه ورود ما Styling the errors list in our login page

• ویژگی های کلیدی صفحه فرود و ثبت نام ما The key features of our landing and signup page

• ایجاد یک ساختار واکنشگرا برای ثبت نام و صفحه فرود ما Creating a responsive structure for our signup and landing page

• شکل دادن به فرم ثبت نام در صفحه فرود ما Styling the signup form in our landing page

• خطاهای فرم استایل در صفحه ثبت نام Styling form errors in the signup page

• نحوه استایل دادن به عنصر جزئیات HTML برای افشا How to style the HTML details element for disclosures

• بهبودهایی در قالب پایه ما برای کار در بین برنامه‌ها Improvements to our base template to work across apps

• طرح بندی اصلی allauth Styling the main allauth layout

• عناصر Allauth: یک ظاهر طراحی شده دکمه Allauth elements: styling the button

• عناصر Allauth: سبک دادن به فرم و زمینه Allauth elements: styling the form and field

• عناصر Allauth: سبک دادن به عناوین Allauth elements: styling the titles

• برخی از پیشرفت ها و سبک های نهایی در قالب پایه ما Some final improvements and styles in our base template

• جایی که در انتهای این بخش قرار داریم Where we are at the end of this section

شروع کار با AlpineJS Getting started with AlpineJS

• معرفی این بخش Introduction to this section

• شروع کار با AlpineJS Getting started with AlpineJS

• تنظیم مقادیر داده اجزای AlpineJS از فرم های جنگو Setting AlpineJS component data values from Django forms

• اتصال کلاس های TailwindCSS بر اساس حالت AlpineJS Binding TailwindCSS classes based on AlpineJS state

• به روز رسانی کلاس های وضعیت مقاله در صفحه اصلی Updating article status classes in the homepage

چشمک زدن پیام با جنگو Message flashing with Django

• معرفی این بخش Intro to this section

• فلش پیام در جنگو چیست؟ What is message flashing in Django?

• نحوه نمایش پیام های فلش شده جنگو در قالب های ما How to display Django flashed messages in our templates

• نحوه فلش کردن پیام ها در برنامه های جنگو ما How to flash messages in our Django apps

جستجو و صفحه بندی با جنگو Search and pagination with Django

• معرفی این بخش Intro to this section

• چگونه صفحه بندی را به لیست ویو جنگو اضافه کنیم How to add pagination to a Django ListView

• نحوه پیاده سازی صفحه بندی در قالب های جنگو How to implement pagination in our Django templates

• چگونه جستجوی متن کامل PostgreSQL را به برنامه جنگو اضافه کنیم How to add PostgreSQL full text search to our Django app

• نحوه افزودن جستجو به ListView جنگو How to add search to a Django ListView

• نحوه پیاده سازی جستجو در قالب های جنگو How to implement search in our Django templates

• چگونه می توان جستجو و صفحه بندی را با هم در جنگو کار کرد How to get search and pagination working together in Django

جنگو و HTMX Django and HTMX

• معرفی این بخش Introduction to this section

• HTMX چیست؟ What is HTMX?

• اضافه کردن HTMX به پروژه ما Adding HTMX to our project

• نحوه پیاده سازی ویندوز مودال با HTMX و جنگو How to implement modal windows with HTMX and Django

• جستجوی فعال با Django ListViews در 4 خط کد Active Search with Django ListViews in 4 lines of code

• افزودن نشانگر درخواست با HTMX، SVG و TailwindCSS Adding a request indicator with HTMX, SVGs and TailwindCSS

• نحوه اضافه کردن انیمیشن با استفاده از TailwindCSS How to add animations using TailwindCSS

• نحوه غیرفعال کردن عناصر در حین انجام درخواست ها How to disable elements while requests are happening

• مدیریت تغییرات تاریخچه مرورگر با HTMX Handling browser history changes with HTMX

تایید ایمیل با Mailgun و Django-allauth Email confirmation with Mailgun and Django-allauth

• معرفی این بخش Intro to this section

• چگونه حساب Mailgun خود را راه اندازی کنیم How to set up your Mailgun account

• نحوه ارسال ایمیل با پایتون و میلگان How to send an email with Python and Mailgun

• افزودن تأیید ایمیل به برنامه Django-allauth ما Adding email confirmation to our Django-allauth application

• حذف فیلد تأیید رمز عبور از فرم ثبت نام ما Removing the password confirmation field from our signup form

اعزام به راه آهن Deployments to Railway

• مقدمه ای برای استقرار در راه آهن Intro to deployments to Railway

• تنظیمات جنگو برای تولید تغییر می کند Django settings changes for production

• افزودن وابستگی های جدید برای برنامه جنگو ما در حال تولید Adding new dependencies for our Django app in production

• استفاده از وایت نویز برای ارائه دارایی های ثابت با جنگو Using whitenoise for serving static assets with Django

• راه اندازی با GitHub و Railway Getting set up with GitHub and Railway

• راه اندازی Git و GitHub برای برنامه ما Git and GitHub set-up for our application

• استقرار برنامه ما در راه آهن Deploying our app to Railway