تعلم مجانا html و css و javascript لمطوري الويب المبتدئين: خطة تطبيقية من الصفر
ستتعلم في هذا الدليل العملي كيف تبني صفحة ويب حقيقية من الصفر باستخدام HTML و CSS و JavaScript، من إضافة الصور والفيديو إلى تنسيق التصميم وجعل الصفحة متجاوبة مع الجوال. لا تحتاج خبرة برمجية سابقة: يكفي متصفح حديث ومحرر نصوص مجاني وحساب مجاني على GitHub. ستفهم الفرق بين HTML و CSS والعلاقة بينهما، وستطبق على مشاريع وقوالب جاهزة توفر وقتك. الدليل موجه للمبتدئين الذين يريدون نتيجة فورية وخطوات قابلة للتنفيذ، مع مصادر تعلم مجانية محدثة وأخطاء شائعة يجب تجنبها، ثم خطة للانتقال إلى تطوير واجهات تفاعلية باستخدام JavaScript.
قد يحتوي هذا المحتوى على روابط تابعة؛ إذا سجّلت أو اشتريت عبرها قد نحصل على عمولة دون أي تكلفة إضافية عليك، ولا تؤثر العمولة على رأينا أو ترتيب المحتوى.
بعد تنفيذ هذا الدليل ستقدر على بناء صفحة ويب حقيقية تعرض صورة وفيديو وتتجاوب مع شاشة الهاتف، ثم تضيف تفاعلا بسيطا باستخدام جافا سكريبت (JavaScript). لا تحتاج خبرة سابقة، فقط متصفح حديث ومحرر نصوص مجاني وحساب غيت هاب (GitHub) اختياري للنشر. ستفهم الفرق بين إتش تي إم إل (HTML) وسي إس إس (CSS) وتبني مشروعك الأول خلال جلسة واحدة.
ما الذي تحتاجه قبل البدء؟
لست بحاجة إلى برامج مدفوعة أو خادم، كل العمل يتم في متصفحك ومحرر نصوص مجاني.
متصفح حديث مثل كروم أو فايرفوكس مع أدوات المطور.
محرر نصوص فيجوال ستوديو كود (VS Code) المجاني على ويندوز وماك ولينكس.
حساب مجاني على غيت هاب (GitHub) لرفع مشاريعك لاحقا.
مجلد واحد على سطح المكتب يحتوي ملفات المشروع.
ما الفرق بين html و css وما العلاقة بينهما؟
إتش تي إم إل تحدد المحتوى والعناصر، بينما سي إس إس يتحكم في الشكل والتنسيق، والعلاقة بينهما أن HTML هو الهيكل وCSS هو الطبقة التي تجعل الهيكل قابلا للاستخدام.
فكر في صفحة ويب كمنزل: HTML يضع الجدران والأبواب، وCSS يحدد الألوان ومواقع الأثاث. يمكن وضع CSS داخل صفحة HTML أو في ملف خارجي، والملف الخارجي هو الأفضل في المواقع الحقيقية.
<h1>عنوان رئيسي</h1>
<style>
h1 { color: blue; }
</style>كيف تبدأ بكتابة أول صفحة HTML؟
افتح محرر النصوص، أنشئ ملفا باسم index.html، ثم اكتب الهيكل الأساسي واحفظه وافتحه في المتصفح.
افتح VS Code واختر New File.
اكتب الكود التالي:
<!DOCTYPE html>
<html lang='ar'>
<head><title>صفحتي</title></head>
<body><h1>أهلا بك</h1><p>أول صفحة</p></body>
</html>احفظ الملف بامتداد html وافتحه في متصفحك، ستظهر الصفحة مباشرة.
كيف اضيف صورة وفيديو في html؟
لإضافة صورة استخدم وسم img مع المسار، ولإضافة فيديو استخدم وسم video مع controls والمصدر.
<img src='images/cover.jpg' alt='وصف الصورة'>
<video controls>
<source src='videos/demo.mp4' type='video/mp4'>
</video>ضع الملفات داخل مجلد المشروع واستخدم مسارا نسبيا. اكتب alt لوصف الصورة، واجعل controls حاضرا ليظهر شريط التشغيل.
كيف اسوي موقع html وتصميم صفحة ويب بلغة html و css؟
لإنشاء موقع كامل، أنشئ ملفين على الأقل: index.html للمحتوى وstyle.css للتنسيق، ثم اربط ملف CSS في رأس الصفحة.
أنشئ مجلد مشروع وضع فيه الملفين.
اربط CSS داخل head:
<link rel='stylesheet' href='style.css'>قسّم الصفحة إلى header وmain وfooter، ثم استخدم فليكس بوكس (flexbox) أو جريد (grid) للتخطيط، وأضف استعلامات الوسائط (media queries) لضبط العرض على الجوال.
body { font-family: Tahoma; margin: 0; }
main { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }بعد اكتمال التصميم، أنشئ ملف script.js واربطه قبل إغلاق body لإضافة تفاعل جافا سكريبت.
مشاريع html و css جاهزة وقوالب html و css جاهزة مجانية
أسرع طريقة لتعلم الكود أن تبدأ من مشروع أو قالب جاهز وتحلله ثم تعدل عليه، وتتوفر خيارات مجانية كثيرة تختصر عليك التصميم من الصفر.
منصة فري كود كامب (freeCodeCamp) تفرض عليك بناء مشاريع عملية قبل منحك الشهادة، ومنصة ذا أودن بروجكت (The Odin Project) تسير بك في مسار مشاريع حقيقية. لمقارنة المنصات اقرأ مواقع التعلم المجاني للصغار والكبار.
للقوالب المجانية ابحث في غيت هاب عن مستودعات بعبارة html-css-templates، أو استخدم منصات مثل HTML5 UP التي توفر قوالب متجاوبة جاهزة للتحميل. افتح القالب واقرأ ملفاته وعدّل الألوان والنصوص.
القوالب الجاهزة مفيدة للتحليل، لكن التعلم الحقيقي يبدأ عندما تكتب الكود بنفسك وتكسر القالب ثم تصلحه.
وإذا أردت أساسا نظريا أعمق، جرب مدخل هارفارد لعلوم الحاسوب CS50 الذي يغطي HTML وCSS وJavaScript ضمن سياق أوسع.
ما الأخطاء التي يجب تجنبها؟
أكثر ما يبطئ المبتدئين هو حفظ الوسوم بدل فهم البنية ثم الرجوع إلى التوثيق عند الحاجة.
لا تضع كل تنسيقات CSS داخل وسم style في صفحة HTML.
لا تنس الخاصية alt مع الصور.
لا تختبر على شاشة الحاسوب فقط، جرب وضع الجوال في أدوات المطور.
لا تنتقل إلى جافا سكريبت قبل بناء 3 صفحات ثابتة.
لا تؤجل استخدام جيت (Git) وغيت هاب لرفع مشروعك.
ما الذي يعنيه هذا لك
خطوتك التالية الوحيدة هي بناء مشروع واحد صغير كامل ونشره على غيت هاب اليوم.
أنشئ صفحة هبوط تعرض صورة وفيديو ونصا تعريفيا وزرا يغير لون الخلفية عند الضغط عليه بجافا سكريبت، ثم استخدم غيت هاب بيجز (GitHub Pages) لرفع الصفحة مجانا وبثها على الإنترنت. إن أنجزت هذه المهمة فقد تجاوزت مرحلة المعرفة المجردة ودخلت مرحلة التنفيذ.
بعد نشر مشروعك الأول، انتقل إلى مشاريع أوسع مثل نموذج تسجيل أو لوحة تحكم صغيرة، ثم تعلم جلب البيانات من واجهات برمجة التطبيقات API باستخدام fetch في جافا سكريبت. وعندما تجد نفسك جاهزا للخلفية البرمجية، اقرأ المسار العملي في تعلم بايثون جانغو وبناء أول تطبيق. قبل أن تطلب من أدوات الذكاء الاصطناعي توليد كود، راجع أساسيات الذكاء الاصطناعي لتفهم حدود هذه الأدوات.
هل يمكن تعلم HTML وCSS وJavaScript مجانا بالكامل؟
نعم، عبر منصات مثل freeCodeCamp وThe Odin Project. الشهادة قد تكون مجانية في بعضها، بينما تفرض منصات أخرى رسوما على الشهادة.
كم من الوقت أحتاج لبناء أول صفحة ويب؟
تستطيع كتابة صفحة ثابتة خلال ساعة أو جلستين. فهم CSS المتجاوب وسلوك JavaScript يحتاج أياما من التدريب.
ما الفرق بين HTML وCSS وJavaScript؟
HTML تحدد المحتوى والهيكل، وCSS تحدد الشكل والتنسيق، وJavaScript تحدد التفاعل والسلوك.
كيف أضيف صورة من جهازي إلى صفحة HTML؟
ضع الصورة داخل مجلد مشروعك، ثم استخدم وسم img مع المسار النسبي للصورة وخاصية alt.
هل أحتاج إلى خادم مدفوع لنشر موقعي؟
لا، يوفر GitHub Pages استضافة مجانية للمواقع الثابتة، وتكفي لرفع مشاريعك الأولى.