بشكل بسيط وبدون تعقيد، تلك اللغات هي اللغات الأساسية لمواقع الويب والمبني عليها أي تقنية أخرى خاصة بالويب (المكتبات والإطارات الخاصة بالواجهة الأمامية).

HTML نستخدمها لبناء هيكل الصفحة، أي تخيلي معي جسم السيارة نفسه (الهيكل المعدني).

بعد ذلك نحن بحاجة إلى طلاء ذلك الهيكل وتنسيقه وتجميله صحيح؟ إذن نستخدم لغة CSS.

لكن السيارة لن تتحرك بدون محرك صحيح؟ إذن نحن بحاجة إلى استخدام لغة جافاسكريبت وهي لغة برمجة الويب، ومن خلالها نضيف الديناميكية للموقع أي تنفيذ أمر معين عند النقر على زر ما وتغيير محتوى جزء من الصفحة بناءًا على أمر معين أو حدث معين وهكذا، أي التفاعل مع المستخدم، فالموقع بدون تلك اللغة لا يفهم ماذا يعني أن المستخدم ضغط على الزر؟

وبالتالي علينا استخدام ما سبق سويًا، لكن ليس بالضرروة استخدام جافاسكريبت، طالما أننا لا نحتاج إلى وجود ميزات برمجية في الموقع أي أوامر نكتبها يفهمها المتصفح ويقوم بأمر معين.

لفهم الأمر انظر للصورة التالية:

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

ان ال html و ال css هى ليست لغات برمجة هى عبارة عن لغة توصيف (markup language) .

• تستخدم ال html في انشاء هيكل الصفحة فقط من عناصر و نصوص .
• أما ال css تستخدم فقط لتعديل تصميم وشكل واماكن العناصر اللتى تم انشائها باستخدام ال html 

استخدام ال html و ال css فقط لا يفيد حاليا الا اذا اردت ان تنشئ موقع ثابت (static) غير متغير من شخص الى اخر وهو غير مطلوب كثيرا.

اما ال javascript فهى لا غنى عنها حاليا حيث تمكنك من التلاعب بالعناصر فى الصفحة وجعل الموقع اكثر ديناميكية من حذف وتعديل واضافه عناصر و نصوص حتى بعد تحميل الصفحة .

فيجب عليك استخدام الثلاثة اذا اردت ان تكون مطور واجهات امامية (front end) .

اما اذا لم تكن تريد ان تتعامل مع ال html وال css فيمكنك من ان تصبح مطور واجهات خلفية (back end) تتعامل من السيرفرات وقواعد البيانات فيمكنك مذاكرة لغة برمجة php و اى اطار عمل خاص بها سواء ووردبريس او لارافيل

 يمكنني توضيح الفرق بين HTML وCSS وJavaScript، ولماذا يُفضل استخدامهم معًا في تطوير مواقع الويب.

1. HTML :
   - HTML هي لغة توصيف النصوص التي تُستخدم لبناء هيكل صفحة الويب.
   - تُستخدم العناصر (tags) في HTML لتحديد مكونات الصفحة مثل العناوين والفقرات والصور وروابط الهايبرلنك والجداول والنماذج، إلخ.
   - HTML يوفر الإطار الأساسي للصفحة ويُعتبر أساسيًا لبناء أي موقع على الإنترنت.

2. CSS (Cascading Style Sheets):
   - CSS تُستخدم لتحسين شكل وتنسيق صفحة الويب التي تم إنشاؤها بواسطة HTML.
   - تسمح CSS بتعيين مظهر العناصر المحددة، مثل تغيير الألوان والخطوط والهوامش والتباعد بين العناصر.
   - يمكن استخدام CSS لتحقيق تصميم جميل وجذاب لصفحات الويب، وتفعيل تجاوبية الموقع لتكيفه مع مختلف أحجام الشاشات.

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

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

هل يمكن استخدام لغة واحدة فقط؟
   - نعم، يمكنك استخدام لغة واحدة فقط إذا كنت تقوم بمشروع صغير أو إذا كنت تستخدم أدوات وإطارات عمل (frameworks) تتيح لك فعل ذلك. على سبيل المثال، يمكنك استخدام إطار عمل مثل React أو Vue.js لتطوير تطبيقات ويب ديناميكية باستخدام JavaScript فقط. ومع ذلك، عند توسيع مشروعك، ستجد أن استخدام HTML، CSS، وJavaScript سيمكنك من الاستفادة من الإمكانيات الكاملة لتطوير موقع ويب متكامل.

- اما اذ كنت تريد تعلم html او css فيجب تعلمهم معا
 

في البداية ساشرح لك ماهي وظيفة تطوير  واجهات المستخدم التي تستخدم هذه اللغات الثلاثة 
ان صفحات الويب التي تقوم بزيارتها كل يوم على متصفح الانترنت مبينة بثلاث تقنيات اساسية وهم ال HTML  CSS  JS ولا يمكننا الاستغناء عن واحدة منهم ان اردنا ان تظهر الصفحة بشكل احترافي , واكبر مثال على ذلك هو صفحة الويب التي تشاهدها الان امامك 
دعني اعطيكي لمحة سريعة عن كل واحدة منهم

• HTML

تعبر لغة ال html  عن الهيكل الاساسي لبناء صفحة الويب ويمكننا اضافة النصوص والصور والفيديوهات وغيرها الكثير الى صفحتنا من خلالها عن طريق اضافة بعض الوسوم التي يمكن للمتصفح قرائتها وتفسيرها 

• CSS

تستخدم لغة ال css  في انشاء تنسيقات لعناصر ال html , وهي اللغة المسؤولة عن اعطاء تصميمات لصفحات الويب ك  الالوان والتنسيقات وجعلها متجاوبة مع كافة انواع الشاشات 

• javascript 

تعتبر هذه اللغة حياة الموقع حيث انه يمكنك من خلالها اضافة تفاعلات للموقع الخاص بك وجعله غير ثابت او اعتيادي 

لم ارد ان اطل كثيرا بالشرح لأنني ساترك لك مقالات في اسفل التعليق تشرح لك بالتفصيل عن كل لغة  ولكن هذا ما يحب ان تعرفه بشكل اساسي حاليا 
دعني اعطيك مثال عملي  لانشاء عنصر ساعة كالصورة المرفقة كي تتوضح الفكرة لديك اكثر 

اولا ف لنبدأ بانشاء ملف index.html  ونضع هذه الشيفرة بداخله 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Digital Clock</title>
<style>
/* ثم باضافة شيفرة ال css  
هنا اسفل هذا التعليق  */

</style>
</head>
<body>
  <div class="clock">
    <span id="hours">00</span>:
    <span id="minutes">00</span>:
    <span id="seconds">00</span>
  </div>

 <script>
//    هنا ثم باضافة كود الجافا سكربت اسفل هذا التعليق 

 </script>
</body>
</html>

هنا قمت بكتابة وسوم html  للحصول على صف يحتوي على ارقام الساعة لتظهر النتيجة كالأتي 

ثم دعنا الان ان نضيف شيفرة ال CSS  في المكان الذي حددته لك بالكود الماضي 

.clock {
  font-family: Arial, sans-serif;
  font-size: 48px; 
  color: #fff; 
  background-color: #008CBA; 
  width: 250px;
  padding: 20px;
  border-radius: 50px; 
  font-weight: bold; 
  border: 5px solid #005566; 
}

باستخدام تنسيقات ال css  تمكنت من الحصول على هذا الشكل الذي اريده 

ولكن لهذا الوقت ان هذا العنصر ثابت لذلك حان الوقت الان لدور الجافا سكريبت لتقوم بجعله يتحرك ويقوم باظهار الساعة الفعلية

لذلك دعنا نقوم باضافة الكود التالي في المكان المخصص له الذي قمت بحديده لك سابقا 

    function updateTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  
  document.getElementById('hours').textContent = hours;
  document.getElementById('minutes').textContent = minutes;
  document.getElementById('seconds').textContent = seconds;
}

setInterval(updateTime, 1000);


updateTime();

الأن ستظهر النتيجة كالتالي مثل ما نريدها تماما 

اظن انك اصبحت الان على دراية كاملة بطريقة عمل كل لغة ولماذا يجب علينا استخدام الثلاثة في نفس الوقت ,  بامكانك تطبيق المثال العملي الذي قمت بأعطائه لك 

اعلم ان  هذه الاكواد صعبة الفهم حاليا بالنسبة لك لكن لا مشكلة ف انا اعطيتك اياها لترى الفرق فقط , ولتطوير نفسك في هذا المجال اكثر يمكنك التسجل في دورة تطوير واجهات المستخدم التابعة لأكاديمية حسوب من هنا حيث ستتمكن من خلالها فهم هذه الاكواد وحتى انشاءها بنفسك 

وهذه بعض المقالات التي تشرح لك هذه اللغات الثلاث بالتفصيل 

HTML

CSS

Javascript

https://wiki.hsoub.com/JavaScript 

 بالتوفيق لك