مقدمة الواجهة الأمامية وأساسيات HTML

الشرائح

7 دقيقة قراءة

Session 1

Frontend Introduction & HTML Basics

ENG · Muhammad Elsayed

1 / 41

ملاحظات الدرس

تطوير الواجهة الأمامية هو كل ما يراه المستخدم ويتفاعل معه في المتصفح؛ والخلفية هي المستودع الذي يعمل خلفها.

HTML هي البنية — ما الموجود في الصفحة
CSS هي التنسيق — كيف تبدو
JavaScript هي السلوك — كيف تستجيب
تدير الخلفية (Backend) قواعد البيانات ومنطق العمل والمصادقة
تضغط "عرض الملف" فترسل الواجهة طلبًا، وتستعلم الخلفية من قاعدة البيانات، ثم تعود الإجابة لتُرسم على الشاشة
UI كيف تبدو؛ وUX كيف يكون استخدامها

المحرر المعياري في الصناعة هو VS Code — مجاني ومتعدد المنصات وقابل للتوسيع.

ثبّته، وأضفه إلى PATH، وفعّل "فتح باستخدام Code" في قائمة السياق
Live Server هي الإضافة التي لا غنى عنها — تعيد تحميل المتصفح كل مرة تحفظ فيها
ومن المفيد أيضًا: Prettier وHTML CSS Support وAuto Rename Tag وIndent-Rainbow

اختصار HTML هو Hyper Text Markup Language، ويبني الصفحات من وسوم: وسم افتتاحي، ثم محتوى، ثم وسم ختامي.

تبدأ كل صفحة بـ <!DOCTYPE html> وتضع كل شيء داخل <html>
يحمل <head> بيانات وصفية غير مرئية: charset وviewport وdescription وtitle
يحمل <body> كل ما يراه الزائر فعلًا
تمتد العناوين من <h1> (واحد لكل صفحة) إلى <h6>
وسوم النص: <p> و<br> و<strong> و<em> و<u> و<hr>
توثّق  كودك دون أن تظهر في المتصفح

تنتهي الجلسة بصفحة نبذة عني (About Me) تجمع كل ما سبق. وانتبه لأخطاء المبتدئين الكلاسيكية:

نسيان الوسوم الختامية
تداخل الوسوم بترتيب خاطئ
كتابة الوسوم بأحرف كبيرة
الحفظ كـ .txt بدل .html
وضع محتوى مرئي داخل <head>
وعند تعطّل شيء، اعتمد على تلوين الصياغة، وconsole المتصفح، وvalidator.w3.org — ثم احفظ وحدّث وكرّر

تريد تغطية موضوع؟ أخبرني.