Создание макета 0:00 Создание папки "NFTI" для хранения файлов и папок проекта. Создание файла index.html и папок для хранения картинок и стилей.
Разметка и стилизация 5:58 Использование семантических тегов для структурирования разметки. Создание формы поиска, кнопки и навигации. Стилизация элементов с использованием классов и атрибутов.
Работа с кодом 10:10 Использование плагинов для автообновления изменений и работы с кодом. Создание и использование скриптов для выполнения определенных действий при клике на элементы.
Разметка и стилизация 11:53 Создание списка и использование классов для удобства. Подключение стилей через СС и проверка работы.
Фон и градиент 16:17 Использование градиента для фона и его корректировка. Отрицательное значение процентов и использование нуля процентов.
Стилизация шапки сайта 19:31 Ограничение ширины блока и его центрирование. Устранение отступов и использование файла нормалайз для подтяжки шрифта. Создание кривых и сохранение логотипа.
Создание логотипа 22:55 Создание картинки с логотипом и сохранение в формате св. джи. Подключение картинки к хедер лога.
Стилизация элементов 26:08 Изменение отступов и размеров элементов. Использование градиента и бордер-радиуса для иконки. Стилизация текста и кнопок.
Размещение элементов 31:12 Использование абсолютного позиционирования для иконки. Установка отступов и размеров для элементов. Учет адаптивности при сжатии экрана.
Завершение работы 34:03 Объединение отступов в одну строку. Сохранение картинок в формате пэн джим. Перенос текста в чм.
Создание новой секции 35:15 Создание контейнера для контента с использованием тэга "секция". Добавление заголовка, нижнего описания и кнопок.
Стилизация контента 41:08 Использование тэга "main" для создания двух колонок. Адаптивное сжатие картинки с использованием класса "main-image". Стилизация текста и кнопок с использованием различных свойств и значений.
Завершение работы 48:40 Создание блока с небольшим счетчиком и его стилизация. Проверка и корректировка отступов и размеров текста. Завершение работы над макетом и сохранение его.
Работа с макетом 50:57 Автор объясняет, как использовать плагин пиксель перфект для наложения макета и проверки правильности расположения элементов. Демонстрирует, как изменить отступы и размеры текста, а также расположение кнопок и списка.
Стилизация и перенос стилей 56:49 Автор объясняет, как использовать расширение претер для удаления лишних элементов и приведения стилей в порядок. Демонстрирует, как перенести стили из документа в контейнер и создать класс для использования в других разделах.
Работа с изображениями и блоками 1:01:03 Автор показывает, как создать блок с обложкой и стилизовать его, используя класс карт кавер. Объясняет, как использовать класс карт дисплей флекс для размещения блоков в ряд и стилизовать их. Демонстрирует, как использовать класс карт атом для создания блоков с ячейками и стилизации их.
Работа с изображениями 1:06:00 Обрезание оверфлоу хиден изображения для адаптации под размеры. Установка ширины и высоты изображения, использование класса для стилизации.
Работа с текстом 1:10:33 Стилизация текста, использование свойств фон, цвет, жирность, выравнивание текста. Работа с кнопкой, установка класса, копирование стилей, перенос в соседние блоки.
Работа с отступами и расстояниями 1:16:55 Корректировка отступов и расстояний между блоками, использование свойств марджин. Работа с текстом и ценой, корректировка стилей и расстояний.
Работа с наведением 1:20:07 Изменение фона при наведении, использование свойств транзишен и непрозрачности. Работа с кнопкой при наведении, изменение состояния и стилей.
Градиентный текст 1:21:46 Создание градиентного текста с использованием CSS и псевдоэлементов. Обсуждение использования рамки для обводки текста и ее сохранения для использования в других браузерах.
Часто задаваемые вопросы 1:25:47 Создание блока часто задаваемых вопросов с использованием чистого JavaScript. Обсуждение использования флекс-бокса для организации колонок и блоков.
Стилизация и верстка 1:28:32 Корректировка стилей и верстка блока часто задаваемых вопросов для соответствия макету. Работа над расстояниями между блоками и корректировка пединга.
Завершение работы над макетом 1:33:26 Совмещение блоков и корректировка расстояний между ними. Работа над последним блоком и перенос изменений к макету.
Создание баннера 1:35:28 Создание баннера с градиентом и заголовком "H3". Использование стилей для градиента и бордера, указание максимальной ширины и расстояния.
Работа с текстом 1:37:23 Настройка размера и положения текста, использование обводок и прозрачности фона. Корректировка расстояния между текстом и ссылкой.
Адаптация баннера к разным размерам экрана 1:40:43 Проверка работы баннера на разных размерах экрана. Выявление проблем с меню, полем поиска и блоками с текстом и изображениями. Решение проблем с меню и полем поиска, изменение размера шрифта для часто задаваемых вопросов.
Работа с адаптивным дизайном 1:41:55 Автор обсуждает, как уменьшить отступы и ширину полей в адаптивном дизайне, а также как работать с меню и строкой поиска. Она также упоминает, что нужно учитывать пропорции и размеры элементов при работе с адаптивным дизайном.
Работа с медиа-запросами 1:49:04 Автор объясняет, как использовать медиа-запросы для корректировки размеров элементов в зависимости от ширины экрана. Она также обсуждает, как использовать медиа-запросы для уменьшения размеров элементов на планшетах и мобильных устройствах.
Работа с кнопками и меню 1:55:32 Автор объясняет, как включить кнопки в адаптивный дизайн, а также как скрыть и показать их в зависимости от ширины экрана. Она также упоминает о необходимости подключения дополнительных кнопок в разметке для мобильных устройств.
Корректировка разметки 1:57:37 Автор объясняет, что для корректной работы кнопок в проекте необходимо изменить разметку. Он добавляет класс "хедер баттенс" и указывает на кнопки, которые теперь будут располагаться вместе.
Настройка стиля кнопок 1:58:33 Автор убирает стандартный стиль кнопок (бордер и фон), затем подключает картинки. Он указывает на проблемы с отображением картинок из-за их размеров и высоты. Чтобы решить эту проблему, автор указывает ширину и высоту картинок, а также ширину и высоту меню.
