🧭 Этап 1: Навигационное меню
Создай основную навигацию для сайта. Навигация - это карта для пользователей!
<!-- Создай навигационное меню -->
<nav class="main-nav">
<ul>
<li> </li>
<li>О нас</li>
<li>Контакты</li>
</ul>
</nav>
💡 Совет: Первый пункт меню обычно ведет на главную страницу. Используй тег <a> с href="#"
🎴 Этап 2: Карточка продукта
Оформи карточку продукта с тенью и плавными переходами для современного вида:
/* Стили для карточки продукта */
.product-card {
background: white;
padding: 20px;
border-radius: 12px;
}
.product-card:hover {
transform: translateY(-5px);
}
🎴 Демо: Карточка продукта
🖼️ Этап 3: Галерея изображений
Создай функцию для переключения изображений в галерее:
let currentImage = 0;
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
function nextImage() {
document.getElementById('gallery-img').src = images[currentImage];
}
function prevImage() {
currentImage = (currentImage - 1 + images.length) % images.length;
document.getElementById('gallery-img').src = images[currentImage];
}
💡 Подсказка: Нужно увеличить currentImage и убедиться, что он не превышает количество изображений
📝 Этап 4: Валидация формы
Создай полную систему валидации для формы обратной связи:
<!-- HTML форма -->
<form id="feedback-form">
<input type="text" id="name" placeholder="Ваше имя" required>
<input type="email" id="email" placeholder="Email" required>
<textarea id="message" placeholder="Сообщение"></textarea>
<button type="submit">Отправить</button>
</form>
<script>
document.getElementById('feedback-form').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (name && email.includes('@')) {
alert('Форма успешно отправлена!');
this.reset();
} else {
alert('Пожалуйста, заполните все поля корректно!');
}
});
</script>
💡 Подсказка: Добавь проверку на пустые поля и правильность email
🏆
Миссия выполнена!
Ты успешно освоил создание современных веб-компонентов!
Навигация, карточки, галереи и формы - теперь твои сильные стороны!