ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 12.01.2024
Просмотров: 17
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Инструкция по вёрстке
Проект будет тестироваться в крайних двух версиях Chrome (88, 89) и
Firefox (85, 86). Адаптивность будет тестироваться на экранах: 1920px,
1440px, 1024px, 768px, 425px, 375px, 320px.
Этап 1. Подготовка.
На первом этапе нужно установить на компьютер удобный редактор кода и создать структуру проекта: файл index.html, папку css с файлами style.css и normalize.css, а также папки для картинок и шрифтов.
Этап 2. Разметка.
На этом этапе нужно создать разметку страницы в файле index.html. Изображения можно пока не подключать, мы подключим их на этапе работы с графикой.
Этап 3. Базовая стилизация.
На этом этапе мы добавим на страницу базовые стили. Стили для расположения крупных блоков пока что можно не делать.
Этап 4. Работа с графикой.
Главная задача этого этапа — экспортировать всё необходимое из макета в Figma и подключить изображения в разметке.
SVG-изображения рекомендуется собрать в спрайт и подключить первым элементом в body. Декоративные изображения можно экспортировать, но подключать пока что не нужно.
Этап 5. Сетки.
Добавляем крупные структурные сетки. В вёрстке используется подход desktop-first, то есть сайт прежде всего корректно отображается на больших разрешениях экрана.
Этап 6. Декоративные элементы.
Всё готово, чтобы стилизовать всю страницу. Добавляем мелкие сетки,
подключаем кастомные шрифты, фоновые изображения и оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.
Этап 7. Адаптивные сетки и
декоративные элементы.
С помощью медиа-выражений добавляем стили для адаптации вёрстки под более маленькие разрешения.
Этап 8. Адаптивная графика.
Подключаем в разметке изображения для экранов с разной плотностью пикселей.
Этап 9. Добавление JavaScript.
Добавляем JavaScript-код, который оживляет слайдеры и мобильное меню.