Korzystanie z playgroundu HTML

Kroki

1. Zacznij od szablonu startowego lub załaduj przykładowy projekt.
2. Edytuj strukturę HTML, style CSS i zachowanie JavaScript.
3. Naciśnij Uruchom (Ctrl/Cmd + Enter), aby odświeżyć podgląd w sandbox.
4. Otwórz panel Console, aby czytać log, warn i error.
5. Użyj kontrolek responsywnych, aby sprawdzić układ przy typowych szerokościach.
6. Formatuj, kopiuj lub pobierz pracę jako index.html.

Przykład

Przykład — Uruchom

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;
});

Każde kliknięcie zwiększa licznik. Ponowne uruchomienie zeruje wartość; pamięć lokalna zapisuje kod, a nie stan licznika.

Wskazówka

Podstawowe wykonywanie HTML, CSS i JavaScript dla podglądu odbywa się lokalnie w przeglądarce.

Powiązane narzędzia