Практика: создание landing page с анимациями и адаптацией

Подготовка проекта и структура HTML

Начнём с базовой разметки HTML5. Используем семантические теги для лучшей SEO-оптимизации и доступности:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechLand - инновационные решения</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <nav>...</nav>
    </header>
    <main>
        <section class="hero">...</section>
        <section class="features">...</section>
    </main>
    <footer>...</footer>
</body>
</html>

🔍 Совет: Для быстрого старта используйте Emmet-сокращения в VS Code (например, ! + Tab для шаблона HTML5).

Базовая стилизация и переменные CSS

Создадим файл styles.css с современным подходом к стилизации:

:root {
    --primary: #4f46e5;
    --secondary: #f43f5e;
    --dark: #1e293b;
    --light: #f8fafc;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--light);
}

🌈 Важно: CSS-переменные (--var-name) — мощный инструмент для поддержания согласованного дизайна.

Адаптивная сетка на Flexbox/Grid

Реализуем отзывчивый макет с mobile-first подходом:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

Плавные анимации и трансформации

Добавим интерактивности с помощью CSS-анимаций:

.cta-button {
    background: var(--primary);
    transition: var(--transition);
    transform: translateY(0);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hero-content {
    animation: fadeIn 1s ease-out forwards;
}

✨ Профессиональный приём: Комбинируйте transform и transition для оптимальной производительности анимаций.

Адаптивное меню с "бургером"

Реализуем мобильное меню с чистым CSS:

.nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        position: relative;
        z-index: 100;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        transition: var(--transition);
    }

    .nav-toggle:checked ~ .nav-menu {
        left: 0;
    }
}

Оптимизация изображений и lazy loading

Улучшаем производительность:

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg"> 
    <img src="image.jpg" loading="lazy" alt="Описание">
</picture>

🚀 Важно: WebP-формат уменьшает вес изображений на 25-35% без потери качества.

Итоговая проверка и тестирование

Перед публикацией обязательно:

Проверьте валидность кода через W3C Validator
Протестируйте на реальных устройствах
Проверьте скорость загрузки в Lighthouse
Убедитесь в корректности анимаций

/* Добавьте это в конце для отладки */
.debug * {
    outline: 1px solid red;
}

Включите этот стиль при необходимости быстрой проверки структуры.