Инструкция по верстке. Инструкция по вёрстке. Инструкция по вёрстке
 Скачать 71.23 Kb.
|
|
Инструкция по вёрстке Проект будет тестироваться в крайних двух версиях 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-код, который оживляет слайдеры и мобильное меню. |