1. Скачать и настроить редактор кода, если этого не сделали на семинаре
2. Создать пустую папку, придумать название
3. Создать первую html страницу (index.html)
4. Добавить структуру html документа
5. Добавить меню сайта (Меню сайта должно быть на каждой странице, оно должно быть одинаковым)

• a. Главная
• b. Каталог
• c. Контакты

6. Создать заголовок h1 с текстом “Главная страница”
7. Добавить параграф p с произвольным текстом (lorem) (используем расширение emmet уже установленное в vsc, для этого вводим lorem и нажимаем клавишу tab)
8. Создать подзаголовок h2 с текстом “Добро пожаловать на сайт”
9. Добавить три параграф p с произвольным текстом (lorem)
10. Рядом с файлом index.html создать папку catalog
11. Внутри папки catalog создать файл catalog.html
12. На странице “каталог” добавить структуру html документа
13. Добавить меню сайта (такое же как на главной странице)
14. Добавить Заголовок h1 с текстом “Каталог”
15. Создать параграф p с произвольным текстом из 150 слов для этого вводим “lorem150” и нажимаем tab
16. Сделать переходы с главной страницы на страницу каталог, при нажатии на меню сайта и переход со страницы каталог на главную страницу
17. Создать папку img и разместить ее рядом с index.html
18. Добавить в папку img произвольные фотографии товаров, по вашей тематике можно выбрать любое фото https://www.freepik.com/search?format=search&orientation=portrait&query=products
19. На странице “Каталог” после заголовка h1 и параграфа p добавить a. Изображение товара b. Название товара c. Описасние товара
20. Добавить 3 таких товара на страницу каталога (не следует добавлять более 3х товаров)

Данная домашняя работа является продолжение предыдущей, не забываем использовать работу из прошлого урока Текст задания

1. Открыть Домашнюю работу из урока 1
2. Создать файл стилей style.css
3. Подключить ко всем страницам
4. Задать стиль a { text-decoration: none; }
5. Проверить работу стилей на всех страницах
6. Разделить экран на 2 части, сделать так чтобы файл стилей располагался справа, а все html файлы были слева
7. Для всех ссылок меню задать класс (придумать логичное название класса) a. color: cornflowerblue; b. font-size: 16px; c. line-height: 20px;
8. Проверить отображения стилей на всех страницах проекта
9. Для всех заголовков h1 на сайте задать класс и к нему стиль a. color: #222222; b. font-size: 28px; c. line-height: 36px; d. font-weight: bold;
10. Для всех параграфов в проекте задать класс
11. К данному классу задать стили a. font-style: normal; b. font-weight: 300; c. font-size: 18px; d. line-height: 30px; e. color: #7D7987
12. Для заголовков h2 задать класс
13. К данному классу указать стиль a. color: coral; b. font-style: normal; c. font-weight: 700; d. font-size: 36px; e. line-height: 80px;

1. Скачать и импортировать файл в Figma
2. Необходимо представить разбиение часть на блоки (Для тех учеников которые умеют работать с фигма разбить представленную на скриншоте часть на блоки, как в семинаре)
3. Создать новую папку
4. Создать файл index.html
5. В соответствии с макетом необходимо:
6. Добавить все блоки по сайту
7. Добавить все наполнение блоков (html контент)
8. Все заголовки, параграфы кнопки и изображения
9. Позиционирование задавать не нужно
10. Создать файл стилей style.css
11. Подключить стили к index.html
12. Добавить обнуление стилей
13. Добавить все необходимые отступы margin, padding

Мы продолжаем работать с проектом из прошлого урока

1. Скачать и импортировать файл в Figma
2. В данном домашнем задании мы будем добавлять стилистику и позиционирование для верхнего блока сайта
3. Для всех html элементов из прошлого урока, вам необходимо задать стили в соответствии с макетом.
4. Расставить все элементы в соответствии с макетом

Для тех кто не был на семинаре необходимо пройти игру http://flexboxfroggy.com/#ru Мы продолжаем работать с проектом из прошлого урока Скачать и импортировать файл в Figma

В данном домашнем задании мы будем добавлять стилистику и позиционирование для следующего блока сайта:

1. Добавить весь контент из макета
2. Ко всем элементам контента добавить классы
3. Добавить стили для всего контента сайта
4. Расставить элементы в соответствии с макетом

Мы приступаем к созданию нового адаптивного проекта

https://www.figma.com/file/mnLY69cYE5cqWM5w6n5hXx/Seo-%26-Digital-Marketing-Landing-Page?node-id=188%3A2

Мы уже отлично умеем работать с макетом, в этом и есть основная задача верстальщика

Создать новую папку, в ней сделать заготовку

1. index.html
2. style.css
3. img

Полностью реализовать вёрстку проект

1. Добавить весь контент из макета
2. Ко всем элементам контента добавить классы
3. Добавить стили для всего контента сайта
4. Расставить элементы в соответствии с макетом
5. Адаптив создавать не нужно.

Макет https://www.figma.com/file/mnLY69cYE5cqWM5w6n5hXx/Seo-%26-Digital-Marketing-Landing-Page?node-id=188%3A673

В данном уроке мы переходим к созданию планшетной версии проекта

1. Создать медиа запрос, чтобы наш проект отлично смотрелся на разрешениях экрана 768-1024
2. Создать планшетную версию проекта
3. Мобильную версию сайта создавать не нужно.

Макет https://www.figma.com/file/mnLY69cYE5cqWM5w6n5hXx/Seo-%26-Digital-Marketing-Landing-Page?node-id=189%3A839

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

1. Создать медиа запрос, чтобы наш проект отлично смотрелся на разрешениях экрана 320-767
2. Создать мобильную версию проекта

Макет https://www.figma.com/file/mnLY69cYE5cqWM5w6n5hXx/Seo-%26-Digital-Marketing-Landing-Page?node-id=190%3A1194

На данном уроке нам необходимо доделать подвал, главной страницы интернет-магазина

1. Продолжаем работу с проектом из прошлого урока
2. Добавляем весь контент подвала сайта
3. Создаём планшетную версию проекта
4. Создаем мобильную версию проекта
5. Добавляем эффекты наведения

Макет https://www.figma.com/file/mnLY69cYE5cqWM5w6n5hXx/Seo-%26-Digital-Marketing-Landing-Page?node-id=190%3A1194

1. Доделать, если что-то не получилось реализовать на прошлом уроке
2. Проверить сайт на ошибки
3. • Разместить сайт в сети интернет