دوره آموزشی
دوبله زبان فارسی
بیش از 10 وب اپلیکیشن مالی با اچ تی ام ال، سی اس اس و جاوا اسکریپت - توسعه وب فرانتاند
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- چگونه وب اپلیکیشنهای واقعی با اچ تی ام ال، سی اس اس و جاوا اسکریپت بسازیم؟
- طراحی رابط کاربری و تجربه کاربری وب اپلیکیشن مدرن
- وب اپلیکیشنهای مبتنی بر ماژول با ماژولهای جاوا اسکریپت ES6
- ویژگیهای جدید سی اس اس
پیشنیازهای دوره
پیسی
توضیحات دوره
به دوره "بیش از 10 وب اپلیکیشن مالی با اچ تی ام ال، سی اس اس و جاوا اسکریپت - توسعه وب فرانتاند" خوش آمدید!
آیا آمادهاید دنیای توسعه وب فرانتاند را بررسی کنید، در حالی که 10 وب اپلیکیشن مالی واقعی با اچ تی ام ال، سی اس اس و جاوا اسکریپت میسازید؟ در این دوره، شما سفری غنی برای تسلط به اچ تی ام ال، سی اس اس و جاوا اسکریپت آغاز میکنید و وب اپلیکیشنهای مالی کاربردی میسازید.
در طول این دوره، شما اصول توسعه فرانتاند را یاد میگیرید و روی یکپارچهسازی ابزارها و اپلیکیشنهای مالی تمرکز میکنید. در پایان این سفر، شما بیش از 10 وب اپلیکیشن مالی ایجاد خواهید کرد که هر کدام به درک شما از توسعه وب و مفاهیم مالی کمک میکند.
اولین پروژه، مبدل ارز، زمینه را برای ماجراجویی یادگیری شما فراهم میکند. در این اپلیکیشن اول، شما از قدرت اچ تی ام ال برای ساختاردهی به محتوای صفحه وب خود، از سی اس اس برای استایلدهی و طراحی رابط کاربریتان و از جاوا اسکریپت برای پیادهسازی عملکردهای پویا استفاده میکنید.
با پیشرفت در دوره، رازهای ساخت وب اپلیکیشنهای مالی تعاملی و کاربرپسند را کشف آنلاک کرد. از ماشین حسابهای بودجه تا ردیابهای سرمایهگذاری، شما تجربه عملی ارزشمند در ساخت راهحلهای فرانتاند قوی و متناسب با نیازهای مالی بدست خواهید آورد.
آیا آمادهاید که اشتیاق خود را برای کدنویسی به مهارتهای ملموسی تبدیل کنید که فناوری را با امور مالی ادغام میکنند؟ به ما در این سفر هیجانانگیز کشف و خلاقیت بپیوندید ! بیایید با هم به سمت نوآوری مالی حرکت کنیم.
- ردیاب هزینه: با این اپلیکیشن ساده ردیابی هزینه، عادات خرج کردن خود را زیر نظر داشته باشید.
- ردیاب پورتفولیوی سرمایهگذاری: با ابزار ردیابی پورتفولیو به راحتی بر سرمایهگذاریهای خود نظارت کنید و آنها را مدیریت کنید.
- ماشین حساب وام: سناریوهای وام مختلف را بررسی کنید و برنامههای بازپرداخت را به راحتی محاسبه کنید.
- ردیاب هدف پسانداز: اهداف مالی خود را به دقت و آسانی تنظیم و ردیابی کنید و به آنها تحقق بخشید.
- پلنر بودجه: امور مالی خود را به طور مؤثر برنامهریزی کنید و با این ابزار ضروری روی بودجهتان تسلط داشته باشید.
- واچ لیست بازار سهام: با واچ لیست قابل سفارشیسازی در جریان سهامهای مورد علاقه و روندهای بازار باشید.
- ماشین حساب بازنشستگی: با این ابزار جامع برنامهریزی بازنشستگی با اطمینان برای سالهای طلایی خود برنامهریزی کنید.
- ماشین حساب مالیات: با این ا ماشین حساب مالیاتی کاربرپسند بدهی مالیاتی خود را تخمین بزنید و به صورت هوشمندانه برای امور مالی خود برنامهریزی کنید.
- بررسیکننده امتیاز اعتباری: با این اپلیکیشن بررسی امتیاز اعتباری پربینش بر امتیاز اعتباری خود نظارت کنید و سلامت اعتباریتان را تقویت کنید.
آنچه یاد خواهید گرفت:
- عناصر تگ پیشرفته اچ تی ام ال
- آخرین ویژگیها و سلکتورهای سی اس اس
- ماژولهای جاوا اسکریپت و ES6
در طول دوره، شما از ابزارها و منابع ضروری، از جمله ویژوال استودیو کد برای کدنویسی، نود جی اس برای جاوا اسکریپت سمت سرور، گیت برای کنترل نسخه، فونتهای گوگل و Font Awesome برای بهبود جذابیت بصری اپلیکیشنهای خود و ChartJS برای ایجاد مصورسازی تعاملی داده استفاده خواهید کرد. علاوه بر این، از Exchange rate API برای قابلیتهای تبدیل ارز استفاده خواهید کرد.
آیا آمادهاید پتانسیل کامل توسعه فرانتاند را آنلاک کنید و روش تعامل با داده مالی را متحول کنید؟ به ما در این سفر تحولی بپیوندید!
یک دوره فشرده کامل درباره اچ تی ام ال، سی اس اس و جاوا اسکریپت ارائه میدهیم، در صورتی که به طور کامل با آنها آشنا نیستید به شما کمک خواهد کرد.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان وب مبتدی
- توسعهدهندگان وب تازهکار
بیش از 10 وب اپلیکیشن مالی با اچ تی ام ال، سی اس اس و جاوا اسکریپت - توسعه وب فرانتاند
-
مقدمه 03:13
-
مروری بر بخش 00:49
-
ساختار دوره 02:49
-
نرمافزارهای مورد نیاز 08:35
-
ساختار فولدر و بویلرپلیت 17:47
-
منابع و مخزن دوره 06:37
-
ارائه اپلیکیشن 02:45
-
راهاندازی عمومی و منابع 02:09
-
نشانهگذاری اچ تی ام ال و استایلهای اولیه 11:48
-
اضافه کردن SVG نقشه جهان با جاوا اسکریپت 03:03
-
مبدل ارزهای ساده با جاوا اسکریپت و Exchange rate API 11:40
-
دریافت نرخ تبادل با fetch API 08:26
-
دریافت همه کشورها از نقشه جهان 16:51
-
نمایش ارز کشور انتخاب شده و تمام نرخهای تبدیل 09:57
-
اضافه کردن قابلیت جستجو به لیست ارزها 06:37
-
ایجاد ساختار کامپوننتهای سی اس اس 04:01
-
متغیرهای سی اس اس اپلیکیشن 03:03
-
استایلدهی به کانتینر اپلیکیشن 06:07
-
استایلدهی به نقشه جهان 03:26
-
استایلدهی به مبدل ارز ساده 06:26
-
استایلدهی به مبدل ارزهای جهانی 06:46
-
ارائه اپلیکیشن 03:11
-
راهاندازی عمومی و ساختار فولدر 02:58
-
ایجاد نشانهگذاری اچ تی ام ال 09:27
-
ایجاد `style.css` و ایمپورت فایلهای `variables.css` 03:20
-
ایجاد استایل `global.css` 09:40
-
ایجاد و استایلدهی به فایل `form.css` 13:55
-
ایجاد app.js اصلی و دریافت ماژول عناصر DOM با متغیرهای سراسری 04:21
-
اضافه کردن listener رویداد به `calculate-button` و دریافت مقادیر ورودی 02:35
-
اعتبارسنجی ورودی و اضافه کردن کامپوننت هشدار 03:40
-
نمایش کسر استاندارد بر اساس وضعیت 03:35
-
استایلدهی و اضافه کردن کامپوننت هشدار به DOM 04:53
-
نمایش کسر استاندارد بر اساس وضعیت 03:35
-
محاسبه مالیات بر درآمد بر اساس طبقات مالیاتی 09:33
-
استایلدهی به کامپوننت نتیجه 06:07
-
بستن نتایج و ریست کردن همه مقادیر 03:18
-
ارائه اپلیکیشن 04:51
-
راهاندازی عمومی و ساختار فولدر 02:07
-
ایجاد نشانهگذاری اچ تی ام ال 06:04
-
ایجاد استایل `global.css` و `variables.css` 07:55
-
استایلدهی به فایل `calculator-container.css` 11:32
-
استایلدهی به فایل سراسری `btn.css` 03:55
-
اضافه کردن onclick به `calculateBtn` و دریافت مقادیر ورودی 06:34
-
اعتبارسنجی هر ورودی بهطور جداگانه 07:01
-
ایجاد و استایلدهی به کامپوننت هشدار در `alert.css` و `showAlert.js` 09:41
-
مدیریت خطا و موفقیت برچسبها با `handleLabel.js` 11:51
-
محاسبه و نمایش پساندازهای بازنشستگی 08:03
-
دریافت مقادیر محاسبه شده برای جدول 05:56
-
بررسی محاسبات موفق بازنشستگی 03:50
-
نمایش و استایلدهی به کامپوننت جدول 06:26
-
ایجاد و اضافه کردن یک عنصر ردیف جدید 07:34
-
پاک کردن فیلدهای ورودی و پنهان کردن نتایج 03:39
-
حذف یک ردیف از جدول 06:13
-
ارائه اپلیکیشن 06:22
-
راهاندازی عمومی و ساختار فولدر 02:25
-
ایجاد نشانهگذاری اچ تی ام ال 03:49
-
ایجاد بخش اخبار کوتاه 04:13
-
ایجاد بخش نقشههای سهام، ارز دیجیتال و فارکس 07:31
-
ایجاد بخش تحلیل دقیق 05:10
-
استایلدهی به نوار ناوبری جانبی 07:08
-
تاگل کردن نقشهها و نمودار دقیق 09:30
-
ارائه اپلیکیشن 03:27
-
راهاندازی عمومی و ساختار فولدر (اچ تی ام ال، سی اس اس و جاوا اسکریپت) 03:11
-
ایجاد نشانهگذاری اچ تی ام ال برای app-container ،.header. و inputs-container. 08:54
-
ایجاد `main.css` ،`variables.css` و `app-container.css` 06:05
-
ایجاد و استایلدهی به کامپوننتهای `btn.css` 05:32
-
استایلدهی به `header-container.css` و `inputs-container.css` 06:17
-
ایجاد نشانهگذاری اچ تی ام ال برای لیست بودجه 08:02
-
ایجاد و استایلدهی به `budget-list-header.css` و `budget-list-container.css` 12:35
-
دریافت عناصر DOM و ایجاد متغیرهای سراسری 02:25
-
مدیریت رویداد کلیک دکمه ADD 05:24
-
محاسبه مجموع بودجه 05:23
-
محاسبه مجموع به ازای هر دسته 10:29
-
ایجاد و استایلدهی به کامپوننتهای هشدار 16:50
-
بروزرسانی لیست بودجه و اضافه کردن به دستهبندی 08:53
-
حذف عناصر از لیست بودجه 03:39
-
ویرایش عناصر از لیست بودجه 05:29
-
ذخیره و بارگذاری داده از ذخیرهسازی محلی 06:58
-
پاک کردن لیست بودجه در صورت درخواست 02:51
-
ارائه اپلیکیشن 03:20
-
راهاندازی عمومی و ساختار فولدر (اچ تی ام ال، سی اس اس و جاوا اسکریپت) 02:45
-
ایجاد نشانهگذاری اچ تی ام ال برای app-container. و parameters-form. 05:00
-
ایجاد `main.css` ،`variables.css` و استایلدهی به `app-container.css` 06:36
-
ایجاد و استایلدهی به `form.css` 06:56
-
ایجاد نشانهگذاری اچ تی ام ال برای goal-list. و استایلدهی به آن با `goal-list.css` 04:20
-
ایجاد فایل app.js اصلی و دریافت عناصر DOM 03:33
-
محاسبه و نمایش مبلغ هدف 05:26
-
محاسبه و نمایش پساندازهای فعلی 08:58
-
محاسبه و نمایش مشارکت ماهانه 11:01
-
تاگل کردن ورودی نرخ بهره 02:21
-
محاسبه ماهها با بهره 11:32
-
استایل میلهها 06:31
-
اعتبارسنجی گروه فرم 03:03
-
ارائه اپلیکیشن 01:32
-
راهاندازی عمومی و ساختار فولدر (اچ تی ام ال، سی اس اس و جاوا اسکریپت) 01:58
-
ایجاد نشانهگذاری اچ تی ام ال برای app-container. و شرایط وام 07:42
-
ایجاد `style.css` ،`variables.css` و استایلدهی به `app-container.css` 05:04
-
ایجاد و استایلدهی به `form.css` 04:45
-
دریافت عناصر DOM و دستکاری مقادیر ورودی 06:00
-
محاسبه وام `calculateLoan.js` - ایجاد تابعی که وام را محاسبه میکند 09:43
-
نمایش و استایلدهی به `results.js` 03:29
-
ایجاد و استایلدهی به نمودار پای 08:43
-
ارائه اپلیکیشن 03:42
-
راهاندازی عمومی و ساختار فولدر (اچ تی ام ال، سی اس اس و جاوا اسکریپت) 02:06
-
نشانهگذاری اچ تی ام ال کانتینر سرمایهگذاری 05:14
-
استایلدهی به اپلیکیشن اصلی و اضافه کردن متغیرهای سی اس اس 11:22
-
استایلدهی به کانتینر سرمایهگذاری 08:01
-
ایجاد نشانهگذاری اچ تی ام ال و استایل سی اس اس برای اضافه کردن سهامها 05:13
-
ایجاد نشانهگذاری اچ تی ام ال و استایل سی اس اس برای پورتفولیو 09:15
-
ایجاد و استایلدهی به بخش تحلیل پورتفولیو 07:56
-
توابع یوتیلیتی showAlert و formatNumbers 06:57
-
اضافه کردن سهامها به LocalStorage 10:40
-
نمایش پورتفولیوی سهام 15:55
-
ویرایش و حذف سهامها از پورتفولیو 08:46
-
اضافه کردن سرمایهگذاری به لیست و نمایش لیست 12:53
-
ویرایش و حذف سرمایهگذاریها از لیست 10:01
-
تحلیل سود، زیان و بازگشت 07:13
-
ایجاد و نمایش نمودار پای سفارشی 13:03
-
ذخیره داده سرمایهگذاری در یک فایل CSV 06:18
-
ارائه اپلیکیشن 02:58
-
راهاندازی عمومی و ساختار فولدر (اچ تی ام ال، سی اس اس و جاوا اسکریپت) 02:07
-
ساختار بخش اچ تی ام ال و استایل عمومی سی اس اس برای اپلیکیشن 06:24
-
نشانهگذاری اچ تی ام ال و استایل سی اس اس فرم ورودیها 09:42
-
نشانهگذاری اچ تی ام ال و استایل سی اس اس جدول خلاصه 07:20
-
نشانهگذاری اچ تی ام ال و استایل سی اس اس لیست ورودیها 09:12
-
دریافت عناصر DOM و اضافه کردن listenerهای رویداد 04:42
-
تغییر رنگ ورودی زمانی که کاربر یک نوع را انتخاب میکند 02:57
-
اضافه کردن، حذف و نمایش ورودیها در لیست 11:19
-
نمایش ورودیهای نمودار با رنگها و درصدها 10:25
-
ذخیره، بارگذاری و پاک کردن تمام ورودیها از لیست 04:26
-
نمایش فقط آیکونها در دستگاههای موبایل 01:51
-
اکسپورت به اچ تی ام ال و PDF 11:17
-
دوره فشرده ES6 با پروژه 37:26
-
مروری بر بخش 02:35
-
فضای کدنویسی خود را راهاندازی کنید 02:56
-
ایجاد فایل index.html و اضافه کردن تگهای اولیه اچ تی ام ال 09:09
-
اضافه کردن کلاسها و propها به تگهای اچ تی ام ال 09:31
-
ایجاد style.css 14:35
-
ایجاد متغیرهای سی اس اس 03:09
-
استایلدهی به فرم 04:32
-
استایلدهی به دکمهها و ورودی جدول 08:00
-
ایجاد یک فایل جاوا اسکریپت 06:10
-
اضافه کردن listenerهای رویداد به ورودی 03:04
-
اضافه کردن listenerهای رویداد به فرم 04:21
-
ایجاد متغیرها و محاسبه تخفیف 04:28
-
تغییر تعداد با دکمهها 03:29
-
مدیریت ارسال فرم 02:16
-
محاسبه نهایی بهعلاوه تخفیف 03:12
-
خروجی نتیجه به DOM 05:24
-
استایلدهی به خروجی و نتیجه 02:58
-
ریفکتور کردن کد 07:28
-
ارائه اپلیکیشن 03:33
-
راهاندازی عمومی و ساختار فولدر 01:12
-
ایجاد نشانهگذاری اچ تی ام ال 04:10
-
ایجاد استایلهای سی اس اس برای فرم `credit-score` 08:18
-
ماژول عناصر DOM و متغیرهای سراسری 06:35
-
ارسال فرم و پارامترهای اعتبارسنجی 02:23
-
ایجاد یک ماژول اعتبارسنجی 02:12
-
اعتبارسنجی مقدار و نوع ورودی 04:09
-
ایجاد ماژول کامپوننت هشدار 05:23
-
استایلدهی و اضافه کردن کامپوننت هشدار به DOM 05:36
-
بررسی اعتبارسنجی و نمایش نتیجه (فقط اچ تی ام ال) 03:34
-
استایلدهی به نتیجه 07:49
-
ایجاد تابع `checkCreditScore` 07:45
-
حذف نتیجه و بررسی مجدد امتیاز اعتباری 07:49
-
ایجاد طراحی واکنشگرا برای موبایل، تبلت و دستگاههای دسکتاپ 03:03
مشخصات آموزش
بیش از 10 وب اپلیکیشن مالی با اچ تی ام ال، سی اس اس و جاوا اسکریپت - توسعه وب فرانتاند
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:مقدماتی
- تعداد درس:166
- مدت زمان :17:56:34
- حجم :9.22GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
7,256,500
1,451,300 تومان
- زمان: 09:44:25
- تعداد درس: 67
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
2,260,000
452,000 تومان
- زمان: 03:02:02
- تعداد درس: 14
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
795,000
159,000 تومان
- زمان: 58:00
- تعداد درس: 12
-
سطح دوره:
-
زبان: دوبله فارسی
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,508,000
1,701,600 تومان
- زمان: 11:25:13
- تعداد درس: 94
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,201,500
1,040,300 تومان
- زمان: 06:58:57
- تعداد درس: 60
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
1,833,000
366,600 تومان
- زمان: 02:27:39
- تعداد درس: 24
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,100,500
1,220,100 تومان
- زمان: 08:11:21
- تعداد درس: 28
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
3,634,500
726,900 تومان
- زمان: 04:52:43
- تعداد درس: 38
-
سطح دوره:
-
زبان: دوبله فارسی