دوره آموزشی
دوبله زبان فارسی
فیگما، HTML ،CSS و جاوا اسکریپت در طراحی وب و طراحی UI UX
✅ سرفصل و جزئیات آموزش
در این دوره با طراحی واکنش گرا در فیگما، HTML ،CSS و بوت استرپ همراه با اصول طراحی رابط کاربری (UI) و طراحی تجربه کاربری (UX) آشنا می شوید.
آنچه یاد خواهید گرفت
- یادگیری طراحی UI UX و کدنویسی فرانت اند در 1 دوره
- تبدیل کامپوننت های فیگما به کامپوننت های HTML و CSS لایو
- تسلط به ترکیب طرح بندی خودکار فیگما با CSS Flexbox و CSS Grid
- طراحی واریانت های چند بعدی در فیگما
- خودکارسازی سیستم های طراحی با پلاگین های فیگما
- توسعه طرح بندی های واکنش گرا با استفاده از سیستم گرید بوت استرپ 5
پیش نیازهای دوره
- بدون نیاز به دانش قبلی در HTML ،CSS، جاوا اسکریپت و بوت استرپ
- نسخه رایگان فیگما کافی است. با این حال، بخش های کوچکی از فیگما وجود دارد که به مجوز Figma Pro نیاز دارد.
توضیحات دوره
از فیگما تا کدنویسی در 1 دوره
- طراحی همه موارد در فیگما و کدنویسی آن ها با استفاده از HTML ،CSS و جاوا اسکریپت
- تبدیل شدن به کاربر قدرتمند فیگما با یادگیری نحوه استفاده از پلاگین ها
- تسلط به استانداردهای استاندارد صنعت برای طراحی UI UX
- بررسی و ساخت یکپارچه کامپوننت های فیگما برای طرح توسعه
- تبدیل شدن به طراح ممتاز UI UX که طراحی و کدنویسی را می داند.
- خودکارسازی استایل گاید برند خود به عنوان طراح ویژوال با فیگما
- ایجاد طرح بندی های پیچیده طراحی وب با طرح بندی خودکار فیگما و استفاده از CSS Grid و Flexbox خالص
- تبدیل فتوشاپ به نشانه گذاری HTML و استایل دهی آن با CSS
- تبدیل SVG با vanilla JavaScript
- تریگر کردن رویدادهای DOM جاوا اسکریپت و کنترل انیمیشن های CSS با جاوا اسکریپت
- یادگیری طراحی تعامل با ترنزیشن ها و انیمیشن CSS
- توسعه طراحی واکنش گرای آماده تولید با سیستم گرید بوت استرپ 5
این دوره برای چه کسانی مناسب است؟
- توسعه دهنده وب که می خواهد کامپوننت های فیگما را به طور یکپارچه توسعه دهد.
- طراحان UI UX که می خواهند یاد بگیرند که چگونه با استفاده از HTML ،CSS و جاوا اسکریپت کدنویسی کنند.
فیگما، HTML ،CSS و جاوا اسکریپت در طراحی وب و طراحی UI UX
-
view داشبورد فیگما 01:33
-
بررسی پروژه فیگما 05:54
-
thumbnail و فایل کامیونیتی در فیگما 04:57
-
بررسی فایل طراحی در فیگما 05:18
-
میانبرهای ضروری در فیگما 02:08
-
ابزار اولیه شکل در فیگما 06:46
-
ابزار اولیه متن در فیگما 07:33
-
شکل های فیگما - بخش 2 06:22
-
سلسله مراتب لایه در فیگما 02:05
-
ترازبندی و گروه بندی در فیگما 08:40
-
ناوبری لایه گروهی در فیگما 08:40
-
انتخاب لایه در فیگما 03:49
-
اجرای پلاگین های فیگما 07:42
-
تابع تغییر نام در فیگما 04:34
-
تغییر نام عبارت منظم در فیگما 11:09
-
پلاگین های متن در فیگما - بخش 1 09:41
-
پلاگین های متن در فیگما - بخش 2 07:01
-
فریم در مقابل گروه ها در فیگما 06:06
-
فریم و constraints در فیگما 08:41
-
تصاویر و constraints در فیگما 05:09
-
ویدئو و تصاویر در فیگما 07:27
-
ویدئوها و بررسی نمونه اولیه در فیگما 04:20
-
ویژگی های تصویر در فیگما 07:16
-
ویژگی های Stroke در فیگما 10:58
-
ویژگی های گرادیان در فیگما 12:10
-
ویژگی های افکت در فیگما 12:01
-
ویژگی ماسک در فیگما 06:28
-
گرید طرح بندی در فیگما - بخش 1 07:45
-
گرید طرح بندی در فیگما - بخش 2 08:16
-
نمونه اولیه در فیگما - بخش 1 11:15
-
نمونه اولیه در فیگما - بخش 2 09:22
-
تعاملات نمونه اولیه در فیگما 11:32
-
انیمیشن هوشمند در فیگما 09:39
-
Find و replace در فیگما 13:24
-
ویژگی hug طرح بندی خودکار در فیگما 12:38
-
ویژگی fixed طرح بندی خودکار در فیگما 08:13
-
ویژگی fill طرح بندی خودکار در فیگما 09:38
-
padding و فاصله گذاری در فیگما - بخش 1 10:39
-
padding و فاصله گذاری در فیگما - بخش 2 09:15
-
جهت های طرح بندی خودکار در فیگما 09:54
-
جمع بندی طرح بندی خودکار در فیگما 08:29
-
انباشت بوم و فاصله گذاری منفی در فیگما 03:32
-
انیمیشن هوشمند و فاصله گذاری منفی در فیگما 04:28
-
موقعیت مطلق در فیگما 09:51
-
انیمیشن هوشمند و متن کوتاه شده در فیگما 08:19
-
ترازبندی طرح بندی خودکار در فیگما 07:35
-
رفتار مینیماکس طرح بندی خودکار در فیگما 06:46
-
constraints در مقابل طرح بندی خودکار در فیگما 12:47
-
پروژه Airbnb - بخش 1 07:31
-
پروژه Airbnb - بخش 2 10:33
-
پروژه Airbnb - بخش 3 08:11
-
پروژه Medignition - بخش 1 09:16
-
پروژه Medignition - بخش 2 07:58
-
پروژه Medignition - بخش 3 09:36
-
پروژه بیوگرافی - بخش 1 08:21
-
پروژه بیوگرافی - بخش 2 08:22
-
پروژه تجارت - بخش 1 08:26
-
پروژه تجارت - بخش 2 08:39
-
رنگ های اصلی RGB 02:03
-
مقادیر RGB در فیگما 02:37
-
کانال آلفا RGB در فیگما 03:01
-
رنگ های RGB ثانویه در فیگما 02:32
-
رنگ های هگزادسیمال در فیگما 03:26
-
رنگ سفید و مشکی خالص در فیگما 02:39
-
رنگ ها در فیگما 02:53
-
اشباع در فیگما 05:35
-
روشنی رنگ در فیگما 04:57
-
چرخ رنگ HSL در فیگما 02:57
-
چرخه رنگ تقسیم بر 6 در فیگما 02:04
-
چرخ رنگ تقسیم بر 12 در فیگما 02:45
-
چرخ رنگ در کنار هم 03:29
-
توضیح حالت های رنگ 04:13
-
ایجاد پالت رنگ در فیگما 09:02
-
پلاگین های رنگ در فیگما - بخش 1 01:58
-
پلاگین های رنگ در فیگما - بخش 2 09:20
-
اصول کامپوننت های فیگما 07:19
-
اصول نمونه های فیگما 08:01
-
جداسازی نمونه در فیگما 04:20
-
کامپوننت استوری اینستاگرام 08:37
-
معاوضه نمونه در فیگما 05:51
-
کنوانسیون نامگذاری کامپوننت در فیگما 09:52
-
رفتار کامپوننت تودرتو در فیگما 06:54
-
اصول واریانت ها در فیگما 12:00
-
مقادیر واریانت فیگما 04:54
-
ویژگی واریانت فیگما 10:26
-
واریانت بولی در فیگما 10:07
-
واریانت متن در فیگما 07:50
-
ویژگی بولی در فیگما 08:32
-
مقایسه بولی در فیگما 02:42
-
واریانت معاوضه نمونه در فیگما 09:59
-
نسبت کامپوننت آیکون در فیگما 08:26
-
نمایش ویژگی های تودرتو - بخش 1 08:21
-
نمایش ویژگی های تودرتو - بخش 2 07:06
-
پروژه واریانت - بخش 1 08:02
-
پروژه واریانت - بخش 2 08:08
-
پروژه واریانت - بخش 3 09:04
-
واریانت های تعاملی 08:35
-
استایل های متن در فیگما 09:49
-
مدیریت استایل ها در فیگما 05:37
-
اتوماسیون استایل متن در فیگما - بخش 1 07:24
-
اتوماسیون استایل متن در فیگما - بخش 2 07:01
-
اتوماسیون استایل متن در فیگما - بخش 3 08:44
-
اتوماسیون استایل متن در فیگما - بخش 4 08:28
-
جستجو و مرتب سازی مجدد استایل های متن در فیگما 08:34
-
اعمال گزینه های Find و replace روی متن در فیگما 02:38
-
استایل های رنگ در فیگما 08:07
-
اتوماسیون استایل رنگ در فیگما - بخش 1 09:23
-
اتوماسیون استایل رنگ در فیگما - بخش 2 11:54
-
اتوماسیون استایل گاید برند در فیگما 11:14
-
مدیریت استایل های رنگ و متن در فیگما 09:15
-
استایل های سایه در فیگما 08:28
-
استایل گرید بوت استرپ در فیگما - بخش 1 09:38
-
استایل گرید بوت استرپ در فیگما - بخش 2 06:52
-
رنگ های دسترس پذیر در فیگما 07:37
-
قبل از شروع کار 01:49
-
بروزرسانی های جزئی فیگما 01:22
-
بررسی کتابخانه فیگما 07:39
-
انتشار تغییرات با استفاده از کتابخانه فیگما 06:59
-
مدیریت کتابخانه فیگما 09:17
-
تاریخچه نسخه فیگما 06:29
-
محدوده سازی کتابخانه فیگما 05:18
-
معاوضه کتابخانه فیگما 09:17
-
حذف کتابخانه فیگما 06:09
-
مثال کتابخانه لایو فیگما 02:02
-
فعال سازی کتابخانه فیگما به طور پیش فرض 01:59
-
پروژه حاشیه نویسی فیگما - بخش 1 09:22
-
پروژه حاشیه نویسی فیگما - بخش 2 07:17
-
پروژه حاشیه نویسی فیگما - بخش 3 08:31
-
پروژه حاشیه نویسی فیگما - بخش 4 10:58
-
یونیتی و تشابه 03:44
-
تسلط و حافظه کاری 04:32
-
فضای منفی و پیچیدگی 04:09
-
کنتراست و تاکید 04:22
-
مجاورت و منطقه مشترک 03:39
-
ترازبندی و تسک ناتمام 03:31
-
موانع روانی و تناسب 03:39
-
تکرار و رفتار مشترک 04:58
-
ارتباط ریتم و خط 03:22
-
کامپوننت های طراحی رابط کاربری 04:22
-
تحلیل طراحی رابط کاربری 03:00
-
تایپوگرافی 01:20
-
Serif و تایپ فیس Sans Serif 03:14
-
وزن فونت 02:15
-
اندازه فونت 03:09
-
Kerning 02:50
-
فاصله گذاری بین کلمات 01:45
-
Leading 01:46
-
عرض خط 02:55
-
Orphan و Widow 01:35
-
ترازبندی تایپ 01:47
-
سلسله مراتب تایپ 01:52
-
راه اندازی 07:39
-
آناتومی HTML 08:33
-
لیست در HTML 02:18
-
HTML Attribute 03:13
-
تصاویر در HTML 05:56
-
ویدئوها در HTML 04:00
-
iFrame در HTML 02:37
-
چک باکس و دکمه رادیویی در HTML 02:04
-
فیلد ورودی در HTML 04:12
-
کشویی در HTML 04:31
-
دکمه در HTML 02:59
-
لینک دهی به فایل های CSS و جاوا اسکریپت 05:02
-
سمانتیک ها در HTML 03:41
-
متاتگ ها در HTML 04:46
-
استایل خارجی در HTML 02:27
-
تگ استایل در HTML 01:44
-
استایل درون خطی در HTML 02:47
-
لینک دهی به فونت ها در داخل HTML 03:23
-
عناصر بلوک در HTML 06:39
-
عناصر درون خطی در HTML 04:51
-
آناتومی باکس در HTML 04:12
-
آناتومی CSS 04:48
-
کلاس های CSS 04:04
-
شناسه CSS 03:45
-
سلکتور چندگانه CSS 02:07
-
متغیر CSS 04:27
-
مشخصات CSS 07:36
-
عرض و ارتفاع CSS 05:20
-
مارجین و Padding در CSS 07:02
-
شعاع بوردر در CSS 05:15
-
مدل جعبه ای در CSS 04:08
-
سلکتور جهانی در CSS 01:49
-
نوادگان در CSS 01:26
-
فرزند مستقیم در CSS 01:21
-
خواهر و برادر کلی در CSS 01:39
-
Adjacent در CSS 02:18
-
سلکتور Attribute در CSS 01:37
-
شبه کلاس Focus در CSS 02:47
-
فرزند اول در CSS 01:45
-
فرزند آخر در CSS 01:14
-
فرزند N ام در CSS 03:05
-
سلکتور فرد در CSS 02:22
-
سلکتور زوج در CSS 02:32
-
تایپ N ام در CSS 00:57
-
سلکتور Not در CSS 01:29
-
شبه کلاس های لینک در CSS 05:22
-
شبه عناصر در CSS 01:42
-
کامنت ها در CSS 02:01
-
رنگ پس زمینه CSS 03:15
-
تصویر پس زمینه CSS 02:19
-
تکرار پس زمینه CSS 01:59
-
موقعیت پس زمینه CSS 02:41
-
اندازه پس زمینه CSS 03:53
-
Shorthand پس زمینه CSS 04:51
-
گرادیان CSS 02:49
-
پس زمینه چندگانه CSS 04:41
-
فیلترها در CSS 04:41
-
Opacity در CSS 01:43
-
دایره مسیر کلیپ CSS 02:49
-
چندضلعی مسیر کلیپ CSS 07:06
-
نمایش و قابلیت مشاهده در CSS 03:28
-
سرریز در CSS 01:31
-
Text Shadow در CSS 01:38
-
Box Shadow در CSS 02:17
-
Blend Mode در CSS 02:33
-
مقیاس CSS 04:48
-
CSS Skew 04:28
-
ترجمه CSS 04:23
-
ماتریس CSS 05:20
-
چرخش CSS 03:31
-
مبدا تبدیل در CSS 03:36
-
تبدیل چندگانه در CSS 03:43
-
توابع Easing در CSS 05:04
-
بازیه مکعب در CSS 03:56
-
ترنزیشن ها در CSS 04:29
-
ترنزیشن های چندگانه در CSS 06:09
-
Shorthand ترنزیشن ها در CSS 05:22
-
انیمیشن های CSS 09:55
-
Shorthand انیمیشن های CSS 04:13
-
انیمیشن های چندگانه در CSS 04:18
-
موقعیت نسبی CSS 03:51
-
موقعیت مطلق CSS 05:22
-
موقعیت ثابت و چسبنده در CSS 05:12
-
شاخص Z در CSS 03:13
-
طراحی واکنش گرا در CSS 16:19
-
Flexbox در CSS 04:58
-
جاستیفای کردن محتوا در CSS 02:15
-
Flex Start در CSS 03:29
-
Flex End در CSS 01:26
-
Space Evenly در CSS 02:10
-
Space Around در CSS 01:41
-
Space Between در CSS 01:29
-
ترازبندی آیتم ها در CSS 02:55
-
ترازبندی بیس لاین در CSS 01:42
-
Align Self در CSS 03:06
-
Flex Order در CSS 04:18
-
Flex Grow و Shrink در CSS 08:37
-
Flex Shorthand در CSS 05:38
-
جهت Flex در CSS 02:44
-
ستون Flex در CSS 03:37
-
Flex Wrap در CSS 03:29
-
ترازبندی محتوا در CSS 02:23
-
سطر قالب گرید در CSS 06:35
-
ستون قالب گرید در CSS 03:24
-
Shorthand گرید در CSS 03:37
-
سطر گرید در CSS 05:53
-
ستون گرید در CSS 04:12
-
ناحیه گرید در CSS 07:44
-
شکاف گرید در CSS 01:51
-
Justify Self در CSS 08:29
-
بررسی پروژه فتوشاپ 05:50
-
نشانه گذاری HTML در فتوشاپ 11:30
-
اعلان ریشه CSS در فتوشاپ 12:04
-
طرح بندی CSS Grid در فتوشاپ 13:07
-
طراحی کارت CSS در فتوشاپ - بخش 1 12:57
-
طراحی کارت CSS در فتوشاپ - بخش 2 12:23
-
طراحی کارت CSS در فتوشاپ - بخش 3 11:31
-
تعاملات CSS در فتوشاپ 14:58
-
رفتار واکنش گرای CSS در فتوشاپ 30:52
-
نقاط شکست در بوت استرپ 08:37
-
کنوانسیون نامگذاری در بوت استرپ 06:22
-
سلسله مراتب در بوت استرپ 06:17
-
کانتینر بوت استرپ 03:29
-
سطرهای بوت استرپ 03:39
-
ستون های بوت استرپ 06:34
-
Gutter و فاصله گذاری در بوت استرپ 11:55
-
مرتب سازی در بوت استرپ 04:14
-
افست در بوت استرپ 03:52
-
نمایش در بوت استرپ 06:30
-
ترازبندی در بوت استرپ 04:37
-
ستون های تودرتو در بوت استرپ 04:25
-
پروژه طراحی واکنش گرا 57:27
-
فایل Boilerplate 01:47
-
استایل های قابل استفاده مجدد فیگما 02:41
-
استایل گاید برند 01:09
-
اتوماسیون CSS 06:59
-
کلاس های DRY در CSS 02:15
-
بخش Airbnb Hero 02:55
-
بخش ناوبری Airbnb 09:32
-
بخش کارت Airbnb 09:30
-
آناتومی SVG 03:40
-
مستطیل SVG 03:42
-
شفافیت SVG 06:30
-
مختصات SVG 03:51
-
گوشه های گرد SVG 03:04
-
متن SVG 01:55
-
دایره SVG 02:47
-
بیضی SVG 01:54
-
خط SVG 07:29
-
SVG Stroke 04:37
-
آبجکت های چندگانه SVG 03:04
-
چندضلعی SVG در ادوبی ایلاستریتور 04:38
-
مسیر SVG در فیگما 03:09
-
SVG Viewbox 10:47
-
گروه انیمیشن و تبدیل SVG 13:51
-
مسیر کلیپ SVG در ادوبی ایلاستریتور 06:32
-
گرادیان SVG در فیگما 03:42
-
فیلتر SVG در فیگما 03:17
-
متغیرهای جاوا اسکریپت 08:34
-
رشته ها در جاوا اسکریپت 02:56
-
بولی در جاوا اسکریپت 01:48
-
اعداد در جاوا اسکریپت 01:38
-
الحاق در جاوا اسکریپت 03:34
-
لیترال قالب در جاوا اسکریپت 02:34
-
عدد و طول ایندکس در جاوا اسکریپت 03:13
-
آرایه در جاوا اسکریپت 02:29
-
دستکاری آرایه در جاوا اسکریپت 04:02
-
آبجکت در جاوا اسکریپت 03:03
-
دستکاری آبجکت در جاوا اسکریپت 03:50
-
عملگرهای مقایسه در جاوا اسکریپت 06:30
-
عملگرهای منطقی در جاوا اسکریپت 05:10
-
دستورات شرطی در جاوا اسکریپت 04:13
-
منطق در جاوا اسکریپت 05:21
-
حلقه For در جاوا اسکریپت 04:22
-
حلقه For در جاوا اسکریپت 01:51
-
حلقه For Each در جاوا اسکریپت 03:05
-
توابع جاوا اسکریپت 03:55
-
پارامترهای تابع در جاوا اسکریپت 02:29
-
توابع ناشناس در جاوا اسکریپت 02:42
-
توابع Callback در جاوا اسکریپت 03:33
-
توابع Arrow در جاوا اسکریپت 02:59
-
سلکتور کوئری در جاوا اسکریپت 07:02
-
همه سلکتور کوئری در جاوا اسکریپت 03:53
-
سلکتورهای دیگر در جاوا اسکریپت 04:37
-
محتوای متنی در جاوا اسکریپت 03:11
-
HTML داخلی در جاوا اسکریپت 03:25
-
Attribute در جاوا اسکریپت 05:21
-
لیست کلاس در جاوا اسکریپت 08:42
-
استایل دهی در جاوا اسکریپت 06:22
-
والد فرزند در جاوا اسکریپت 07:08
-
خواهر و برادر در جاوا اسکریپت 05:13
-
ایجاد عنصر در جاوا اسکریپت 04:31
-
حذف فرزند در جاوا اسکریپت 03:35
-
Append و Prepend در جاوا اسکریپت 04:24
-
Insert Before در جاوا اسکریپت 07:57
-
Listener رویداد در جاوا اسکریپت 09:40
-
پروژه Split Shadow 14:32
-
پروژه صفحه لندینگ واکنش گرا 28:11
-
پروژه گرید Masonry 24:15
-
پروژه پوستر تایپوگرافی 36:29
-
پروژه مورف کردن Stroke 17:07
-
پروژه براش اولیه هنری 29:53
-
پروژه طراحی کارت پویا 36:33
-
پروژه منوی تمام صفحه 39:10
-
پروژه مورف کردن پس زمینه 32:14
-
پروژه گرید هنری DeStijl 29:39
-
تحلیل SWOT کسب و کار 04:20
-
پرسونای کاربر 08:42
-
نقشه سفر UX 03:28
-
متریک های رشد کسب و کار 04:33
-
تحلیل رقبای کسب و کار 01:46
-
مخاطب هدف 02:24
-
مدل کوه یخ UX 03:54
-
نگاشت اکوسیستم UX 02:57
-
جریان های کاربر 09:47
-
نمودار امکان سنجی UX 02:06
-
مدل الماس دوگانه UX 02:05
-
6 مدل معروف کسب و کار 04:18
-
نگاشت سفر مشتری 04:05
-
استراتژی طراحی 05:37
-
برنامه ریزی اسپرینت 10:39
-
نگاشت ذهنی و Affinity 04:33
-
کامپوننت وایرفریم 09:34
-
کامپوننت های طراحی ویژوال 11:50
-
طراحی سریع - بخش 1 12:42
-
طراحی سریع - بخش 2 09:00
مشخصات آموزش
فیگما، HTML ،CSS و جاوا اسکریپت در طراحی وب و طراحی UI UX
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:377
- مدت زمان :39:56:15
- حجم :12.27GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی