آموزش جامع بوت استرپ 5 از صفر تا صد - ساخت ۵ وب‌سایت مدرن - آخرین آپدیت

شروع کار Getting Started

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

• مرور کلی پروژه‌ها Projects Overview

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

• چگونه از بوت استرپ استفاده کنیم How To Use Bootstrap

• آماده‌سازی محیط اولیه Basic Environment Setup

• راه‌اندازی محیط تست بوت استرپ Bootstrap Sandbox Setup

مبانی بوت استرپ بخش اول Bootstrap Fundamentals - Part 1

• کانتینرها (Containers) Containers

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

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

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

• فاصله‌گذاری (Spacing) Spacing

• اندازه‌گذاری، حاشیه‌ها و سایه‌ها Sizing, Borders & Shadows

• نقاط شکست (Breakpoints) Breakpoints

• دکمه‌ها Buttons

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

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

مبانی بوت استرپ بخش دوم Bootstrap Fundamentals - Part 2

• گرید و ستون‌های بوت استرپ Bootstrap Grid & Columns

• کلاس‌های فلکس‌باکس (Flexbox) Flexbox Classes

• کارت‌ها (Cards) Cards

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

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

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

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

• جداول Tables

• مسیر راهنما و صفحه‌بندی Breadcrumbs & Pagination

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

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

• منوهای کشویی (Dropdowns) Dropdowns

• آکاردئون‌ها و قابلیت جمع‌شدن Accordions & Collapse

• کاروسل (اسلایدر) Carousel

• اعلان‌های توست (Toast) Toast Notification

• اسپینرها (Spinners) Spinners

• مودال‌ها (Modals) Modals

• پاپ‌اورها و تولتیپ‌ها Popovers & Tooltips

• سوئیچ حالت تاریک Dark mode Toggle

چالش‌های پروژه کوچک Mini-Project Challenges

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

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

• اجزای امتیازدهی Ratings Component

• لیست کاربران User List

گردش کار Sass سفارشی و قالب اولیه Custom Sass Workflow & Starter Template

• Sass چیست؟ What Is Sass?

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

• نصب، تنظیم و شخصی‌سازی بوت استرپ Install, Setup & Customize Bootstrap

• نصب و راه‌اندازی Font Awesome Install & Setup Font Awesome

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

• مقدمه پروژه Project Intro

• آماده‌سازی پروژه Project Setup

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

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

• بخش آیکون‌ها Icon Section

• اثر اسکرول نوار ناوبری Navbar Scroll Effect

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

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

• صفحه تماس با ما Contact Page

• استقرار روی Vercel Deploy To Vercel

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

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

• مقدمه پروژه Project Intro

• آماده‌سازی پروژه Project Setup

• ناوبری و هدر Nav & Header

• کاروسل تصاویر Image Carousel

• بخش ثبت‌نام، اسکرول ناوبری و جزئیات Register Area, Nav Scroll & Details

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

• دعوت و نکات کلیدی Invitation & Takeaways

• اشتراک و فوتر Subscribe & Footer

وب‌سایت ۳ - سایت پورتفولیو Website 3 - Portfolio Website

• مقدمه پروژه Project Intro

• آماده‌سازی پروژه Project Setup

• هدر با لایه رویی (Overlay) Header With Overlay

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

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

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

• بخش StyleShout و خدمات StyleShout & Services

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

• استقرار روی Netlify Deploy To Netlify

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

• مقدمه پروژه Project Intro

• آماده‌سازی پروژه Project Setup

• ناوبری و هدر Navigation & Header

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

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

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

• پروژه‌ها و نظرات Projects & Testimonials

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

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

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

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

• مقدمه پروژه Project Intro

• آماده‌سازی پروژه Project Setup

• هدر و اسکریپت متن چرخان Header & Rotating Text Script

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

• اسکرول ناوبری و راهکارها Nav Scroll & Solutions

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

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

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

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

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

• بخش خبرنامه و فوتر Newsletter Section & Footer

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