دوره آموزشی Bootstrap 5 از صفر: ساخت 5 وب‌سایت مدرن

دوره آموزشی Bootstrap 5 از صفر: ساخت 5 وب‌سایت مدرن

13 ساعت 19 دقیقهمبتدی2026-08-18

مدرسین

Packt Publishing

Packt Publishing

جزئیات دوره

Bootstrap یکی از محبوب‌ترین فریم‌ورک‌های توسعه وب برای ساخت وب‌سایت‌های واکنش‌گرا و سازگار با اندازه‌های مختلف صفحه‌نمایش است. در این دوره، کار با Bootstrap را از مفاهیم پایه شروع می‌کنید و قدم‌به‌قدم یاد می‌گیرید چگونه از امکانات این فریم‌ورک برای ساخت رابط‌های کاربری حرفه‌ای و responsive استفاده کنید.

در ابتدا با عناصر اصلی Bootstrap مانند Containers، Typography، Buttons و Breakpoints آشنا می‌شوید و سپس به سراغ کامپوننت‌های تعاملی مبتنی بر JavaScript مانند Dropdown، Modal و Carousel می‌روید. ساختار دوره کاملاً عملی است و در طول مسیر با انجام پروژه‌ها و چالش‌های کوتاه، مفاهیم را در قالب تجربه واقعی تمرین می‌کنید.

در ادامه، نحوه استفاده از Sass برای شخصی‌سازی عمیق‌تر ظاهر وب‌سایت‌ها را یاد می‌گیرید و با تکنیک‌هایی مانند Navbar Scroll Effect، Rotating Text و JavaScript Typing Effects آشنا می‌شوید. بخش مهمی از دوره به پروژه‌های عملی اختصاص دارد و در مجموع پنج وب‌سایت با طراحی و سطح پیچیدگی متفاوت ایجاد خواهید کرد.

در پایان نیز یاد می‌گیرید چگونه پروژه‌های ساخته‌شده را روی سرویس‌هایی مانند Vercel و Netlify منتشر کنید. این دوره برای افرادی که می‌خواهند Bootstrap را به‌صورت کاربردی یاد بگیرند و مهارت خود را در ساخت وب‌سایت‌های responsive توسعه دهند، انتخاب مناسبی است.

اهداف یادگیری
درک مفاهیم پایه Bootstrap و نحوه استفاده از Containers، Grid و Breakpoints.
ایجاد رابط‌های کاربری Responsive با استفاده از امکانات Bootstrap.
استفاده از Typography، Buttons و سایر عناصر پایه برای طراحی صفحات وب.
پیاده‌سازی کامپوننت‌های تعاملی Bootstrap مانند Dropdown، Modal و Carousel.
استفاده از قابلیت‌های JavaScript در Bootstrap برای ایجاد عناصر پویا و تعاملی.
شخصی‌سازی ظاهر وب‌سایت‌ها با استفاده از Sass و ایجاد Designهای متفاوت.
پیاده‌سازی تکنیک‌هایی مانند Navbar Scroll Effect، Rotating Text و Typing Effects.
ساخت پنج وب‌سایت متنوع با استفاده از قابلیت‌ها و کامپوننت‌های Bootstrap.
انتشار و Deploy پروژه‌های وب روی پلتفرم‌هایی مانند Vercel و Netlify.
به‌کارگیری Bootstrap، JavaScript و Sass برای ساخت پروژه‌های واقعی و Responsive.

سرفصل ها

مقدمه

  • خوش‌آمدگویی به دوره
  • مرور پروژه‌ها
  • بوت‌استرپ چیست
  • نحوه استفاده از بوت‌استرپ
  • راه‌اندازی محیط پایه
  • راه‌اندازی محیط تمرینی بوت‌استرپ

مبانی بوت‌استرپ - بخش اول

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

مبانی بوت‌استرپ - بخش دوم

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

کامپوننت‌های پویای جاوااسکریپت

  • منوهای کشویی
  • آکاردئون‌ها و جمع‌شوندگی
  • اسلایدر چرخشی
  • اعلان Toast
  • اسپینرها
  • مودال‌ها
  • پاپ‌اورها و تولتیپ‌ها
  • تغییردهنده حالت تاریک

چالش‌های پروژه کوچک

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

گردش کار سفارشی Sass و قالب اولیه

  • Sass چیست
  • نصب و راه‌اندازی Sass
  • نصب، راه‌اندازی و شخصی‌سازی بوت‌استرپ
  • نصب و راه‌اندازی Font Awesome

وب‌سایت 1 - وب‌سایت کتاب الکترونیک

  • معرفی پروژه
  • راه‌اندازی پروژه
  • ناوبری و متغیرهای Sass
  • هدر و بخش Hero
  • بخش آیکون‌ها
  • افکت اسکرول نوار ناوبری
  • بخش‌های جزئیات با مودال
  • نظرات مشتریان، بخش دانلود و فوتر
  • صفحه تماس
  • دیپلوی روی Vercel
  • استفاده از Formspree برای فرم‌های تماس

وب‌سایت 2 - وب‌سایت آموزشی Corso

  • معرفی پروژه
  • راه‌اندازی پروژه
  • ناوبری و هدر
  • اسلایدر تصاویر
  • بخش ثبت‌نام، اسکرول ناوبری و جزئیات
  • بخش‌های نکات کلیدی و خلاصه
  • دعوت به اقدام و دستاوردها
  • خبرنامه و فوتر

وب‌سایت 3 - وب‌سایت نمونه‌کار

  • معرفی پروژه
  • راه‌اندازی پروژه
  • هدر با پوشش تیره
  • افکت تایپ با جاوااسکریپت
  • بخش‌های درباره ما و مهارت‌ها
  • پروژه‌ها و لایت‌باکس
  • StyleShout و خدمات
  • آمار و فرم‌ها
  • دیپلوی روی Netlify

وب‌سایت 4 - طراحی دفتر Yavin

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

وب‌سایت 5 - راهکارهای نرم‌افزاری Vera

  • معرفی پروژه
  • راه‌اندازی پروژه
  • هدر و اسکریپت متن چرخشی
  • شرکا و فرم
  • اسکرول ناوبری و راهکارها
  • جزئیات و تخصص‌ها
  • بخش ویدیو و دکمه انیمیشنی
  • مودال ویدیو
  • بخش‌های قیمت‌گذاری و پروژه‌ها
  • مودال‌های پروژه
  • بخش خبرنامه و فوتر
  • صفحه حریم خصوصی
۲۰۰,۰۰۰ تومان