این دوره یک تجربه عملی و پروژه محور است که به شما کمک می‌کند تا با جدیدترین ابزارها و تکنیک‌های توسعه وب فرانت‌اند آشنا شوید و آن‌ها را در یک پروژه واقعی به کار بگیرید. هدف ما این است که شما نه تنها کدنویسی کنید، بلکه تفکر طراحی و حل مسئله را نیز بیاموزید.

• مبانی HTML5 و CSS3: اصول ساختاردهی صفحات وب با HTML معنایی و استایل‌دهی پیشرفته با CSS، از جمله Flexbox و CSS Grid برای چیدمان‌های پیچیده.
• طراحی واکنش‌گرا (Responsive Design): یادگیری چگونگی ساخت وب‌سایت‌هایی که در تمامی دستگاه‌ها، از موبایل گرفته تا دسکتاپ، به درستی و زیبایی نمایش داده شوند. این بخش شامل استفاده از Media Queries و رویکرد Mobile-First است.
• اصول جاوااسکریپت کاربردی: افزودن تعامل به وب‌سایت با استفاده از جاوااسکریپت مدرن (ES6+). شامل مدیریت DOM، ساخت منوهای ناوبری پویا، گالری‌های تصاویر و فرم‌های تماس ساده.
• بهینه‌سازی و بهبود عملکرد: نکاتی برای افزایش سرعت بارگذاری وب‌سایت، بهبود تجربه کاربری و آمادگی برای موتورهای جستجو (SEO).
• استقرار وب‌سایت (Deployment): آشنایی با روش‌های مختلف برای قرار دادن وب‌سایت خود بر روی اینترنت، از جمله استفاده از پلتفرم‌های میزبانی رایگان و کم‌هزینه.
• بهترین روش‌های کدنویسی: یادگیری اصول کدنویسی تمیز، قابل نگهداری و استاندارد که شما را به یک توسعه‌دهنده حرفه‌ای تبدیل می‌کند.

شرکت در دوره “ساخت وب‌سایت شخصی نمونه‌کار” مزایای متعددی برای شما به همراه خواهد داشت که فراتر از صرفاً یادگیری کدنویسی است:

• داشتن یک پروژه واقعی و قابل ارائه: در پایان دوره، شما یک وب‌سایت نمونه‌کار کامل و کاربردی خواهید داشت که می‌توانید در رزومه خود درج کرده و به کارفرمایان بالقوه ارائه دهید. این یک مزیت بزرگ در مصاحبه‌های شغلی است.
• افزایش اعتماد به نفس: با اتمام موفقیت‌آمیز یک پروژه از صفر تا صد، مهارت‌های خود را اثبات کرده و اعتماد به نفس لازم برای پذیرش پروژه‌های بزرگتر را کسب خواهید کرد.
• تقویت برند شخصی: یک وب‌سایت شخصی قوی، به شما کمک می‌کند تا برند شخصی خود را در فضای آنلاین تقویت کنید و به عنوان یک متخصص در حوزه خود شناخته شوید.
• دسترسی آفلاین و دائمی: محتوای دوره روی فلش مموری ۳۲ گیگابایتی ارائه شده و این امکان را می‌دهد که در هر زمان و مکانی، بدون نیاز به اتصال اینترنت، به آموزش‌ها دسترسی داشته باشید.
• کسب مهارت‌های عملی و مورد نیاز بازار: آنچه می‌آموزید مستقیماً در بازار کار قابل استفاده است و به شما کمک می‌کند تا سریع‌تر وارد دنیای حرفه‌ای توسعه وب شوید.
• پایه و اساس برای پروژه‌های آینده: تکنیک‌ها و دانش کسب شده در این دوره، سنگ بنای محکمی برای یادگیری فریم‌ورک‌های پیشرفته‌تر و ساخت وب‌سایت‌های پیچیده‌تر در آینده خواهد بود.

این دوره برای افرادی طراحی شده است که قصد ورود به دنیای توسعه وب را دارند یا می‌خواهند مهارت‌های فرانت‌اند خود را با یک پروژه عملی تقویت کنند.

• آشنایی مقدماتی با کامپیوتر و اینترنت: توانایی کار با سیستم عامل و مرورگرهای وب.
• انگیزه و اشتیاق به یادگیری: تمایل به یادگیری مداوم و حل چالش‌های کدنویسی.
• یک ویرایشگر کد (ترجیحاً VS Code): هرچند در ابتدای دوره نحوه تنظیم محیط کار توضیح داده می‌شود.
• آشنایی قبلی با مفاهیم بسیار اولیه HTML و CSS مزیت محسوب می‌شود، اما ضروری نیست، زیرا دوره از پایه آغاز خواهد شد.

این دوره به صورت ماژولار طراحی شده تا شما را قدم به قدم به سوی هدف نهایی یعنی ساخت وب‌سایت نمونه‌کار هدایت کند:

• ماژول ۱: مقدمه و آماده‌سازی محیط کار
  • معرفی پروژه وب‌سایت نمونه‌کار و اهداف آن.
  • تنظیم ویرایشگر کد (Visual Studio Code).
  • آشنایی با ابزارهای توسعه‌دهندگان مرورگر (Developer Tools).
  • مفاهیم اولیه فایل‌ها، پوشه‌ها و ساختار پروژه.
• ماژول ۲: تسلط بر HTML5 – اسکلت وب‌سایت
  • تگ‌های معنایی جدید HTML5 (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>).
  • ایجاد ساختار صفحه اصلی، درباره من، بخش نمونه‌کارها و صفحه تماس.
  • مدیریت تصاویر، ویدئوها و لینک‌ها.
  • فرم‌های HTML و عناصر ورودی.
• ماژول ۳: CSS3 پیشرفته – زیبایی و چیدمان
  • مدل جعبه‌ای (Box Model)، Display Properties (Inline, Block, Inline-Block).
  • استایل‌دهی پیشرفته: Gradientها، Shadowها، Transforms و Transitions.
  • Flexbox برای چیدمان‌های یک‌بعدی: ساخت ناوبری‌ها و بخش‌های متوالی.
  • CSS Grid برای چیدمان‌های دوبعدی: طراحی ساختار کلی صفحه و گالری نمونه‌کارها.
  • انیمیشن‌های CSS برای افزودن جلوه‌های بصری پویا.
  • فونت‌های سفارشی و آیکون‌ها (مانند Font Awesome).
• ماژول ۴: جاوااسکریپت تعاملی – روح بخشیدن به وب‌سایت
  • مقدمه‌ای بر جاوااسکریپت (ES6+): متغیرها، انواع داده، اپراتورها، شرط‌ها و حلقه‌ها.
  • کار با DOM (Document Object Model) و دستکاری عناصر HTML.
  • ساخت منوی ناوبری واکنش‌گرا (Hamburger Menu).
  • افزودن قابلیت اسکرول نرم (Smooth Scroll).
  • پیاده‌سازی یک اسلایدشو یا فیلتر گالری نمونه‌کار.
  • اعتبارسنجی اولیه فرم تماس سمت کلاینت.
• ماژول ۵: طراحی واکنش‌گرا و بهینه‌سازی
  • مقدمه‌ای بر Mobile-First Design.
  • استفاده از Media Queries برای تطبیق طرح با اندازه‌های مختلف صفحه.
  • تصاویر واکنش‌گرا و بهینه‌سازی منابع.
  • بهبود عملکرد وب‌سایت (بهینه‌سازی کد، فشرده‌سازی).
  • آشنایی با مفاهیم اولیه SEO برای وب‌سایت‌های فرانت‌اند.
• ماژول ۶: استقرار و آینده
  • نحوه آماده‌سازی پروژه برای استقرار.
  • استفاده از پلتفرم‌هایی مانند GitHub Pages, Netlify یا Vercel برای میزبانی وب‌سایت.
  • معرفی مفاهیم Git و GitHub برای کنترل نسخه (اختیاری).
  • گام‌های بعدی برای پیشرفت در مسیر توسعه وب.