آموزش 20 پروژه جاوا اسکریپت را در 20 روز با HTML، CSS و JS بسازید

Build 20 JavaScript Projects in 20 Day with HTML, CSS & JS

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: پروژه های پویا جاوا اسکریپت را بسازید 20 پروژه عملی در HTML، CSS و جاوا اسکریپت و باز کردن قدرت تسلط JS! در HTML، CSS و جاوا اسکریپت مهارت کسب کنید و پایه و اساس توسعه وب پویا را ایجاد کنید. پروژه های مختلف وب ایجاد کنید، مهارت ها را از طریق تجربه عملی و خلاقیت تقویت کنید. اصول طراحی معاصر را کاوش کنید و جذابیت بصری خلاقیت های وب خود را افزایش دهید. پروژه هایی را با رابط کاربری جذاب، با تمرکز بر تعاملات یکپارچه و بصری توسعه دهید. با استفاده از جاوا اسکریپت، مهارت های انیمیشن را به دست آورید و عناصر پویا را به پروژه های خود بیاورید. روش های ایمن مانند تولید کپچا و حفاظت از رمز عبور را اجرا کنید و از یکپارچگی داده های کاربر اطمینان حاصل کنید. سیستم‌های اعلان کاردستی مانند اعلان‌های زنگ برای تعامل بیشتر کاربر. نمودار مشارکت GitHub را شبیه‌سازی کنید، فعالیت‌ها و مهارت‌های کدنویسی را نشان می‌دهد. راه هایی برای پیاده سازی نشانگرهای نوار پیمایش و تصاویر پیمایش برای یک کاربر پویا و از جلوه های نور در توسعه وب برای طراحی های جذاب استفاده می کند. جعبه های جستجوی شیک و کاربردی بسازید و تعاملات جستجوی کاربر را بهینه کنید. پروژه های انباشته ارز را طراحی کنید، ایده آل برای وب سایت های مالی یا تجاری. کارکردهای مرتبط با زمان را با یک پروژه ساعت دیجیتالی که آگاهی زمانی را نشان می دهد، تسلط پیدا کنید. ابزارهایی را برای شناسایی کاراکترهای یونیکد ایجاد کنید و به کارنامه پروژه خود تطبیق پذیری اضافه کنید. یک برنامه کاربردی برای انجام کار ایجاد کنید، طراحی سازمانی و کاربر پسند را به نمایش بگذارد. پیش نیازها: درک اولیه HTML، CSS و جاوا اسکریپت. آشنایی با مفاهیم و اصطلاحات توسعه وب. دسترسی به یک ویرایشگر کد برای تمرینات کدنویسی عملی. اشتیاق به یادگیری و اشتیاق به پروژه های وب خلاقانه. رایانه ای با دسترسی به اینترنت برای مشاهده محتوای آموزشی و دانلود منابع. هیچ تجربه قبلی با فریمورک ها یا کتابخانه های فرانت اند مورد نیاز نیست.

20 پروژه وب با HTML، CSS و جاوا اسکریپت

رازهای جادوی توسعه وب را با 20 روز، 20 پروژه باز کنید! سفری هیجان انگیز را برای تسلط بر HTML، CSS و جاوا اسکریپت آغاز کنید و بیش از 20 پروژه و قالب وب خیره کننده را ایجاد کنید. در این دوره جامع مهارت های خود را ارتقا دهید، نمونه کارها را سفارشی کنید و خود را به عنوان یک توسعه دهنده مورد تقاضا قرار دهید.

چرا این دوره؟

اگر می خواهید پروژه های وب مدرن و جذاب ایجاد کنید، نمونه کارها خود را ارتقا دهید و راه را برای تبدیل شدن به یک توسعه دهنده مورد تقاضا هموار کنید، در جای درستی هستید. این دوره برای کسانی که دانش اولیه HTML، CSS و جاوا اسکریپت دارند، ایده‌آل است، این دوره برای ارتقای مهارت‌های توسعه‌دهنده و طراح شما طراحی شده است.

آنچه به دست خواهید آورد:

نمایش پروژه های متنوع: بیش از 20 پروژه وب با جلوه ها و طرح های مدرن و چشم نواز بسازید.

الهام‌بخشی و سفارشی‌سازی: برای ارتقای پروژه‌های خود الهام بگیرید و نمونه کارهای خود را طوری تنظیم کنید که در چشم‌انداز رقابتی متمایز شوید.

تسلط بر فناوری‌های اصلی: برای ایجاد پروژه‌های تاثیرگذار و پویا، بر فناوری‌های اساسی توسعه وب پیشانی - HTML، CSS و جاوا اسکریپت مسلط شوید.

ترکیب پروژه:

1. انیمیشن پس زمینه: برای افزودن جذابیت بصری به پروژه های وب خود، انیمیشن های پس زمینه جذاب ایجاد کنید.

2. Jumping Letters: با حروفی که می پرند جلوه ای سرگرم کننده و پویا ایجاد کنید و یک لمس بازی به وب سایت شما بیاورید.

3. Bell Notification: یک سیستم اعلان با استفاده از زنگ ایجاد کنید، تعامل و تعامل کاربر را افزایش دهید.

4. نشانگر نوار پیمایش: یک نشانگر شیک برای بهبود تجربه کاربر در حین پیمایش در محتوا اجرا کنید.

5. Captcha Generator: برای افزایش امنیت و تأیید کاربر، یک مولد Captcha پویا بسازید.

6. پیش‌نمایش برگه‌های جاوا اسکریپت: یک سیستم پیش‌نمایش برگه تعاملی با استفاده از جاوا اسکریپت برای پیمایش یکپارچه ایجاد کنید.

7. Simple Password Generator: ابزاری ایجاد کنید که رمزهای عبور ایمن و منحصربه‌فرد ایجاد می‌کند و حفاظت از داده‌های کاربر را در اولویت قرار می‌دهد.

8. پروژه Illumination: یک پروژه روشنایی طراحی کنید، راه‌های خلاقانه برای استفاده از جلوه‌های نور در توسعه وب را بررسی کنید.

9. Scratch Effect: یک جلوه خراش منحصر به فرد را به پروژه های خود اضافه کنید و یک تجربه کاربر نوآورانه و به یاد ماندنی را ارائه دهید.

10. جلوه نور دیسکو: جلوه نور دیسکو را پیاده سازی کنید، و هیجان و پویایی را به وب سایت خود اضافه کنید.

11. جعبه جستجو: یک کادر جستجوی شیک و کاربردی بسازید، تجارب جستجوی کاربر را بهینه کنید.

12. GitHub Contribution Clone: ​​پروژه ای ایجاد کنید که نمودار مشارکت GitHub را شبیه سازی کند و فعالیت کدنویسی شما را به نمایش بگذارد.

13. پویانمایی چرخشی: یک انیمیشن چرخشی ایجاد کنید و پویایی بصری جذابی به پروژه های وب خود اضافه کنید.

14. پشته ارز: یک نمایش بصری از انباشت ارز طراحی کنید، که برای وب سایت های مالی یا تجاری مناسب است.

15. اسکرول تصاویر: تصاویر پیمایشی را برای یک رابط کاربری شیک و تعاملی پیاده سازی کنید.

16. ساعت دیجیتال: یک پروژه ساعت دیجیتال بسازید، که تسلط خود را بر عملکردهای مربوط به زمان نشان دهد.

17. شمارنده صدادار: ابزاری ایجاد کنید که حروف صدادار را می شمارد و کاربرد عملی منطق جاوا اسکریپت را ارائه می دهد.

18. The Popover: یک جزء popover برای تعامل بهتر با کاربر ایجاد کنید و دسترسی به اطلاعات اضافی را بهبود بخشید.

19. Unicode Char Detector: ابزاری برای شناسایی کاراکترهای یونیکد ایجاد کنید و به پروژه های خود تطبیق پذیری اضافه کنید.

20. برنامه To-Do: یک برنامه کاربردی و کاربرپسند برای انجام کارهایی بسازید که برای اهداف سازمانی عالی است.


بعدی چیست؟

علاوه بر تسلط بر فناوری‌های اصلی، می‌توانید سایر چارچوب‌ها و کتابخانه‌های فرانت‌اند مورد تقاضا را کشف کنید. سفر شما برای تبدیل شدن به یک توسعه دهنده همه کاره و ماهر از اینجا شروع می شود.

آماده شوید تا رویاهای توسعه وب خود را زنده کنید—یک پروژه در یک زمان! اکنون ثبت نام کنید و آرزوهای کدنویسی خود را به واقعیت تبدیل کنید.


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

معرفی Introduction

  • معرفی Introduction

  • 2 نرم افزارهای مورد نیاز دوره را دانلود کنید 2 Download the Required Software's for the Course

انیمیشن پس زمینه Background Animation

  • پیش نمایش پروژه انیمیشن پس زمینه Background Animation Project Preview

  • HTML پروژه انیمیشن پس زمینه Background Animation Project HTML

  • پروژه انیمیشن پس زمینه CSS Background Animation Project CSS

  • پروژه انیمیشن پس زمینه JS Background Animation Project JS

پرش نامه Jumping Letters

  • پیش نمایش نامه های پرش Jumping Letters Preview

  • حروف پرش HTML Jumping Letters HTML

  • CSS حروف پرش Jumping Letters CSS

  • Jumping Letters JS Jumping Letters JS

اعلان زنگ Bell Notification

  • پیش نمایش اعلان زنگ Bell Notification Preview

  • HTML اعلان زنگ Bell Notification HTML

  • CSS اعلان زنگ Bell Notification CSS

  • زنگ هشدار JS Bell Notification JS

نشانگر نوار پیمایش Scrollbar Indicator

  • پیش نمایش برنامه نشانگر نوار پیمایش Scrollbar Indicator Application Preview

  • HTML برنامه نشانگر نوار پیمایش Scrollbar Indicator Application HTML

  • Scrollbar Indicator Application CSS Scrollbar Indicator Application CSS

  • Scrollbar Indicator Application JS Scrollbar Indicator Application JS

کپچا ژنراتور Captcha Generator

  • پیش نمایش Captcha Generator Captcha Generator Preview

  • Captcha Generator HTML Captcha Generator HTML

  • CSS ژنراتور کپچا Captcha Generator CSS

  • Captcha Generator JS Captcha Generator JS

پیش نمایش زبانه های جاوا اسکریپت JavaScript Tabs Preview

  • پیش نمایش زبانه های جاوا اسکریپت JavaScript Tabs Preview

  • زبانه های جاوا اسکریپت HTML JavaScript Tabs HTML

  • CSS زبانه های جاوا اسکریپت JavaScript Tabs CSS

  • JavaScript Tabs JS JavaScript Tabs JS

تولید کننده رمز عبور ساده Simple Password Generator

  • پیش نمایش ساده مولد رمز عبور Simple Password Generator Preview

  • HTML تولید کننده رمز عبور ساده Simple Password Generator HTML

  • CSS تولید کننده رمز عبور ساده Simple Password Generator CSS

  • تولید کننده رمز عبور ساده JS Simple Password Generator JS

پروژه روشنایی Illumination Project

  • پیش نمایش پروژه ILLumination ILLumination Project Preview

  • پروژه ILLumination HTML ILLumination Project HTML

  • پروژه ILLlumination CSS ILLumination Project CSS

  • پروژه ILLlumination JS ILLumination Project JS

اثر خراش Scratch Effect

  • پیش نمایش جلوه خراش Scratch Effect Preview

  • Scratch Effect HTML Scratch Effect HTML

  • Scratch Effect CSS Scratch Effect CSS

  • Scratch Effect JS Scratch Effect JS

افکت نور دیسکو Disco Light Effect

  • پیش نمایش جلوه نور دیسکو Disco Light Effect Preview

  • دیسکو اثر نور HTML Disco Light Effect HTML

  • دیسکو افکت CSS Disco Light Effect CSS

  • دیسکو نور افکت JS Disco Light Effect JS

جعبه جستجو Search Box

  • پیش نمایش جعبه جستجو Search Box Preview

  • HTML جعبه جستجو Search Box HTML

  • جعبه جستجو CSS Search Box CSS

  • جعبه جستجو JS Search Box JS

کلون مشارکت GitHub GitHub Contribution Clone

  • پیش‌نمایش Clone Contribution GitHub GitHub Contribution Clone Preview

  • GitHub Contribution HTML GitHub Contribution HTML

  • CSS مشارکت GitHub GitHub Contribution CSS

  • GitHub Contribution JS GitHub Contribution JS

انیمیشن چرخشی Rotating Animation

  • پیش نمایش انیمیشن چرخشی Rotating Animation Preview

  • HTML انیمیشن چرخشی Rotating Animation HTML

  • CSS انیمیشن چرخشی Rotating Animation CSS

  • انیمیشن چرخشی JS Rotating Animation JS

پشته ارز Currency Stack

  • پیش نمایش پشته ارز Currency Stack Preview

  • پشته ارز HTML Currency Stack HTML

  • CSS پشته ارز Currency Stack CSS

  • پشته ارز JS Currency Stack JS

اسکرول تصاویر Scrolling Images

  • پیش نمایش تصاویر پیمایش Scrolling Images Preview

  • اسکرول تصاویر HTML Scrolling Images HTML

  • اسکرول تصاویر CSS Scrolling Images CSS

  • پیمایش تصاویر JS Scrolling Images JS

ساعت دیجیتال Digital Clock

  • ساعت دیجیتال HTML Digital Clock HTML

  • ساعت دیجیتال CSS Digital Clock CSS

  • ساعت دیجیتال JS Digital Clock JS

شمارنده واکه Vowel Counter

  • HTML شمارنده واکه Vowel Counter HTML

  • شمارنده واکه CSS Vowel Counter CSS

  • شمارنده واکه JS Vowel Counter JS

پاپوور The Popover

  • Popover App HTML Popover App HTML

  • برنامه Popover CSS Popover App CSS

  • Popover App JS Popover App JS

آشکارساز کاراکتر یونیکد Unicode Char Detector

  • Unicode Char Detector HTML Unicode Char Detector HTML

  • CSS آشکارساز کاراکتر یونیکد Unicode Char Detector CSS

  • Unicode Char Detector JS Unicode Char Detector JS

برنامه کارها To-Do Application

  • HTML برنامه فهرست کار ساده Simple Todo List App HTML

  • CSS برنامه لیست کارهای ساده Simple Todo List App CSS

  • برنامه فهرست کار ساده JS Simple Todo List App JS

نمایش نظرات

آموزش 20 پروژه جاوا اسکریپت را در 20 روز با HTML، CSS و JS بسازید
جزییات دوره
7 hours
77
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,005
4.4 از 5
دارد
ندارد
ندارد
Vijay Kumar
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Vijay Kumar Vijay Kumar

آموزش CCNA، Linux، Security+، Pentest+، CySA+،