استخدام ساحة تجربة HTML

الخطوات

1. ابدأ من القالب الابتدائي أو حمّل مشروع مثال.
2. حرّر بنية HTML وأنماط CSS وسلوك JavaScript.
3. اضغط «تشغيل» (Ctrl/Cmd + Enter) لتحديث المعاينة في sandbox.
4. افتح لوحة Console لقراءة log وwarn وerror.
5. استخدم عناصر التحكم المتجاوبة للتحقق من التخطيط بعروض شائعة.
6. نسّق أو انسخ أو نزّل عملك كـ index.html.

مثال

مثال — تشغيل

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

تزيد القيمة مع كل نقرة. يعيد التشغيل القيمة إلى البداية؛ يحفظ التخزين المحلي الكود ولا يحفظ حالة العدّاد.

نصيحة

التنفيذ الأساسي لـ HTML وCSS وJavaScript للمعاينة يتم محليًا في متصفّحك.

أدوات ذات صلة