Практическая работа
Создать веб-страницу с адаптивной версткой по макету
Показать скриншот
Веб-страница должна корректно отображаться на устройствах с различными размерами экранов и адекватно реагировать на изменения размеров окна браузера, при этом, верстка не должна ломаться на промежуточных размерах.
Необходимо использовать @media для адаптивного изменения стилей в зависимости
от размеров экрана.
Веб-страница должна выглядеть одинаково в различных
браузерах (Chrome, Firefox, Safari, Edge).
Рекомендуется использовать Flexbox и Grid Layout для создания гибкой
и современной верстки.
Добавьте возможность отображения мобильного меню. Реализация производится
с помощью JavaScript.
Для решения данной задачи использовались БЭМ методология (на сколько я ее смог понять) и подход к стилизации начиная с самого маленького экрана 320px.
Для поддержки "резиновости" и адаптивности используются Flex layouts
и @media запросы.
Немного добавил "своей вкусовщины" 🤭
- Баннер с паралакс фоном
- Интерактивные анкерные ссылки
- Простые анимации
Также написаны скрипты для работы с локальным хранилищем, изменением темы, управлением меню, прелоадер, параллакс, а также класс для управления поведением при прокрутке страницы (анкерные ссылки).
- Менеджер пакетов
pnpm - Сборщик
Vite - Процессор CSS
PostCSSс применением плагинов для работы с вложенностью, медиа запросами и миксинами - Сборка и деплой на
GitHub Pages
Установка зависимостей
pnpm iЗапуск в режиме разработки
pnpm run devСборка проекта
pnpm buildЗапуск сборки
pnpm run preview-
Конфигурация проекта -
Верстка хэдера и адаптив -
Верстка футера и адаптив -
Верстка контентной части и адаптив -
Сборка и деплой на GitHub Pages -
Верстка боковой навигационной панели -
Верстка баннера и адаптив - Декомпозиция компонентов и стилей
- Мета-тэги, favicon, базовое SEO
- Поиск и исправление багов