10 HTML CSS JS projects- HTML5, CSS3, and vanilla JavaScript

أهلا بك عزيزي المتابع لموقع (journey for learn) نقدم دورات بكوبونات متاحة لاول 1000 تسجيل مجاني فقط وكوبونات اخري لفترة محدودة فاذا كنت تريد ان تحصل علي كل الكورسات علي موقعنا وان تكون اول المسجلين في الكورسات المجانية قم بتسجيل الدخول أوقم بالدخول علي وسائل التواصل الاجتماعي وخصوصا التليجرام نوضح الوصف المختصر والطويل للدورات لكي تعرف الدروس التي سوف تتعلمها بسهولة ويسر :

مرحبًا بك في دورةنا الشاملة حول إتقان HTML و CSS و JavaScript. في هذه الدورة ، سوف تكتسب المهارات التي تحتاجها لإنشاء تطبيقات الويب الحديثة والسريعة الاستجابة من خلال إنشاء مشاريع مسلية وجذابة. تم تصميم الدورة التدريبية لتزويدك بتجربة عملية ، وتوجيهك حول كيفية ترميز تطبيقات الويب من نقطة الصفر مع أحدث تقنيات الويب: HTML5 ، و CSS3 ، وفانيلا جافاسريبريبريب. يضمن هذا النهج أن تفهم كل مفهوم تمامًا ويسمح لك بممارسة مهاراتك المكتسبة حديثًا دون الاعتماد على نسخ النسخ. لا تحتاج إلى أي معرفة سابقة بـ HTML أو CSS أو JavaScript لأننا سنأخذك عبر كل بناء جملة وشرح كل خطوة بالتفصيل. مسارنا مناسب لكل من المبتدئين والمبرمجين ذوي الخبرة. سواء كنت جديدًا في الترميز أو تتطلع إلى تحديث مهاراتك ، فإن مسارنا مثالي بالنسبة لك. نعتقد أن التعلم يجب أن يكون ممتعًا وجذابًا ، ولهذا السبب أنشأنا مجموعة من المشاريع الحديثة الفائقة والأسرة التي ستطورها طوال الدورة. يتم إنشاء كل مشروع بشكل مستقل عن نقطة الصفر ، ويمكنك اختيار أي مشروع يجب العمل عليه بناءً على اهتماماتك. تتميز الدورة التدريبية بمقاطع فيديو منفصلة لكل تقنية ، مما يتيح لك التعلم والتركيز على المجالات التي تهمك أكثر. على سبيل المثال ، إذا كنت مهتمًا بشكل أساسي بـ JavaScript ، فيمكنك تخطي أقسام HTML و CSS والغطس مباشرة في مقاطع فيديو JavaScript. سأكون دليلك طوال الدورة التدريبية ، وأجيبت على أي أسئلة قد تكون لديكم وتقديم ملاحظات قيمة لمساعدتك على أن تصبح مطور ويب بارع.
ملاحظة: يتم تسجيل هذه الدورة باللغة الهندية! والرجوع الفرعي تم إنشاؤه تلقائيًا.
هل أنت مستعد لتغمر نفسك في عالم تطوير الويب المثير؟ انضم إلينا اليوم وابدأ في إنشاء مواقع ويب مذهلة! يتم عرض النتيجة على صفحة HTML مصممة مع CSS. يستخدم المشروع المستكشف. خاصية عبر الإنترنت للتحقق من الحالة عبر الإنترنت لجهاز المستخدم. إذا كان الجهاز متصلاً بالإنترنت ، يعرض المشروع النص "عبر الإنترنت" على الصفحة. إذا كان الجهاز غير متصل بالإنترنت ، فإن المشروع يعرض النص "غير متصل" على الصفحة.

Palindrome Checker: يتحقق هذا المشروع إذا كانت سلسلة معينة عبارة عن palindrome باستخدام JavaScript. يقوم المستخدم بإدخال السلسلة من خلال نموذج HTML ويتم عرض النتيجة على الصفحة ، مصممة باستخدام CSS. يستخدم المشروع وظيفة متكررة للتحقق مما إذا كانت السلسلة عبارة عن palindrome. تبدأ الوظيفة في بداية ونهاية السلسلة وتقارن الأحرف في كل فهرس. إذا كانت الأحرف هي نفسها ، فستستمر الوظيفة إلى الفهرس التالي. إذا لم تكن الأحرف هي نفسها ، فإن الوظيفة تُرجع خطأ.

مولد ألوان RGB: يقوم هذا المشروع بإنشاء قيم ألوان RGB (الأحمر والأخضر) العشوائي باستخدام JavaScript. يتم عرض اللون الذي تم إنشاؤه على صفحة HTML ، مع تغيير لون الخلفية إلى اللون الذي تم إنشاؤه. يمكن تصميم الصفحة مع CSS. يستخدم المشروع الرياضيات. وظيفة عشوائية () لإنشاء أرقام عشوائية بين 0 و 255. يتم استخدام الأرقام العشوائية الثلاثة لإنشاء قيمة لون RGB. ثم يتم استخدام قيمة اللون لتغيير لون الخلفية للصفحة.

تطبيق العداد: هذا المشروع هو تطبيق مضاد بسيط يستخدم JavaScript لزيادة قيمة العد وتقليلها. يتم عرض قيمة العد على صفحة HTML ويمكن إضافة الأزرار إلى الزيادة وتقليل العدد. يمكن تصميم الصفحة مع CSS. يستخدم المشروع متغيرين لتخزين قيمة العد وزر معالجات الأحداث للزر للزيادة وتقليل قيمة العدد. ثم يتم عرض قيمة العد على الصفحة.

كاشف أحرف ASCII و Unicode: يستخدم هذا المشروع JavaScript لاكتشاف ما إذا كانت حرف معين عبارة عن حرف ASCII أو Unicode. يقوم المستخدم بإدخال الحرف من خلال نموذج HTML ويتم عرض النتيجة على الصفحة ، مصممة باستخدام CSS. يستخدم المشروع وظيفة string.fromcharcode () لتحويل الحرف إلى سلسلة. ثم يتم استخدام وظيفة charcodeat () للحصول على رمز ASCII للحرف. إذا كان رمز ASCII بين 0 و 127 ، فإن الحرف هو حرف ASCII. خلاف ذلك ، فإن الحرف هو حرف Unicode.

تطبيق الساعة التناظرية: يعرض هذا المشروع ساعة تمثيلية مع الوقت الحالي على صفحة HTML باستخدام JavaScript. يتم إنشاء الساعة باستخدام CSS لتصميم وجه الساعة واليدين. يستخدم المشروع كائن Date () للحصول على الوقت الحالي. ثم يتم استخدام الوقت الحالي لتعيين موضع أيدي الساعة.

مولد لون عشوائي: يقوم هذا المشروع بإنشاء ألوان عشوائية في أي تنسيق (مثل RGB ، HEX ، HSL) باستخدام JavaScript. يتم عرض اللون الذي تم إنشاؤه على صفحة HTML ، مع تغيير لون الخلفية إلى اللون الذي تم إنشاؤه. يمكن تصميم الصفحة مع CSS. يستخدم المشروع الرياضيات. وظيفة عشوائية () لإنشاء أرقام عشوائية بين 0 و 255. يتم استخدام الأرقام العشوائية الثلاثة لإنشاء قيمة لون RGB. ثم يتم تحويل قيمة اللون إلى التنسيق المطلوب وعرضه على الصفحة.

تطبيق حاسبة مؤشر كتلة الجسم: يحسب هذا المشروع مؤشر كتلة الجسم للمستخدم (BMI) استنادًا إلى الطول والوزن باستخدام JavaScript. يقوم المستخدم بإدخال الطول والوزن من خلال نموذج HTML ويتم عرض النتيجة على الصفحة ، مصممة باستخدام CSS. يستخدم المشروع الرياضيات. الجولة () وظيفة لالتقاط قيمة مؤشر كتلة الجسم إلى مكانين عشريين. ثم يتم عرض قيمة مؤشر كتلة الجسم على الصفحة.

حاسبة القرض: يحسب هذا المشروع الدفع الشهري وإجمالي الفائدة على قرض بناءً على مبلغ القرض وسعر الفائدة وقرضه باستخدام JavaScript. يقوم المستخدم بإدخال هذه القيم من خلال نموذج HTML ويتم عرض النتيجة على الصفحة ، مصممة باستخدام CSS. يستخدم المشروع الرياضيات. POW () وظيفة لحساب الدفع الشهري. ثم يتم ضرب الدفع الشهري بمدة القرض لحساب إجمالي الفائدة. ثم يتم عرض الاهتمام الكلي على الصفحة.

حاسبة الحب: يحسب هذا المشروع "نسبة الحب" بين شخصين بناءً على أسمائهما باستخدام JavaScript. يقوم المستخدم بإدخال أسمائهم من خلال نموذج HTML ويتم عرض النتيجة على الصفحة ، مصممة باستخدام CSS. يستخدم المشروع خوارزمية بسيطة لحساب نسبة الحب. تضيف الخوارزمية عدد الحروف في كل اسم ثم تقسم المبلغ على 2. ثم يتم عرض نسبة الحب على الصفحة.

ملاحظة: يتم تسجيل هذه الدورة باللغة الهندية! وبين الترجمة تم إنشاؤها تلقائيًا.

ما هي المتطلبات الأساسية لدخول الدورة والتسجيل فيها على موقعنا؟ رحلة التعلم:

(احصل على الدورة للدخول إلى الموقع والتسجيل)

يجب أن يكون لديك بريد إلكتروني (حساب بريد) تتذكره لنفسك وأيضًا يجب أن تتذكر كلمة مرور البريد الإلكتروني الذي ستسجل به ، وإذا لم يكن لديك حساب بريد إلكتروني ، فمن الأفضل إنشاء حساب (Gmail)