×
ribbon

آموزش CSS Grid و Flexbox برای طرح‌های ریسپانسیو - ورژن 2

مدرس:Frontend Masters

Jen Kramer

در دوره " CSS Grid Flexbox for Responsive Layouts, v2" ، با تکنیک های ضروری CSS برای طراحی... بیشتر
زیرنویس
بدون امتیاز
145دانشجو
6ساعت
سرفصل‌ها
مقدماتی سطح دوره

اشتراک مکتب‌پلاس

خرید اشتراک

با خرید اشتراک مکتب‌پلاس، علاوه بر این دوره، به بیش از ۴،۰۰۰ دوره دیگر دسترسی خواهید داشت.

دسترسی به تمام دوره‌هابیش از ۴،۰۰۰ دوره
محتوای دوره
سرفصل‌ها
پیش‌نیاز‌ها
توضیحات دوره
دیدگاه کاربران
درباره مدرس

آنچه در این دوره می‌آموزید

نحوه ایجاد و مدیریت چینش‌های دو بعدی مبتنی بر شبکه، به منظور طراحی صفحات وب منظم و انعطاف‌پذیر

درک و پیاده‌سازی جریان‌های یک‌طرفه برای چیدمان و استایل‌دهی عناصر وب به صورت موثر و واکنش‌گرا

ترکیب CSS Grid و Flexbox با تصاویر واکنش‌گرا برای ساخت وب‌سایت‌هایی در انواع دستگاه‌ها و اندازه‌های صفحه

به‌کارگیری تکنیک‌های آموخته‌شده برای طراحی و توسعه وب‌اپلیکیشن‌های واقعی و حرفه‌ای

این دوره شامل:

6 ساعت ویدئو

گواهینامه مکتب‌خونه

دسترسی مادام‌العمر به محتوای دوره

زیرنویس اختصاصی مکتب‌خونه

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

9 فصل44 جلسه6 ساعت ویدیو
مقدمه
  مقدمه
06:52
  مرور کلی بر طراحی واکنش‌گرا
06:52
فلکس‌باکس
  فلکس‌باکس
05:19
  شروع تنظیمات CSS
03:41
  نمایش خصوصیات Flexbox برای Container
15:05
  نمایش خصوصیات Flexbox برای Child
09:34
سیستم شبکه‌ای Flexbox
  مرور و تنظیمات
11:11
  کدنویسی سیستم شبکه‌ای با Flexbox
11:21
  مدیا کوئری‌های واکنش‌گرا
14:12
  تمرین سیستم شبکه‌ای Flexbox
01:14
  راه‌حل تمرین سیستم شبکه‌ای Flexbox
05:03
تمرین Flexbox
  افکت پوششی متن با Flexbox
10:47
  تنظیمات تمرین‌های Flexbox
05:02
  تمرین کالکشن‌ها
12:13
  تمرین مأموریت
09:01
  تمرین فوتر با Flexbox
05:42
هدر و نوار ناوبری با Flexbox
  هدر و نوار ناوبری
07:50
  استایل‌دهی به هدر و نوار ناوبری برای دسکتاپ
10:33
  استایل‌دهی به هدر و نوار ناوبری برای تبلت
05:59
  استایل‌دهی به هدر و نوار ناوبری برای موبایل
07:55
تصاویر واکنش‌گرا و عنصر Picture
  مرور تصاویر واکنش‌گرا
04:48
  بهترین روش‌های استفاده از تصاویر واکنش‌گرا
15:51
  نمایش srcset و sizes
04:20
  نمایش بنر
10:55
  نمایش هیرو (Hero)
05:52
  تمرین نهایی Flexbox
02:28
  راه‌حل تمرین نهایی Flexbox
04:11
CSS Grid
  معرفی CSS Grid
11:58
  نمایش چینش CSS Grid مبتنی بر خطوط
10:56
  تمرین ردیف‌ها و ستون‌ها
03:09
  تنظیم اندازه ردیف‌ها و ستون‌ها
06:10
  نمایش چینش Grid با استفاده از Span Notation
05:38
سیستم شبکه‌ای
  سیستم شبکه‌ای با CSS Grid
08:43
  شبکه واکنش‌گرا با CSS Grid
15:37
  استفاده از Figure و Figure Caption با CSS Grid
09:53
  ترکیب سلول‌های Grid و انیمیشن
05:35
  تمرین شبکه‌ای موزاییکی
03:16
  راه‌حل تمرین شبکه‌ای موزاییکی
07:43
  طراحی به سبک مجله با استفاده از نواحی Grid Template
15:11
  تمرین مارک‌آپ HTML کارت‌ها
09:32
  چینش کارت‌ها با Flexbox و Grid
16:33
  تمرین نهایی CSS Grid
03:59
  راه‌حل تمرین نهایی CSS Grid
06:05
جمع‌بندی
  جمع‌بندی
02:40

پیش‌نیاز‌ها

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

توضیحات دوره

در دوره " CSS Grid & Flexbox for Responsive Layouts, v2" ، با تکنیک‌های ضروری CSS برای طراحی و پیاده‌سازی وب‌اپلیکیشن‌های واکنش‌گرا و زیبا آشنا خواهید شد. این دوره به شما کمک می‌کند تا به صورت عملی با استفاده از CSS Grid، چینش‌های دو بعدی مبتنی بر شبکه را پیاده‌سازی کنید و با Flexbox جریان‌های یک‌طرفه را استایل‌دهی کنید. این مهارت‌ها به شما این امکان را می‌دهند که ساختارهای پیچیده و منظم را به‌راحتی و با کنترل کامل بر روی چینش و اندازه عناصر وب‌سایت طراحی کنید.

در کنار این تکنیک‌ها، یاد خواهید گرفت که چگونه با استفاده از تصاویر واکنش‌گرا، وب‌سایت‌هایی بسازید که در انواع دستگاه‌ها به‌خوبی نمایش داده شوند. در پایان دوره، شما توانایی ترکیب CSS Grid و Flexbox را برای ایجاد طرح‌های واکنش‌گرا و کاربردی خواهید داشت که در پروژه‌های دنیای واقعی مورد استفاده قرار می‌گیرند. این دوره برای افرادی که به دنبال تسلط بر تکنیک‌های پیشرفته CSS و بهبود توانایی‌های خود در طراحی وب هستند، بسیار مناسب است.

دیدگاه کاربران

هنوز امتیاز و دیدگاهی برای این دوره ثبت نشده است

گواهینامه اختصاصی دو زبانه

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

امکان اشتراک گذاری در لینکدین
دو زبانه
2دوره
182دانشجو

Jen Kramer بیش از ۲۰ سال است که به تمامی سطوح مهارتی HTML و CSS آموزش داده است. او پیش‌تر مدرس دانشگاه هاروارد بوده و در کنار آن به کار طراحی وب به‌صورت آزاد مشغول بوده است. او همچنین نویسنده بیش از ۷۰ دوره آموزشی ویدیویی و سه کتاب است. در حال حاضر، جن مدیر طراحی یادگیری و فناوری در انی‌کانن است، یک سازمان غیرانتفاعی که به آموزش، آماده‌سازی و اتصال افراد قربانی قاچاق انسان به مشاغل پایدار در حوزه فناوری می‌پردازد.

مهارت‌هایی که می‌آموزید

دوره‌های مشابه

سوالات پرتکرار

آیا بعد از پایان مدت دوره همچنان به محتوای آن دسترسی دارم؟

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