مبروك! 🎉
لقد أتممت مسار HTML من الصفر إلى الاحتراف. أصبحت تملك الآن الأساس الذي تُبنى عليه كل صفحات الويب. لنراجع رحلتك.
ما تعلّمته
- الأساسيات: بنية المستند، العناصر، السمات، النصوص والعناوين.
- المحتوى: الروابط، الصور، القوائم، الجداول.
- النماذج: جمع بيانات المستخدم وأنواع الإدخال وخصائصها.
- البنية: الصناديق (block/inline)،
div/span، الفئات والمعرّفات، العناصر الدلالية. - الرأس:
headوmetaوالعنوان والـ favicon والـ SEO. - الوسائط: الفيديو والصوت والإطارات والرسوميات (Canvas/SVG).
- المتقدّم: واجهات HTML5، التخطيط والتجاوب، الرموز والترميز، ربط JavaScript.
- الجودة: دليل الأسلوب وإمكانية الوصول.
- الأحدث: معلم
<search>الدلالي، وخاصيةdirnameلإرسال اتجاه النص مع النماذج. - الأداء والأمان: الصور المتجاوبة (
srcset/picture) والتحميل الكسول، وأمان الروابط والمحتوى المضمّن (rel="noopener"،iframe sandbox)، وCore Web Vitals وأدوات المطوّر. - التفاعل والوصول المتقدّم:
dialog/details/popover، وترتيب التركيز بلوحة المفاتيح، وARIA مقابل HTML الدلالي. - مشاريعك العملية: سيرة ذاتية، مقال متاح لمحركات البحث، جدول بيانات متاح، نموذج تسجيل كامل، صفحة متعددة الأقسام، والمشروع النهائي.
القاعدة التي تلخّص HTML كله
اكتب بنية ذات معنى: استخدم العنصر الصحيح للمحتوى الصحيح. الكود الدلالي النظيف يخدم المستخدم ومحرك البحث وقارئ الشاشة وزميلك في الفريق.
نصائح ذهبية
- تدرّب بالكتابة لا بالقراءة فقط — ابنِ صفحات حقيقية في المحرّر.
- افحص دائمًا بـ Lighthouse للأداء والوصول والـ SEO.
- اقرأ كود مواقع تعجبك (زر "عرض المصدر").
خطوتك التالية: من البنية إلى الجمال والتفاعل
HTML يبني الهيكل فقط. لتصبح مطوّر ويب كامل تحتاج:
- CSS — لتنسيق وتجميل وترتيب صفحاتك (الألوان، التخطيط، التجاوب، الحركات). هذه خطوتك المباشرة التالية.
- JavaScript — لإضافة التفاعل والمنطق والديناميكية.
- ثم إطار عمل مثل React أو Next.js لبناء تطبيقات متكاملة.
HTML (البنية) → CSS (المظهر) → JavaScript (السلوك) → React/Next.js (التطبيقات)
ابدأ الآن
ابدأ الآن بـاختبار HTML النهائي — 40 سؤالًا وشهادة مجانية، ثم أكمل رحلتك مع مسارَي CSS وJavaScript.
الطريق إلى الاحتراف هو البناء المستمر. لقد وضعت حجر الأساس — استمرّ! 🚀