آموزش طراح جامع وبسایت و اپلیکیشن موبایل: UI/UX، فیگما و سایر ابزارها - آخرین آپدیت

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

مقدمه Introduction

• سرفصل‌های دوره Course Outline

• به کلاس آنلاین ما بپیوندید! Join Our Online Classroom!

• تمرین: با همکلاسی‌ها و مربی خود آشنا شوید Exercise: Meet Your Classmates & Instructor

• ملاقات با مشتری Meeting The Client

• دو مسیر The 2 Paths

• تمرین: ساخت لوگوی شما Exercise: Building Your Logo

• منابع طراحی Design Resources

• طراح در مقابل توسعه‌دهنده Designer vs Developer

• مهارت‌های لازم برای تبدیل شدن به یک طراح برتر Skills To Be A Top Designer

• منابع ZTM ZTM Resources

• چالش‌های کدنویسی ماهانه، منابع رایگان و راهنماها Monthly Coding Challenges, Free Resources and Guides

اسکچینگ Sketching

• منابع این بخش Resources For This Section

• مقدمه‌ای بر اسکچینگ Introduction To Sketching

• فرآیند اسکچینگ The Sketching Process

• اسکچینگ جریان‌های کاربری Sketching User Flows

• اسکچینگ جریان‌های کاربری ۲ Sketching User Flows 2

• اسکچینگ جریان‌های کاربری ۳ Sketching User Flows 3

• اسکچینگ جریان‌های کاربری ۴ Sketching User Flows 4

• نکات اسکچینگ Sketching Tips

• منابع این بخش Resources For This Section

• چگونه الهام‌بخش بمانیم How To Stay Inspired

• چگونه الهام بگیریم How To Find Inspiration

مبانی فیگما The Basics of Figma

• منابع این بخش Resources For This Section

• مقدمه‌ای بر فیگما: طرح‌های آموزشی و ثبت‌نام Intro to Figma: Education Plans and Signup

• مقدمه‌ای بر فیگما: معرفی Intro to Figma: Introduction

• مقدمه‌ای بر فیگما: کجا از فیگما استفاده کنیم Intro to Figma: Where to Use Figma

• رابط کاربری فیگما: مرورگر فایل Figma UI: File Browser

• رابط کاربری فیگما: فایل‌ها Figma UI: Files

• رابط کاربری فیگما: نوار ابزار Figma UI: Toolbar

• رابط کاربری فیگما: نوار کناری چپ فایل Figma UI: File Left Sidebar

• رابط کاربری فیگما: نوار کناری راست Figma UI: Right Sidebar

• اشکال و ابزارها: کار با کانتینرها Shapes and Tools: Working with Containers

• اشکال و ابزارها: اشکال پایه و عملیات بولی Shapes and Tools: Basic Shapes and Boolean Operations

• طراحی در فیگما: تصاویر Designing in Figma: Images

• طراحی در فیگما: شروع کار با متن Designing in Figma: Getting Started with Text

• طراحی در فیگما: محدودیت‌ها Designing in Figma: Constraints

• طراحی در فیگما: استفاده از Auto Layout Designing in Figma: Using Auto Layout

• منابع و همکاری: فایل‌های کامیونیتی Resources and Collaboration: Community Files

• منابع و همکاری: پلاگین‌های کامیونیتی Resources and Collaboration: Community Plugins

• منابع و همکاری: اشتراک‌گذاری و نظرات Resources and Collaboration: Sharing and Comments

• آنچه خواهیم آموخت What We Are Going to Learn

• تمرین: ساخت یک لوگوی سریع با استفاده از اشکال Exercise: Create a Quick Logo Using Shapes

• تمرین: دکمه‌های Auto Layout Exercise: Autolayout Buttons

• تمرین: ناوبری واکنش‌گرا Exercise: Responsive Navigation

• تمرین: متن واکنش‌گرا Exercise: Responsive Text

• تمرین: تصاویر و گرادیانت‌ها Exercise: Imagery and Gradients

• تمرین: طرح‌بندی و واکنش‌گرایی Exercise: Layout and Responsiveness

• تکلیف: ایجاد کامپوننت‌های تعاملی پیچیده Assignment: Create Complex Interactive Components

جریان‌های کاربری User Flows

• منابع این بخش Resources For This Section

• توضیح جریان‌های کاربری User Flows Explained

• بایدها و نبایدها The DOs and DON'Ts

• آنچه خواهیم ساخت What We Are Going To Build

• دارایی‌های قابل استفاده مجدد جریان کاربری Reusable User Flow Assets

• جریان‌های کاربری در فیگما – آنبوردینگ User Flows in Figma — Onboarding

• جریان‌های کاربری در فیگما – جستجو User Flows in Figma — Search

سایت‌مپ‌ها Sitemaps

• منابع این بخش Resources For This Section

• مقدمه‌ای بر سایت‌مپ‌ها Introduction To Sitemaps

• ایجاد یک سایت‌مپ پایه Creating A Basic Sitemap

• آنچه یاد خواهیم گرفت What We Will Learn

• دارایی‌های قابل استفاده مجدد سایت‌مپ Reusable Sitemap Assets

• بررسی فیگما – کامپوننت‌های پایه و وریانت‌ها Figma Check In — Basic Components and Variants

• سایت‌مپ‌ها در فیگما – لایه بالایی Sitemaps in Figma — The Top Layer

• سایت‌مپ‌ها در فیگما – عمیق‌تر شدن Sitemaps in Figma — Digging Deeper

• سایت‌مپ‌ها در فیگما – ادامه عمیق‌تر شدن Sitemaps in Figma — Digging Deeper Cont.

• نکاتی برای ایجاد سایت‌مپ‌های عالی Tips for Creating Great Sitemaps

وایرفریم‌ها Wireframes

• منابع این بخش Resources For This Section

• وایرفریم چیست؟ What Is A Wireframe?

• چگونه یک وایرفریم بسازیم How To Create A Wireframe

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – کامپوننت پایه دکمه Figma Check In — Basic Button Component

• بررسی فیگما – وریانت‌ها Figma Check In — Variants

• نحوه استفاده از کامپوننت‌های وایرفریم ما How to Use Our Wireframe Components

• وایرفریم‌ها – صفحه اصلی Wireframes — Home

• وایرفریم‌ها – سبد خرید Wireframes — Cart

• وایرفریم‌ها – پروفایل Wireframes — Profile

پروتوتایپینگ Prototyping

• منابع این بخش Resources For This Section

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – پروتوتایپینگ در فیگما Figma Check In — Prototyping in Figma

• پروتوتایپینگ در فیگما – جریان‌ها و نقاط شروع Prototyping in Figma — Flows and Starting Points

• پروتوتایپینگ در فیگما – اتصالات Prototyping in Figma — Connections

• پروتوتایپینگ در فیگما – تعاملات Prototyping in Figma — Interactions

• پروتوتایپینگ در فیگما – انیمیشن‌ها Prototyping in Figma — Animations

• پروتوتایپینگ در فیگما – تنظیمات پروتوتایپ Prototyping in Figma — Prototype Settings

• پروتوتایپینگ در فیگما – ارائه پروتوتایپ Prototyping in Figma — Prototype Presentation

• پروژه – ناوبری Project — Navigation

• پروژه – حذف یک آیتم از لیست علاقه‌مندی‌ها Project — Removing an Item from Your Wishlist

• پروژه – یافتن یک محصول Project — Finding a Product

• تمرین: سندروم فریبکار Exercise: Imposter Syndrome

بازخورد Feedback

• منابع این بخش Resources For This Section

• بازخورد باعث طراحی بهتر می‌شود Feedback Drives Better Design

• بازخورد سازنده Constructive Feedback

• مرور: چه چیزی یاد گرفتیم؟ Recap: What Did We Learn?

فاصله و گریدها Spacing and Grids

• منابع این بخش Resources For This Section

• گرید چیست؟ What Is A Grid?

• مبانی گرید Grid Basics

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – گرید ثابت و شناور Figma Check In — Fixed and Fluid Grids

• بررسی فیگما – بریک‌پوینت‌ها Figma Check In — Breakpoints

• بررسی فیگما – سبک گرید Figma Check In — Grid Style

• پروژه – گرید طرح‌بندی موبایل Project — Mobile Layout Grid

• پروژه – گرید طرح‌بندی دسکتاپ Project — Desktop Layout Grids

• قوانین ساده برای پیروی Simple Rules to Follow

تایپوگرافی Typography

• منابع این بخش Resources For This Section

• سریف‌ها Serifs

• سن سریف‌ها Sans Serifs

• نمایش و مونو Display & Mono

• انتخاب فونت‌ها Picking Typefaces

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – ویژگی‌های متن Figma Check In — Text Properties

• تمرین – ارتقاء یک برند Exercise — Elevating a Brand

• تمرین – سناریوهای فونت Exercise — Typeface Scenarios

• تمرین – فونت‌های گوگل Exercise — Google Fonts

• پروژه – بررسی فونت Project — Typeface Exploration

• پروژه – جفت کردن خانواده فونت‌ها Project — Pairing Font Families

• پروژه – سرفصل‌ها، متن اصلی و برچسب‌ها Project — Headings, Body and Labels

• پروژه – سیستم فونت Project — Typeface System

• بررسی فیگما – استایل‌های متن Figma Check In — Text Styles

رنگ Color

• منابع این بخش Resources For This Section

• طرح‌های رنگی Color Schemes

• سوالات مهمی که باید پرسید Important Questions To Ask

• ایجاد پالت‌های رنگی Creating Color Palettes

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – پینت‌ها Figma Check In — Paints

• تمرین – گسترش یک پالت رنگی سخت‌گیرانه Exercise — Expanding Upon a Strict Color Palette

• تمرین – ایجاد یک پالت رنگی Exercise — Creating a Color Palette

• بررسی فیگما – استایل‌های رنگ Figma Check In — Color Styles

• تمرین – استفاده از استایل‌های رنگ Exercise — Using Color Styles

• پروژه – رنگ‌های اصلی و خنثی Project — Primary and Neutrals

• پروژه – رنگ‌های تاکیدی Project — Accents

تصاویر و آیکون‌گرافی Imagery and Iconography

• منابع این بخش Resources For This Section

• مقدمه‌ای بر دارایی‌های بصری Visual Assets Introduction

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – پلاگین‌های تصویر Figma Check In — Image Plugins

• بررسی فیگما – استایل‌های تصویر Figma Check In — Image Styles

• بررسی فیگما – ماسک‌ها Figma Check In — Masks

• تمرین – بررسی تصاویر Exercise — Image Exploration

• تمرین – کار همزمان متن و تصویر Exercise — Text and Imagery Working Together

• بررسی فیگما – پلاگین‌های تصویرسازی Figma Check In — Illustration Plugins

• تمرین – افزودن تصویرسازی‌ها به طرح‌هایتان Exercise — Adding illustrations to your designs

• بررسی فیگما – پلاگین‌های آیکون Figma Check In — Icon Plugins

• بررسی فیگما – ابزار قلم Figma Check In — Pen Tool

• تمرین – آیکون‌های سفارشی با ابزار قلم Exercise — Custom Icons with the Pen Tool

فرم‌ها و عناصر رابط کاربری Forms and UI Elements

• منابع این بخش Resources For This Section

• فرم‌ها و عناصر رابط کاربری چه هستند؟ What Are Forms + UI Elements?

• آنچه یاد خواهیم گرفت What We Will Learn

• بهترین روش‌ها – فرم‌ها Best Practices — Forms

• بهترین روش‌ها – ورودی‌های پایه و پیشرفته Best Practices — Basic and Advanced Inputs

• بهترین روش‌ها – ورودی‌ها Best Practices — Inputs

• بهترین روش‌ها – دکمه‌ها Best Practices — Buttons

• بررسی فیگما – ویژگی‌های کامپوننت Figma Check In — Component Properties

• ویژگی‌ها در مقابل وریانت‌ها Properties vs. Variants

• بررسی فیگما – ویژگی‌های کامپوننت دکمه Figma Check In — Button Component Properties

• بررسی فیگما – وریانت‌های دکمه Figma Check In — Button Variants

• بررسی فیگما – ترکیب کامپوننت‌ها Figma Check In — Combining Components

• بررسی فیگما – امکانات کامپوننت فرم Figma Check In — Form Component Possibilities

• پروژه – جریان ثبت‌نام قسمت ۱ Project — Registration Flow Part 1

• پروژه – جریان ثبت‌نام قسمت ۲ Project — Registration Flow Part 2

• پروژه – جریان ثبت‌نام قسمت ۳ Project — Registration Flow Part 3

دسترسی‌پذیری Accessibility

• منابع این بخش Resources For This Section

• دسترسی‌پذیری چیست؟ What Is Accessibility?

• فناوری‌های کمکی Assistive Technologies

• الگوهای بصری برای دسترسی‌پذیری Visual Patterns For Accessibility

• ابزارها برای دسترسی‌پذیر کردن طرح شما Tools To Make Your Design Accessible

• الگوهای بصری برای دسترسی‌پذیری قسمت ۲ Visual Patterns For Accessibility Part 2

الگوهای طراحی Design Patterns

• منابع این بخش Resources For This Section

• الگوهای طراحی چه هستند؟ What Are Design Patterns?

• چرا الگوهای طراحی ارزشمند هستند؟ Why Are Design Patterns Valuable?

• چگونه الگوهای طراحی را اعمال کنیم How To Apply Design Patterns

• تحلیل الگوهای طراحی Analyzing Design Patterns

• بررسی و انتخاب الگوهای طراحی Dissecting And Choosing Design Patterns

طراحی موبایل Mobile Design

• منابع این بخش Resources For This Section

• بهترین روش‌های طراحی موبایل قسمت ۱ Mobile Design Best Practices Part 1

• بهترین روش‌های طراحی موبایل قسمت ۲ Mobile Design Best Practices Part 2

سبک بصری و کاوش Visual Style and Exploration

• منابع این بخش Resources For This Section

• آنچه یاد خواهیم گرفت What We Will Learn

• وفاداری طراحی Design Fidelity

• کاوش بصری – ناوبری Visual Exploration — Navigation

• کاوش بصری – دکمه‌ها Visual Exploration — Buttons

• بررسی فیگما – استایل‌های افکت Figma Check In — Effect Styles

• کاوش بصری – کارت‌های محصول Visual Exploration — Product Cards

• کاوش بصری – کارت‌های متنی Visual Exploration — Text Cards

• طراحی صفحه – صفحه اصلی Screen Design — Home

• طراحی صفحه – صفحه محصول Screen Design — Product Page

حرکت در طراحی تجربه کاربری (UX) Motion in UX Design

• منابع این بخش Resources For This Section

• تصورات غلط در مورد طراحی حرکت Misconceptions of Motion Design

• حرکت از قابلیت استفاده پشتیبانی می‌کند Motion Supports Usability

• روایت و مدل‌های ذهنی Narrative and Mental Models

• میکرواینتراکشن چیست؟ What is a Microinteraction?

• ساختار یک میکرواینتراکشن The Structure of a Microinteraction

• هر عنصری یک میکرواینتراکشن نیست! Not Every Element is a Microinteraction!

• چگونه میکرواینتراکشن‌ها بر تجربه کاربری تأثیر می‌گذارند How Microinteractions Impact User Experiences

• آنچه یاد خواهیم گرفت What We Will Learn

• بررسی فیگما – مقدمه‌ای بر Smart Animate Figma Check In — Intro to Smart Animate

• بررسی فیگما – ویژگی‌های Smart Animate Figma Check In — Smart Animate Properties

• تمرین – پارالاکس Exercise — Parallax

• تمرین – پیام جدید Exercise — New Message

• تمرین – اورلی‌ها Exercise — Overlays

• بررسی فیگما – کامپوننت‌های تعاملی Figma Check In — Interactive Components

• تمرین – دکمه‌های تعاملی Exercise — Interactive Buttons

• پروژه – صفحه خوش‌آمدگویی پارالاکس Project — Parallax Welcome Screen

• پروژه – آنبوردینگ با کشیدن Project — Drag Onboarding

• پروژه – اورلی سبد خرید Project — Cart Overlay

• پروژه – میکرواینتراکشن دکمه Project — Button Microinteraction

سیستم‌های طراحی Design Systems

• منابع این بخش Resources For This Section

• آنچه یاد خواهیم گرفت What We Will Learn

• استایل‌ها و کامپوننت‌های بنیادی در مقابل کامپوننت‌های خاص محصول Foundational Styles and Components vs. Product Specific Components

• ساخت وفاداری و سازماندهی کامپوننت‌ها و استایل‌های احتمالی Building Fidelity and Organizing Potential Components and Styles

• استایل‌ها و کامپوننت‌های بنیادی Foundational Styles and Components

• کامپوننت‌ها – دکمه‌ها Components — Buttons

• کامپوننت‌ها – کارت‌ها Components — Cards

• کامپوننت‌ها – هدرها Components — Headers

• کامپوننت‌ها – ورودی‌ها Components — Inputs

• کامپوننت‌ها – آیتم‌های لیست Components — List Items

• کامپوننت‌ها – ناوبری Components — Navigation

• کامپوننت‌ها – عناصر متفرقه Components — Misc. Elements

اجرا Execution

• منابع این بخش Resources For This Section

• آنچه یاد خواهیم گرفت What We Will Learn

• کار به سمت طرح‌های نهایی ما Working Towards Our Final Designs

• اجرا – صفحه مقدمه Execution — Introduction Screen

• اجرا – صفحات آنبوردینگ Execution — Onboarding Screens

• اجرا – صفحات ثبت‌نام Execution — Registration Screens

• اجرا – صفحه اصلی Execution — Home Screen

• اجرا – صفحات لیست علاقه‌مندی‌ها Execution — Wishlist Screens

• اجرا – صفحه پروفایل Execution — Profile Screen

• اجرا – سبد خرید و تسویه‌حساب Execution — Cart and Checkout

• پروتوتایپ‌ها – ثبت‌نام Prototypes — Registration

• پروتوتایپ‌ها – افزودن به سبد خرید Prototypes — Adding to Cart

• پروتوتایپ‌ها – تسویه‌حساب Prototypes — Checkout

• پروتوتایپ‌ها – پلاگین Lottie Files Prototypes — Lottie Files Plugin

• پروتوتایپ‌ها – جستجو و فیلترها Prototypes — Search and Filters

بازبینی کار با مشتری Working With A Client Revisited

• منابع این بخش Resources For This Section

• بوم هم‌راستاسازی محصول The Product Alignment Canvas

• اهداف پروژه Project Goals

• کاربران هدف Target Users

• نقشه سفر کاربر User Journey Map

• فرضیات پرخطر Risky Assumptions

• نقشه داستان کاربر چیست؟ What is a User Story Map?

• ایجاد یک نقشه داستان کاربر Creating a User Story Map

از اینجا به کجا برویم؟ Where To Go From Here?

• آیا برونو خوشحال است؟ Is Bruno Happy?

• تحویل پروژه Project Handoff

• گام بعدی: تحویل پروژه Next Step: Project Handoff

• سپاسگزاریم! Thank You!

• راهنمای یادگیری Learning Guideline

• فارغ‌التحصیل شوید Become An Alumni

• تأیید مهارت‌ها در لینکدین LinkedIn Endorsements

• بازبینی دوره Course Review

• چالش نهایی The Final Challenge

پورتفولیو وب Web Portfolio

• منابع این بخش Resources For This Section

• نحوه اکسپورت و قرار دادن طرح‌ها How To Export And Place Designs

• محتوا برای پورتفولیوی شما Content For Your Portfolio

• کجا پورتفولیو وب خود را هاست کنید Where To Host Your Web Portfolio

از فیگما تا وب‌سایت: ساخت صفحه فرود ما From Figma To Website: Building Our Landing Page

• نکته سریع: ویدیوهای آتی Quick Note: Upcoming Videos

• تنظیمات اولیه – تحویل فیگما Initial Setup - Figma Handoff

• ساخت رابط کاربری – افزودن دارایی‌های تصویری Build UI - Adding Image Assets

• ساخت رابط کاربری – استایل‌دهی دارایی‌های تصویری Build UI - Styling Image Assets

اضافی: اینترنت چگونه کار می‌کند Extra: How The Internet Works

• نکته سریع: ویدیوهای آتی Quick Note: Upcoming Videos

• مرور وب Browsing the Web

• از کار انداختن گوگل Breaking Google

• تمرین: خودتان گوگل را از کار بیندازید Exercise: Break Google Yourself

• ستون فقرات اینترنت The Internet Backbone

• تریسرروت Traceroute

• تمرین: اجرای تریسرروت Exercise: Running traceroute

• مبانی توسعه‌دهنده: I DEVELOPER FUNDAMENTALS: I

• یک توسعه‌دهنده چه می‌کند؟ What Does A Developer Do?

• ماهنامه توسعه‌دهنده وب Web Developer Monthly

اضافی: تاریخچه وب Extra: History Of The Web

• WWW در مقابل اینترنت WWW vs Internet

• HTML, CSS, Javascript HTML, CSS, Javascript

• مبانی توسعه‌دهنده: II DEVELOPER FUNDAMENTALS: II

• تاریخچه توسعه‌دهنده Developer History

• تمرین: افزودن CSS و جاوااسکریپت به وب‌سایت تیم Exercise: Adding CSS and JavaScript to Tim's website

• منبع اختیاری: اطلاعات بیشتر در مورد تاریخچه وب Optional Resource: More About the History of the Web

اضافی: HTML 5 Extra: HTML 5

• اولین وب‌سایت خود را بسازید Build Your First Website

• منابع: ویرایشگر متن شما Resources: Your Text Editor

• مبانی توسعه‌دهنده: III DEVELOPER FUNDAMENTALS: III

• نکته سریع در مورد w3schools Quick Note About w3schools

• چگونه سوال بپرسیم How To Ask Questions

• تگ‌های HTML HTML Tags

• تگ‌های HTML 2 HTML Tags 2

• تگ‌های HTML خود بسته شونده Self Closing HTML Tags

• تگ لنگر Anchor Tag

• پرسش و پاسخ: index.html Q&A: index.html

• پرسش و پاسخ: مسیر نسبی در مقابل مسیر مطلق Q&A: Relative vs Absolute Path

• فرم‌های HTML HTML Forms

• فرم‌های HTML 2 HTML Forms 2

• ارسال فرم Submitting A Form

• تگ‌های HTML 3 HTML Tags 3

• HTML در مقابل HTML 5 HTML vs HTML 5

• کپی کردن یک وب‌سایت Copy A Website

• چالش HTML HTML Challenge

• فایل‌های درس HTML HTML Lesson Files

• تمرین: آزمون HTML Exercise: HTML Quiz

• تمرین اختیاری: HTML بیشتر Optional Exercise: More HTML

اضافی: CSS 3 Extra: CSS 3

• فایل‌های تمرین: همگام با کدنویسی Exercise Files: Code-Along

• اولین CSS شما Your First CSS

• ویژگی‌های CSS CSS Properties

• سلکتورهای CSS CSS Selectors

• تمرین اختیاری: سلکتورهای CSS Optional Exercise: CSS Selectors

• متن و فونت Text and Font

• تصاویر در CSS Images In CSS

• مدل جعبه Box Model

• px در مقابل em در مقابل rem px vs em vs rem

• اختیاری: PX, EM, REM, %, VW, و VH Optional: PX, EM, REM, %, VW, and VH

• تمرین: آزمون CSS Exercise: CSS Quiz

• مسیر رندر بحرانی Critical Render Path

• فایل تمرین: تصاویر همگام با کدنویسی Exercise File: Code-Along Images

• فلکس‌باکس Flexbox

• تمرین اختیاری: فلکس‌باکس فراگی Optional Exercise: Flexbox Froggy

• CSS 3 CSS 3

• تمرین اختیاری: تسلط بر ترنزیشن‌ها و ترنسفورم‌ها Optional Exercise: Mastering Transitions and Transforms

• رابط کاربری واکنش‌گرا Responsive UI

• فایل‌های گالری تصویر Image Gallery Files

• تمرین: انیمیشن ربات Exercise: Robot Animation

• تمرین: فایل‌های شروع انیمیشن ربات Exercise: Robot Animation Starter Files

• راه‌حل: انیمیشن ربات Solution: Robot Animation

• تمرین اختیاری: CSS Optional Exercise: CSS

اضافی: گرید CSS + طرح‌بندی CSS Extra: CSS Grid + CSS Layout

• نمای کلی بخش Section Overview

• گرید CSS در مقابل فلکس‌باکس در مقابل بوت‌استرپ CSS Grid vs Flexbox vs Bootstrap

• نکته سریع: تغییر grid-gap به gap Quick Note: grid-gap to gap

• گرید CSS 1 CSS Grid 1

• گرید CSS 2 CSS Grid 2

• گرید CSS 3 CSS Grid 3

• گرید CSS 4 CSS Grid 4

• گرید CSS 5 CSS Grid 5

• تمرین اختیاری: گرید CSS Optional Exercise: CSS Grid

• تمرین: طرح‌بندی CSS Exercise: CSS Layout

• راه‌حل: نوار ناوبری Solution: Navigation Bar

• راه‌حل: نوار ناوبری 2 Solution: Navigation Bar 2

• راه‌حل: کاور Solution: Cover

• راه‌حل: گرید پروژه + پاورقی Solution: Project Grid + Footer

• نکته سریع: ویدیوی آتی Quick Note: Upcoming Video

• راه‌حل: زیبا کردن Solution: Prettify

• حقیقت در مورد CSS The Truth About CSS

بخش جایزه BONUS SECTION

• سخنرانی ویژه جایزه Special Bonus Lecture