HTML، CSS، JS عملی: 10 پروژه واقعی برای تمرین - آخرین آپدیت
دانلود Practical HTML, CSS, JS: 10 Real-World Projects for Practice
به دوره جامع آموزش HTML، CSS و JavaScript خوش آمدید. در این دوره، مهارتهای لازم برای ساخت برنامههای وب مدرن و واکنشگرا را با ایجاد پروژههای سرگرمکننده و جذاب کسب خواهید کرد.
این دوره به گونهای طراحی شده است که تجربهای عملی را به شما ارائه دهد و شما را در نحوه کدنویسی برنامههای وب از ابتدا با آخرین فناوریهای وب: HTML5، CSS3 و JavaScript خالص راهنمایی کند. این رویکرد تضمین میکند که هر مفهوم را به طور کامل درک میکنید و به شما این امکان را میدهد که مهارتهای تازه به دست آمده خود را بدون تکیه بر کپی-پیست تمرین کنید.
شما به هیچ دانش قبلی از HTML، CSS یا JavaScript نیاز ندارید، زیرا ما شما را در هر نحو راهنمایی میکنیم و هر مرحله را به تفصیل توضیح میدهیم. دوره ما برای مبتدیان و برنامه نویسان با تجربه مناسب است. چه در کدنویسی تازه کار باشید و چه به دنبال تجدید مهارتهای خود هستید، دوره ما برای شما عالی است.
ما معتقدیم که یادگیری باید لذت بخش و جذاب باشد، به همین دلیل مجموعهای از پروژههای مدرن، بسیار جالب و جذاب را ایجاد کردهایم که در طول دوره توسعه خواهید داد. هر پروژه به طور مستقل از ابتدا ایجاد میشود و شما میتوانید بر اساس علاقه خود انتخاب کنید که روی کدام یک کار کنید.
دوره ما دارای فیلمهای جداگانه برای هر فناوری است که به شما امکان میدهد یاد بگیرید و روی زمینههایی که بیشتر به آنها علاقه دارید تمرکز کنید. به عنوان مثال، اگر در درجه اول به جاوا اسکریپت علاقه دارید، میتوانید بخشهای HTML و CSS را رد کنید و مستقیماً به ویدیوهای جاوا اسکریپت بروید.
من ویجی کومار هستم، یک توسعه دهنده وب با بیش از 8 سال تجربه. من در طول دوره راهنمای شما خواهم بود، به هر سؤالی که ممکن است داشته باشید پاسخ میدهم و بازخورد ارزشمندی ارائه میدهم تا به شما کمک کنم یک توسعه دهنده وب ماهر شوید.
توجه: این دوره به زبان هندی ضبط شده است! و زیرنویس به طور خودکار تولید شده است.
آیا آمادهاید تا خود را در دنیای هیجانانگیز توسعه وب غرق کنید؟ امروز به ما بپیوندید و شروع به ساخت وب سایت های شگفت انگیز کنید!
-
بررسی کننده وضعیت اینترنت: این پروژه وضعیت آنلاین دستگاه کاربر را با استفاده از جاوا اسکریپت بررسی میکند. نتیجه در یک صفحه HTML با استایل CSS نمایش داده میشود. این پروژه از ویژگی navigator.Online برای بررسی وضعیت آنلاین دستگاه کاربر استفاده میکند. اگر دستگاه آنلاین باشد، پروژه متن "آنلاین" را در صفحه نمایش میدهد. اگر دستگاه آفلاین باشد، پروژه متن "آفلاین" را در صفحه نمایش میدهد.
-
بررسی کننده پالیندروم: این پروژه بررسی میکند که آیا یک رشته داده شده با استفاده از جاوا اسکریپت یک پالیندروم است یا خیر. کاربر رشته را از طریق یک فرم HTML وارد میکند و نتیجه در صفحه نمایش داده میشود که با CSS استایل شده است. این پروژه از یک تابع بازگشتی برای بررسی اینکه آیا رشته یک پالیندروم است استفاده میکند. این تابع از ابتدا و انتهای رشته شروع میشود و کاراکترها را در هر فهرست مقایسه میکند. اگر کاراکترها یکسان باشند، تابع به فهرست بعدی ادامه میدهد. اگر کاراکترها یکسان نباشند، تابع false را برمی گرداند.
-
تولید کننده رنگ RGB: این پروژه مقادیر رنگ RGB (قرمز، سبز، آبی) تصادفی را با استفاده از جاوا اسکریپت تولید میکند. رنگ تولید شده در یک صفحه HTML نمایش داده میشود و رنگ پس زمینه به رنگ تولید شده تغییر میکند. این صفحه را میتوان با CSS استایل کرد. این پروژه از تابع Math.random() برای تولید اعداد تصادفی بین 0 و 255 استفاده میکند. از این سه عدد تصادفی برای ایجاد یک مقدار رنگ RGB استفاده میشود. سپس از مقدار رنگ برای تغییر رنگ پس زمینه صفحه استفاده میشود.
-
برنامه شمارنده: این پروژه یک برنامه شمارنده ساده است که از جاوا اسکریپت برای افزایش و کاهش مقدار شمارش استفاده میکند. مقدار شمارش در یک صفحه HTML نمایش داده میشود و دکمههایی را میتوان برای افزایش و کاهش شمارش اضافه کرد. این صفحه را میتوان با CSS استایل کرد. این پروژه از دو متغیر برای ذخیره مقدار شمارش و مدیریت کنندههای رویداد کلیک دکمه برای افزایش و کاهش مقدار شمارش استفاده میکند. سپس مقدار شمارش در صفحه نمایش داده میشود.
-
تشخیص دهنده کاراکتر ASCII و Unicode: این پروژه از جاوا اسکریپت برای تشخیص اینکه آیا یک کاراکتر داده شده یک کاراکتر ASCII یا Unicode است استفاده میکند. کاربر کاراکتر را از طریق یک فرم HTML وارد میکند و نتیجه در صفحه نمایش داده میشود که با CSS استایل شده است. این پروژه از تابع String.fromCharCode() برای تبدیل کاراکتر به یک رشته استفاده میکند. سپس از تابع charCodeAt() برای به دست آوردن کد ASCII کاراکتر استفاده میشود. اگر کد ASCII بین 0 و 127 باشد، کاراکتر یک کاراکتر ASCII است. در غیر این صورت، کاراکتر یک کاراکتر Unicode است.
-
برنامه ساعت آنالوگ: این پروژه یک ساعت آنالوگ را با زمان فعلی در یک صفحه HTML با استفاده از جاوا اسکریپت نمایش میدهد. این ساعت با استفاده از CSS برای استایل دادن به صفحه و عقربههای ساعت ایجاد میشود. این پروژه از شی Date() برای به دست آوردن زمان فعلی استفاده میکند. سپس از زمان فعلی برای تنظیم موقعیت عقربههای ساعت استفاده میشود.
-
تولید کننده رنگ تصادفی: این پروژه رنگ های تصادفی را در هر فرمتی (به عنوان مثال RGB، HEX، HSL) با استفاده از جاوا اسکریپت تولید میکند. رنگ تولید شده در یک صفحه HTML نمایش داده میشود و رنگ پس زمینه به رنگ تولید شده تغییر میکند. این صفحه را میتوان با CSS استایل کرد. این پروژه از تابع Math.random() برای تولید اعداد تصادفی بین 0 و 255 استفاده میکند. از این سه عدد تصادفی برای ایجاد یک مقدار رنگ RGB استفاده میشود. سپس مقدار رنگ به فرمت مورد نظر تبدیل شده و در صفحه نمایش داده میشود.
-
برنامه محاسبه گر BMI: این پروژه شاخص توده بدنی (BMI) کاربر را بر اساس قد و وزن آنها با استفاده از جاوا اسکریپت محاسبه میکند. کاربر قد و وزن خود را از طریق یک فرم HTML وارد میکند و نتیجه در صفحه نمایش داده میشود که با CSS استایل شده است. این پروژه از تابع Math.round() برای گرد کردن مقدار BMI به دو رقم اعشار استفاده میکند. سپس مقدار BMI در صفحه نمایش داده میشود.
-
محاسبه گر وام: این پروژه پرداخت ماهانه و کل بهره یک وام را بر اساس مبلغ وام، نرخ بهره و مدت وام با استفاده از جاوا اسکریپت محاسبه میکند. کاربر این مقادیر را از طریق یک فرم HTML وارد میکند و نتیجه در صفحه نمایش داده میشود که با CSS استایل شده است. این پروژه از تابع Math.pow() برای محاسبه پرداخت ماهانه استفاده میکند. سپس پرداخت ماهانه در مدت وام ضرب میشود تا کل بهره محاسبه شود. سپس کل بهره در صفحه نمایش داده میشود.
-
محاسبه گر عشق: این پروژه یک "درصد عشق" بین دو نفر را بر اساس نام آنها با استفاده از جاوا اسکریپت محاسبه میکند. کاربر نام های خود را از طریق یک فرم HTML وارد میکند و نتیجه در صفحه نمایش داده میشود که با CSS استایل شده است. این پروژه از یک الگوریتم ساده برای محاسبه درصد عشق استفاده میکند. این الگوریتم تعداد حروف موجود در هر نام را جمع میکند و سپس مجموع را بر 2 تقسیم میکند. سپس درصد عشق در صفحه نمایش داده میشود.
توجه: این دوره به زبان هندی ضبط شده است! و زیرنویس به طور خودکار تولید شده است.
مقدمه Introduction
-
مقدمه Introduction
-
راه اندازی محیط برای دوره Environment Setup for the Course
-
ایجاد و اجرای اولین پروژه Create and Run Your First Project
پروژه 1: بررسی کننده وضعیت اینترنت Project 1 Internet Status Checker
-
بخش-1-پیش نمایش بررسی کننده وضعیت اینترنت Part-1-Internet-Status-Checker-Preview
-
بخش-2-HTML بررسی کننده وضعیت اینترنت Part-2-Internet-Status-Checker-HTML
-
بخش-3-CSS بررسی کننده وضعیت اینترنت Part-3-Internet-Status-Checker-CSS
-
بخش-4-JS بررسی کننده وضعیت اینترنت Part-4-Internet-Status-Checker-JS
پروژه 2: بررسی کننده Palindrome (وارونه خوان) Project 2 Palindrome Checker
-
بخش-1-پیش نمایش بررسی کننده Palindrome Part-1-Palindrome Checker Preview
-
بخش-2-HTML بررسی کننده Palindrome Part-2-Palindrome Checker HTML
-
بخش-3-CSS بررسی کننده Palindrome Part-3-Palindrome Checker CSS
-
بخش-4-JS بررسی کننده Palindrome Part-4-Palindrome-Checker-JS
پروژه 3: تولید کننده رنگ RGB Project 3 RGB Color Generator
-
بخش-1-پیش نمایش انتخاب کننده رنگ RGB Part-1-RGB-Color-Picker-Preview
-
بخش-2-HTML تولید کننده رنگ RGB Part-2-RGB-Color-Generator-HTML
-
بخش-3-CSS تولید کننده رنگ RGB Part-3-RGB-Color-Generator-CSS
-
بخش-4-JS تولید کننده رنگ RGB Part-4-RGB-Color-Generator-JS
پروژه 4: برنامه شمارنده Project 4 Counter Application
-
بخش-1-پیش نمایش برنامه شمارنده Part-1-Counter-Application-Preview
-
بخش-2-HTML برنامه شمارنده Part-2-Counter-Application-HTML
-
بخش-3-CSS برنامه شمارنده Part-3-Counter-Application-CSS
-
بخش-4-JS برنامه شمارنده Part-4-Counter-Application-JS
پروژه 5: تشخیص دهنده کاراکترهای ASCII و Unicode Project 5 ASCII and Unicode Character Detector
-
بخش-1-پیش نمایش تشخیص دهنده کاراکترهای ASCII و Unicode Part-1-ASCII-and-Unicode-Character-Detector-Preview
-
بخش-2-HTML تشخیص دهنده کاراکترهای ASCII و Unicode Part-2-ASCII-and-Unicode-Character-Detector-HTML
-
بخش-3-CSS تشخیص دهنده کاراکترهای ASCII و Unicode Part-3-ASCII-and-Unicode-Character-Detector-CSS
-
بخش-4-JS تشخیص دهنده کاراکترهای ASCII و Unicode Part-4-ASCII-and-Unicode-Character-Detector-JS
پروژه 6: برنامه ساعت آنالوگ Project 6 Analog Clock Application
-
بخش-1-پیش نمایش برنامه ساعت آنالوگ Part-1-Analog-Clock-Application-Preview
-
بخش-2-HTML برنامه ساعت آنالوگ Part-2-Analog-Clock-Application-HTML
-
بخش-3-CSS برنامه ساعت آنالوگ Part-3-Analog-Clock-Application-CSS
-
بخش-4-JS برنامه ساعت آنالوگ Part-4-Analog-Clock-Application-JS
پروژه 7: تولید کننده رنگ تصادفی Project 7 Random Color Generator
-
بخش-1-پیش نمایش تولید کننده رنگ تصادفی Part-1-Random-Color-Genrator-Preview
-
بخش-2-HTML تولید کننده رنگ تصادفی Part-2-Random-Color-Generator-HTML
-
بخش-3-CSS تولید کننده رنگ تصادفی Part-3-Random-Color-Generator-CSS
-
بخش-4-JS تولید کننده رنگ تصادفی Part-4-Random-Color-Generator-JS
پروژه 8: برنامه محاسبه گر BMI (شاخص توده بدنی) Project 8 BMI Calculator Application
-
بخش-1-پیش نمایش محاسبه گر BMI Part-1-BMI-Calculator-Preview
-
بخش-2-HTML محاسبه گر BMI Part-2-BMI-Calculator-HTML
-
بخش-3-CSS محاسبه گر BMI Part-3-BMI-Calculator-CSS
-
بخش-4-JS محاسبه گر BMI Part-4-BMI-Calculator-JS
پروژه 9: محاسبه گر وام Project 9 Loan-Calculator
-
بخش-1-پیش نمایش محاسبه گر وام Part-1-Loan-Calculator-Preview
-
بخش-2-HTML محاسبه گر وام Part-2-Loan-Calculator-HTML
-
بخش-3-CSS محاسبه گر وام Part-3-Loan-Calculator-CSS
-
بخش-4-JS محاسبه گر وام Part-4-Loan-Calculator-JS
پروژه 10: محاسبه گر عشق Project 10 Love Calculator
-
بخش-1-محاسبه گر عشق Part-1-Love-Calculator
-
بخش-2-HTML محاسبه گر عشق Part-2-Love-Calculator-HTML
-
بخش-3-CSS محاسبه گر عشق Part-3-Love-Calculator-CSS
-
بخش-4-JS محاسبه گر عشق Part-4-Love-Calculator-JS
جایزه (Bonus) Bonus
-
جایزه (Bonus) Bonus
![آموزش تبدیل شدن به یک مدیر سرور لینوکس [ویدئو]](https://donyad.com/course/getimg/7dc9e529-9e4c-44c2-b5d7-7cdfe16cedb8.jpg "آموزش تبدیل شدن به یک مدیر سرور لینوکس [ویدئو]")
https://donyad.com/d/960509
Vijay Kumar
آموزش CCNA، Linux، Security+، Pentest+، CySA+،
نمایش نظرات