Верстка сайта по макету из Pixso, бесплатный аналог Figma с Dev Mode

• Программа Pixo — аналог Figma, с которой мы будем работать.  

• Практическое применение знаний: верстка сайта по макету.  

• Сайт будет состоять из трёх разделов, мы поработаем с flex-боксами, градиентами и SVG-иконами.  

• Pixo практически идентична Figma, что упрощает обучение.  

• Возможность использования веб-версии или скачивания приложения для Windows, Mac и Linux.  

• Простота установки и авторизации через Google аккаунт.  

• Хорошая совместимость с макетами Figma.  

• Импорт файлов в формате .figma и .pix.  

• Интерфейс Pixo интуитивно понятен и похож на Figma.  

• Бесплатный режим разработчика, аналогичный Def Mode в Figma.  

• Доступ к коду и параметрам элементов.  

• Важные свойства элементов можно копировать напрямую.  

• Создание пустой папки и файла index.html в редакторе кода.  

• Создание папки styles и файла main.css для стилей.  

• Подключение стилей и разметка первого раздела.  

• Создание контейнера и раздела title.  

• Вставка текста в раздел title через режим разработчика.  

• Настройка регистра текста для дальнейшего заполнения через админку.  

• Создание раздела card после title.  

• Перенос текста из режима разработчика для удобства работы.  

• Анализ макета показывает логичную структуру: три дополнительных раздела в разделе «Фичес».  

• Разделение макета на три логических блока: «Тайтл», «Карс» и «Батонс».  

• Важность логического анализа макета, так как дизайнер может реализовать структуру по-разному.  

• Создание двух кнопок с классами «ридмо» и «гет старте».  

• Реализация кнопок как ссылок, а не тегов «батом».  

• Объединение кнопок в общий раздел «Батонс» с использованием «дисплей: flex».  

• Анализ структуры карточки: заголовок, текст и иконка.  

• Создание карточки с классом «айт», указанием пути к картинке и копированием текста с макета.  

• Выбор тегов для текста и заголовков на основе их уровня важности.  

• Экспорт иконки в SVG и её оптимизация с помощью сервиса.  

• Создание файла «айкон1.svg» с оптимизированным кодом иконки.  

• Подключение иконки через тег «img».  

• Дублирование раздела для четырёх иконок.  

• Оптимизация кода иконок с помощью сервиса.  

• Перенос оптимизированных иконок в соответствующие файлы.  

• Корректировка заголовков и текста под каждый элемент.  

• Использование заголовка в качестве атрибута «альт» для изображения.  

• Перенос текста с макета в HTML-код.  

• Получение около тридцати строк HTML-кода для первого раздела.  

• Планирование оформления с помощью CSS для соответствия макету.  

• Объяснение преимуществ использования оптимизированного SVG-кода вместо вставки в HTML.  

• SVG позволяет масштабировать изображение без потери качества.  

• Растровые изображения PNG теряют качество при масштабировании.  

• Пример экспорта иконки в PNG и SVG показывает разницу в качестве.  

• SVG описывает иконку через координаты, линии, радиус, заливку и обводку.  

• Векторная иконка масштабируется без потери качества благодаря использованию примитивов.  

• SVG можно стилизовать через CSS, изменяя цвет обводки, заливку и другие параметры.  

• Иконки в формате SVG можно анимировать через CSS.  

• С PNG такого сделать нельзя.  

• Использование `<img>` для SVG-иконок позволяет стилизовать их через CSS.  

• При проблемах с загрузкой SVG-иконки могут отображаться как растровые.  

• Другие способы подключения: через `<background-image>` и `<stack-objs>`.  

• Выбор метода подключения зависит от ситуации и потребностей проекта.  

• Автор рекомендует использовать сервис для оптимизации иконок.  

• Обсуждение оформления CSS-стилей для раздела макета.  

• Ссылка на репозиторий с кодом проекта и дополнительными материалами.  

• Рекомендация скачать макет в формате Pix и практиковаться самостоятельно.  

• Совет исследовать код автора для исправления ошибок.  

• Использование плагина «Замена шрифта» в Pixo для просмотра используемых шрифтов.  

• Определение шрифтов: Roboto Bold, Roboto Medium, Roboto Regular.  

• Скачивание шрифта Roboto с тремя разными начертаниями через Google Fonts.  

• Поиск шрифта Roboto на Google Fonts.  

• Проверка различных начертаний шрифта.  

• Получение кода для подключения шрифтов через кнопку «Get Font».  

• Копирование кода и его вставка в HTML и CSS.  

• Установка стилей для тега body: margin 0, font-family: Roboto, 400.  

• Наследование стилей для всех остальных тегов.  

• Определение максимальной ширины контейнера на основе ширины фрейма.  

• Настройка ширины контейнера в процентах для адаптации к разным размерам экранов.  

• Центрирование контейнера с помощью margin: 0 auto.  

• Использование плагина «VS HTML to CSS» для автоматического создания разметки.  

• Настройка свойств элементов в соответствии с макетом.  

• Проверка ширины контейнера и оставшегося пустого пространства.  

• Оформление HTML-разметки на CSS для достижения результата, как на макете.  

• Объединение элементов в разделы: заголовки, текст, столбцы, кнопки.  

• Применение свойства `text-align: center` для выравнивания текста по центру.  

• Настройка отступов: `padding: 170px` сверху и снизу, `0` по бокам.  

• Анализ параметров текста в режиме разработчика: толщина 500, одинаковый цвет.  

• Копирование свойств шрифта для заголовка.  

• Удаление ненужных свойств шрифта: цвет, `text-align: left`, `line-height`, `font-size`, `font-family`.  

• Установка `letter-spacing: 1px` и `text-transform: uppercase`.  

• Установка `margin: 0 0 5px` для отступов снизу.  

• Использование расширения `Perfect Pixel` для точной настройки отступов.  

• Экспорт макета сайта в PNG для работы с расширением.  

• Настройка прозрачности и централизации макета.  

• Запуск режима разработчика и настройка разрешения экрана.  

• Проверка макета на устройствах с разной шириной экрана.  

• Настройка отступа снизу до 19 пикселей для точного совпадения с фоном.  

• Проверка совпадения заголовка и текста с макетом.  

• Применение `display: flex` для карточек.  

• Установка расстояния между карточками: `gap: 67px`.  

• Центрирование карточек и ограничение их ширины: `width: 140px`.  

• Устанавливаем отступ от текста на 94 пикселя.  

• Корректируем шрифты, цвет и отступы для соответствия макета.  

• Копируем свойства шрифта из макета в элемент.  

• Удаляем фон фэмили, так как он уже установлен для бади.  

• Устанавливаем отступы для текста: мерджин ноль, снизу — 15 пикселей.  

• Для изображения устанавливаем отступ снизу — 30 пикселей.  

• Включаем отображение фонового изображения и проверяем отступы.  

• Настраиваем заголовок и изображение для корректного отображения.  

• Используем плагин для автоматического обновления страницы при сохранении документа.  

• Проверяем соответствие макета после обновления.  

• Устанавливаем дисплей флекс для кнопок, значение флекс — в раб.  

• Центрируем текст внутри кнопки с помощью текста лайн центр.  

• Настраиваем ширину и высоту кнопки, копируем свойства шрифта.  

• Копируем цвета текста и фона для кнопок.  

• Проверяем соответствие кнопок макету.  

• Сдвигаем кнопки ниже, увеличивая отступ для раздела с карточками.  

• Устанавливаем отступ снизу — 142 пикселя.  

• Убеждаемся в корректности отображения элементов.  

• Проверяем отображение раздела на мобильных устройствах.  

• Рассматриваем необходимость использования медиазапросов.  

• Уменьшение рамки имитирует устройство с меньшим размером экрана и разрешением.  

• До ширины 900 пикселей всё отображается корректно.  

• При дальнейшем уменьшении карточки перескакивают на следующую строку благодаря свойству flex: flex-wrap.  

• Установка justify-content: center предотвращает перескакивание элементов слева.  

• На маленьких устройствах используется сетка 2x2, на больших — четыре столбца.  

• Горизонтальные полосы прокрутки отсутствуют, всё отображается корректно.  

• Проверка на экране 280 пикселей показывает корректное отображение.  

• Настройка под ещё более узкие экраны не требуется.  

• Использование flex-box позволяет обойтись без медиазапросов.  

• Подсказки по ширине устройств: 768, 1024, 1440, 2560 пикселей.  

• Возможность проверки медиазапросов и масштабирования.  

• Проверка отображения на разных устройствах, например, iPhone 12 Pro и Samsung S8 Plus.  

• Ссылка на GitHub репозиторий с кодом урока.  

• Возможность скачать макет для программы Pixo.  

• Файлы в формате PNG также доступны для скачивания.  

• Бесплатный курс по верстке сайтов и работе с WordPress.  

• Больше практики и заданий по сравнению с YouTube.  

• Прозрачность и отсутствие скрытых платежей.  

• Ссылки на оптимизацию SVG-картинок и обзор редактора Visio Studio.  

• Плагины Perfect Pixel и расширение для Visio Studio.  

• Дополнительные курсы и материалы в репозитории.  

• Клонирование репозитория, создание форка, отслеживание изменений.  

• Просмотр кода в режиме реального времени.  

• Последовательное выполнение заданий для освоения работы с Pixo и верстки на чистом HTML и CSS.  

• Обсуждение структуры раздела: левая и правая половины, иконка, текст и фоновый цвет.  

• Объяснение, что фоновый цвет можно установить через CSS, а не в виде прямоугольника.  

• Важность наблюдения за работой других и самостоятельного повторения.  

• Создание структуры с помощью CSS-препроцессоров, например, Emmet.  

• Emmet встроен в Visual Studio Code, его можно использовать для создания больших конструкций.  

• Пример использования Emmet для создания контейнера и его содержимого.  

• Экспорт иконок в SVG-формат для оптимизации размера.  

• Использование сервиса для сжатия иконок.  

• Указание пути к иконкам в CSS.  

• Вставка текста в атрибут alt для характеристики разделов.  

• Проверка отображения раздела на макете.  

• Корректировка макета с помощью плагина для разработчика.  

• Использование генератора градиента для создания фона.  

• Настройка цветов градиента в соответствии с макетом.  

• Градиент позволяет фону заполнять весь экран на больших разрешениях.  

• Возможность реализации макета разными способами в зависимости от требований.  

• Установка отступов для текста и иконок.  

• Обнуление margin для тегов P.  

• Настройка margin-bottom для иконок и текста.  

• Устанавливаем отступы для внутренней части: 70 пикселей.  

• Для левой и правой половины устанавливаем отступы 90 пикселей.  

• Применяем flex для внутренней части, чтобы элементы располагались вертикально.  

• Выравниваем текст по правой стороне с помощью text-align: right.  

• Устанавливаем ширину элементов на 50%.  

• Настраиваем цвет элементов: один — белый, другой — копируем из макета.  

• Используем линейный градиент для фона: слева один градиент, справа — другой.  

• Убираем предыдущий градиент для достижения желаемого результата.  

• Обсуждаются ограничения при использовании градиентов: остаётся белое пространство.  

• Копируем значения шрифта в CSS.  

• Настраиваем размер, отступ и максимальную ширину текста.  

• Применяем margin для выравнивания текста.  

• Регулируем отступы для иконок с разной высотой.  

• Устанавливаем margin-bottom для корректного отображения.  

• Подстраиваем отступы для достижения идеального макета.  

• Определяем ключевую точку для медиазапроса: 645 пикселей.  

• Меняем градиент на вертикальный для устройств с меньшей шириной экрана.  

• Настраиваем flex для элементов в столбце на мобильных устройствах.  

• Переносим стили для левой и правой половины на мобильные устройства.  

• Корректируем отступы и выравнивание текста.  

• Проверяем корректность отображения на мобильных устройствах.  

• Устанавливаем отступы: left — 0, bottom — 50.  

• Ширина элемента — 100%.  

• Изменяем стили: right, top.  

• Корректируем отступы для правого и левого элементов.  

• Используем селектор `nth-child` для центрирования текста.  

• Применяем `margin: 0 auto` для выравнивания по центру.  

• Проверяем корректность отступов и центрирования.  

• Настраиваем медиазапросы для отображения на узких экранах.  

• Убеждаемся, что разделы корректно отображаются на устройствах с шириной 220 и 280 пикселей.  

• Копируем фрагмент заголовка и текста из предыдущего раздела.  

• Разделяем блок на левую галерею и правую часть с текстом и кнопкой.  

• Рассматриваем использование flexbox и grid для разделения блока.  

• Создаём контейнер для раздела.  

• Копируем текст из макета в новый раздел.  

• Настраиваем выравнивание текста.  

• Создаём блоки для галереи и текста.  

• Используем div для стилизации изображений.  

• Применяем градиент и скругление углов через CSS.  

• Отключаем скругление углов и градиент в режиме дизайна.  

• Экспортируем изображения без дополнительных стилей.  

• Возвращаем стили после экспорта.  

• Извлекаем изображения без стилей.  

• Планируем наложение стилей через CSS через свойство `background`.  

• Создание структуры на HTML.  

• Переход к разметке на CSS.  

• Адаптация структуры для работы на любых устройствах.  

• Установка отступов: padding-top 104, padding-bottom 213.  

• Настройка ширины блока: max-width 958.  

• Настройка высоты блока: min-height 394.  

• Перенос стиля тени из режима разработчика.  

• Центрирование элемента с помощью margin: 0 auto.  

• Перенос значений отступов: 63 сверху, 41 справа, 64 снизу, 35 слева.  

• Применение flex для родительского элемента.  

• Добавление стилей для изображений: border-radius 5px, box-shadow, background-image.  

• Корректировка путей к изображениям.  

• Настройка размеров изображений: width 267, height 267, padding 126.  

• Демонстрация работы flex: галерея и текст располагаются по сторонам.  

• Настройка grid: grid-template-columns «1fr 1fr», grid-gap 13.  

• Назначение идентификаторов изображениям: img-1, img-2, img-3.  

• Назначение идентификаторов элементам.  

• Завершение работы с grid.  

• Достигнут почти идеальный макет, осталось настроить текст и отступы.  

• Уменьшение padding элемента до 98 пикселей приводит к совпадению верха изображений с макетом.  

• Текст центрируется с помощью свойства text-align: center.  

• Свойство text-align: center применяется ко всему заголовку.  

• Интервал между словами настраивается вручную в пикселях.  

• Копирование свойств заголовка для блока текста H3 и P.  

• Кнопка выравнивается по левой стороне с помощью flex-start.  

• Убираются ненужные свойства font-family, font-weight, line-height, white-space и text-align.  

• Настраиваются отступы между галереей и текстом, а также между элементами.  

• Отступы для H3 и P настраиваются с помощью margin.  

• Высота строки возвращается для текста P.  

• Лайтер-спейсинг настраивается в пикселях.  

• Отключение плагина Perfect Pixel после настройки десктопной версии.  

• Установка ключевой точки на 1024 пикселя для адаптации макета.  

• Медиа-запросы пишутся в порядке убывания: сначала для десктопов, затем для экранов 1024, 645, 400 и т. д.  

• Сначала указываются стили для максимально большого экрана, затем для меньших устройств.  

• Для блока inner используется flex-direction: column для вертикального расположения элементов.  

• Галерея располагается сверху, а текст — снизу.  

• Указываем margin-right: 0 для устранения отступа справа.  

• Устанавливаем margin-bottom: 67 пикселей для отступа снизу.  

• Применяем flex-start для элементов галереи, чтобы они располагались слева.  

• Добавляем медиазапросы для экранов размером 475 пикселей.  

• Отслеживаем изменения с помощью инструментов разработчика.  

• Копируем заготовку блока галереи и настраиваем margin: 0 сверху, auto по бокам, 67 снизу.  

• Используем grid-template-areas для размещения картинок: большая картинка занимает один ряд и один столбец, две нижние — второй ряд рядом друг с другом.  

• Устанавливаем ключевую точку на 335 пикселей.  

• Перестраиваем галерею: три ряда и один столбец.  

• Уменьшаем ширину картинок до 200 пикселей для корректного отображения на маленьких экранах.  

• Оптимизируем стили для элементов галереи: бордер-радиус, бокс-shadow, background-repeat: no-repeat, background-size: cover.  

• Исправляем проблемы с применением свойств с помощью !important.  

• Проверяем корректность отображения на разных экранах.  

• Подчёркиваем важность использования инструментов разработчика для отладки.  

• Обсуждаются возможности инструментов разработчика: просмотр свойств элементов, настройка flex и grid, использование консоли для JavaScript.  

• Упоминается удобство использования инструментов на нескольких мониторах.  

• Предлагается выполнить самостоятельную работу на основе изученного материала.  

• Рекомендация скачать макет и верстать его, применяя полученные знания.  

• Призыв оценивать видео, делиться и оставлять комментарии.