دورة تصميم الأنظمة باستخدام React و Storybook

وصف

نظم التصميم مع React و Storybook ، وهي دورة تدريبية نشرتها FrontendMasters ، مخصصة للتدريب على تصميم النظام. يمكن أن يؤدي تصميم النظام إلى تحسين سرعة التطوير بين فريقك وفي نفس الوقت زيادة استقرار مظهر برنامجك. في هذه الدورة ، ستقوم ببناء تصميم نظام من البداية وتعلم تقنيات التصميم الأساسية بجانبه. ستصمم المكونات بنفسك باستخدام Figma ، ثم تحول هذه التصميمات إلى مكونات مشفرة باستخدام React. أخيرًا ، حركهم وسجلهم باستخدام Storybook وقم بتطوير تطبيق Storybook الخاص بك لمشاركته مع فريقك في النهاية.

ميزات أنظمة التصميم مع React و Storybook:

• الإلمام بأسس تصميم النظام وأهميته والمشكلات فيه وهيكل الفريق وبناءه مع مثال عملي
• الإلمام بأسس التصميم ، ونظرة عامة على استخدام الألوان ، والمفردات الفنية ودلالات الألوان وتقييم استخدام أنواع مختلفة من الألوان
• الطباعة واختيار الخط وأبعاد النص مع أمثلة وحلول عملية ومناقشة موضوعات التصميم الأخرى
• تصميم المكونات باستخدام Figma والأنماط وحالة الأزرار بالإضافة إلى بنائها وأخيراً تصميم Modal
• استخدام CSS وسبب استخدامه مع المشاكل المتعلقة به وكذلك استخدامه في JS
• كيفية إنشاء تطبيق وإضافة أجزاء وظيفية وإنشاء سمات وإضافة أنماط عامة
• ناقش مكونات الرسوم المتحركة ، والتفاعلات الدقيقة ، والاستخدام ، والربيع ، والانتقال
• سجل المكونات باستخدام Stroybook ، وأضف السمات ، والإضافات ، والإجراءات ، والمقابض ، وطوّر Stroybook

تفاصيل الدورة:

الناشر: FrontendMasters
المعلم: إيما بوستيان
اللغة: الإنجليزية
المستوى: تمهيدي للمتقدم
عدد الدورات: 59
المدة: 3 ساعات و 31 دقيقة

مواضيع الدورة:

مقدمة

أنظمة التصميم
وأسباب أهميتها 00:04:23 – 00:07:46

عيوب أنظمة التصميم
00:07:47 – 00:08:54

هيكل الفريق
00:08:55 – 00:10:23

لمن نظم التصميم؟
00:10:24 – 00:10:57

مثال عملي
00:10:58 – 00:12:50

الأركان الثلاثة لأنظمة التصميم
00:12:51 – 00:14:58

بناء نظام تصميم
00:14:59 – 00:21:56

قائمة
مراجعة نظام التصميم 00:21:57 – 00:24:08

الأخطاء الشائعة
00:24:09 – 00:26:54

أسس التصميم

نظرة عامة على اللون
00:26:55 – 00:29:56

مصطلحات الألوان
00:29:57 – 00:33:03

دلالات الألوان
00:33:04 – 00:35:49

قيم الألوان
00:35:50 – 00:36:56

إنشاء لوحة ألوان
00:36:57 – 00:40:17

تمرين لوحة الألوان
00:40:18 – 00:44:12

الطباعة
0:44:13 حتي 00:46:07

الخطوط
00:46:08 – 00:48:53

النوع
00:48:54 – 00:49:28

تمرين
Typescale 00:49:29 – 00:53:42

حل
Typescale 00:53:43 – 00:55:38

مجالات التصميم الأخرى
00:55:39 – 00:56:25

تصميم المكونات مع Figma

حالات الزر والأنماط
00:56:26 – 01:00:20

تمرين بناء الأزرار
01:00:21 – 01:02:38

بناء حل الزر
01:02:39 – 01:03:51

تصميم نموذج
01:03:52 – 01:10:51

تصميم ممارسة
مشروطة 01:10:52 – 01:11:49

تطوير المكونات الأنماط

كيف
نطبق CSS والخصوصية 01:11:50 – 01:13:26

مشاكل مع CSS
01:13:27 – 01:14:48

معماريات تسمية CSS والمعالجات الأولية 01:14:49 – 01:16:28

CSS في JS
01:16:29 – 01:17:14

إعداد التطبيق
01:17:15 – 01:28:01

تمرين نشاط الزر
01:28:02 – 01:31:44

حل نشاط الزر
01:31:45 – 01:34:00

إضافة المرافق
01:34:01 – 01:37:17

إنشاء موضوع
01:37:18 – 01:42:52

إضافة الأنماط العالمية
01:42:53 – 01:48:22

إضافة تمرين الولاية
01:48:23 – 01:50:49

إضافة حل الدولة
01:50:50 – 01:55:58

أشكال الأزرار
01:55:59 – 01:59:39

تمرين تنويعات الأزرار
01:59:40 – 02:06:22

حل
تغيرات الأزرار 02:06:23 – 02:07:21

صنع سمات
قابلة للتوسعة 02:07:22 – 02:18:56

بناء
غلاف مشروط 02:18:57 – 02:25:41

بناء نموذج
02:25:42 – 02:35:26

مكونات متحركة

التفاعلات الدقيقة
02:35:27 – 02:38:12

useSpring
02:38:13 – 02:42:59

استخدم الانتقال
02:43:00 – 02:48:58

تحريك النموذج
02:48:59 – 02:53:53

توثيق المكونات مع القصص القصيرة

توثيق المكونات مع القصص القصيرة
02:53:54 – 02:58:37

استخدام الإضافات
والسمات 02:58:38 – 03:11:58

الأعمال
03:11:59 – 03:13:35

مقابض
03:13:36 – 03:17:24

تمرين التوثيق
الشرعي 03:17:25 – 03:17:54

حل التوثيق
المشروط 03:17:55 – 03:18:43

إمكانية الوصول
03:18:44 – 03:21:08

تخصيص القصص القصيرة
03:21:09 – 03:23:44

نشر Storybook 03:23:45 – 03:29:55

تغليف

التعبئة
والتغليف 03:29:56 – 03:31:43

شاهد أيضًا دورة The ultimate Three.js

Installation guide

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080

download link

Download Section 1 – 1 GB
Download Section 2 – 518 MB
file password link
follow on facebook
follow on linkedin
follow on Reddit