Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon
شائعرحلة

تعلّم HTML

دورة HTML تفاعلية مجانية أونلاين. تكتب HTML في كل درس، مع معاينة مباشرة أثناء الكتابة وشهادة مجانية عند الإكمال.

ابدأ التعلم(مجاني)
عرض المنهجPlayground لـ HTML

281,604+ من الـ codders مسجلون

241 درسًا212 تحديات1,195 أسئلة الاختبار

  • مناسب للمبتدئين
  • sparkles iconمساعدة برمجية بالذكاء الاصطناعي
  • hint iconدروس تفاعلية عملية
  • volume On iconتعليق صوتي في كل درس
  • quiz iconاختبارات لقياس معرفتك
  • certificate iconشهادة إتمام مجانية

المنهج

5 أقسام6 مشاريع241 درسًا212 تحديات1,195 أسئلة الاختبار
  1. قسم 1

    Fundamentals

    ابدأ القسمابدأتوسيعطي    Learn the core structure and syntax to create web pages from scratch60 درسًا75 تحديات252 أسئلة3 مشاريع

    أساسيات HTML

    5 درسًا531

    النصوص والتنسيق

    6 درسًا1135

    التعامل مع القوائم

    4 درسًا721

    بطاقة وصفة

    مشروع4 درسًا1

    إضافة المحتوى

    5 درسًا837

    تخطيط الصفحة

    5 درسًا930

    صفحة الملف الشخصي

    مشروع5 درسًا1

    النماذج والمدخلات - الجزء الأول

    6 درسًا936

    النماذج والمدخلات - الجزء الثاني

    7 درسًا1239

    الجداول

    4 درسًا723

    صفحة التسجيل في الفعالية

    مشروع5 درسًا1

    التحديات النهائية

    4 درسًا4
  2. قسم 2

    Styling with CSSصفحة مخصصة

    ابدأ القسمابدأتوسيعطي    Bring your web pages to life with colors, layouts, and styles76 درسًا100 تحديات419 أسئلة3 مشاريع

    مقدمة

    5 درسًا540

    إضافة CSS

    4 درسًا725

    المحددات الأساسية

    7 درسًا1247

    أساسيات النصوص

    8 درسًا1450

    الألوان والخلفيات

    5 درسًا834

    قائمة المقهى

    مشروع3 درسًا1

    نموذج الصندوق - الجزء الأول

    6 درسًا943

    نموذج الصندوق (Box Model) - الجزء الثاني

    5 درسًا834

    Flex Box

    6 درسًا943

    نموذج تسجيل الدخول

    مشروع4 درسًا1

    تقنيات التخطيط

    7 درسًا1151

    أساسيات التصميم المتجاوب

    6 درسًا1052

    صفحة ويب تونغا

    مشروع6 درسًا1

    التحديات النهائية

    4 درسًا4
  3. قسم 3

    CSS Masteryصفحة مخصصة

    ابدأ القسمابدأتوسيعطي    Take you css skills to the next level!43 درسًا40 تحديات164 أسئلة

    إتقان المحددات – الربط

    6 درسًا539

    الفئات الزائفة التفاعلية

    5 درسًا431

    الأصناف الزائفة الهيكلية (Structural pseudo-classes)

    5 درسًا432

    مشروع القائمة المنسدلة

    4 درسًا4

    التأثيرات البصرية

    5 درسًا536

    صفحة الهبوط (Landing Page)

    5 درسًا5

    البناء باستخدام CSS Grid

    4 درسًا426

    موقع Flavor Fiesta

    4 درسًا4

    التحديات النهائية

    5 درسًا5
  4. قسم 4

    Practical Frontend

    ابدأ القسمابدأتوسيعطي    Combine structure and style to design complete, responsive web pages35 درسًا34 تحديات197 أسئلة

    المتغيرات

    5 درسًا432

    إستراتيجية الهاتف المحمول أولاً

    6 درسًا643

    السمات والأنماط المرئية

    5 درسًا535

    الرياضات الخطرة

    3 درسًا3

    مكونات واجهة المستخدم

    6 درسًا642

    أنماط التصميم المتجاوب

    6 درسًا645

    التحديات النهائية

    4 درسًا4
  5. قسم 5

    JavaScript in Action

    ابدأ القسمابدأتوسيعطي    Explore how javascript is used with html and css27 درسًا27 تحديات163 أسئلة

    التفاعلية / مكونات واجهة المستخدم

    4 درسًا433

    النماذج والتحقق من الصحة

    3 درسًا324

    الإشعارات والملاحظات

    3 درسًا327

    نموذج مع إشعار Toast

    2 درسًا2

    التنقل

    3 درسًا329

    السمات والتخصيص

    2 درسًا217

    الرسوم المتحركة والتأثيرات

    3 درسًا327

    التنقل المتحرك

    3 درسًا36

    التحديات النهائية

    4 درسًا4

دورات HTML

دورات HTML تطبيقية، ابدأها مجانًا في متصفحك.

رسوم متحركة لكسوف الشمس | مشروع HTML/CSS

شائع

في هذه الدورة، ستنشئ رسومًا متحركة مذهلة لـ "كسوف الشمس"، لتوضيح كيفية بناء واجهات مستخدم جذابة وعملية باستخدام الرسوم المتحركة.

  • 10
  • 2

محاكاة صفحة إنستغرام | مشروع Front-End

شائع

في هذه الدورة، ستتدرب على أساليب HTML و CSS القياسية والبسيطة، وستقوم بإنشاء مشروع محاكاة لصفحة إنستغرام.

  • 16
  • 5

مشغل فيديوهات YouTube - مشروع HTML

في هذا المشروع، ستنشئ مشغل فيديوهات YouTube باستخدام HTML وتستكشف سمات متنوعة خلال ذلك.

  • 7
  • 1

ساعة إيقاف - مشروع HTML/CSS/JS

في هذا المشروع، ستنشئ ساعة إيقاف بسيطة باستخدام HTML و CSS و JavaScript.

  • 10
  • 3

شريط التنقل السفلي - مشروع HTML/CSS

في هذه الدورة، ستنشئ شريط تنقل سفلي بسيط باستخدام HTML وستقوم بتنسيقه باستخدام CSS. كما ستتعلم كيفية إضافة رسوم متحركة بسيطة باستخدام محدد (:hover) في CSS.

  • 12
  • 2

مشروع DOM - آلة حاسبة

في هذه الدورة، ستقوم ببناء آلة حاسبة بسيطة وتفاعلية باستخدام HTML و CSS و JS.

  • 14
  • 3
عرض كل دورات HTML الـ 26 →
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

لماذا تتعلم 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.
Coddy programming languages illustration

تعلم HTML مع Coddy

ابدأ الآن