تعلم لغات HTML و CSS و JavaScript من خلال أمثلة برمجية ومحرر واختبارات وألعاب.
تعلّم تطوير الويب من خلال تعديل الأكواد وملاحظة تأثيرها. يجمع تطبيق HTML Code Play بين دروس HTML وCSS وJavaScript ومحرر أكواد للهواتف، بالإضافة إلى أمثلة عملية واختبارات وألعاب برمجة. استخدمه لدراسة المفاهيم، وتجربتها بنفسك، ومتابعة تقدمك على نفس الجهاز.
اقرأ، عدّل، وشغّل
استكشف مكتبة الدروس، وافتح أي درس تعليمي واقرأ شرحه مع مثال برمجي كامل. أرسل المثال إلى المحرر، وشغّل الكود الأصلي، ثم غيّر وسمًا أو نمطًا أو تعبيرًا، وقارن الناتج. يربط هذا الأسلوب العملي بين الصيغة التي تقرأها والصفحة أو السلوك الذي تُنشئه.
تدعم مساحة العمل تحرير HTML وCSS وJavaScript مع تمييز الصيغة. استخدم التراجع والإعادة أثناء التجربة، وابحث عن نص، وانتقل إلى سطر محدد، وعدّل حجم خط المحرر. ابدأ صفحة جديدة أو اختر قالبًا جاهزًا كنقطة بداية. افتح ملفات HTML، واحفظ عملك، واستخدم "حفظ باسم" لإنشاء نسخة أخرى، أو شارك ملف الكود عبر خيارات المشاركة في جهازك.
التعلم الموجه والتطبيق العملي
يشمل هذا الدليل 11 موضوعًا في تقنيات الويب، بدءًا من بنية الصفحات وتصميمها، وصولًا إلى البرمجة النصية، والرسومات المتجهة، والتصميمات المتجاوبة، والأمثلة التفاعلية. ابحث عن الدروس حسب العنوان أو القسم للوصول إلى المحتوى الذي تحتاجه. ثبّت الدروس المفيدة للمراجعة المركزة، وأضف ملاحظاتك الخاصة، وتنقل بين الدروس باستخدام زري "السابق" و"التالي".
يجمع كل درس بين الشرح، وقواعد اللغة، ومثال عملي. تابع باختبار قصير أو تحدٍّ عملي. تطلب منك تمارين التطبيق إكمال الأجزاء البرمجية الناقصة، مع تلميحات وملاحظات على الإجابات لمساعدتك في مراجعة التفاصيل التي فاتتك. تتيح لك نتائج الاختبار التحقق من فهمك قبل العودة إلى الدرس.
ست طرق للتطبيق العملي
اختر لعبة برمجة لتطوير مهارة مختلفة:
- بناء الكود: أعد ترتيب الكتل البرمجية لإعادة بناء كود يعمل.
- كشف المخرجات: توقع ما ينتجه جزء من الكود.
- البحث عن الأخطاء: حدد السطر الخاطئ.
- ملء الفراغ: اختر رمز الكود الناقص.
- مختبر المطابقة: اربط المصطلحات بمعانيها.
- اختبار سريع: أجب عن أسئلة الصواب والخطأ ضمن وقت محدد.
تسجل مستويات النشاط النتائج وتفتح المستوى التالي. أعد لعب المستويات المتاحة لتحسين نتيجتك، أو استخدم قوائم تشغيل التدريب المتنوعة عند توفرها.
حافظ على تنظيم تعلمك
تلخص شاشة التقدم الدروس والاختبارات والتدريبات التي تمت مراجعتها حسب التقنية. راجع خريطة مهاراتك وخطة الدراسة المقترحة التالية، وتابع درسًا من الشاشة الرئيسية، وخُض تحديًا يوميًا. تُظهر سلسلة الإنجازات وشارات التحدي نشاطك. تتطلب تذكيرات التعلم الاختيارية إذن الإشعارات ويمكن إيقافها.
يتم تخزين تقدمك في الدروس وملاحظاتك ونتائج الألعاب على الجهاز. تشمل عناصر التحكم في شاشة التعلم خطوطًا أكبر وتباينًا عاليًا وتقليل الحركة. توفر تقييمات HTML وCSS وJavaScript المنفصلة شهادات إنجاز داخل التطبيق؛ هذه سجلات تعلم خاصة بالتطبيق، وليست مؤهلًا معتمدًا.
توفر منشورات المجتمع عبر الإنترنت مصدرًا آخر للبرمجيات لاستكشافها عند الاتصال بالإنترنت. يتطلب المحتوى المدعوم بالشبكة والأمثلة التي تُحمّل موارد خارجية الوصول إلى الإنترنت. لا يوفر التخزين المحلي للتقدم مزامنةً مع السحابة.
للمبتدئين والطلاب والمتعلمين الذين يراجعون مفاهيم تطوير واجهات المستخدم، ابدأ بمثال واحد، وأجرِ تغييرًا بسيطًا، وعزز فهمك من خلال الممارسة.