Введение и продолжение стрима 1:01 Приветствие и проверка связи с аудиторией. Автор находится в отеле, пока его семья гуляет в парке. Переход к делу: продолжение верстки макета.
Обзор проделанной работы 2:02 Ссылка на первую часть стрима. Завершена большая часть макета, включая шапку и блоки. Остались небольшие блоки и подвал, разделенный на две части.
Спонсорство и канал "Слушая" 2:44 Автор напоминает о спонсорстве канала "Слушая". Канал не айтишный, но интересный, с жизненными историями. Призыв подписаться и поддержать канал.
Возвращение к макету 3:41 Напоминание о возможности скачать макет по ссылке в описании. Переход к следующему блоку "Ху-и, а кто мы такие?".
Анализ блока "Ху-и" 3:58 Описание структуры блока: ограничивающий контейнер, шапочка, боди из двух колонок видео и контента. Автор работает с одним монитором, иногда заглядывая в чат.
Подготовка блока 4:58 Подготовка шапочки блока, замена элемента и контента. Автор объясняет, что голос еще не восстановился после урока.
Добавление готового блока 5:41 Добавление готового блока, проверка стилей. Обсуждение отступов и их значений.
Вставка видео и контента 6:26 Вставка ролика из YouTube, демонстрация адаптивной верстки. Автор продолжает строить конструкцию блока, добавляя видео и контент.
Надежность верстки 7:33 Автор объясняет важность использования отдельных коробочек для повышения надежности верстки. Описание структуры элементов и их размещения в блоке.
Завершение работы с блоком 8:47 Автор завершает работу с блоком, перенося контент. Призыв к зрителям задавать вопросы, если останется время.
Вставка видео 11:07 Вставка видео из YouTube с использованием кода. Добавление ограничивающего контейнера для корректного отображения. Настройка ширины и высоты видео.
Адаптация и верстка 12:29 Копирование классов и переход к CSS. Создание разделителя для удобства. Настройка отступов и адаптивных размеров.
Организация свободного пространства 13:21 Превращение блока в flex-контейнер. Определение ширины и высоты видео. Использование процентного padding для адаптации видео.
Проблемы с процентным padding 16:33 Проблемы с вычислением процентного padding. Объяснение, почему padding рассчитывается от ширины flex-контейнера. Важность разделения структуры и наполнения.
Верстка контента 21:19 Верстка тайтла и текста. Настройка отступов для заголовка и текста. Использование схлопывания для оптимизации отступов.
Дополнительные обертки 26:33 Использование дополнительных оберток для тайтла и текста. Применение отступов для оберток. Оценка эффективности различных подходов к верстке.
Макет и отступы 27:28 Достигнут макет с отступами: 10 пикселей от заголовка до текста и 50 пикселей между частями. Атомы не используются, так как отступ 50 пикселей применяется только для не последних объектов. Если нет текста, отступ от тайтла пропадает.
Импровизация и структура 28:25 Пример показывает разнообразие подходов и необходимость учета множества деталей. Автор не готовился к стриму, все размышления основаны на реальных проектах. Цель - показать, как можно работать без использования сложных инструментов.
Верстка и структура 29:22 Верстка для начинающих, без использования JavaScript. Иконки имеют размер 32 пикселя, боди - 20 пикселей отступа слева. Тайтл жирный, отступ вниз 5 пикселей, текст с отступом 30 пикселей между объектами.
Работа с текстом 31:55 Добавление отступа 20 пикселей для контента. Попытка использовать текст флоу эллипсис внутри флекс-элемента не удалась. Фиксированные значения ширины необходимы для корректной работы.
Адаптация и отзывчивость 35:08 Добавление флекс-старт для отзывчивости. Устранение гигантских отступов для улучшения макета. Вопрос к зрителям о порядке видео и текста.
Порядок видео и текста 36:59 Большинство зрителей предпочитают текст перед видео. Использование брейк-пойнта для изменения порядка элементов. Флекс-контейнер с дирекцией кала реверс для корректного отображения контента.
Проблемы с редактором и оптимизация 38:32 Автор случайно закрыл редактор и потерял все изменения. Убирает отступы и меняет стиль заголовка. Оптимизирует медиа-запросы, чтобы избежать дублирования.
Проблемы с видео и отступами 41:09 Видео исчезло из-за неправильного использования flex-start. Возвращает видео и исправляет отступ от тела. Использует flex-direction для правильного расположения объектов.
Пропорции видео и отступы 44:03 Настраивает пропорции видео 56.25%. Убирает лишние отступы сверху и снизу. Проверяет отзывчивость и адаптивность видео.
Восприятие информации и блоки 46:19 Обсуждает важность правильного расположения текста и видео. Исправляет цвет фона блока, чтобы избежать путаницы. Возвращается к ансировке шапки первых блоков.
Работа с клиентами и формами 48:41 Разделяет блоки клиентов и форм. Использует flex для адаптивного размещения изображений. Добавляет min-width для адаптивности больших изображений.
Семантика и верстка 55:39 Обсуждает важность семантики и верстки. Подчеркивает, что сначала нужно научиться верстать, а потом интегрировать семантику. Использует flex и grid для адаптивной верстки.
Валидация форм без JavaScript 1:00:00 Объясняет, как сделать валидацию форм без JavaScript. Использует атрибуты required и email для проверки данных. Проверяет, что данные не полетят, пока не будет введен адекватный email.
Введение и настрой 1:00:47 Обсуждение настроения и планов на вечер. Важность позитивного настроя в работе.
Начало верстки 1:02:00 Отступ для блока с клиентами. Использование flexbox и padding для элементов. Настройка background-color и border-radius.
Верстка заголовка и формы 1:03:29 Верстка заголовка и формы. Настройка font-size и background-color. Проблемы с версткой и их решение.
Верстка кнопки 1:05:33 Верстка кнопки с закругленными углами. Настройка padding и border-radius. Добавление интерактивности и доступности.
Адаптивная верстка 1:08:18 Добавление декоративной полоски. Использование псевдоэлементов для создания полоски. Адаптация отступов и использование mobile first.
Оптимизация отступов 1:11:09 Оптимизация отступов с помощью mobile first. Использование display flex для экономии строк кода. Лайфхак по уменьшению отступов.
Верстка блока с хаваром 1:17:12 Верстка блока с хаваром. Использование готовых блоков и их адаптация. Настройка текста и иконок.
Завершение верстки 1:20:05 Настройка ссылки на почту. Перенос текста и выгрузка иконок. Завершение верстки и проверка.
Стоимость и время верстки 1:20:56 Верстка сайта занимает около пяти часов, но можно ускорить процесс. Стоимость верстки варьируется от 25 до 100 долларов в зависимости от клиента. Важно работать быстро, чтобы зарабатывать больше.
Преимущества мульти-мониторной системы 1:22:50 Верстка на мульти-мониторной системе происходит быстрее. Видео о рабочем месте автора объясняет, почему три монитора полезны.
Работа с элементами и стилями 1:23:09 Автор выгружает элементы и занимается их настройкой. Используются различные стили и отступы для выравнивания элементов. Применяются анимации и переходы для улучшения внешнего вида.
Оптимизация и тестирование 1:30:19 Автор оптимизирует элементы, переводя значения в проценты для адаптивности. Тестирует и корректирует отступы и размеры элементов. Проверяет, чтобы все элементы выглядели гармонично и без видимых косяков.
Обратная связь и обучение 1:37:52 Автор получает обратную связь от зрителей о сложности понимания процесса. Рекомендует бесплатные курсы для лучшего понимания верстки. Завершает работу над секцией и готовится к следующей части.
Отступы и размеры 1:40:41 Обсуждение отступов и размеров элементов. Использование калькулятора для расчета пропорций. Пример с тайтлом и кнопкой.
Адаптация и безопасность 1:43:06 Адаптация блока и добавление отступов безопасности. Использование моба для отправки изменений. Добавление отступов от контента.
Работа с футером 1:44:44 Работа с футером и социальными сетками. Использование классов для футера и его элементов. Пример с колонками и меню футера.
Контакты и ссылки 1:50:01 Перенос контента и заголовков. Создание ссылок для контактов и карт. Пример с телефоном и электронной почтой.
Завершение работы с футером 1:53:28 Завершение работы с футером и копирайтами. Использование каскадной таблицы стилей. Настройка отступов и цветов для футера.
Адаптация и иконки 1:58:19 Адаптация футера и добавление отступов безопасности. Работа с иконками и их позиционированием. Завершение работы с иконками и футером.
