دوره آموزشی Bootstrap 5 از صفر: ساخت 5 وبسایت مدرن
13 ساعت 19 دقیقهمبتدی2026-08-18
مدرسین

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.
در ابتدا با عناصر اصلی 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
- معرفی پروژه
- راهاندازی پروژه
- هدر و اسکریپت متن چرخشی
- شرکا و فرم
- اسکرول ناوبری و راهکارها
- جزئیات و تخصصها
- بخش ویدیو و دکمه انیمیشنی
- مودال ویدیو
- بخشهای قیمتگذاری و پروژهها
- مودالهای پروژه
- بخش خبرنامه و فوتر
- صفحه حریم خصوصی