شائعرحلة
تعلّم HTML
ابدأ بتعلّم HTML من الصفر من خلال دورة أونلاين مجانية وتفاعلية. أتقن بنية المستند والوسوم الدلالية والروابط والنماذج والصور وأساسيات الوصول عبر تمارين عملية ومشاريع حقيقية وتلميحات بالذكاء الاصطناعي وشهادة عند الإكمال.
249,002+ من الـ codders مسجلون
تتضمن هذه الرحلة
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
شهادة إتمام مجانية
المنهج
5 أقسام241 درسًا212 تحديات1,203 أسئلة الاختبار01قسم 1
Fundamentals
Learn the core structure and syntax to create web pages from scratchابدأ التعلمأساسيات HTML
5 درسًا531- 01ما هي HTML؟تحدي
- 02الهيكل الأساسي لـ HTMLتحدياختبارصوت
- 03الوسوم والعناصرتحدياختبارصوت
- 04تداخل وإغلاق الوسومتحدياختبارصوت
- 05التعليقات في HTMLتحدياختبارصوت
النصوص والتنسيق
6 درسًا1137- 01العناوينتحديإتقاناختبارصوت
- 02الفقراتتحديإتقاناختبارصوت
- 03فواصل الأسطرتحديإتقاناختبارصوت
- 04النص العريض والمائلتحديإتقاناختبارصوت
- 05النص العريض والمائل مجدداًتحديإتقاناختبارصوت
- 06مراجعة - التنسيقتحدي
التعامل مع القوائم
4 درسًا721- 01قائمة غير مرتبةتحديإتقاناختبارصوت
- 02قائمة مرتبةتحديإتقاناختبارصوت
- 03قوائم متداخلةتحديإتقاناختبارصوت
- 04ملخص - القوائمتحدي
بطاقة وصفة
مشروع4 درسًا1- 01نظرة عامة على المشروعتحدي
- 02عنوان الوصفة ووصفهامشروع
- 03المكوناتمشروع
- 04الخطواتمشروع
إضافة المحتوى
5 درسًا837- 01سمات HTMLاختبارصوت
- 02الروابطتحديإتقاناختبارصوت
- 03روابط لصفحات جديدةتحديإتقاناختبارصوت
- 04الصورتحديإتقاناختبارصوت
- 05سمات الصورتحديإتقاناختبارصوت
تخطيط الصفحة
5 درسًا931- 01التقسيماتتحديإتقاناختبارصوت
- 02عناصر Span المضمنةتحديإتقاناختبارصوت
- 03الوسوم الدلاليةتحديإتقاناختبارصوت
- 04الأقسام والمقالاتتحديإتقاناختبارصوت
- 05ملخص - التخطيطتحدي
صفحة الملف الشخصي
مشروع5 درسًا1- 01نظرة عامة على المشروعتحدي
- 02قسم الترويسة (Header)مشروع
- 03صورة الملف الشخصيمشروع
- 04قسم نبذة عنيمشروع
- 05روابط التواصل الاجتماعيمشروع
النماذج والمدخلات - الجزء الأول
6 درسًا937- 01أساسيات النماذجاختبارصوت
- 02مدخلات النصوصتحديإتقاناختبارصوت
- 03سمات المدخلاتتحديإتقاناختبارصوت
- 04حقل كلمة المرورتحديإتقاناختبارصوت
- 05تسميات المدخلاتتحديإتقاناختبارصوت
- 06ملخص - نموذج أساسيتحدي
النماذج والمدخلات - الجزء الثاني
7 درسًا1239- 01أزرار الاختيار (Radio Buttons)تحديإتقاناختبارصوت
- 02صناديق الاختيار (Checkboxes)تحديإتقاناختبارصوت
- 03القوائم المنسدلة (Dropdowns)تحديإتقاناختبارصوت
- 04الأزرارتحديإتقاناختبارصوت
- 05الأزرار في النماذجتحديإتقاناختبارصوت
- 06مراجعة - النماذج #1تحدي
- 07مراجعة - النماذج #2تحدي
الجداول
4 درسًا725- 01أساسيات الجداولتحديإتقاناختبارصوت
- 02إضافة التسميات التوضيحيةتحديإتقاناختبارصوت
- 03دمج الصفوف والأعمدةتحديإتقاناختبارصوت
- 04مراجعة - الجداولتحدي
صفحة التسجيل في الفعالية
مشروع5 درسًا1- 01نظرة عامة على المشروعتحدي
- 02قسم الـ Headerمشروع
- 03قسم تفاصيل الفعاليةمشروع
- 04نموذج التسجيلمشروع
- 05قسم الـ Footerمشروع
التحديات النهائية
4 درسًا4- 01بطاقة ملف شخصي بسيطةتحدي
- 02بطاقة دعوة لحدثتحدي
- 03صفحة مقال بسيطةتحدي
- 04قائمة الكتب المفضلةتحدي
02قسم 2
Styling with CSS
Bring your web pages to life with colors, layouts, and stylesابدأ التعلممقدمة
5 درسًا540- 01ما هي CSS؟تحدياختبار
- 02بنية CSSتحدياختبار
- 03تعليقات CSSاختبار
- 04وسم Headتحدياختبار
- 05وسم Titleتحديإتقاناختبار
إضافة CSS
4 درسًا725- 01CSS سطريتحديإتقاناختبار
- 02CSS داخليتحديإتقاناختبار
- 03CSS خارجيتحديإتقاناختبار
- 04تحدي التنسيق الأساسيتحدي
المحددات الأساسية
7 درسًا1247- 01مقدمة في المحدداتتحدياختبار
- 02محدد النوعتحديإتقاناختبار
- 03محدد الفئةتحديإتقاناختبار
- 04محدد المعرفتحديإتقاناختبار
- 05محددات المجموعاتتحديإتقاناختبار
- 06المحدد العامتحديإتقاناختبار
- 07تحدي التحديدتحدي
أساسيات النصوص
8 درسًا1450- 01لون النصتحديإتقاناختبار
- 02عائلة الخطتحديإتقاناختبار
- 03حجم الخطتحديإتقاناختبار
- 04سمك الخطتحديإتقاناختبار
- 05محاذاة النصتحديإتقاناختبار
- 06زخرفة النصتحديإتقاناختبار
- 07تحدي المراجعة رقم 1تحدي
- 08تحدي المراجعة رقم 2تحدي
الألوان والخلفيات
5 درسًا834- 01لون الخلفيةتحديإتقاناختبار
- 02ألوان HEXتحديإتقاناختبار
- 03ألوان RGBتحديإتقاناختبار
- 04الشفافية باستخدام RGBAتحدياختبار
- 05تحدي المراجعة #1تحدي
قائمة المقهى
مشروع3 درسًا1- 01أساسيات تنسيق الخطوطتحدي
- 02تنسيق النصوصمشروع
- 03الألوان والخلفياتمشروع
نموذج الصندوق - الجزء الأول
6 درسًا943- 01ما هو نموذج الصندوق؟اختبار
- 02المسافات الداخلية (Padding)تحديإتقاناختبار
- 03الهوامش (Margins)تحديإتقاناختبار
- 04الحدود (Borders)تحديإتقاناختبار
- 05العرض والارتفاعتحديإتقاناختبار
- 06تحدي المراجعةتحدي
نموذج الصندوق (Box Model) - الجزء الثاني
5 درسًا834- 01تحجيم الصندوق (Box Sizing)تحدياختبار
- 02حواف العناصر (Border Radius)تحديإتقاناختبار
- 03التدفق الزائد (Overflow)تحديإتقاناختبار
- 04ظل الصندوق (Box Shadow)تحديإتقاناختبار
- 05تحدي المراجعةتحدي
Flex Box
6 درسًا943- 01ما هو Flex Box؟تحدياختبار
- 02خاصية Flex Directionتحديإتقاناختبار
- 03خاصية Justify Contentتحديإتقاناختبار
- 04خاصية Align Itemsتحديإتقاناختبار
- 05التوسيط المثاليتحدياختبار
- 06تحدي Flex Boxتحدي
نموذج تسجيل الدخول
مشروع4 درسًا1- 01جسم الصفحةتحدي
- 02حاوية النموذجمشروع
- 03حقل إدخالمشروع
- 04زرمشروع
تقنيات التخطيط
7 درسًا1152- 01العناصر من نوع Block مقابل Inlineتحدياختبار
- 02أساسيات تحديد المواقع (Positioning)تحديإتقاناختبار
- 03تحديد الموقع النسبي (Relative)تحديإتقاناختبار
- 04تحديد الموقع المطلق (Absolute)تحديإتقاناختبار
- 05تحديد الموقع الثابت (Fixed)تحديإتقاناختبار
- 06أساسيات Z-Indexتحدياختبار
- 07تحدي المراجعةتحدي
أساسيات التصميم المتجاوب
6 درسًا1052- 01ما هو التصميم المتجاوب؟تحدياختبار
- 02وسم Viewport Metaتحدياختبار
- 03التخطيطات الانسيابيةتحديإتقاناختبار
- 04وحدات Viewportتحديإتقاناختبار
- 05أساسيات Media Queriesتحديإتقاناختبار
- 06الصور المرنةتحديإتقاناختبار
صفحة ويب تونغا
مشروع6 درسًا1- 01قائمة التنقلتحدي
- 02رأس الترحيبمشروع
- 03قسم "عن الموقع"مشروع
- 04قسم التواصلمشروع
- 05وسم Viewportمشروع
- 06Media Queryمشروع
التحديات النهائية
4 درسًا4- 01ترتيب العناصرتحدي
- 02قائمة الأفلامتحدي
- 03بطاقة دعوة زفافتحدي
- 04إشعار عائمتحدي
03قسم 3
CSS Mastery
Take you css skills to the next level!ابدأ التعلمإتقان المحددات – الربط
6 درسًا539- 01مقدمةاختبار
- 02محدد الأحفادتحدياختبار
- 03محدد الأبناءتحدياختبار
- 04محدد الأشقاء المتجاورينتحدياختبار
- 05محدد الأشقاء العامتحدياختبار
- 06تحدي المراجعةتحدي
الفئات الزائفة التفاعلية
5 درسًا431- 01الفئات الزائفة (Pseudo-Classes)اختبار
- 02تأثيرات التمرير (Hover)تحدياختبار
- 03تأثيرات التركيز (Focus)تحدياختبار
- 04الأنماط النشطة (Active)تحدياختبار
- 05تحدي المراجعةتحدي
الأصناف الزائفة الهيكلية (Structural pseudo-classes)
5 درسًا432- 01الأصناف الزائفة الهيكلية (Structural pseudo-classes)اختبار
- 02استهداف الابن الأولتحدياختبار
- 03استهداف الابن الأخيرتحدياختبار
- 04قوة الأنماط: استخدام nth-childتحدياختبار
- 05تحدي المراجعةتحدي
مشروع القائمة المنسدلة
4 درسًا4- 01إضافة القائمة الفرعيةتحدي
- 02إظهار القائمة الفرعيةتحدي
- 03المزيد من التنسيقتحدي
- 04حقل الإدخال والزرتحدي
التأثيرات البصرية
5 درسًا536- 01التدرجاتتحدياختبار
- 02فلاتر CSSتحدياختبار
- 03التحويلاتتحدياختبار
- 04الانتقالات وتأثيرات الحومتحدياختبار
- 05تحدي المراجعةتحدي
صفحة الهبوط (Landing Page)
5 درسًا5- 01تنسيق قسم Headerتحدي
- 02تنسيق الزرتحدي
- 03تخطيط القسمتحدي
- 04تخطيط البطاقةتحدي
- 05إضافة اللمسات النهائيةتحدي
البناء باستخدام CSS Grid
4 درسًا426- 01أساسيات Gridتحدياختبار
- 02تحديد مواقع العناصر في Grid-rowتحدياختبار
- 03المناطق المسماةتحدياختبار
- 04تحدي المراجعةتحدي
موقع Flavor Fiesta
4 درسًا4- 01ضبط الشبكةتحدي
- 02رأس الصفحةتحدي
- 03الجزء الرئيسيتحدي
- 04تذييل الصفحةتحدي
التحديات النهائية
5 درسًا5- 01تمييز القائمة النشطةتحدي
- 02صفوف الجدول المخططةتحدي
- 03تأثير تمرير الماوس على الزرتحدي
- 04تخطيط البطاقات بنظام Gridتحدي
- 05صورة Hero مموهةتحدي
04قسم 4
Practical Frontend
Combine structure and style to design complete, responsive web pagesابدأ التعلمالمتغيرات
5 درسًا432- 01المتغيراتاختبار
- 02استخدام متغيرات CSSتحدياختبار
- 03المتغيرات لرموز التصميمتحدياختبار
- 04المتغيرات المحليةتحدياختبار
- 05تحدي المراجعةتحدي
إستراتيجية الهاتف المحمول أولاً
6 درسًا643- 01ماذا يعني "الهاتف المحمول أولاً"تحدياختبار
- 02تنسيق النصوص للهاتف المحمول أولاًتحدياختبار
- 03التنقل للهاتف المحمول أولاًتحدياختبار
- 04الصور للهاتف المحمول أولاًتحدياختبار
- 05النماذج للهاتف المحمول أولاًتحدياختبار
- 06تحدي المراجعةتحدي
السمات والأنماط المرئية
5 درسًا535- 01السمات في CSSتحدياختبار
- 02أساسيات الوضع الداكن والفاتحتحدياختبار
- 03ألوان التمييز والإبرازتحدياختبار
- 04تنسيق الخطوط (Typography)تحدياختبار
- 05تحدي المراجعةتحدي
الرياضات الخطرة
3 درسًا3- 01المتغيراتتحدي
- 02تصميم Mobile-Firstتحدي
- 03تطبيق السماتتحدي
مكونات واجهة المستخدم
6 درسًا642- 01القائمة المنسدلةتحدياختبار
- 02علامات التبويبتحدياختبار
- 03الشاراتتحدياختبار
- 04تلميحات الأدواتتحدياختبار
- 05لافتات الإشعاراتتحدياختبار
- 06تحدي المراجعةتحدي
أنماط التصميم المتجاوب
6 درسًا645- 01تخطيط الكأس المقدسة (Holy Grail)تحدياختبار
- 02تخطيط شبكة البطاقاتتحدياختبار
- 03تخطيط الشريط الجانبي والمحتوىتحدياختبار
- 04تخطيط الشاشة المنقسمةتحدياختبار
- 05رأس وتذييل صفحة مثبتانتحدياختبار
- 06تحدي المراجعةتحدي
التحديات النهائية
4 درسًا4- 01بطاقة الملف الشخصيتحدي
- 02شبكة معرض الشوكولاتةتحدي
- 03عجائب الدنيا السبعتحدي
- 04عجائب الدنيا السبع الجديدةتحدي
05قسم 5
JavaScript in Action
Explore how javascript is used with html and cssابدأ التعلمالتفاعلية / مكونات واجهة المستخدم
4 درسًا433- 01علامات التبويبتحدياختبار
- 02الأكورديون (توسيع/طي)تحدياختبار
- 03Modal (فتح/إغلاق)تحدياختبار
- 04القائمة المنسدلةتحدياختبار
النماذج والتحقق من الصحة
3 درسًا325- 01التحقق من صحة المدخلاتتحدياختبار
- 02رسائل خطأ مخصصةتحدياختبار
- 03أزرار الإرسالتحدياختبار
الإشعارات والملاحظات
3 درسًا327- 01رسالة Toastتحدياختبار
- 02لافتات قابلة للإغلاقتحدياختبار
- 03مؤشرات التحميلتحدياختبار
نموذج مع إشعار Toast
2 درسًا2- 01إظهار رسالة Toastتحدي
- 02إخفاء رسالة Toastتحدي
التنقل
3 درسًا329- 01تبديل قائمة البرجر للجوالتحدياختبار
- 02قائمة تنقل جانبية قابلة للطيتحدياختبار
- 03القوائم المنسدلةتحدياختبار
السمات والتخصيص
2 درسًا217- 01السمات الداكنة والفاتحةتحدياختبار
- 02حفظ اختيار السمةتحدياختبار
الرسوم المتحركة والتأثيرات
3 درسًا327- 01انتقالات CSSتحدياختبار
- 02تحريك العناصر عند التمريرتحدياختبار
- 03رسوم متحركة عند النقر على الأزرارتحدياختبار
التنقل المتحرك
3 درسًا36- 01المتغيراتتحدياختبار
- 02مستمعو الأحداثتحدي
- 03انتقالات CSSتحدي
التحديات النهائية
4 درسًا4- 01أكورديون أسئلة شائعة تفاعليتحدي
- 02نموذج تسجيل الدخولتحدي
- 03شريط تنقل متجاوبتحدي
- 04صفحة مدونة مع مظهر (Theme)تحدي
لماذا تتعلم HTML مع Coddy
- دورة HTML مجانية أونلاين: لا تثبيت ولا إعداد أدوات ولا عوائق للبدء. افتح المتصفح وابدأ التدريب من الدرس الأول.
- دروس HTML العملية تتجاوز الشرح النظري: كل مفهوم يرتبط بتمرين تكتب فيه كودًا حقيقيًا وتتعلم بالممارسة.
- تلميحات الذكاء الاصطناعي تساعدك عندما تتوقف في تمرين HTML، فتوضح الخطوة التالية من دون إعطاء الحل كاملًا.
- شهادة إتمام مجانية لدورة HTML يمكنك مشاركتها على LinkedIn أو إضافتها إلى سيرتك الذاتية.
أسئلة شائعة حول تعلّم HTML
هل HTML سهل التعلم؟
نعم، يمكنك البدء في HTML حتى لو لم تكن لديك خبرة سابقة. يقسّم Coddy المفاهيم إلى تمارين قصيرة لتفهم الصياغة وتتدرب على بنية المستند والوسوم الدلالية والروابط والنماذج والصور وأساسيات الوصول وتبني ثقتك تدريجيًا.
كم يستغرق تعلّم HTML؟
يمكن تعلّم أساسيات HTML عادة خلال أسبوع أو أسبوعين من التدريب اليومي. ولإنشاء مشاريع حقيقية بثقة، خصص من شهر إلى ثلاثة أشهر حسب سرعتك وخبرتك السابقة.
أين يمكنني تعلّم HTML أونلاين مجانًا؟
يوفر Coddy دورة HTML مجانية أونلاين تشمل دروسًا وتحديات برمجية واختبارات ومشاريع. لا تحتاج إلى تثبيت أي شيء؛ كل شيء يعمل داخل المتصفح.
كيف أتعلم HTML بسرعة؟
أسرع طريقة هي التدريب اليومي. في Coddy تنتقل من شرح قصير إلى تمرين مباشر مع تلميحات ذكاء اصطناعي، فتقضي وقتك في كتابة HTML بدل مشاهدة فيديوهات طويلة فقط.
هل أحصل على شهادة HTML عند الانتهاء؟
نعم. عند إكمال دورة HTML على Coddy تحصل على شهادة إتمام مجانية يمكنك مشاركتها على LinkedIn أو إضافتها إلى سيرتك الذاتية.
ماذا يمكنني بناءه بعد تعلّم HTML؟
بعد الدورة ستتمكن من إنشاء صفحات ويب ونماذج وصفحات هبوط بسيطة وأساسًا قويًا لمشاريع CSS وJavaScript. وستمتلك أيضًا أساسًا قويًا للانتقال إلى موضوعات أكثر تقدمًا.
