شائعرحلة
تعلّم HTML
دورة HTML تفاعلية مجانية أونلاين. تكتب HTML في كل درس، مع معاينة مباشرة أثناء الكتابة وشهادة مجانية عند الإكمال.
269,396+ من الـ codders مسجلون
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
شهادة إتمام مجانية
المنهج
قسم 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 درسًا1135- 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 درسًا930- 01التقسيماتتحديإتقاناختبار
- 02عناصر Span المضمنةتحديإتقاناختبار
- 03الوسوم الدلاليةتحديإتقاناختبار
- 04الأقسام والمقالاتتحديإتقاناختبار
- 05ملخص - التخطيطتحدي
صفحة الملف الشخصي
مشروع5 درسًا1- 01نظرة عامة على المشروعتحدي
- 02قسم الترويسة (Header)مشروع
- 03صورة الملف الشخصيمشروع
- 04قسم نبذة عنيمشروع
- 05روابط التواصل الاجتماعيمشروع
النماذج والمدخلات - الجزء الأول
6 درسًا936- 01أساسيات النماذجاختبار
- 02مدخلات النصوصتحديإتقاناختبار
- 03سمات المدخلاتتحديإتقاناختبار
- 04حقل كلمة المرورتحديإتقاناختبار
- 05تسميات المدخلاتتحديإتقاناختبار
- 06ملخص - نموذج أساسيتحدي
النماذج والمدخلات - الجزء الثاني
7 درسًا1239- 01أزرار الاختيار (Radio Buttons)تحديإتقاناختبار
- 02صناديق الاختيار (Checkboxes)تحديإتقاناختبار
- 03القوائم المنسدلة (Dropdowns)تحديإتقاناختبار
- 04الأزرارتحديإتقاناختبار
- 05الأزرار في النماذجتحديإتقاناختبار
- 06مراجعة - النماذج #1تحدي
- 07مراجعة - النماذج #2تحدي
الجداول
4 درسًا723- 01أساسيات الجداولتحديإتقاناختبار
- 02إضافة التسميات التوضيحيةتحديإتقاناختبار
- 03دمج الصفوف والأعمدةتحديإتقاناختبار
- 04مراجعة - الجداولتحدي
صفحة التسجيل في الفعالية
مشروع5 درسًا1- 01نظرة عامة على المشروعتحدي
- 02قسم الـ Headerمشروع
- 03قسم تفاصيل الفعاليةمشروع
- 04نموذج التسجيلمشروع
- 05قسم الـ Footerمشروع
التحديات النهائية
4 درسًا4- 01بطاقة ملف شخصي بسيطةتحدي
- 02بطاقة دعوة لحدثتحدي
- 03صفحة مقال بسيطةتحدي
- 04قائمة الكتب المفضلةتحدي
قسم 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إشعار عائمتحدي
قسم 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 مموهةتحدي
قسم 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عجائب الدنيا السبع الجديدةتحدي
قسم 5
JavaScript in Action
ابدأ القسمابدأتوسيعطيExplore how javascript is used with html and cssالتفاعلية / مكونات واجهة المستخدم
4 درسًا433- 01علامات التبويبتحدياختبار
- 02الأكورديون (توسيع/طي)تحدياختبار
- 03Modal (فتح/إغلاق)تحدياختبار
- 04القائمة المنسدلةتحدياختبار
النماذج والتحقق من الصحة
3 درسًا324- 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
دورات HTML تطبيقية، ابدأها مجانًا في متصفحك.
رسوم متحركة لكسوف الشمس | مشروع HTML/CSS
شائعفي هذه الدورة، ستنشئ رسومًا متحركة مذهلة لـ "كسوف الشمس"، لتوضيح كيفية بناء واجهات مستخدم جذابة وعملية باستخدام الرسوم المتحركة.
- 10
- 2
تحديات HTML/CSS - الحزمة الأولى
شائعستختبر هذه الدورة معرفتك بـ HTML و CSS بطريقة ممتعة وفعالة!
- 11
مشغل فيديوهات YouTube - مشروع HTML
في هذا المشروع، ستنشئ مشغل فيديوهات YouTube باستخدام HTML وتستكشف سمات متنوعة خلال ذلك.
- 7
- 1
مشروع DOM - آلة حاسبة
في هذه الدورة، ستقوم ببناء آلة حاسبة بسيطة وتفاعلية باستخدام HTML و CSS و JS.
- 14
- 3
محاكاة صفحة إنستغرام | مشروع Front-End
في هذه الدورة، ستتدرب على أساليب HTML و CSS القياسية والبسيطة، وستقوم بإنشاء مشروع محاكاة لصفحة إنستغرام.
- 16
- 5
بطاقة 3D | مشروع Front-end
في هذا المشروع، ستقوم ببناء تصميم بطاقة 3D بنفسك!
- 31
- 4
لماذا تتعلم HTML مع Coddy
- اكتب HTML في متصفحك وشاهد الصفحة المعروضة جنبًا إلى جنب. لا حاجة لتثبيت محرر ولا لأي إعداد. كل تعديل تجريه على كود HTML يظهر فورًا، فتكون حلقة الملاحظات قصيرة.
- HTML حديث ودلالي: العناوين، القوائم، الروابط، الصور، الجداول، النماذج، والوسوم الدلالية مثل
<header>و<nav>و<main>و<section>و<footer>. هذا هو HTML الذي ستستخدمه فعلًا لبناء موقع حقيقي. - تلميحات الذكاء الاصطناعي تساعدك على إصلاح أخطاء HTML - وسوم غير مغلقة، صياغة خاطئة للسمات، هفوات في إمكانية الوصول - دون أن تكشف لك الإجابة، فترسخ عاداتك في كتابة HTML.
- شهادة HTML مجانية عند الانتهاء. خطوة أولى موثوقة نحو تطوير الويب، تتكامل بشكل طبيعي مع دورتَي CSS وJavaScript.
أسئلة شائعة حول تعلّم HTML
هل HTML سهل التعلم؟
HTML من أسهل ما يمكن تعلّمه في عالم التقنية. فهي لغة وسم لا لغة برمجة - أنت توسم أجزاء من المحتوى (عناوين، فقرات، روابط، صور) بدلًا من كتابة منطق برمجي. معظم المبتدئين يبنون أول صفحة ويب حقيقية خلال الساعة الأولى.
كم يستغرق تعلّم HTML؟
يمكن تعلّم أساسيات HTML عادة خلال أسبوع أو أسبوعين من التدريب اليومي. ولإنشاء مشاريع حقيقية بثقة، خصص من شهر إلى ثلاثة أشهر حسب سرعتك وخبرتك السابقة.
هل يجب أن أتعلم HTML قبل CSS وJavaScript؟
نعم. HTML يحدد بنية الصفحة، وCSS يتحكم في شكلها، وJavaScript يجعلها تفاعلية. تعلّم HTML أولاً يعني أن لديك شيئاً ملموساً لتنسيقه وتحريكه لاحقاً. دورة HTML قصيرة عن قصد حتى تتمكن من الانتقال إلى CSS وJS بسرعة.
هل HTML لغة برمجة؟
بالمعنى الدقيق، لا. HTML لغة توصيف تُستخدم لوصف بنية محتوى الويب، وليس فيها متغيرات ولا شروط ولا حلقات بمفردها. البرمجة الفعلية في صفحة الويب تأتي من JavaScript، وهي موضوع دورة منفصلة.
هل يمكنني تعلّم HTML عبر الإنترنت مجانًا؟
نعم. دورة HTML التفاعلية مجانية - دروس وتمارين برمجية ومعاينة حية لـ HTML وشهادة في النهاية. كل شيء يعمل داخل المتصفح، فلا حاجة إلى تثبيت أي محرر أو أدوات للبدء.
هل أحصل على شهادة بعد إنهاء دورة HTML؟
نعم. إكمالك لدورة HTML يمنحك شهادة إتمام مجانية. دليل قابل للتحقق تضيفه إلى سيرتك الذاتية أو تشاركه على LinkedIn - عادةً كخطوة نحو ملف أعمال أكثر اكتمالاً يجمع HTML وCSS وJavaScript.
