جلسه ۱: مقدمه دوره ۹ دقیقه

  • توضیحاتی در رابطه با دوره
  • معرفی مدرس
  • کار‌هایی که در این دوره انجام خواهیم داد.

جلسه ۲: روش های کسب درآمد از طریق طراحی سایت ۲۳ دقیقه

  • روش های کسب در آمد از طریق طراحی سایت
  • آزادکاری یا فریلسنری از طریق سایت های انجام پروژه
  • نحوه طراحی سایت برای افراد و شرکت ها
  • نحوه قیمت گذاری پروژه های طراحی سایت
  • نحوه عقد قرارداد طراحی سایت با مشتری و مواردی که باید رعایت کنید
  • کسب در آمد از طریق پشتیبانی وبسایت مشتریان
  • ساخت محصول و فروش آن در مارکت های آنلاین و شرایط کار با تم فارست
  • کسب در آمد از طریق آموزش به دیگران

جلسه ۳: معرفی و آموزش کار با Adobe XD ۲۳ دقیقه

  • معرفی ابزار طراحی سایت
  • اسکتچ و استفاده از آن برای طراحی سایت
  • محیط کار با Adobe XD

جلسه ۴: طراحی سایت در Adobe XD بصورت عملی ۱ ساعت و ۱۵ دقیقه

  • ساخت یک صفحه فرود در Adobe XD

جلسه ۵: تست ریسپانسیو Adobe XD با موبایل و تبلت ۱ دقیقه

  • تست ریسپانسیو با موبایل و تبلت
  • تست عملی ریسپانسیو
  • اتصال Adobe XD به موبایل و تبلت

جلسه ۶: کار با بخش‌های مختلف فتوشاپ برای طراحان سایت ۳۴ دقیقه

  • چیدمان و طرح بندی استاندارد یک صفحه ی وب در فتوشاپ
  • مفهوم سند و ایجاد یک سند برای طرح گرافیکی یک صفحه وب
  • آشنایی با ابزارهای فتوشاپ برای طراحی یک صفحه وب
  • معرفی واحدهای اندازه گیری و انتخاب اندازه مناسب برای یک سند گرافیکی صفحه وب
  • کار با بخش‌های مختلف Blending Options
  • ایجاد یک بنر تبلیغاتی برای شروع کار با فتوشاپ بصورت عملی

جلسه ۷: طراحی قالب در فتوشاپ - قسمت اول ۱ ساعت و ۲۹ دقیقه

  • روانشناسی رنگ و انتخاب صحیح ست رنگی در طراحی قالب
  • طرح ریزی قسمت های اصلی سایت (هدر، فوتر، ساید بار) با ابزارهای فتوشاپ
  • مفاهیم ruler و guideline؛ تنظیم و استفاده از آن ها
  • ایجاد طرح گرافیکی صفحه ی وب در فتوشاپ ( فایل psd طرح وب سایت)
  • ایجاد بخش هدر سایت در فایل psd
  • اضافه کردن استایل به بخش های ایجاد شده
  • توضیح میزان شفافیت و شفافیت داخلی یک صفحه ی وب
  • معرفی انواع border و inner shadow متن و تصویر
  • ساخت گرادینت‌ها در طراحی وب به سبک جدید
  • استایل دادن به بخش های مختلف سند گرافیکی یک صفحه ی وب در فتوشاپ
  • توضیح مفاهیم UX و UI برای طراحی صفحات وب
  • ساخت منوی وبسایت در فتوشاپ
  • طراحی بخش سبدخرید سایت در هدر
  • طراحی لوگو ساده و شیک برای مشتری در فتوشاپ
  • طراحی مگامنو و هدر کامل وبسایت در فتوشاپ

جلسه ۸: طراحی قالب در فتوشاپ - قسمت دوم ۱ ساعت و ۱۹ دقیقه

  • طراحی بخش محتوای وبسایت در فتوشاپ
  • طراحی نمایش لیست محصولات وبسایت در فتوشاپ
  • طراحی صفحه اصلی وبسایت در فتوشاپ بصورت کام
  • معرفی ابزار lorem ipsum برای ایجاد متن تصادفی مورد نیاز برای یک صفحه وب

جلسه ۹: طراحی قالب در فتوشاپ - قسمت سوم ۱ ساعت و ۱۵ دقیقه

  • طراحی فوتر وبسایت در فتوشاپ
  • تکمیل طرح اصلی وبسایت و افزودن مواردی برای زیباسازی بیشتر سایت

جلسه ۱۰: طراحی قالب در فتوشاپ - قسمت چهارم ۳۷ دقیقه

  • طراحی صفحه مقالات در فتوشاپ بصورت کامل
  • طراحی صفحه تماس با ما و درباره ما و … در فتوشاپ
  • طراحی صفحه ۴۰۴ یافت نشد در فتوشاپ

جلسه ۱۱: طراحی قالب در فتوشاپ - قسمت پنجم ۴۷ دقیقه

  • طراحی صفحه محصولات در فتوشاپ بصورت کامل
  • طراحی صفحه آرشیو محصولات در فتوشاپ بصورت کامل
  • اتمام طراحی سایت در فتوشاپ
  • دریافت خروجی برای ارائه به مشتری

جلسه ۱۲: شروع یادگیری HTML و معرفی تگ‌ها ۳۸ دقیقه

  • توضیح در مورد فایل های HTML و CSS
  • تفاوت فایل های HTML و CSS
  • چگونگی ایجاد فایل ها ی HTML و CSS
  • طرز نمایش، استایل بندی، چیدمان و رنگ بندی صفحه ی وب با CSS
  • توضیح چگونگی نمایش یک صفحه ی وب برای user ها
  • توضیح ساختار فایل HTML شامل تگ های header و body
  • معرفی تگ های مختلف HTML

جلسه ۱۳: شروع یادگیری CSS ۳۴ دقیقه

  • توضیح ساختار CSS به طور کامل
  • چگونگی ایجاد کلاس و آی دی در فایل CSS و فراخوانی آنها
  • تفاوت آی دی و کلاس در یک فایل CSS
  • آموزش CSS بصورت کامل و آشنایی با خصوصیت‌های سی اس اس

جلسه ۱۴: شروع کار با HTML و CSS بصورت عملی ۴۷ دقیقه

  • معرفی نرم افزار های مختلف برنامه نویسی
  • ایجاد یک فایل HTML ساده
  • توضیح ساختار کلی فایل HTML و تگ های HTML
  • معرفی Selector‌ها در CSS و انواع آن‌ها
  • دلیل ایجاد فایل های header، footer،content ،slider و … به صورت جداگانه برای ایجاد صفحات وب
  • توضیح مفهوم minify و مزیت استفاده از کدهای minify شده ی html و css
  • توضیح مسیردهی فایل ها در CSS
  • توضیح چگونگی اضافه کردن فایل CSS به فایل HTML
  • کامنت گذاری در  HTML
  • کامنت گذاری در CSS

جلسه ۱۵: ساخت هدر وبسایت با زبان HTML و CSS ۱ ساعت و ۳۴ دقیقه

  • تبدیل طرح گرافیکی به کد
  • ایجاد یک سند Html برای یک صفحه ی وب بصورت عملی
  • معرفی Css و استفاده از آن برای ایجاد افکت های گرافیکی و ایجاد سند Css بصورت عملی
  • لینک کردن صفحه های Html و Css بصورت عملی
  • کدنویسی قالب طراحی شده در فتوشاپ
  • استفاده از کدهای css reset بصورت عملی
  • شروع کدنویسی بخش های مختلف صفحه ی وب
  • کدنویسی هدر سایت بصورت کامل
  • معرفی کاربرد عملی خاصیت z-index در طراحی وب
  • اضافه کردن فونت به یک فایل Html
  • اضافه کردن تصویر پس زمینه ی سایت
  • کدنویسی بخش header شامل کدنویسی لوگو
  • کدنویسی منوی اصلی سایت
  • مفهوم hover و استفاده از آن برای ایجاد منوها
  • طراحی منو و زیرمنو با Css
  • آشنایی با پسوند SVG و استفاده از آن در وبسایت
  • مشخص کردن نوع و اندازه فونت سایت با استفاده از Css

جلسه ۱۶: ساخت مگامنو و محصولات صفحه اصلی با HTML ۱ ساعت و ۱۴ دقیقه

  • ساخت مگامنو حرفه‌ای در HTML
  • افکت دادن به مگامنو با استفاده از CSS
  • استفاده از تگ img بصورت عملی
  • استایل دهی به سلکتور مختلف last-child و first child
  • شروع ساخت صفحه اصلی وبسایت
  • استفاده از کلاس clear در style.css
  • Hover دادن به بخش های مختلف صفحه ی وب
  • استایل دهی به هدینگ‌ها
  • توضیح کامل‌تر خاصیت float بصورت عملی
  • استایل دادن به بخش های مختلف با استفاده از دستور nth-child

جلسه ۱۷: ساخت ستون کناری وبسایت با HTML و CSS ۵۱ دقیقه

  • ساخت ستون کناری وبسایت در HTML
  • قرار دادن تصویر تبلیغاتی در ستون کناری وبسایت
  • برنامه‌نویسی سایدبار وبسایت
  • اضافه کردن hover به باکس های سایدبار
  • ساخت آخرین مطالب با HTML در سایدبار
  • ساخت فرم خبرنامه در HTML
  • ساخت اسلایدر موبایل در HTML

جلسه ۱۸: ساخت اسلایدر در HTML و CSS ۴۷ دقیقه

  • ساخت اسلایدر موبایلی در صفحه اصلی سایت
  • آموزش کار با Owl Slider
  • اضافه کردن جاوا اسکریپت به سایت طراحی شده
  • استفاده از اسلایدر اسکرولی در وبسایت

جلسه ۱۹: ساخت فوتر وبسایت با HTML و CSS ۱ ساعت و ۱۴ دقیقه

  • ساخت فوتر وبسایت در HTML
  • آموزش عملی کار با گرادینت‌ها در CSS
  • ساخت پس زمینه فوتر وبسایت با CSS
  • قرار دادن اینماد و لوگو ساماندهی در فوتر وبسایت
  • اتمام HTML صفحه اصلی و کپی گرفتن برای استفاده در دیگر صفحات وبسایت

جلسه ۲۰: ساخت صفحات داخلی و صفحه 404 ۳۵ دقیقه

  • کپی گرفتن از فایل‌ها برای ساخت صفحه جدید HTML
  • ساخت فایل صفحات درباره ما، تماس با ما و … در HTML
  • ساخت صفحه ۴۰۴ یافت نشد با HTML
  • آموزش سازگار کردن سایت با مرورگر‌های مختلف

جلسه ۲۱: ساخت سایر صفحات HTML و توضیح ساختار قالب وردپرس ۵۶ دقیقه

  • ساخت صفحات دیگر در  html
  • اتمام نشانه گذاری html و تکمیل قالب در html
  • توضیح ساختار کلی قالب وردپرس
  • آموزش ساخت فایل‌های مختلف در قالب وردپرس

جلسه ۲۲: ساخت قالب وردپرس و شروع برنامه نویسی وردپرس ۵۲ دقیقه

  • ساخت یک قالب ساده خام برای وردپرس
  • توضیح ساختار قالب وردپرس بصورت عملی
  • شروع تبدیل قالب HTML به وردپرس
  • داینامیک کردن Title صفحات
  • آدرس دهی بصورت داینامیک برای فایل‌های JS و CSS
  • Include کردن هدر و فوتر در صفحات سایت
  • آموزش ساخت فهرست متغیر در وردپرس
  • سازگار کردن قالب وردپرس با افزونه‌های مختلف

جلسه ۲۳: ساخت مگامنو و سایدبار قالب وردپرس ۱ ساعت و ۱۰ دقیقه

  • ساخت مگامنو عریض بدون استفاده از افزونه
  • آموزش ساخت سایدبار قابل ویرایش از بخش ابزارک‌ها
  • ساخت ابزارک اختصاصی برای قالب وردپرس
  • آموزش افزودن قابلیت تصویر شاخص به وردپرس
  • افزودن سایز‌های مختلف تصویر شاخص در وردپرس
  • مدیریت سایدبار وبسایت با ابزارک‌ها
  • مدیریت تبلیغات وبسایت با استفاده از ابزارک‌ها
  • نمایش آخرین مقالات وبسایت در ستون کناری

جلسه ۲۴: ساخت فوتر و صفحه ۴۰۴ و صفحات آرشیو ۵۹ دقیقه

  • انتقال کد‌های بخش سایدبار به فایل مجزا
  • ساخت پست تایپ سفارشی در وردپرس
  • نمایش پست تایپ سفارشی در بخش اسلایدر
  • ساخت فوتر وبسایت در وردپرس
  • ساخت محل ابزارک برای فوتر
  • مدیریت فوتر از پنل وردپرس
  • برنامه نویسی صفحه ۴۰۴ در قالب وردپرس
  • ساخت سایز تصویر شاخص برای بخش آرشیو
  • برنامه نویسی صفحه آرشیو در قالب وردپرس
  • نمایش شماره صفحات در بخش آرشیو بدون نصب افزونه
  • استایل دهی CSS به بخش شماره صفحات

جلسه ۲۵: ساخت صفحه برگه‌ها و نوشته‌ها در وردپرس ۱ ساعت و ۵ دقیقه

  • نمایش برگه‌ها در وردپرس
  • نمایش نوشته تکی در وردپرس
  • نمایش برچسب‌ها در قالب وردپرس
  • نمایش نام نویسنده در قالب وردپرس
  • نمایش دسته بندی های نوشته در قالب وردپرس
  • نمایش محتوای پست در قالب وردپرس
  • نمایش نظرات در قالب وردپرس
  • ویرایش سی اس اس برای سفارشی سازی نظرات سایت
  • سفارشی کردن برنامه نویسی comments.php

جلسه ۲۶: ساخت صفحه محصول در فروشگاه ۱ ساعت و ۵ دقیقه

  • روش سازگار کردن قالب ساخته شده با ووکامرس
  • استفاده از تصاویر شاخص در صفحه محصول
  • ویرایش بخش های مختلف ووکامرس در قالب طراحی شده
  • سفارشی کردن صفحه نمایش محصول در ووکامرس
  • افزودن بخش مقایسه محصول در قالب طراحی شده
  • ساخت بخش افزودن به لیست خرید آینده
  • سفارشی سازی دکمه افزودن به سبد خرید

جلسه ۲۷: ساخت صفحه محصول در فروشگاه - بخش دوم ۵۵ دقیقه

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

جلسه ۲۸: ساخت صفحه آرشیو محصولات، سبد خرید و حساب کاربری ۴۰ دقیقه

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

جلسه ۲۹: نمایش محصولات ووکامرس در صفحه اصلی سایت ۴۱ دقیقه

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

جلسه ۳۰: ساخت پنل مدیریت برای قالب وردپرس ۵۰ دقیقه

  • بهترین روش برای ساخت پنل تنظیمات قالب وردپرس
  • چرا از روش‌های قدیمی استفاده نمی‌کنیم؟
  • افزودن فیلد متنی به پنل تنظیمات قالب وردپرس
  • افزودن فیلد انتخاب رنگ به پنل تنظیمات قالب وردپرس
  • افزودن فیلد آپلود تصویر به پنل تنظیمات قالب وردپرس
  • مدیریت بخش‌های سایت قالب با پنل تنظیمات قالب وردپرس
  • تغییر لوگوی سایت از پنل تنظیمات قالب وردپرس
  • مدیریت تبلیغات سایت از پنل تنظیمات قالب وردپرس
  • انتخاب دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب

جلسه ۳۱: اضافه کردن رنگ‌بندی و استایل به پنل مدیریت قالب ۴۱ دقیقه

  • کوتاه کردن عنوان محصولات صفحه اصلی برای جلوه بهتر
  • انتخاب عنوان دسته بندی محصولات صفحه اصلی از پنل تنظیمات قالب
  • ساخت رنگ‌بندی و انتخاب رنگ سایت از طریق پنل تنظیمات قالب
  • افزودن رنگبندی سبز، قرمز و آبی به پنل تنظیمات قالب

جلسه ۳۲: ریسپانسیو کردن قالب طراحی شده ۱ ساعت و ۱۹ دقیقه

  • آموزش کامل ریسپانسیو کردن بخش‌های مختلف سایت
  • کار با شرط @media and screen در سی اس اس
  • جلوگیری از اسکرول افقی در حالت موبایل

جلسه ۳۳: ساخت منوی ریسپانسیو برای موبایل و تبلت ۲۸ دقیقه

  • ساخت منوی همبرگری در موبایل
  • اتصال منوی همبرگری به فهرست وردپرس
  • ساخت منو ریسپانسیو بدون نیاز به نصب افزونه (بصورت اختصاصی)
  • ساخت منو ریسپانسیو با استفاده از افزونه
  • استفاده از جاوا اسکریپت برای ساخت منو موبایلی

جلسه ۳۴: اسلایدی کردن تصاویر محصولات ووکامرس و حل مشکل عنوان ۱۲ دقیقه

  • آموزش حل مشکل عنوان در تگ Title
  • آموزش اسلایدی کردن تصاویر محصولات ووکامرس
  • آموزش افزودن LightBox به تصاویر محصولات ووکامرس
  • آموزش حل حذف شدن استایل hover منوی اصلی موقع hover کردن روی submenu

جلسه ۳۵: لینک دادن به عنوان دسته‌بندی‌ها و اضافه کردن Preloader ۲۰ دقیقه

  • لینک کردن دسته بندی های موجود در صفحه اصلی
  • اضافه کردن Preloader به کل صفحات سایت

جلسه ۳۶: ساخت فرم جستجو و نمایش عنصر فقط در ساعات خاص ۲۴ دقیقه

  • ساخت فرم جستجوی سفارشی
  • نمایش عناصر سایت در ساعات خاص

جلسه ۳۷: آموزش ریسپانسیو کردن مگامنو و ساخت منوهای باز شونده ۳۰ دقیقه

  • آموزش ریسپانسیو کردن مگامنو
  • ساخت منوهای باز شونده در حالت موبایلی

جلسه ۳۸: افزودن تنظیمات به ابزارک اختصاصی ساخته شده ۱۶ دقیقه

  • افزودن تنظیمات تغییر عنوان به ابزارک
  • افزودن تغییر تعداد نمایش پست به ابزارک

جلسه ۳۹: قرار دادن پس زمینه جدا برای مگامنوهای مختلف ۷ دقیقه

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

جلسه ۴۰: ساخت مینی سبد خرید برای هدر سایت ۱۲ دقیقه

  • نمایش تعداد محصولات سبد خرید در هدر سایت
  • نمایش سبد خرید سریع در هدر سایت

جلسه ۴۱: نمایش مسیر کاربر در سایت و ساخت فرم ورود کاربر ۱۹ دقیقه

  • نمایش مسیر کاربر در سایت
  • ساخت فرم ورود اختصاصی برای ورود کاربر در قالب

جلسه ۴۲: شرطی کردن نمایش دسته بندی و استفاده از زمینه‌های دلخواه ۲۹ دقیقه

  • استفاده از if_category
  • استفاده از is_category
  • استفاده از فیلد‌های سفارشی وردپرس
  • شرطی کردن فیلد‌های سفارشی وردپرس

جلسه ۴۳: طراحی شبکه پست، مسیر راهنما، افزودن Arrow به اسلایدر و آیکون کنار منو ۴۲ دقیقه

  • ساخت شبکه پست شبیه تلویزیون میهن وردپرس
  • افزودن فلش به مسیر راهنما در سایت
  • افزودن Arrow به اسلایدر سایت
  • اضافه کردن آیکون فلش به منوهای دارای زیرمنو

جلسه ۴۴: پاسخ به سوالات شما و چند زبانه کردن قالب وردپرس ۳۷ دقیقه

  • کار با فایل‌های استایل rtl.css و ltr.css
  • چپ چین کردن قالب وردپرس
  • راست چین کردن قالب وردپرس
  • افزودن قابلیت ترجمه به قالب
  • ساخت فایل‌های ترجمه برای قالب
  • استفاده از تابع e_
  • سازگار کردن قالب با افزونه‌های چند زبانه وردپرس
  • کار با نرم افزار Poedit

جلسه ۴۵: اسکرول صفحه با کلیک روی یک یا چند دکمه ۲۵ دقیقه

  • استفاده از خاصیت Smooth Scroll در CSS
  • ساخت نوار ثابت پیمایش در صفحه محصول
  • کلیک روی دکمه و اسکرول به بخش دلخواه از صفحه

جلسه ۴۶: سازگار کردن قالب با المنتور و ساخت المنت جدید ۳۶ دقیقه

  • معرفی افزونه المنتور
  • بررسی مستندات المنتور برای توسعه‌‌دهندگان
  • سازگار کردن قالب با المنتور
  • ساخت افزونه مکمل قالب برای المنتور
  • ساخت المنت اختصاصی جدید برای المنتور

جلسه ۴۷: ادغام پلاگین با قالب وردپرس و نمایش تاریخ آپدیت مطالب ۱۴ دقیقه

  • ادغام کردن پلاگین با قالب ساخته شده
  • نمایش تاریخ آپدیت مطالب سایت
  • نمایش تاریخ آپدیت جایگزین با تاریخ انتشار

جلسه ۴۸: Ajax کردن سبد خرید و بستن منوی موبایل با کلیک خارج از کادر ۱۹ دقیقه

  • ایجکس کردن سبد خرید مینی
  • بستن منوی موبایلی با کلیک خارج از کادر منو

جلسه ۴۹: ساخت فرم جستجوی تمام صفحه ۳۵ دقیقه

  • آموزش کار با جی کوئری
  • نمایش و مخفی کردن یک المنت با کلیک روی المنت دیگر
  • ساخت فرم تمام صفحه برای جستجو
  • ساخت دکمه بستن جستجو