Введение 0:00 Видео представляет собой урок по верстке с использованием HTML и CSS. Рассматривается тема переменных и их использование в коде.
Создание макета и настройка редактора кода 1:58 Создание учетной записи в приложении "Фирма" и создание дубликата файла для работы с макетом. Установка плагина "Life Server" для работы с кодом в браузере.
Подключение стилей и настройка отступов 5:47 Подключение файла стилей и настройка отступов с помощью плагина "Life Server". Подключение файла нормала для сброса отступов.
Работа с макетом и использование переменных 7:44 Изучение макета и создание переменных для хранения значений цветов. Использование переменных для изменения цветов в коде.
Работа с цветом и шрифтами 12:40 Обсуждение использования различных оттенков серого и шрифтов в проекте. Добавление переменных для цветов и шрифтов в проект.
Создание иконок и сохранение изображений 16:33 Создание иконок и сохранение их в формате SVG. Использование иконок в проекте и их сохранение в разных форматах.
Разметка и стилизация проекта 21:21 Создание разметки и установка стилей для различных элементов проекта. Использование семантического подхода для создания структуры проекта.
Работа с CSS 28:12 Создание стилей для различных элементов, включая кнопки, текст и изображения. Использование переменных для хранения значений и их изменения в зависимости от состояния элемента.
Стилизация блоков 33:06 Создание контента для блоков, включая текст, изображения и ссылки. Использование стилей для ограничения контента и его размещения на странице.
Стилизация заголовка и текста 40:52 Настройка стилей для заголовка и текста, включая цвет, размер и расположение. Использование flex для ограничения размера и расположения текста.
Работа с макетом 43:50 Автор обсуждает необходимость сохранения макета для дальнейшего использования. Он предлагает использовать плагин Perfect Pixel для работы с макетом.
Стилизация текста и иконок 51:34 Автор обсуждает стилизацию текста и иконок, используя различные свойства CSS. Он также обсуждает использование display flex для выравнивания элементов.
Работа с иконками 54:33 Автор обсуждает использование background-image для вывода иконок. Он также обсуждает необходимость создания отдельного блока для вычисления отступов и размеров иконок.
Работа с текстом 57:24 Автор обсуждает стилизацию текста, используя различные свойства CSS, такие как цвет, размер шрифта, и т.д. Он также обсуждает использование максимальной ширины для выравнивания текста.
Создание калькулятора 1:01:14 В видео обсуждается создание калькулятора с использованием CSS и HTML. Создается блок с использованием класса "input" и "select".
Стилизация калькулятора 1:05:11 Обсуждаются стили для калькулятора, включая цвет фона, размер шрифта, и границы. Указывается, что для светлого блока используется цвет "dark".
Добавление текста и стилизации 1:11:06 Добавляются тексты и стилизуются в соответствии с макетом. Обсуждаются изменения в стилях, включая использование черного цвета для текста и изменение стрелки.
Работа с макетом 1:16:58 Автор корректирует макет, добавляя свойства и изменяя значения. Обсуждаются проблемы с отступами и значениями.
Стилизация блоков 1:24:49 Автор стилизует блоки, используя различные свойства и значения. Обсуждаются проблемы с отступами и размерами блоков.
Стилизация кнопки 1:30:39 Автор создает стили для кнопки, используя различные свойства и значения. Обсуждаются проблемы с размерами и отступами.
Создание плавного изменения состояния кнопки 1:33:37 Автор обсуждает, как создать плавное изменение состояния кнопки при наведении на нее. Он использует стили и свойства для изменения цвета, ширины и высоты блока при наведении.
Работа с текстом и отступами 1:41:23 Автор обсуждает, как изменить ширину и высоту блока, чтобы текст не был виден при наведении. Он также обсуждает использование неразрывного пробела для предотвращения разрыва текста.
Работа с отступами и формой 1:46:15 Автор корректирует отступы и ширину блока, а также меняет значение line-height. Он обсуждает использование градиентов и копирование текста для создания формы и footer.
Работа с градиентом 1:49:14 Автор копирует и переносит значения градиента из инспектора. Убирает темную линию и устанавливает другой фон для формы.
Стилизация текста и кнопок 1:52:09 Автор устанавливает стили для текста и кнопок, используя разные значения для фона, жирности и цвета. Указывает border-radius для кнопок.
Работа с блоками и списками 1:57:01 Автор устанавливает display flex для блоков и списков, устанавливает значения для ширины и отступов. Указывает значения для пиринга и отступов для блоков и списков.
Финальные корректировки 2:00:00 Автор корректирует значения для блоков и списков, чтобы они соответствовали друг другу. Устанавливает значения для пиринга и отступов для разных блоков и списков.
