دوره کامل توسعه وب فرانتاند
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- شما هر آنچه را که برای تبدیل شدن به توسعهدهنده ماهر وب فرانتاند نیاز دارید، خواهید آموخت.
- یادگیری تبدیل PSD به وبسایتهای HTML و CSS واکنشگرا همراه با پروژه پورتفولیوی PSD به HTML
- یادگیری تبدیل PSD به وبسایت React JS با پروژه
- یادگیری CSS Flex و CSS Grid و یادگیری ایجاد طرحبندیهای CSS
- یادگیری انیمیشنهای CSS و ایجاد افکتهای هاور زیبا با پروژهها
- درک عمیق مفاهیم CSS
- یادگیری جاوااسکریپت، +ES6 و جاوااسکریپت پیشرفته
- یادگیری جیکوئری و AJAX همراه با پروژهها
- یادگیری بوتاسترپ 5 و یادگیری ایجاد طراحی وب واکنشگرا
- یادگیری کامپوننتهای بوتاسترپ با پروژهها
- یادگیری React JS و React Router، مدیریت State و Context API و ریداکس و React Redux
توضیحات دوره
به یکی از بزرگترین دورههای توسعه وب فرانتاند خوش آمدید.
اگر دنبال یک دوره کامل برای آموزش توسعه وب فرانتاند از سطح صفر تا سطح حرفهای هستید که بتوانید با اعتمادبهنفس سایتهای فوقالعاده را طراحی و ایجاد کنید، این دوره مناسب شماست.
در این دوره، همه مواردی که برای تبدیل شدن به توسعهدهنده موفق فرانتاند نیاز دارید، پوشش داده شده است.
اگر در حال آمادگی برای مصاحبههای شغلی هستید، این دوره به شدت به شما کمک خواهد کرد.
مباحث زیر در دوره پوشش داده میشوند:
- HTML
- CSS
- جاوااسکریپت
- +ES6
- جاوااسکریپت پیشرفته
- جیکوئری
- AJAX
- CSS FLEX
- CSS SASS
- انیمیشنهای CSS
- بوتاسترپ 5
- ایجاد کامپوننتها با استفاده از بوتاسترپ
- فرمها با استفاده از بوتاسترپ
- React JS (شامل React Router ، هوکهای ریاکت، ارتباط بین کامپوننتهای ریاکت، مدیریت State و Context API و Reducers و غیره)
- ریداکس
- React Redux
- تبدیل PSD به HTML و CSS
- تبدیل PSD به وبسایت REACT
- و بسیاری موارد دیگر
پروژههای زیر در این دوره ساخته میشوند:
- چند پروژه افکتهای هاور CSS
- 10 پروژه انیمیشنهای لودر CSS
- پروژههای انیمیشن کاراکتر
- پروژههای طرحبندی CSS
- ایجاد وبسایت کوچک با استفاده از CSS Grid
- پروژههای جاوااسکریپت و جیکوئری (کار با متدهای آرایه، دستکاری DOM، پیمایش DOM، جاوااسکریپت غیرهمزمان و غیره)
- پروژههای Ajax (پیشنهاد خودکار، واکشی خودکار، ارسال داده و غیره)
- پروژههای بوتاسترپ (ناوبری سفارشی، کاروسل متحرک سفارشی، مودال، آکاردئون و غیره)
- مگاپروژه PSD به HTML و CSS (وبسایت پورتفولیو)
- مگاپروژه PSD به وبسایت REACT
- اپلیکیشن مینی کریکت با React JS
- و بسیاری موارد دیگر
هر مفهوم به صورت دقیق پوشش داده شده است.
این دوره پر از پروژهها، مثالها و چالشها است که فرآیند یادگیری شما را آسان میکند.
این دوره برای چه کسانی مناسب است؟
- اگر میخواهید به توسعهدهنده ماهر وب فرانتاند تبدیل شوید، این دوره برای شما مناسب است.
- اگر میخواهید یاد بگیرید که چگونه PSD را به HTML وCSS تبدیل کنید، این دوره برای شما مناسب است.
- اگر میخواهید یاد بگیرید که چگونه وبسایتهای واکنشگرا بسازید، این دوره برای شما مناسب است.
- اگر میخواهید یاد بگیرید که چگونه وبسایتهای React JS SPA بسازید، این دوره برای شما مناسب است.
دوره کامل توسعه وب فرانتاند
-
مقدمه 07:44
-
HTML چیست؟ 04:12
-
ساختار اولیه HTML 05:05
-
عناصر HTML 04:06
-
Attribute های HTML 02:39
-
استایلهای HTML 02:45
-
هدینگهای HTML 03:23
-
پاراگرافهای HTML و تگ Pre 06:45
-
تگهای کد کامپیوتر در HTML 07:21
-
کامنتهای HTML 04:30
-
فرمتبندی متن 11:08
-
نقلقولها، ABBR و BDO 07:56
-
رنگهای HTML 06:57
-
مفهوم مهم - عناصر بلوک و درون خطی 05:38
-
درک شناسه و کلاس 05:59
-
لینکهای HTML 07:15
-
تصاویر HTML 07:11
-
جداول HTML 10:48
-
لیستهای HTML 07:08
-
ساختار CSS 06:41
-
سلکتورهای CSS 15:56
-
سلکتور والد در CSS 05:57
-
انواع استایلهای CSS 12:16
-
رنگهای CSS 06:34
-
شعاع بوردر و Outline 11:04
-
مارجین CSS 05:09
-
CSS Padding 05:31
-
مهم - مدل جعبهای CSS 05:14
-
خانواده فونت در CSS 06:57
-
عرض، ارتفاع و ارتفاع خط در CSS 03:43
-
فرمتبندی متن 06:44
-
ویژگی نمایش در CSS 04:10
-
مفهوم مهم - موقعیتیابی CSS 12:36
-
Overflow در CSS 03:11
-
مفهوم مهم - شناوری و پاکسازی 09:18
-
Opacity در CSS 06:07
-
سایه باکس 08:11
-
سایه متن 04:48
-
ویژگی ترنزیشن و مدت زمان ترنزیشن 22:20
-
تابع زمانبندی ترنزیشن و تأخیر ترنزیشن 14:24
-
تصویرسازی جالب با استفاده از تأخیر ترنزیشن 09:24
-
پروژه - افکت هاور جذاب و منحصربهفرد 25:59
-
مبانی انیمیشن - بخش 1 14:15
-
مبانی انیمیشن - بخش 2 15:12
-
انیمیشن - Shorthand 03:16
-
پروژه - پسزمینه ویدئویی متحرک ناحیه Hero - بخش 1 17:43
-
پروژه - پسزمینه ویدئویی متحرک ناحیه Hero - بخش 2 16:05
-
پروژه - پسزمینه ویدئویی متحرک ناحیه Hero - بخش 3 01:55
-
ویژگی نمایش 08:59
-
جهت Flex 03:40
-
Flex Wrap 03:42
-
Flex Flow 02:28
-
جاستیفای کردن محتوا 09:37
-
ترازبندی آیتمها 03:56
-
ترازبندی محتوا 04:43
-
Order 04:23
-
Flex Grow 10:08
-
Flex Shrink 03:37
-
Flex Basis 05:56
-
Flex Shorthand 04:31
-
Align Self 02:51
-
مفهوم قالب گرید و فاصله گرید و Grid auto X 14:21
-
مفهوم جریان خودکار گرید 05:14
-
مفهوم فاصله گرید مختلف 02:36
-
جاستیفای کردن محتوا 09:01
-
تفاوت بین جاستیفای کردن محتوا و جاستیفای کردن آیتمها 11:02
-
ترازبندی محتوا و ترازبندی آیتمها 06:33
-
جایگذاری محتوا 06:06
-
مرتبسازی مجدد آیتمها با استفاده از چند ویژگی جذاب 07:49
-
ناحیه گرید و چالش 03:54
-
راهحل چالش 02:37
-
Justify Self و Align Self 05:16
-
پروژه - طرحبندی وب با استفاده آسان از CSS Grid 15:52
-
مقدمه 02:51
-
متغیرهای Sass 15:19
-
تودرتوسازی Sass 05:26
-
علامت امپرسند 02:37
-
کوتاه کردن کدی که پیشوند دارد 02:09
-
میکسین 06:13
-
چالش میکسین 01:51
-
ایمپورت 09:32
-
Extend 03:26
-
میکسین با آرگومانها 04:21
-
نکات نهایی پروژه 07:27
-
درک شبه عناصر و پروژه - افکت هاور منحصربهفرد - بخش 1 17:13
-
پروژه - افکت هاور منحصربهفرد - بخش 2 16:20
-
پروژه - افکت هاور منحصربهفرد - بخش 3 11:58
-
پروژه - افکت هاور منحصربهفرد - بخش 4 10:07
-
مثلث 09:50
-
ششضلعی 04:23
-
دایره 01:59
-
شکل کتاب 04:50
-
پروژه ناحیه Hero 22:46
-
نشانهگذاری اولیه برای شروع 07:21
-
استفاده از Font Awesome 08:26
-
استایلهای اولیه 20:43
-
پروژه هاور - بخش 1 17:01
-
پروژه هاور - بخش 2 25:55
-
پروژه هاور - بخش 3 17:15
-
چالشی برای شما 03:52
-
پروژه هاور - بخش 4 18:11
-
پروژه هاور - بخش 5 12:08
-
پروژه هاور - بخش 6 15:27
-
پروژه هاور - بخش 7 12:10
-
پروژه هاور - بخش 8 06:02
-
پروژه هاور - بخش 9 20:27
-
پروژه هاور - بخش 10 07:46
-
نشانهگذاری اولیه برای شروع 07:06
-
پروژه - بخش 1 15:09
-
پروژه - بخش 2 21:09
-
پروژه - بخش 3 20:11
-
پروژه - بخش 4 14:21
-
پروژه - بخش 5 12:48
-
پروژه - بخش 6 13:47
-
پروژه - بخش 7 07:31
-
پروژه - بخش 8 17:19
-
پروژه - بخش 9 25:18
-
پروژه - بخش 10 10:53
-
پیادهسازی لودرهای متحرک با ابعاد کامل صفحه و محدود 12:10
-
اطلاعات مهم برای شروع 08:04
-
پروژه - بابانوئل در حال دویدن 24:13
-
پروژه - دایناسور در حال راه رفتن 07:53
-
پروژه - دایناسور در حال دنبال کردن بابانوئل 10:13
-
پروژه - Bahamut 16:20
-
پروژه - شوالیه تاریکی 05:26
-
جاوااسکریپت چیست و چرا استفاده میشود؟ 03:57
-
سینتکس جاوااسکریپت 06:32
-
بهترین کاربرد جاوااسکریپت 05:41
-
کامنتهای جاوااسکریپت 03:29
-
متغیرهای جاوااسکریپت 06:36
-
انواع متغیرها 07:26
-
عملگرهای حسابی 09:13
-
عملگرهای تخصیص 05:02
-
عملگر الحاق 01:18
-
افزودن اعداد و رشتهها 03:54
-
عملگر مقایسه 03:34
-
عملگر منطقی 02:59
-
دستور if 08:50
-
مفهوم مهم - If (1) 03:37
-
دستور Else 03:34
-
دستور If Els تودرتو 03:41
-
عملگر سهتایی 05:14
-
تابع در جاوااسکریپت 04:51
-
تابع پارامتری 05:21
-
تابع بازگشت 03:23
-
تابع تودرتو 06:46
-
متغیرهای محلی و گلوبال 09:44
-
دستور Switch 05:56
-
آشنایی با حلقهها 02:04
-
حلقه for 09:38
-
حلقه while 02:46
-
حلقه Do While 03:36
-
آشنایی با آرایهها 02:23
-
روشهای ایجاد آرایه 09:24
-
آرایه پویا 07:54
-
متدهای آرایه - Shift و Unshift 04:25
-
متدهای آرایه - Join و toString 05:01
-
آبجکتهای جاوااسکریپت 06:04
-
حلقه For In 04:55
-
AJAX چیست؟ 02:26
-
مثالهایی از AJAX 06:12
-
Ajax چگونه کار می کند؟ 05:40
-
آبجکت XMLHTTPRequest 08:19
-
تایپها و متدهای درخواست 06:50
-
استفاده از درخواست GET 06:14
-
استفاده از درخواست POST 05:30
-
تابع OnReadyStateChange 08:41
-
مدیریت پاسخ از سرور 03:12
-
پروژه Ajax - بخش 1 08:47
-
پروژه Ajax - بخش 2 - پویا 07:33
-
پروژه Ajax - بخش 3 - پیشنهاد جستجو - بخش 1 05:51
-
پروژه Ajax - بخش 3 - پیشنهاد جستجو - بخش 2 05:37
-
پروژه Ajax - بخش 4 - ارسال داده به سرور 11:20
-
جیکوئری چیست و چرا از آن استفاده میکنیم؟ 02:00
-
استفاده از جیکوئری در وبسایت 15:32
-
بارگذاری شرطی اسکریپت 05:43
-
سینتکس جیکوئری 08:51
-
سلکتورهای جیکوئری 07:32
-
رویدادهای ماوس 09:32
-
رویدادهای کیبورد 06:55
-
رویدادهای فرم 09:04
-
رویدادهای پنجره 08:01
-
نمایش و مخفیسازی 09:00
-
دریافت محتوا با استفاده از جیکوئری 07:55
-
تنظیم مقادیر با استفاده از جیکوئری 05:05
-
ایجاد محتوای HTML با استفاده از جیکوئری 03:54
-
افزودن محتویات HTML 10:39
-
حذف محتویات HTML 08:42
-
مفهوم پیمایش 05:41
-
پیمایش نیاکان 05:31
-
سلکتور فرزند 10:26
-
سلکتور خواهر و برادر 13:05
-
درخواست Get در HTTP با استفاده از ajax و جیکوئری 12:43
-
درخواست Post در HTTP با جیکوئری 05:42
-
Ajax در جیکوئری 12:12
-
تابع Each 05:39
-
افزودن کلاس 07:47
-
حذف کلاس 02:46
-
افزودن CSS به صورت پویا 04:40
-
تاگل کردن کلاس 04:06
-
چرا از بوتاسترپ استفاده میکنیم؟ 03:38
-
دو روش استفاده از بوتاسترپ در پروژه خود 13:47
-
نکته مهم - متا تگها 04:11
-
کانتینرهای گرید 14:41
-
درک مفهوم col-xx-y 11:30
-
شکستن ستونها 06:02
-
درک افست 07:48
-
مفهوم مرتبسازی 09:57
-
تسک - محتوای با عرض مساوی 03:37
-
تسک - محتوای با عرض متغیر 03:27
-
مفهوم موقعیتیابی 11:49
-
ویژگیهای نمایش 06:31
-
تفاوت بین Flex و Inline-flex 04:18
-
مفاهیم Flex - جهت Flex 05:39
-
مفاهیم Flex - جاستیفای کردن محتوا 05:25
-
مفاهیم Flex - ترازبندی آیتمها 06:32
-
مفاهیم Flex - بررسی Align Self 02:04
-
درک تفاوت بین em و rem 06:27
-
مدیریت مارجین و Padding 10:00
-
کلاسهای تصاویر در بوتاسترپ 5 07:11
-
پوشش چندین مفهوم با استفاده از تصاویر 06:28
-
رنگ پسزمینه و گرادیانها 04:58
-
رنگ متن 01:31
-
تایپوگرافی 08:50
-
کار با آیکونها 08:45
-
افکت هاور - انیمیشن آیکونها 04:38
-
پروژه - آکاردئون 22:33
-
مفهوم Collapse در بوتاسترپ 07:17
-
پروژه - Collapse 07:42
-
پروژه - مودال 12:09
-
پروژه - منوی کشویی 10:21
-
پروژه - ناوبری 12:35
-
افزودن منوی کشویی به ناوبری 06:28
-
پروژه - کاروسل - بخش 1 13:41
-
پروژه - کاروسل - بخش 2 06:37
-
ایجاد فرم اولیه 06:19
-
ایجاد فرم با محتوای درون خطی 02:26
-
کار با ورودی انتخابی 04:08
-
کار با دکمههای رادیویی 06:56
-
کار با گروه ورودی به صورت هوشمندانه 10:17
-
کار با چکباکس 03:00
-
کار با سوئیچها 03:33
-
کار با برچسب شناور 05:17
-
کار با ورودی محدوده 04:18
-
دریافت و نمایش مقدار محدوده انتخاب شده توسط کاربر 05:52
-
کار با Textarea 02:36
-
افزودن دکمه ارسال به فرم 07:54
-
پروژه - فرم لاگین زیبا - بخش 1 08:50
-
پروژه - فرم لاگین زیبا - بخش 2 16:19
-
پروژه - فرم لاگین زیبا - بخش 3 07:33
-
ناوبری سفارشی - بخش 1 08:43
-
ناوبری سفارشی - بخش 2 - منوی کشویی سفارشی 04:22
-
ناوبری سفارشی - بخش 13 - رسیدگی به واکنشگرایی 08:02
-
ناوبری سفارشی - بخش 14 - مدیریت State فعال با جاوااسکریپت 03:21
-
اسلایدر - بخش 1 12:27
-
اسلایدر - بخش 2 - اسلایدر متحرک 10:52
-
اسلایدر - بخش 3 - افکت موج 10:59
-
اسلایدر - بخش 4 - افکت ذرات 22:23
-
نصب ویژوال استودیو کد 01:26
-
نصب نودجیاس 02:51
-
ایجاد پروژه ریاکت با Create React App 04:04
-
درک جریان پروژه ریاکت 11:41
-
ایجاد کامپوننت جدید 08:49
-
موضوع مهم درباره کامپوننت 03:34
-
درک بهتر کامپوننتها 05:05
-
دموی کامل 04:23
-
دریافت تصاویر با کیفیت بالا و رزولوشن بالا به صورت رایگان 08:02
-
نصب Google Font و Font Awesome روی سیستم 10:23
-
درک گرید 04:24
-
ایجاد سواچ رنگ 04:18
-
لوگو و ناوبری هدر 19:38
-
ناحیه Hero - بخش 1 13:22
-
ناحیه Hero - بخش 2 14:03
-
درباره ما - بخش 1 18:55
-
درباره ما - بخش 2 10:42
-
تحصیلات، تجربه، مهارتها - بخش 1 19:58
-
تحصیلات، تجربه، مهارتها - بخش 2 16:27
-
سرویسها - بخش 1 19:54
-
سرویسها - بخش 2 06:11
-
پورتفولیو - بخش 1 19:47
-
پورتفولیو - بخش 2 12:08
-
پورتفولیو - بخش 3 10:27
-
تصدیقنامهها - بخش 1 18:38
-
تصدیقنامهها - بخش 2 11:37
-
وبلاگ - بخش 1 17:34
-
وبلاگ - بخش 2 05:38
-
تماس با ما - بخش 1 18:46
-
تماس با ما - بخش 2 11:42
-
فوتر 07:09
-
ایجاد فایلها و پوشههای اولیه 04:36
-
ایجاد نشانهگذاری HTML همراه با متا تگهای لازم 05:00
-
دانلود و استفاده از جیکوئری 05:38
-
دانلود و استفاده از بوتاسترپ 07:35
-
Google Font 03:18
-
ریست کردن CSS 10:29
-
استفاده از فونت آیکون FontAwesome در پروژه 04:44
-
Respond Js 06:11
-
اکسپورت و بهینهسازی تصاویر - بخش 1 13:26
-
اکسپورت و بهینهسازی تصاویر - بخش 2 17:24
-
نشانهگذاری ناوبری هدر و لوگو با توضیحات 15:01
-
چالش - استایلدهی ناوبری بوتاسترپ سفارشی - بخش 1 19:58
-
چالش - استایلدهی ناوبری بوتاسترپ سفارشی - بخش 2 08:28
-
ناحیه Hero - نشانهگذاری و استایلدهی محتوا - بخش 1 18:48
-
ناحیه Hero - نشانهگذاری و استایلدهی محتوا - بخش 2 08:02
-
راز پسزمینههای غیرمستطیلی - راه آسان 19:55
-
افزودن انیمیشن ذرات به ناحیه Hero 13:11
-
متن متحرک 11:17
-
افکت هاور دکمه Call to Action 13:54
-
هدر ثابت 10:12
-
هدر ثابت - راهحل منحصربهفرد برای پسزمینه شفاف 22:56
-
بخش درباره ما 21:40
-
تحصیلات و تجربه 14:38
-
مهارتها - بخش 1 18:23
-
ترفند ویژه CSS برای ایجاد Arrow 10:46
-
لودر متحرک 10:36
-
ترفند جالب برای شکل غیرمستطیلی با بالا و پایین متقارن 08:36
-
ترفند ایجاد افکت Underline - دو روش معرفی شده 15:39
-
بخش سرویسها - نشانهگذاری و استایلدهی 25:03
-
افکت هاور سرویس 16:55
-
پورتفولیو - نشانهگذاری HTML 24:05
-
پورتفولیو - افکت هاور منحصربهفرد 21:05
-
پورتفولیو - مقداردهی اولیه پلاگین 16:51
-
پورتفولیو - افزودن ویژگی قابلیت فیلتر 17:48
-
تکمیل بخش پورتفولیو 15:01
-
تصدیقنامه - بخش 1 21:49
-
تصدیقنامه - بخش 2 17:15
-
وبلاگ 26:05
-
نشانهگذاری بخش تماس با ما 18:27
-
استایلدهی بخش تماس با ما 21:08
-
فوتر 11:07
-
تنظیم چندین استایل برای بهنمایش گذاشتن مناسب سایت در کل پهنای صفحه 39:17
-
اسکرول کردن نرم و تغییر خودکار آیتم ناوبری فعال 15:10
-
آپلود سایت روی سرور واقعی 09:22
-
طراحی لودر متحرک در فتوشاپ 16:32
-
پیادهسازی لودر صفحه سفارشی در وبسایت 17:07
-
انیمیشنهای CSS 44:36
-
نصب ویژوال استودیو کد 02:05
-
نصب نودجیاس 03:04
-
آشنایی با قالب PSD و ایجاد پروژه ریاکت در ویژوال استودیو کد 07:20
-
درک گردشکار پروژه ریاکت 07:28
-
ایجاد کامپوننت جدید و خلاصه پروژه ریاکت 07:45
-
استفاده از بوتاسترپ در ریاکت 05:14
-
مطالعه قالب PSD و یادداشت چندین جزئیات 16:25
-
اکسپورت تصاویر از قالب PSD 13:58
-
دریافت تصاویر با رزولوشن بالا به صورت رایگان 05:57
-
اسلایدر - بخش 1 19:59
-
اسلایدر - بخش 2 16:09
-
اسلایدر - بخش 3 - پوشش و دکمههای Call to Action 11:38
-
ایجاد اسلایدر متحرک 17:59
-
ناوبری و صفحهبندی سفارشی اسلایدر 17:14
-
زوم پسزمینه - افکت Ken Burn 09:24
-
دکمههای Call to Action - افکتهای هاور 08:47
-
کار آمادهسازی هدر 06:28
-
هدر ثابت 03:50
-
هدر سفارشی بوتاسترپ - نشانهگذاری و استایلدهی 26:29
-
چالش - افزودن آیکونهای شبکههای اجتماعی به هدر 01:45
-
راهحل - افزودن آیکونهای شبکههای اجتماعی به هدر 17:48
-
جریان مسیریابی 04:38
-
پیادهسازی مسیریابی 17:51
-
راهحل مشکل هدر ثابت 05:24
-
استایلهای پویا - بخش 1 - Margin Top 08:36
-
استایلهای پویا - بخش 2 - رنگ پسزمینه 05:33
-
نشانهگذاری پاور 08:40
-
ایجاد فروشگاه با استفاده از جعبه ابزار ریداکس 23:51
-
دریافت اطلاعات فروشگاه 09:20
-
افزودن استایلها به بخش پاور 12:40
-
بخش Professo - بخش 1 13:26
-
Professo - بخش 2 08:23
مشخصات آموزش
دوره کامل توسعه وب فرانتاند
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:همه سطوح
- تعداد درس:368
- مدت زمان :69:17:18
- حجم :27.9GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy