Задание:
Сверстать сайт по макету. Требуется точное совпадение с макетом по иконкам, цветам, расположениям блоков в пикселях и т.д.
Макет: https://www.figma.com/file/gKJlV7lrCIzgcN12Onj8JUXQ/google-search-redesign-elad_izak?node-id=0%3A1
Для работы с макетом необходимо зарегистрироваться на данном ресурсе.
Альтернативный способ работы с макетом: Скачать, установить Adobe XD. Данный способ подходит только если у Вас Window 10, другие операционные системы Adobe XD не поддерживает. Открываем макет (lr01/desktop-guide/google-search-redesign-elad_izak.xd) в Adobe XD.
Все необходимые изображения и иконки для верстки сайта располагаются в папке lr01/assets/images/.
Начало кода положено в файле lr01/index.html, где уже подключен файл со стилями (assets/style/styles.css).
На рис. ниже представлен пример работы в Figma. В правой части расположена панель информации о выделенном элементе (его ширина, высота, цвета, шрифты и тд.) Красные линии от элемента и цифры рядом обозначают расстояние в пикселях.
- Титульный лист
- Постановка задачи
- Ход работы
- Контрольный пример (принтскрины работы программы)
- Код программы