دوره جامع پروژه محور طراحی سایت فرانت اند

📋 پیش‌نیازها

🔸 آشنایی اولیه با کامپیوتر و اینترنت
🔸 توانایی کار با مرورگر و ویرایشگر متن

🌐 فصل 1: آشنایی با دنیای وب

🔸 مفاهیم پایه وب
🔸 مرورگر، سرور، دامنه و هاست
🔸 معرفی HTML، CSS و JavaScript
🔸 معرفی ابزارهای لازم برای شروع ( WebStorm ، VSCode، افزونه‌ها، Live Server)

🏗️ فصل 2: HTML – ساختار صفحات وب

🔸 مبانی HTML
🔸 HTML چیست و چگونه کار می‌کند
🔸 ساختار اصلی یک صفحه HTML
🔸 معرفی تگ‌های head و body
🔸 آشنایی با تگ‌ها، المنت‌ها و Attributeها
🔸 تگ‌های متنی و قالب‌بندی
🔸 تگ‌های تیتر (h1 تا h6)
🔸 پاراگراف‌ها و شکست خطوط (p , br)
🔸 تأکید و اهمیت (strong , em)
🔸 تگ های معنایی (Semantic Elements)
🔸 عناصر بلاکی و Inline

🔸 لینک‌ها
🔸 تگ a و ساختار لینک
🔸 لینک‌های داخلی، خارجی و لنگری
🔸 لینک ایمیل و شماره تماس

🔸 تصاویر
🔸 تگ img و ویژگی‌های مهم
🔸 بررسی تگ figure و figcaption
🔸 تصویر به عنوان لینک
🔸 متن جایگزین و اهمیت آن در SEO

🔸 لیست‌ها
🔸 لیست مرتب و نامرتب
🔸 لیست‌های تو در تو

🔸 جداول
🔸 ساختار جدول (table, tr, td, th)
🔸 عنوان جدول (caption)
🔸 جداسازی سطرها و ستون‌ها (thead , tbody , tfoot)
🔸 ادغام سطری و ستونی

🔸 فرم‌ها
🔸 ساختار فرم (form)
🔸 inputها (text, email, password, checkbox, radio, file, date و …)
🔸 textarea
🔸 select, option, optgroup
🔸 button
🔸 group‌بندی فرم (fieldset , legend)
🔸 اصول کاربردی ساخت فرم‌های استاندارد

🔸 عناصر چندرسانه‌ای
🔸 تگ video
🔸 تگ audio
🔸 iframe

🎨 فصل 3: مقدمات CSS و طراحی رابط کاربری

🔸 شروع کار با CSS
🔸 روش‌های اضافه کردن CSS (Inline, Internal, External)
🔸 مفهوم Selector، Property و Value
🔸 انواع Selector ها شامل گزینشگر های Type , attribute , nth-child , class , ID

🔸 مبانی طراحی با CSS
🔸 رنگ‌ها، پس‌زمینه‌ها، فونت‌ها
🔸 Box Model (مهم‌ترین مفهوم CSS)
🔸 Margin، Padding، Border
🔸 Display و تفاوت Block / Inline / Inline-block
🔸 Position (static, relative, absolute, fixed, sticky)
🔸 Shadowها، radius و استایل‌دهی عمومی عناصر

🔸 Flexbox
🔸 اصول Flexbox
🔸 ساخت چیدمان‌های رایج با Flex

🔸 CSS Grid
🔸 طراحی چیدمان با CSS Grid
🔸 ساختاردهی صفحات با CSS Grid Layout

🔸 اصول طراحی Responsive
🔸 کار با Media Query ها و Breakpoint ها

🅱️ فصل 4: Bootstrap

🔸 معرفی Bootstrap و کاربرد آن
🔸 نصب و شروع کار
🔸 سیستم گرید (Grid System)
🔸 کار با Flex در Bootstrap
🔸 معرفی مهم‌ترین کامپوننت‌ها (Navbar, Cards, Buttons, Forms, Modal و …)
🔸 ساخت صفحات واکنشگرا (Responsive Design)
🔸 پیاده‌سازی یک صفحه کامل با Bootstrap

⚙️ فصل 5: آشنایی با SCSS

🔸 (مقدماتی و کاربردی، تا حدی که دانشجو بتواند در پروژه استفاده کند)
🔸 SCSS چیست و چرا استفاده می‌کنیم؟
🔸 نصب و راه‌اندازی
🔸 متغیرها
🔸 Nesting
🔸 میکسین‌ها
🔸 Extend
🔸 سازمان‌دهی کدها با SCSS

🧩 فصل 6: آشنایی مقدماتی با Pug (اختیاری و جمع‌وجور)

🔸 نصب و ساخت اولین قالب
🔸 متغیرها، حلقه‌ها و شرط‌ها
🔸 Mixins در Pug
🔸 ساخت ساختار ماژولار صفحات

💡 فصل 7: آشنایی مقدماتی با JavaScript & jQuery

🔸 JavaScript (آشنایی سطح پایه برای استفاده در فرانت‌اند)
🔸 JS چیست؟
🔸 ارتباط JS با HTML و DOM
🔸 متغیر ها ، ثابت ها و انواع داده ها
🔸 کار با آرایه ها و بررسی متد های دستکاری آرایه ها
🔸 کار با Object ها و دسترسی به خصوصیات آن ها
🔸 کار با رشته ها و متد های دستکاری رشته ها
🔸 روش های تعریف Event ها و مدیریت آن ها
🔸 دستکاری ساده DOM (رویداد کلیک، تغییر متن و …)

🔸 jQuery (فقط آشنایی، نه آموزش کامل کتابخانه)
🔸 jQuery چیست و در چه پروژه‌هایی استفاده می‌شود
🔸 انتخاب‌گرها
🔸 رویدادهای پرکاربرد (click, change, keyup)
🔸 انیمیشن‌های ساده (fade, slide)
🔸 نحوه استفاده از پلاگین‌ها (مثال: پلاگین های اسلاید شو، ساخت Carousel ها و ...)
🔸 ساخت منوهای افقی و عمودی و Accordion Menu ها
🔸 آشنایی با ساختار json و بررسی مثال های عملی

🏆 پروژه پایانی

🔸 در پایان دوره، یک وب‌سایت کامل شامل موارد زیر پیاده‌سازی می شود:

🔸 ساختار HTML صحیح
🔸 استایل‌دهی کامل با CSS و SCSS
🔸 استفاده از Bootstrap و طراحی واکنشگرا
🔸 ساخت فرم، جدول، لیست و عناصر چندرسانه‌ای