🔔 با توجه به بهبود نسبی اینترنت، آمادهسازی دورهها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دورهها ممکن است با کمی تأخیر انجام شود. مدت اشتراکهای تهیهشده محفوظ است.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش راهنمای کامل بوت استرپ 5 با 6 پروژه واقعی
- آخرین آپدیت
دانلود Complete Guide to Bootstrap 5 with 6 Real World Projects
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
استاد بوت استرپ ۵ از صفر تا حرفهای: ساخت ۵ وبسایت واقعی با CSS و ۱ پروژه SASS
با این دوره جامع، آخرین نسخه بوت استرپ ۵ (v5.1.0 تا سپتامبر ۲۰۲۱) را از ابتدا تا انتها با کدنویسی ۵ وبسایت واقعی با CSS و ۱ پروژه با SASS بیاموزید. با ابزارها، طرحبندیها و کامپوننتهای بوت استرپ ۵ آشنا شوید و مهارت لازم برای ساخت وبسایتهای حرفهای واقعی را کسب کنید.
آنچه خواهید آموخت:
ساخت وبسایتهای حرفهای و واقعی با بوت استرپ ۵.
استفاده از کتابخانهها و پلاگینهای کاربردی مانند AOS Animations، Tiny Slider، Smooth-scrollbar، Isotope برای فیلتر و مرتبسازی و موارد دیگر.
راهاندازی پروژه با استفاده از ابزارهای باندلر مانند Parcel و همچنین آشنایی با Git و GitHub.
یادگیری مبانی SASS از طریق پروژههای عملی.
سفارشیسازی پیشفرض بوت استرپ، ایجاد ابزارهای جدید و فراتر از آن.
آشنایی با نحوه کار واقعی توسعه وب.
پیشنیازها:
دانش پایه از HTML و CSS.
یک ویرایشگر کد و مرورگر وب.
کامپیوتر با اتصال به اینترنت.
درباره دوره
سلام به همه! این دوره تمام بخشهای مختلف آخرین نسخه محبوبترین فریمورک فرانتاند جهان، یعنی بوت استرپ ۵.۱ را پوشش میدهد. بوت استرپ در میلیونها وبسایت در سراسر جهان استفاده شده و با دقت توسعه یافته تا طیف گستردهای از رابطهای کاربری معمول را پوشش دهد.
وبسایتهای ساخته شده با بوت استرپ ۵ روی انواع دستگاهها، مرورگرها و اندازههای صفحه نمایش کار میکنند و همچنین به موضوعات دسترسپذیری و طراحی تمیز و مدرن توجه دارند.
این دوره برای چه کسانی طراحی شده است؟
توسعهدهندگان وب که با بوت استرپ آشنا نیستند.
توسعهدهندگان وبی که از بوت استرپ ۴ استفاده کردهاند و قصد ارتقا به نسخه ۵ را دارند.
افرادی که مبانی بوت استرپ ۵ را میدانند اما نیاز به یادگیری پیادهسازیهای عملی دارند.
ما مبانی بوت استرپ ۵ را از ابتدا خواهیم آموخت: ابزارها، طرحبندیها و کامپوننتها. سپس به سراغ پروژهها خواهیم رفت. پس از ایجاد ۵ پروژه با CSS، نحوه راهاندازی بوت استرپ ۵ با Sass را بررسی خواهیم کرد. همچنین نحوه سفارشیسازی استایلهای پیشفرض بوت استرپ با استفاده از API سفارشیسازی را خواهیم دید. پس از آن، یک قالب وبسایت با استفاده از بوت استرپ ۵ و Sass خواهیم ساخت. اگر هیچ دانش قبلی از Sass ندارید، نگران نباشید! من همه چیز را از ابتدا توضیح خواهم داد.
در نهایت، شما را در ساخت ۶ پروژه مختلف با استفاده از بوت استرپ ۵ راهنمایی خواهم کرد.
پروژهها:
یاد بگیرید چگونه پروژههای زیر را با بوت استرپ ۵ بسازید:
پروژه ۱: پورتفولیوی مبتدی
پروژه ۲: قالب آژانس تک صفحهای
پروژه ۳: داشبورد مدیریت بوت استرپ ۵
پروژه ۴: وبلاگ چند صفحهای
پروژه ۵: پورتفولیوی حرفهای
پروژه ۶: قالب SASS آموزش الکترونیک
چرا این دوره؟
چرا این دوره را به جای دورههای دیگر بوت استرپ انتخاب کنید؟
آیا تعجب میکنید که چرا باید این دوره را به جای دورههای دیگر بوت استرپ انتخاب کنید؟ این دوره دارای ویژگیهای زیر است که آن را از سایرین متمایز میکند:
بدون مطالب اضافی و غیرضروری.
پروژههای حرفهای و واقعی.
فراتر از بوت استرپ ۵، همچنین یاد میگیرید چگونه از موارد زیر استفاده کنید:
Emmet برای گردش کار سریعتر.
نحوه ایجاد انیمیشنهای زیبا با کتابخانه AOS Animations.
نحوه ایجاد نمودارها و گرافها با Chart.js.
روشهای اعتبارسنجی فرم.
افکت تایپنویس با جاوا اسکریپت.
نحوه فیلتر و مرتبسازی با Isotope.js.
چگونه یک فرم HTML کارآمد با PHP بسازیم.
استفاده از اسلایدرهای جاوا اسکریپت خام مانند Tiny Slider.
سرفصل ها و درس ها
مقدمه
Introduction
مقدمه
Introduction
ایجاد محیط توسعه
Creating the Development Environment
مقدمه بخش ۲
Section 2 Introduction
نصب ویرایشگر کد و سایر تنظیمات
Installing A Code Editor and Other Configurations
مروری کوتاه بر Emmet
A Brief Overview of Emmet
راهاندازی پوشه پروژه و افزودن بوتاسترپ ۵
Setting Up the Project Folder and Adding Bootstrap 5
ابزارهای بوتاسترپ ۵
Bootstrap 5 Utilities
مقدمه بخش ۳
Section 3 Introduction
منابع بخش
Section Resources
تایپوگرافی - ۱
Typography - 1
تایپوگرافی - ۲
Typography - 2
رنگها
Colors
حاشیهها
Borders
نمایش
Display
فلکسباکس بوتاسترپ
Bootstrap Flexbox
مفاهیم فلکسباکس را شفاف کنید
Clear your concepts on flexbox
سایههای جعبه
Box Shadows
موقعیتها
Positions
اندازهگذاری
Sizing
فاصلهگذاری
Spacing
چیدمانها و پاسخگویی بوتاسترپ ۵
Bootstrap 5 Layouts and Responsiveness
مقدمه بخش ۴
Section 4 Introduction
منابع بخش
Section Resources
کانتینرهای بوتاسترپ ۵
Bootstrap 5 Containers
نقاط شکست
Breakpoints
ستونها
Columns
بیایید با آزمونها سرگرم شویم!
Let's have some fun with quizzes!
اجزای بوتاسترپ ۵
Bootstrap 5 Components
مقدمه بخش ۵
Section 5 Introduction
منابع بخش
Section Resources
جعبههای هشدار
Alert Boxes
دکمهها
Buttons
آکاردئون
Accordion
کاروسل
Carousel
کارتهای بوتاسترپ
Bootstrap Cards
مدالها
Modals
اسپینرها
Spinners
نوار ناوبری
Navigation Bar
صفحهبندی
Pagination
خردهنان
Breadcrumb
نوار پیشرفت
Progressbar
پروژه اول: وبسایت نمونه کار مبتدی
First Project: Beginner Portfolio Website
مقدمه بخش ۶
Section 6 Introduction
منابع بخش
Section Resources
راهاندازی محیط برای پروژه
Setting Up The Environment For The Project
افزودن نوار ناوبری
Adding The Navigation Bar
افزودن بخش قهرمان
Adding The Hero Section
افزودن بخش درباره ما
Adding The About Section
افزودن بخش نمونه کار
Adding The Portfolio Section
افزودن بخش وبلاگ
Adding The Blog Section
افزودن فرم تماس
Adding The Contact Form
افزودن پاورقی و اسکرول اسپای
Adding The Footer and ScrollSpy
پروژه دوم: Indexter - یک صفحه قالب آژانس بوتاسترپ ۵
Second Project: Indexter - One Page Bootstrap 5 Agency Template
مقدمه بخش ۷
Section 7 Introduction
منابع بخش
Section Resources
راهاندازی محیط برای پروژه
Setting Up The Environment For The Project
افزودن نوار ناوبری
Adding The Navigation Bar
افزودن بخش قهرمان
Adding The Hero Section
افزودن جعبههای اطلاعات
Adding The Info Boxes
افزودن بخش درباره ما
Adding The About Section
افزودن بخش خدمات
Adding The Services Section
افزودن بخش خبرنامه
Adding The Newsletter Section
افزودن جدول قیمتگذاری
Adding The Pricing Table
افزودن پاورقی و اسکرول اسپای
Adding The Footer & ScrollSpy
افزودن انیمیشنها
Adding The Animations
پروژه سوم: قالب ادمین بوتاسترپ ۵
Third Project: Bootstrap 5 Admin Template
مقدمه بخش ۸
Section 8 Introduction
منابع بخش
Section Resources
افزودن نوار ناوبری بالا
Adding The Top Navigation Bar
افزودن ردیفهای اول
Adding The First Rows
افزودن نوار ناوبری جانبی
Adding The Side Navigation Bar
افزودن نمودارها
Adding The Charts
پروژه چهارم: قالب وبلاگ بوتاسترپ ۵
Fourth Project: Bootstrap 5 Blog Template
مقدمه بخش ۹
Section 9 Introduction
منابع بخش
Section Resources
افزودن نوار ناوبری
Adding The Navigation Bar
افزودن بخش قهرمان به صفحه اصلی
Adding The Hero Section To The Homepage
اولین پست کاروسل
First Carousel Post
تکمیل بخش اصلی وبلاگ
Finishing Up The Main Blog Section
افزودن نوار کناری سمت راست به صفحه اصلی
Adding The Right Sidebar With The Homepage
صفحه پست تکی با نوار کناری سمت راست
Right Sidebar Single Post Page
صفحه پست تکی تمام عرض
Full Width Single Post Page
صفحه تماس
Contact Page
اعتبارسنجی فرم در قالب بوتاسترپ
Form Validation in Bootstrap Template
پروژه پنجم: ایجاد یک سایت نمونه کار حرفهای برای خودتان
Fifth Project: Create A Professional Portfolio Site for Yourself
مقدمه بخش ۱۰
Section 10 Introduction
منابع بخش
Section Resources
افزودن بخش قهرمان
Adding The Hero Section
افزودن تبهای بخش درباره ما
Adding The About Section Tabs
افزودن بخش خدمات
Adding The Services Section
افزودن بخش نمونه کار میسونری ایزوتوپ
Adding The Masonry Isotope Portfolio Section
اسلایدر بخش نظرات
Testimonial Section Slider
ایجاد یک فرم تماس کاربردی
Creating A Functional Contact Form
افزودن پاورقی
Adding The Footer
دکمه اسکرول به بالا
Scroll To Top Button
نوار ناوبری و اسکرول اسپای
Navbar And Scrollspy
پاسخگو کردن قالب
Making The Template Responsive
بارگذاری قالب در Netlify
Uploading the Template to Netlify
مشکل با فرم تماس
Issue With The Contact Form
شروع کار با SASS و بوتاسترپ ۵
Getting Started with SASS & Bootstrap 5
راهاندازی SASS با NPM و Parcel
Setup of SASS with NPM & Parcel
نحوه کلون کردن از GITHUB
How to Clone from GITHUB
سفارشیسازی بوتاسترپ با SASS
Customization of Bootstrap with SASS
پروژه با SASS: قالب وبسایت آموزش الکترونیکی
Project with SASS: E-Learning Website Template
مقدمه بخش ۱۲
Section 12 Introduction
منابع بخش
Section Resources
ایجاد نوار ناوبری
Creating the Nav-Bar
افزودن بخش قهرمان
Adding The Hero Section
افزودن بخش ویژگیها
Adding The Features Section
افزودن بخش دورهها
Adding The Courses Section
بخش آمار
Stats Section
افزودن بخش قیمتگذاری
Adding The Pricing Section
بخش خبرنامه
Newsletter Section
افزودن پاورقی
Adding The Footer
پاسخگو کردن قالب
Making The Template Responsive
اعمال اسکرولبار نرم
Appling The Smooth Scrollbar
آخرین افکار
Final Thoughts
قدم بعدی چیست؟
What Next?
سیستمی پیدا کنید که برای شما کار کند
Find A System That Works For You
Sofiullah Chowdhury
نمایش نظرات