آموزش طراحی سایت با bootstrap 5

آموزش طراحی سایت با بوت استرپ ( Bootstrap 5 )

چرا آموزش طراحی سایت با بوت استرپ برای طراحان وب اهمیت دارد

واکنش گرایی یا ریسپانسیو سازی صحفات وب با Bootstrap 5

از صفر طراحی سایت انجام بدید …

مخاطبین دوره

دوره جامع طراحی سایت با HTML و CSS و bootstrap 5 هیچ پیش نیازی ندارد .ولی قبل از ثبت نام می بایست به موارد زیر توجه کنید تا در ادامه آموزش به مشکل نخورید.

این دوره برای چه کسانی توصیه می شود؟

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

مزایای دوره آموزش طراحی سایت

• آموزش از سطح کاملا مقدماتی شروع می شود
• آموزش کاملا پروژه محور و متناسب با نیاز و تغییرات روز است
• آموزش را تا سطح پیشرفته ادامه می دیم تا کاملا حرفه بشید
• ارتباط مستقیم با مدرس
• پشتیبانی مادام‌العمر در تلگرام/پنل کاربری/واتساپ/ایمیل
• دسترسی همیشگی به همه فایل‌ها
• ارتباط از راه دور جهت رفع اشکالات و
• ابهامات شما در طراحی سایت
• بروزرسانی دائمی و رایگان
• سورس کد کامل پروژه ها
• تمام سوالات شما در کمتر از ۲۴ ساعت در طول روز پاسخ داده می شود

آموزش غیرحضوری و آنلاین

مخاطبین دوره طراحی سایت با HTML و CSS :

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

بعد از گذراندن این دوره به چه مهارتی دست پیدا میکنم

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

پشتیبانی دوره چطوره؟

قالب طراحی شده در این دوره

صفحه اصلی طراحی شده 

صفحه داخلی یا single طراحی شده در این دوره

صفحه archive طراحی شده در این دوره آموزش طراحی قالب html css

صفحه جستجو طراحی شده در این دوره آموزش  طراحی قالب html css

صفحه 404 طراحی شده در آموزش طراحی قالب html css

صفحه ورود و عضویت طراحی شده در این آموزش طراحی قالب html css

سر فصل های آموزش طراحی قالب html5  و css3 با bootstrap5

جلسه 1 آموزش طراحی قالب html و css ابزار های مورد نیاز برای طراحی قالب

• در این دوره آموزش از چه نرم افزاری استفاده می شود ؟
• نرم افزار webstorm
• آموزش نصب WebStorm 2020
• ساخت دومین مجازی با xampp
• آموزش ویدیویی ایجاد دامنه مجازی در لوکال هاست (نرم افزار XAMPP)
• دانلود ابزار های مورد نیاز
• ساخت سند برای طراحی
• و غیره …

جلسه 2 آموزش طراحی قالب html و css لود کردن فایل های موردنیاز

• فراخوانی فایل های css
• فراخوانی فایل js
• فراخوانی فایل fonts
• ساخت سند style.css
• قرار دادن کد های ریست
• روش اسفاده از فونت ها
• و غیره …

جلسه 3 آموزش طراحی قالب html و css پیاده سازی اعلانات سایت

• نوشتن کد های هدر سایت توسط کد های HTML5
• نهوه کامنت گذاری داخل کدهای html
• تعریف کدهای html برای اعلانات
• استایل نویسی اعلانات
• استفاده از linear-gradient برای پس زمینه
• معرفی سایت linear-gradient برای طراحی سایت
• استفاده از کدهای  bootstrap5 بستن اعلانات
• و غیره…

جلسه 4 آموزش طراحی قالب html و css پیاده سازی منوی بالای سایت

• پیاده سازی منوی بالا
• تعریف کد های html برای منو
• توضیحات خولصه در مورد col بوت استراپ
• استفاده از کد های بوت استراپ برای تفسیم بندی
• استایل نویسی منوی
• استفاده از before  سی اس اس برای زیبا سازی منو
• تکمیل استایل منوی بالا به صورت کامل
• وغیره…

جلسه 5 آموزش طراحی قالب html و css پیاده سازی منوی اصلی سایت قسمت اول

• کد های html منوی اصلی سایت
• استفاده از کدهای nav بوت استراپ
• توضیحات لازم از استفاده از navbar
• روش استفاده از navbar ها برای منوی سایت
• روش استایل نویسی منوی اصلی
• استفاده از navbar-brand
• قرار دادن لوگو سایت در منوی اصلی
• و غیره …

جلسه 6 آموزش طراحی قالب html و css پیاده سازی منوی اصلی سایت قسمت دوم تکمیل منو

• ساخت منوی آبشاری
• استایل منوی آبشاری
• کد html سبد خرید
• کد های html دکمه ورود و ثبت نام
• استایل سبد خرید
• استایل دگمه ورود و ثبت نام
• منو اصلی به صورت کامل تکمیل
• و غیره …

جلسه 7 آموزش طراحی قالب html و css پیاده سازی باکس جستجو

• تعریف کدهای html برای sidebar و  content
• تقسیم بندی استفاده col های بوت استراپ
• استفاده از کامنت ها برای تمیز نگه داشت کد ها
• استفاده از کلاس های بوت استراپ برای فاصله
• استفاده از کد های html  بوت استراپ برای فورم ها
• استایل نویسی فرم جستجو
• و غیره …

جلسه 8 آموزش طراحی قالب html و css پیاده سازی اسلایدر اصلی سایت

• معرفی اسلایدر بوت استراپ
• نهوه استفاده از اسلایدر
• پیاده سازی owl-carousel
• کدهای html و owl-carousel
• کدهای js اسلایدر owl-carousel
• استفاده از js در اسلایدر
• اسفاده از فونت آیکونها در اسلایدر
• استفاده به صورت راست چین در owl-carousel اسلایدر
• استایل نویسی owl-carousel به صورت کامل
• و غیره …

جلسه 9 آموزش طراحی قالب html و css پیاده سازی باکس آخرین مقالات سایت

• استفاده از کامنت ها برای مرتبط سازی
• استفاده از کد های html5 برای هدر باکس های
• استفاده از فونت آیکونها
• استفاده از کلاس های بوت استراپ
• استفاده از float end
• استایل نویسی قسمت هدر مطالب
• و غیره …

جلسه 10 آموزش طراحی قالب html و css پیاده سازی باکس آخرین مقالات سایت قسمت تکمیلی

• پیاده سازی باکس های مقالت سایت
• استفاده از col بوت استراپ برای تقسیم بندی
• استفاده از کامنت ها
• استفاده از کد های html 5 برای سؤ سایت
• قرار دادن عنوان
• قرا دادن تصویر
• قرار دادن دسته بندی
• و غیره ..

جلسه 11 آموزش طراحی قالب html و css پیاده سازی باکس آموزش های ریگان به صورت اسلایدری

• پیاده سازی عنوان باکس آموزش های رایگان
• نهوه کامنت گذاری
• استفاده از کد های html5
• استفاده از کد های بوت استراپ
• استفاده از کلاس های پیش فرض بوت استراپ برای وسط چین کردن
• پیاده سازی زیر عنوان باکس
• قرار دادن border زیر عنوان به صورت خیلی زیبا
• استایل نویسی عنوان به صورت کامل
• و غیره …

جلسه 12 آموزش طراحی قالب html و css قسمت تکمیلی باکس آموزش های ریگان به صورت اسلایدری

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

جلسه 13 آموزش طراحی قالب html و css پیاده سازی باکس پاکدست یا موزیک پلیر

• استفاده از کامنت ها برای جدا سازی
• پیاده سازی عنوان باکس
• پیاده سازی زیر عنوان باکس
• پیاده سازی تصویر پاکدست
• پیاده سازی موزیک پلیر
• معرفی یک سایت برای موزیک پلیر ها
• دانلود موزیک پلیر
• روش استفاده از موزیک پلیر
• و کلی توضیحات دیگر…

جلسه 14 آموزش طراحی قالب html و css پیاده سازی سایدبار چسبان

• کد های html5 برای سایدبار
• تعریف کلاس و آیدی برای سایدبار
• استفاده از آیدی برای چسبان کردن سایدبار
• تعریف کد های جاوا اسکریپت برای چسبان کردن
• پیاده سازی باکس سایدبار
• پیاده سازی عنوان سایدبار
• استایل نویسی عنوان
• قرار دادن تصویر تبلیغات در سایدبار
• کنترل تصویر با استایل
• پیاده سازی تب ها
• و غیره…

جلسه 15 آموزش طراحی قالب html و css پیاده سازی تب ها سایدبار

• کد های html تب ها
• استایل دگمه تب ها
• پیاده سازی محبوب ترین ها
• کد های html محبوب ترین ها
• استایل content تب ها
• استایل باکس محبوب ترین ها
• پیاده سازی جدید ترین مقالات
• کد های جدید ترین مقالات
• و غیره…

جلسه 16 آموزش طراحی قالب html و css قسمت پایانی سایدبار چسبان

• استایل جدید ترین مطالب
• استایل تصویر جدید ترین مطالب
• استایل عنوان جدید
• استایل متن خلصه جدید ترین
• استایل متا های جدید ترین مطالب
• پیاده سازی قسمت دیدگاه های تب
• کد های html دیدگاه
• استایل دیدگاه
• و غیره…

جلسه 17 آموزش طراحی سایت bootstrap پیاده سازی ویدیو لیست ها قسمت یک

• شروع ویدیو لیست ها
• استفاده از کامنت ها برای جدا سازی
• استفاده از کد های html5
• انتخاب پس زمینه
• قرار دادن عنوان
• قرار دادن زیر عنوان
• استفاده از کد بوت استراپ
• استفاده از تب ها
• استفاده از تگ ویدیو
• و غیره…

جلسه 18 آموزش طراحی سایت bootstrap پیاده سازی ویدیو لیست ها قسمت دوم تکمیلی

• پیاده سازی تب های
• استفاده از تصویر با جای متن
• استفاده از کد bootstrap
• استفاده از flex ها
• وارد کردن تصویر ویدیو
• وارد کردن عنوان ویدیو
• وارد کردن تاریخ انتشار ویدیو
• استفاده از آیکونها
• استایل تمام قسمت های لیست ویدیو ها
• و غیره…

جلسه 19 آموزش طراحی سایت bootstrap پیاده سازی مطالب وبلاک ویژه

• پیاده سازی عنوان مطالب ویژه
• استفاده از کد های bootstrap
• برای تقسیم بندی تصویر مطالب وبلاک از col های bootstrap
• ایجاد لینک تصویر
• کد های html5 برای تصویر
• وارد کردن تصویر
• استایل تصویر
• استایل دسته بندی تصویر
• استایل عنوان تصویر
• استایل تمام قسمت های مطالب وبلاک ویژه
• و غیره…

جلسه 20 آموزش طراحی سایت bootstrap پیاده سازی باکس های نظرات مشتریان

• استفاده از اسلایدر برای نمایش نظرات مشتریان
• تعریق کلاس اسلایدر
• استفاده از کدها bootstrap
• پیاده سازی عنوان
• پیاده سازی زیر عنوان اسلایدر
• کد های html نظرات مشتریان
• استفاده از row
• تصویر مشتری
• نام مشتری
• لینک ویدیو مشتری
• استایل باکس
• و غیره…

جلسه 21 آموزش طراحی سایت bootstrap پیاده سازی تصویر و باکس های ریپورتاژ آگهی

• پیاده سازی تصویر
• استایل تصویر
• پیاده سازی باکس های ریپورتاژ آگهی
• استفاده از کد های bootstrap
• قرار دادن تصویر در پس زمینه باکس
• قرار دان تصویر آیکونی
• پیاده سازی عنوان
• پیاده سازی توضیحات
• استایل بسیار زیبا برای باکس
• و غیره…

جلسه 22 آموزش طراحی سایت  bootstrap 5 پیاده سازی فوتر به صورت کامل پایان صفحه اصلی

• استفاده از کد های html5
• نوشتن کد های html فوتر سایت
• قرار دادن لوگو
• قرار دادن عنوان لوگو
• پیاده سازی منوی های فوتر
• پیاده سازی کپی رایت فوتر سایت
• استایل تمام قسمت های فوتر سایت
• پایان صفحه اصلی سایت
• و غیره…