1. Написание Семантического HTML
Пишите чистый HTML5 в левой панели. Редактор автоматически обрамляет разметку в корректный каркас документа.
<div class="interactive-card">
<h2>Менеджер Задач</h2>
<input type="text" id="taskInput" placeholder="Новая задача..." />
<button id="addBtn">Добавить</button>
<ul id="taskList"></ul>
</div>2. Стилизация на CSS с Мгновенным Откликом
Используйте CSS-панель для стилизации. Изменения отображаются прямо во время ввода с сохранением фокуса и прокрутки.
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. Добавление Логики на JavaScript
Пишите современный JS-код. Вызовы console выводятся как в инструменты разработчика, так и во встроенную консоль.
document.getElementById('addBtn').onclick = () => {
const input = document.getElementById('taskInput');
if (!input.value) return;
const li = document.createElement('li');
li.textContent = input.value;
document.getElementById('taskList').appendChild(li);
input.value = '';
};4. Проверка на Смартфонах через QR-Код
Отделите предпросмотр в новое окно или отсканируйте QR-код для мгновенной проверки верстки на реальном телефоне.