آموزش بوت استرپ 5 از ابتدا | ساخت 5 وب سایت مدرن

Bootstrap 5 From Scratch | Build 5 Modern Websites

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش سفارشی سازی و ساخت وب سایت های مدرن از ابتدا با استفاده از Bootstrap 5 ایجاد 5 وب سایت با کیفیت بالا از ابتدا ایجاد یک صفحه بخار محیطی برای کامپایل Sass و سفارشی سازی چالش های پروژه کوچک Bootstrap 3 یادگیری و بررسی کلاس ها و ابزارهای Bootstrap با استفاده از فایل های sandbox آموزش تکنیک های معنایی HTML5 و CSS پیش نیازها: شما باید اصول اولیه HTML و CSS را بدانید

این دوره برای کسانی است که می خواهند یاد بگیرند که چگونه با استفاده از چارچوب CSS بوت استرپ، وب سایت ها و رابط های کاربری مدرن بسازند. این دوره بسیار مناسب برای مبتدیان است، اما برای هرکسی که می خواهد پروژه های جالبی بسازد نیز مناسب است.


این دوره به چند قسمت تقسیم می شود...


جعبه ایمنی بوت استرپ


ما با یادگیری تمام کلاس‌های مهم Bootstrap، ابزارهای کمکی، کمک‌کننده‌ها و غیره با استفاده از جعبه ایمنی Bootstrap شروع می‌کنیم. این مجموعه ای از فایل هایی است که برای کامپوننت ها و قسمت های خاصی مانند دکمه ها، تایپوگرافی، ستون های شبکه، فلکس و غیره دسته بندی شده اند. شما یک نسخه شروع بدون کلاس خواهید داشت و ما کلاس ها را مرور می کنیم و اضافه می کنیم و در مورد آنها صحبت می کنیم. در برخی موارد CSS را بررسی کنید. ما از sandbox برای همه اجزای CSS و همچنین ویجت‌های جاوا اسکریپت مانند چرخ فلک، آکاردئون، اعلان‌های نان تست و غیره استفاده خواهیم کرد.


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


چند پروژه کوچک وجود خواهد داشت که من از شما می‌خواهم آن‌ها را بر اساس آنچه در بخش‌های جعبه شنی آموخته‌اید، تکمیل کنید. این شامل یک شبکه قیمت گذاری، جزء رتبه بندی ها و یک لیست کاربر است. ممکن است موارد بیشتری را نیز به این بخش اضافه کنم.


الگوی شروع/صفحه دیگ بخار


ما در حال ایجاد یک الگو و محیط برای ساخت پروژه های اصلی خود خواهیم بود. این شامل استفاده از NPM (Node Package Manager) برای نصب Bootstrap و Sass می شود. ما بوت استرپ را با تغییر متغیرهای Sass و سپس کامپایل کردن یک فایل bootstrap.css سفارشی می کنیم. اگر NPM یا Sass را نمی شناسید، خوب است. در حین رفتن همه چیز را توضیح می دهم.


5 وب سایت اصلی


در مرحله بعد، از الگوی شروع برای ایجاد 5 وب سایت عالی استفاده خواهیم کرد. در این وب‌سایت‌ها، ما از مؤلفه‌های بوت استرپ، ویجت‌های جاوا اسکریپت و همچنین برخی از کتابخانه‌های جاوا اسکریپت سفارشی و بخش سوم استفاده خواهیم کرد تا عملکرد کمی بیشتر به ما ارائه دهد.


وب سایت ها به شرح زیر هستند:


- وب سایت کتاب الکترونیکی - وب سایتی که یک کتاب الکترونیکی رایگان در مورد راه اندازی وبلاگ ارائه می دهد

- وب سایت Corso - وب سایت ارائه دهنده دوره های آموزشی و سمینارها

- وب سایت نمونه کارها - نمونه کارها به ظاهر مدرن برای توسعه دهندگان

- وب سایت Yavin - کسب و کاری که فضاهای اداری سفارشی ایجاد می کند

- وب سایت Vera - وب سایت راه حل های نرم افزاری


سرفصل ها و درس ها

شروع شدن Getting Started

شروع شدن Getting Started

شروع شدن Getting Started

  • به دوره خوش آمدید Welcome To The Course

  • به دوره خوش آمدید Welcome To The Course

  • به دوره خوش آمدید Welcome To The Course

  • بررسی اجمالی پروژه ها Projects Overview

  • بررسی اجمالی پروژه ها Projects Overview

  • بررسی اجمالی پروژه ها Projects Overview

  • بوت استرپ چیست؟ What Is Bootstrap?

  • بوت استرپ چیست؟ What Is Bootstrap?

  • بوت استرپ چیست؟ What Is Bootstrap?

  • نحوه استفاده از بوت استرپ How To Use Bootstrap

  • نحوه استفاده از بوت استرپ How To Use Bootstrap

  • نحوه استفاده از بوت استرپ How To Use Bootstrap

  • تنظیم اولیه محیط Basic Environment Setup

  • تنظیم اولیه محیط Basic Environment Setup

  • تنظیم اولیه محیط Basic Environment Setup

  • راه اندازی Bootstrap Sandbox Bootstrap Sandbox Setup

  • راه اندازی Bootstrap Sandbox Bootstrap Sandbox Setup

  • راه اندازی Bootstrap Sandbox Bootstrap Sandbox Setup

اصول بوت استرپ - قسمت 1 Bootstrap Fundamentals - Part 1

اصول بوت استرپ - قسمت 1 Bootstrap Fundamentals - Part 1

اصول بوت استرپ - قسمت 1 Bootstrap Fundamentals - Part 1

  • ظروف Containers

  • ظروف Containers

  • ظروف Containers

  • تایپوگرافی Typography

  • تایپوگرافی Typography

  • تایپوگرافی Typography

  • نمایش و موقعیت Display & Position

  • نمایش و موقعیت Display & Position

  • نمایش و موقعیت Display & Position

  • رنگ های پس زمینه و متن Background & Text Colors

  • رنگ های پس زمینه و متن Background & Text Colors

  • رنگ های پس زمینه و متن Background & Text Colors

  • فاصله گذاری Spacing

  • فاصله گذاری Spacing

  • فاصله گذاری Spacing

  • اندازه، مرزها و سایه ها Sizing, Borders & Shadows

  • اندازه، مرزها و سایه ها Sizing, Borders & Shadows

  • اندازه، مرزها و سایه ها Sizing, Borders & Shadows

  • نقاط شکست Breakpoints

  • نقاط شکست Breakpoints

  • نقاط شکست Breakpoints

  • دکمه ها Buttons

  • دکمه ها Buttons

  • دکمه ها Buttons

  • نوار ناوبری Navbar

  • نوار ناوبری Navbar

  • نوار ناوبری Navbar

  • حالت تاریک و متغیرها Dark Mode & Variables

  • حالت تاریک و متغیرها Dark Mode & Variables

  • حالت تاریک و متغیرها Dark Mode & Variables

Bootstrap Fundamentals - قسمت دوم Bootstrap Fundamentals - Part Two

Bootstrap Fundamentals - قسمت دوم Bootstrap Fundamentals - Part Two

Bootstrap Fundamentals - قسمت دوم Bootstrap Fundamentals - Part Two

  • Bootstrap Grid & Columns Bootstrap Grid & Columns

  • Bootstrap Grid & Columns Bootstrap Grid & Columns

  • Bootstrap Grid & Columns Bootstrap Grid & Columns

  • کلاس های فلکس باکس Flexbox Classes

  • کلاس های فلکس باکس Flexbox Classes

  • کلاس های فلکس باکس Flexbox Classes

  • کارت ها Cards

  • کارت ها Cards

  • کارت ها Cards

  • لیست گروه ها و نشان ها List Groups & Badges

  • لیست گروه ها و نشان ها List Groups & Badges

  • لیست گروه ها و نشان ها List Groups & Badges

  • فرم ها و ورودی Forms & Input

  • فرم ها و ورودی Forms & Input

  • فرم ها و ورودی Forms & Input

  • اعتبار سنجی و نمایش فرم Form Validation & Display

  • اعتبار سنجی و نمایش فرم Form Validation & Display

  • اعتبار سنجی و نمایش فرم Form Validation & Display

  • هشدارها و نوارهای پیشرفت Alerts & Progress Bars

  • هشدارها و نوارهای پیشرفت Alerts & Progress Bars

  • هشدارها و نوارهای پیشرفت Alerts & Progress Bars

  • جداول Tables

  • جداول Tables

  • جداول Tables

  • خرده نان و صفحه بندی Breadcrumbs & Pagination

  • خرده نان و صفحه بندی Breadcrumbs & Pagination

  • خرده نان و صفحه بندی Breadcrumbs & Pagination

  • سایر ابزارهای CSS Other CSS Utilities

  • سایر ابزارهای CSS Other CSS Utilities

  • سایر ابزارهای CSS Other CSS Utilities

اجزای پویا جاوا اسکریپت Dynamic JavaScript Components

اجزای پویا جاوا اسکریپت Dynamic JavaScript Components

اجزای پویا جاوا اسکریپت Dynamic JavaScript Components

  • کشویی Dropdowns

  • کشویی Dropdowns

  • کشویی Dropdowns

  • آکاردئون و فروپاشی Accordions & Collapse

  • آکاردئون و فروپاشی Accordions & Collapse

  • آکاردئون و فروپاشی Accordions & Collapse

  • چرخ فلک Carousel

  • چرخ فلک Carousel

  • چرخ فلک Carousel

  • اعلان نان تست Toast Notification

  • اعلان نان تست Toast Notification

  • اعلان نان تست Toast Notification

  • اسپینرها Spinners

  • اسپینرها Spinners

  • اسپینرها Spinners

  • مدال ها Modals

  • مدال ها Modals

  • مدال ها Modals

  • پاپاورها و نکات ابزار Popovers & Tooltips

  • پاپاورها و نکات ابزار Popovers & Tooltips

  • پاپاورها و نکات ابزار Popovers & Tooltips

  • تغییر حالت تاریک Darkmode Toggle

  • تغییر حالت تاریک Darkmode Toggle

  • تغییر حالت تاریک Darkmode Toggle

چالش های مینی پروژه Mini-Project Challenges

چالش های مینی پروژه Mini-Project Challenges

چالش های مینی پروژه Mini-Project Challenges

  • مقدمه و مینی پروژه شروع کننده Intro & Mini-Project Starter

  • مقدمه و مینی پروژه شروع کننده Intro & Mini-Project Starter

  • مقدمه و مینی پروژه شروع کننده Intro & Mini-Project Starter

  • کارت های قیمت گذاری Pricing Cards

  • کارت های قیمت گذاری Pricing Cards

  • کارت های قیمت گذاری Pricing Cards

  • جزء رتبه بندی Ratings Component

  • جزء رتبه بندی Ratings Component

  • جزء رتبه بندی Ratings Component

  • فهرست کاربران User List

  • فهرست کاربران User List

  • فهرست کاربران User List

قالب سفارشی Sass Workflow & Starter Custom Sass Workflow & Starter Template

قالب سفارشی Sass Workflow & Starter Custom Sass Workflow & Starter Template

قالب سفارشی Sass Workflow & Starter Custom Sass Workflow & Starter Template

  • ساس چیست؟ What Is Sass?

  • ساس چیست؟ What Is Sass?

  • ساس چیست؟ What Is Sass?

  • Sass را نصب و راه اندازی کنید Install & Setup Sass

  • Sass را نصب و راه اندازی کنید Install & Setup Sass

  • Sass را نصب و راه اندازی کنید Install & Setup Sass

  • نصب، راه اندازی و سفارشی کردن بوت استرپ Install, Setup & Customize Bootstrap

  • نصب، راه اندازی و سفارشی کردن بوت استرپ Install, Setup & Customize Bootstrap

  • نصب، راه اندازی و سفارشی کردن بوت استرپ Install, Setup & Customize Bootstrap

  • نصب و راه اندازی فونت عالی Install & Setup Font Awesome

  • نصب و راه اندازی فونت عالی Install & Setup Font Awesome

  • نصب و راه اندازی فونت عالی Install & Setup Font Awesome

  • دانلود قالب استارتر Starter Template Download

  • دانلود قالب استارتر Starter Template Download

  • دانلود قالب استارتر Starter Template Download

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

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

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

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • متغیرهای ناوبری و Sass Navigation & Sass Variables

  • متغیرهای ناوبری و Sass Navigation & Sass Variables

  • متغیرهای ناوبری و Sass Navigation & Sass Variables

  • بخش هدر/قهرمان Header/Hero Section

  • بخش هدر/قهرمان Header/Hero Section

  • بخش هدر/قهرمان Header/Hero Section

  • بخش آیکون Icon Section

  • بخش آیکون Icon Section

  • بخش آیکون Icon Section

  • جلوه پیمایش نوار ناوبری Navbar Scroll Effect

  • جلوه پیمایش نوار ناوبری Navbar Scroll Effect

  • جلوه پیمایش نوار ناوبری Navbar Scroll Effect

  • جزئیات بخش با مدال Details Sections With Modals

  • جزئیات بخش با مدال Details Sections With Modals

  • جزئیات بخش با مدال Details Sections With Modals

  • توصیفات، بخش دانلود و پاورقی Testimonials, Download Section & Footer

  • توصیفات، بخش دانلود و پاورقی Testimonials, Download Section & Footer

  • توصیفات، بخش دانلود و پاورقی Testimonials, Download Section & Footer

  • صفحه تماس Contact Page

  • صفحه تماس Contact Page

  • صفحه تماس Contact Page

  • استقرار در Vercel Deploy To Vercel

  • استقرار در Vercel Deploy To Vercel

  • استقرار در Vercel Deploy To Vercel

  • Formspree برای فرم های تماس Formspree For Contact Forms

  • Formspree برای فرم های تماس Formspree For Contact Forms

  • Formspree برای فرم های تماس Formspree For Contact Forms

وب سایت 2 - وب سایت آموزش کورسو Website 2 - Corso Training Website

وب سایت 2 - وب سایت آموزش کورسو Website 2 - Corso Training Website

وب سایت 2 - وب سایت آموزش کورسو Website 2 - Corso Training Website

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • Nav & Header Nav & Header

  • Nav & Header Nav & Header

  • Nav & Header Nav & Header

  • چرخ فلک تصویر Image Carousel

  • چرخ فلک تصویر Image Carousel

  • چرخ فلک تصویر Image Carousel

  • منطقه ثبت نام، پیمایش پیمایش و جزئیات Register Area, Nav Scroll & Details

  • منطقه ثبت نام، پیمایش پیمایش و جزئیات Register Area, Nav Scroll & Details

  • منطقه ثبت نام، پیمایش پیمایش و جزئیات Register Area, Nav Scroll & Details

  • نکات و بخش های خلاصه Points & Summary Sections

  • نکات و بخش های خلاصه Points & Summary Sections

  • نکات و بخش های خلاصه Points & Summary Sections

  • دعوتنامه و غذای آماده Invitation & Takeaways

  • دعوتنامه و غذای آماده Invitation & Takeaways

  • دعوتنامه و غذای آماده Invitation & Takeaways

  • اشتراک و پاورقی Subscribe & Footer

  • اشتراک و پاورقی Subscribe & Footer

  • اشتراک و پاورقی Subscribe & Footer

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

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

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

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • هدر با پوشش Header With Overlay

  • هدر با پوشش Header With Overlay

  • هدر با پوشش Header With Overlay

  • تایپ افکت جاوا اسکریپت Typing Effect JavaScript

  • تایپ افکت جاوا اسکریپت Typing Effect JavaScript

  • تایپ افکت جاوا اسکریپت Typing Effect JavaScript

  • بخش‌های درباره و مهارت‌ها About & Skills Sections

  • بخش‌های درباره و مهارت‌ها About & Skills Sections

  • بخش‌های درباره و مهارت‌ها About & Skills Sections

  • پروژه ها و لایت باکس Projects & Lightbox

  • پروژه ها و لایت باکس Projects & Lightbox

  • پروژه ها و لایت باکس Projects & Lightbox

  • StyleShout و خدمات StyleShout & Services

  • StyleShout و خدمات StyleShout & Services

  • StyleShout و خدمات StyleShout & Services

  • آمار و فرم ها Stats & Forms

  • آمار و فرم ها Stats & Forms

  • آمار و فرم ها Stats & Forms

  • مستقر در Netlify Deploy To Netlify

  • مستقر در Netlify Deploy To Netlify

  • مستقر در Netlify Deploy To Netlify

وب سایت 4 - طراحی دفتر یاوین Website 4 - Yavin Office Design

وب سایت 4 - طراحی دفتر یاوین Website 4 - Yavin Office Design

وب سایت 4 - طراحی دفتر یاوین Website 4 - Yavin Office Design

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • ناوبری و سربرگ Navigation & Header

  • ناوبری و سربرگ Navigation & Header

  • ناوبری و سربرگ Navigation & Header

  • آمار و افزایش جاوا اسکریپت Stats & JavaScript Increment

  • آمار و افزایش جاوا اسکریپت Stats & JavaScript Increment

  • آمار و افزایش جاوا اسکریپت Stats & JavaScript Increment

  • مقدمه، جزئیات و خدمات Intro, Details & Services

  • مقدمه، جزئیات و خدمات Intro, Details & Services

  • مقدمه، جزئیات و خدمات Intro, Details & Services

  • 3 بخش میانی 3 Middle Sections

  • 3 بخش میانی 3 Middle Sections

  • 3 بخش میانی 3 Middle Sections

  • پروژه ها و گواهینامه ها Projects & Testimonials

  • پروژه ها و گواهینامه ها Projects & Testimonials

  • پروژه ها و گواهینامه ها Projects & Testimonials

  • فرم تماس و پاورقی Contact Form & Footer

  • فرم تماس و پاورقی Contact Form & Footer

  • فرم تماس و پاورقی Contact Form & Footer

  • دکمه بازگشت به بالا Back To Top Button

  • دکمه بازگشت به بالا Back To Top Button

  • دکمه بازگشت به بالا Back To Top Button

  • صفحه مقاله داخلی Inner Article Page

  • صفحه مقاله داخلی Inner Article Page

  • صفحه مقاله داخلی Inner Article Page

وب سایت 5 - راه حل های نرم افزاری ورا Website 5 - Vera Software Solutions

وب سایت 5 - راه حل های نرم افزاری ورا Website 5 - Vera Software Solutions

وب سایت 5 - راه حل های نرم افزاری ورا Website 5 - Vera Software Solutions

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • معرفی پروژه Project Intro

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • راه اندازی پروژه Project Setup

  • سرصفحه و متن چرخشی اسکریپت Header & Rotating Text Script

  • سرصفحه و متن چرخشی اسکریپت Header & Rotating Text Script

  • سرصفحه و متن چرخشی اسکریپت Header & Rotating Text Script

  • شرکا و فرم Partners & Form

  • شرکا و فرم Partners & Form

  • شرکا و فرم Partners & Form

  • پیمایش و راه حل ها Nav Scroll & Solutions

  • پیمایش و راه حل ها Nav Scroll & Solutions

  • پیمایش و راه حل ها Nav Scroll & Solutions

  • جزئیات و تخصص Details & Expertise

  • جزئیات و تخصص Details & Expertise

  • جزئیات و تخصص Details & Expertise

  • بخش ویدیو و دکمه متحرک Video Section & Animated Button

  • بخش ویدیو و دکمه متحرک Video Section & Animated Button

  • بخش ویدیو و دکمه متحرک Video Section & Animated Button

  • مدال ویدیویی Video Modal

  • مدال ویدیویی Video Modal

  • مدال ویدیویی Video Modal

  • قیمت گذاری و بخش های پروژه Pricing & Project Sections

  • قیمت گذاری و بخش های پروژه Pricing & Project Sections

  • قیمت گذاری و بخش های پروژه Pricing & Project Sections

  • مدال های پروژه Project Modals

  • مدال های پروژه Project Modals

  • مدال های پروژه Project Modals

  • بخش و پاورقی خبرنامه Newsletter Section & Footer

  • بخش و پاورقی خبرنامه Newsletter Section & Footer

  • بخش و پاورقی خبرنامه Newsletter Section & Footer

  • صفحه حریم خصوصی Privacy Page

  • صفحه حریم خصوصی Privacy Page

  • صفحه حریم خصوصی Privacy Page

نمایش نظرات

Udemy (یودمی)

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

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

آموزش بوت استرپ 5 از ابتدا | ساخت 5 وب سایت مدرن
جزییات دوره
13.5 hours
93
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,944
4.7 از 5
دارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

توسعه دهنده وب Full Stack و مدرس در Traversy Media