Responsive HTML testen

Stappen

1. Begin met het startsjabloon of laad een voorbeeldproject.
2. Bewerk HTML-structuur, CSS-styles en JavaScript-gedrag.
3. Druk op Uitvoeren (Ctrl/Cmd + Enter) om de sandbox-preview te verversen.
4. Open het consolepaneel voor logs, waarschuwingen en errors.
5. Gebruik responsive controls om layout op gangbare breedtes te controleren.
6. Formatteer, kopieer of download je werk als index.html.

Voorbeeld

Voorbeeld — Uitvoeren

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

Boven 600px staan de kaarten in drie kolommen, tot 600px in één kolom. Breedtesimulatie vervangt geen tests op echte apparaten.

Tip

De basisuitvoering van HTML, CSS en JavaScript voor de preview gebeurt lokaal in je browser.

Gerelateerde tools