دوره آموزشی CSS: Combining Grid and Flexbox
3 ساعت 51 دقیقهپیشرفته2021-08-04
مدرسین

Emily Kay
Web Developer and Graphic Designer
جزئیات دوره
با Grid و Flexbox، CSS به طرز چشمگیری تغییر می کند. در حالی که در گذشته، ایجاد طرح بندی های پیچیده به انواع هک های CSS، جاوا اسکریپت یا هر دو نیاز داشت، اکنون می توانید از Flexbox و Grid - ابزارهایی که به طور خاص برای طرح بندی طراحی شده اند - برای ایجاد صفحات وب پاسخگو با طرح بندی دقیق و سفارشی استفاده کنید. در این دوره، امیلی کی اصول اولیه Flexbox و Grid را به طور جداگانه، از نحو تا ویژگی ها و نحوه عملکرد آنها به طور کلی، پوشش می دهد. پس از آن، او مواردی را توضیح می دهد که ممکن است لازم باشد از هر دو برای رسیدن به اهداف طرح خود استفاده کنید. همانطور که امیلی نشان می دهد، وقتی از Flexbox و Grid برای ترکیب نقاط قوت جداگانه خود استفاده می کنید، می توانید محتوای پیچیده وب را به روشی زیبا و کاربرپسند ایجاد و نمایش دهید.
مهارت ها
Responsive Web DesignCSSWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - طرح بندی وب سفارشی با Grid و Flexbox
- 02 - استفاده از فایلهای تمرین
- 03 - آنچه باید بدانید
- 04 - استفاده از ابزارهای توسعه
1. فلکس چیست
- 05 - فلکس باکس چیست
- 06 - نحو Flexbox
- 07 - خواص ظرف فلکس باکس
- 08 - ویژگیهای آیتم Flexbox
- 09 - استفاده از Flexbox - چالش
- 10 - استفاده از Flexbox - Solution
2. Grid چیست
- 11 - گرید چیست
- 12 - نحو شبکه
- 13 - Grid چگونه کار میکند
- 14 - خواص ظرف توری
- 15 - ویژگیهای آیتم گرید
- 16 - توابع و کلمات کلیدی
- 17 - استفاده از گرید - چالش
- 18 - استفاده از گرید - راه حل
3. ترکیب فن آوری ها
- 19 - گرید در مقابل فلکس باکس
- 20 - ترکیب Flexbox و Grid
- 21 - تجزیهوتحلیل یک طرح
- 22 - انتخاب راه حل مناسب برای کار
- 23 - استفاده از گرید و فلکس باکس - چالش
- 24 - استفاده از Grid و Flexbox - Solution
4. با استفاده از Flexbox و Grid یک صفحه وب بسازید
- 25 - نمای کلی پروژه
- 26 - هدر صفحه وب با بخش قهرمان
- 27 - یک منوی همبرگر برای موبایل ایجاد کنید
- 28 - یک منوی افقی برای دسکتاپ ایجاد کنید
- 29 - کارتهای وب، قسمت 1
- 30 - وب کارت قسمت 2
- 31 - خلاصه CTA
- 32 - بخش تیم برای موبایل
- 33 - بخش تیم برای دسکتاپ
- 34 - بخش مسئله
- 35 - اشیاء رسانهای برای موبایل
- 36 - اشیاء رسانهای برای دسکتاپ
- 37 - گالری تصاویر
- 38 - پاورقی برای صفحه نمایش بزرگ
- 39 - پاورقی برای صفحات بسیار بزرگ
5. با استفاده از Flexbox و Grid یک فرم بسازید
- 40 - نمای کلی پروژه
- 41 - فرم برای موبایل
- 42 - فرم برای دسکتاپ
6. پشتیبانی
- 43 - سازگاری و منابع
- 44 - کوئریهای ویژگی
نتیجه
- 45 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid
- دوره آموزشی CSS: طرحبندیهای پیشرفته با گرید (2017)