آموزش توسعه وب فارسی تیروتیر - Tirotir Persian Web Development Tutorial

یک پلتفرم آموزشی کامل و آفلاین برای یادگیری HTML، CSS و JavaScript به زبان فارسی

🌟 ویژگی‌های کلیدی

• آنلاین: https://tirotir-ir.github.io/tirotir-persian-web-dev-tutorial/
• ۲۰ درس ساختاریافته از مقدمات HTML تا پروژه‌های پیشرفته JavaScript
• ویرایشگر کد تعاملی با syntax highlighting و نمایش زنده
• سیستم آزمون خودکار با نمره‌گذاری فوری و ذخیره پیشرفت
• مرجع کامل تگ‌های HTML با جستجو و دسته‌بندی
• پشتیبانی کامل RTL با فونت فارسی Vazirmatn
• حالت تاریک و روشن برای راحتی بیشتر
• کاملاً آفلاین بدون نیاز به اینترنت
• طراحی واکنش‌گرا برای تمام دستگاه‌ها

📁 ساختار پروژه

persian-web-dev-tutorial/
├── index.html                 # صفحه اصلی
├── README.md                  # راهنمای استفاده
├── assets/
│   └── fonts/                 # فونت‌های فارسی
│       ├── Vazirmatn-Regular.woff2
│       ├── Vazirmatn-Bold.woff2
│       └── Vazirmatn-Light.woff2
├── css/
│   ├── main.css              # استایل‌های اصلی
│   ├── rtl.css               # پشتیبانی RTL
│   ├── themes.css            # تم‌های روشن/تاریک
│   ├── layout.css            # چیدمان صفحه
│   ├── editor.css            # استایل ویرایشگر کد
│   └── quiz.css              # استایل سیستم آزمون
├── js/
│   ├── main.js               # عملکرد اصلی
│   ├── storage.js            # مدیریت localStorage
│   ├── editor.js             # ویرایشگر کد تعاملی
│   ├── quiz.js               # سیستم آزمون
│   └── libs/
│       └── codemirror/       # کتابخانه CodeMirror
├── lessons/
│   ├── html/                 # دروس HTML (۱-۵)
│   ├── css/                  # دروس CSS (۶-۱۰)
│   └── js/                   # دروس JavaScript (۱۱-۲۰)
└── reference/
    └── html-tags.html        # مرجع تگ‌های HTML

🚀 نحوه استفاده

روش ۱: استفاده مستقیم

1. فایل zip را استخراج کنید
2. فایل index.html را با مرورگر باز کنید
3. شروع به یادگیری کنید!

روش ۲: سرور محلی (پیشنهادی)

# با Python 3
python -m http.server 8000

# با Node.js
npx serve .

# با PHP
php -S localhost:8000

سپس به http://localhost:8000 بروید.

📚 محتوای دروس

بخش اول: HTML (دروس ۱-۵)

1. مقدمات HTML - آشنایی با HTML و ساختار اساسی
2. قالب‌بندی متن - تگ‌های متنی و فرمت‌بندی
3. لینک‌ها و تصاویر - ایجاد لینک و نمایش تصاویر
4. جداول و فرم‌ها - ساخت جداول و فرم‌های تعاملی
5. HTML معنایی - تگ‌های HTML5 و ساختار معنایی

بخش دوم: CSS (دروس ۶-۱۰)

6. مقدمات CSS - انتخابگرها و ویژگی‌های پایه
7. مدل جعبه و چیدمان - Box Model و موقعیت‌یابی
8. تایپوگرافی و رنگ‌ها - فونت‌ها، رنگ‌ها و متن
9. Flexbox و Grid - چیدمان‌های مدرن CSS
10. طراحی واکنش‌گرا - Media Queries و Mobile-First

بخش سوم: JavaScript (دروس ۱۱-۲۰)

11. مقدمات JavaScript - متغیرها و مفاهیم پایه
12. متغیرها و انواع داده - Types و Scope
13. عملگرها و شرط‌ها - Operators و Control Flow
14. حلقه‌ها و تکرار - Loops و Iteration
15. توابع - Functions و Arrow Functions
16. دستکاری DOM - DOM Manipulation
17. رویدادها و تعامل - Event Handling
18. آرایه‌ها و اشیاء - Arrays و Objects
19. مفاهیم پیشرفته - Async/Await، Promises
20. پروژه نهایی - ساخت یک وب‌اپلیکیشن کامل

🎯 ویژگی‌های ویرایشگر کد

• Syntax Highlighting برای HTML، CSS و JavaScript
• نمایش زنده تغییرات کد
• خطایابی و پیشنهادات
• تکمیل خودکار کد
• تم‌های مختلف ویرایشگر
• شماره‌گذاری خطوط
• تا کردن کد (Code Folding)

📝 سیستم آزمون

• انواع مختلف سوال: چندگزینه‌ای، درست/غلط، تکمیل کد
• نمره‌گذاری خودکار با توضیحات
• ذخیره پیشرفت در localStorage
• آمار عملکرد و گزارش‌گیری
• تایمر برای آزمون‌های زمان‌دار
• امکان تلاش مجدد

🔍 مرجع تگ‌های HTML

• جستجوی پیشرفته در تگ‌ها
• دسته‌بندی بر اساس کاربرد
• مثال‌های عملی برای هر تگ
• توضیحات فارسی کامل
• ویژگی‌های هر تگ
• نکات و بهترین شیوه‌ها

🎨 تم‌ها و ظاهر

حالت روشن

• پس‌زمینه سفید با متن تیره
• رنگ‌های آبی و سبز برای تأکید
• کنتراست بالا برای خوانایی بهتر

حالت تاریک

• پس‌زمینه تیره با متن روشن
• رنگ‌های نرم برای چشم
• مناسب برای کار طولانی‌مدت

📱 سازگاری

مرورگرهای پشتیبانی شده

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

دستگاه‌ها

• دسکتاپ (1200px+)
• تبلت (768px - 1199px)
• موبایل (320px - 767px)

🛠️ تنظیمات پیشرفته

تغییر فونت

فونت پیش‌فرض Vazirmatn است. برای تغییر، فایل css/main.css را ویرایش کنید:

:root {
    --font-family: 'فونت-دلخواه', 'Vazirmatn', sans-serif;
}

تنظیم رنگ‌ها

رنگ‌های اصلی در فایل css/themes.css تعریف شده‌اند:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
}

اضافه کردن درس جدید

1. فایل HTML جدید در پوشه مناسب ایجاد کنید
2. از template موجود استفاده کنید
3. لینک درس را به navigation اضافه کنید

🔧 عیب‌یابی

مشکلات رایج

ویرایشگر کد کار نمی‌کند:

• مطمئن شوید JavaScript فعال است
• فایل‌های CodeMirror موجود باشند
• کنسول مرورگر را بررسی کنید

فونت فارسی نمایش داده نمی‌شود:

• فایل‌های فونت در مسیر صحیح باشند
• مرورگر از فرمت WOFF2 پشتیبانی کند

آزمون‌ها ذخیره نمی‌شوند:

• localStorage فعال باشد
• حالت خصوصی مرورگر نباشد

📞 پشتیبانی

• این پروژه توسط tirotir.ir و با کمک AI ایجاد شده است.
• tirotir2@gmail.com

گزارش مشکل

برای گزارش مشکلات یا پیشنهادات:

1. مشکل را به طور دقیق شرح دهید
2. مرورگر و نسخه آن را ذکر کنید
3. مراحل بازتولید مشکل را بنویسید

📄 مجوز

این پروژه تحت مجوز MIT منتشر شده است. می‌توانید آزادانه از آن استفاده، تغییر و توزیع کنید.

🙏 تشکر

• Vazirmatn Font برای فونت فارسی زیبا
• CodeMirror برای ویرایشگر کد قدرتمند
• جامعه توسعه‌دهندگان فارسی برای الهام و حمایت

---

موفق باشید در یادگیری توسعه وب! 🚀

آخرین بروزرسانی: آگوست ۲۰۲۵