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

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

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

• Использование Flexbox, градиентов и SVG иконок.  

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

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

• Pixo - идентичный аналог Figma.  

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

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

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

• Импорт файлов из Figma и других форматов.  

• Интерфейс программы похож на Figma.  

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

• Режим разработчика для работы с кодом.  

• Интерфейс программы интуитивно понятен.  

• Верстка макета с нуля в программе Pixo.  

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

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

• Создание папки и файла index.html.  

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

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

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

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

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

• Логическая структура макета: три дополнительных раздела.  

• Важно оценить макет и разделить его на логические блоки.  

• Создание трех блоков: тайтл, карс и батонс.  

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

• Объединяем кнопки в общий раздел батонс.  

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

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

• Перенос текста и заголовка из макета в соответствующие теги.  

• Логика использования тегов h1, h2, h3 для заголовков.  

• Копирование и вставка иконок с помощью сервиса.  

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

• Создание и подключение оптимизированных иконок.  

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

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

• Создание и подключение иконок с помощью тегов img.  

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

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

• Подготовка HTML-кода для дальнейшей работы с CSS.  

• img занимает много места в HTML, лучше использовать оптимизированный код.  

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

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

• PNG - растровый формат, который не масштабируется без ухудшения качества.  

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

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

• PNG не поддерживает стилизацию и анимацию.  

• SVG остается векторной графикой при подключении через HTML.  

• Использование тега <img> с SVG и PNG.  

• Подключение через CSS background-image.  

• Использование стека обжиг для подключения SVG.  

• Объяснение выбора между SVG и PNG.  

• Важность правильного экспорта и подключения SVG иконок.  

• Переход к оформлению CSS стилей для раздела.  

• Создание фрагмента кода для CSS стилей.  

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

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

• Использование плагина "Замена шрифта" для выбора и замены шрифтов.  

• Выбор шрифтов "Робота" с тремя начертаниями: болт, медиум, реги.  

• Скачивание шрифтов с помощью сервиса Google Fonts.  

• Поиск шрифтов на сайте Google Fonts.  

• Выбор шрифта "Робота" и его начертаний.  

• Адаптация к новому дизайну сайта Google Fonts.  

• Использование кнопки "Гет фонд" для выбора шрифтов.  

• Подключение шрифтов через HTML и CSS.  

• Настройка стилей для тега body.  

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

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

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

• Использование плагина "Вс HTMLту СС" для вставки разметки.  

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

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

• Оформление HTML-разметки на CSS.  

• Создание заголовков, текста, столбцов и кнопок.  

• Объединение элементов в отдельные разделы.  

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

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

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

• Копируем параметры текста из режима разработчика.  

• Убираем ненужные свойства, такие как white-space, line-height, font-size и font-family.  

• Устанавливаем text-transform: uppercase для всех букв.  

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

• Убираем ненужные свойства, такие как color и white-space.  

• Устанавливаем margin: 0px сверху, 0px слева и справа, 5px снизу.  

• Устанавливаем расширение Perfect Pixel для браузера.  

• Экспортируем фрейм сайта в PNG и добавляем его как слой.  

• Настраиваем прозрачность и положение слоя для точного центрирования.  

• Запускаем режим разработчика и выбираем разрешение 1920x1080.  

• Устанавливаем масштаб 75% для удобства тестирования.  

• Проверяем, что элементы совпадают с фоновым изображением.  

• Устанавливаем display: flex для карточек.  

• Настраиваем расстояние между элементами 67px.  

• Устанавливаем justify-content: center и width: 140px для карточек.  

• Проверяем, что все элементы соответствуют макету и центрированы.  

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

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

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

• Устанавливаем размеры шрифтов и отступы для текста и изображений.  

• Корректируем значения для корректного отображения элементов.  

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

• Устанавливаем display: flex для кнопок.  

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

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

• Настраиваем цвета и фоны кнопок.  

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

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

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

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

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

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

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

• Использование flex-box и justify-content-center для корректного отображения элементов.  

• На маленьких экранах элементы перескакивают по одному, но все остается по центру.  

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

• На экранах до 280 пикселей все отображается корректно.  

• Использование flex-box для отображения элементов на узких экранах.  

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

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

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

• Возможность настройки размера экрана вручную.  

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

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

• Рекомендации по использованию материалов для эффективной работы.  

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

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

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

• Ссылки на оптимизацию SVG-изображений и обзор редактора Adobe Photoshop.  

• Использование Perfect Pixel и других инструментов для работы с HTML и CSS.  

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

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

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

• Начало разметки в HTML с опытом и видением структуры.  

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

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

• Пример использования Emmet для создания большой конструкции.  

• Создание контейнера и его содержимого.  

• Разделение на левую и правую половины с помощью CSS.  

• Пример разметки с иконками и текстом.  

• Экспорт иконок в SVG и их сжатие.  

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

• Вставка сжатых иконок в HTML.  

• Вставка текста в HTML и его настройка.  

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

• Настройка фона и размеров текста.  

• Создание градиента для фона.  

• Преимущества использования градиента для больших экранов.  

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

• Оформление и стилизация раздела на CSS.  

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

• Установка margin-bottom для иконок и текста.  

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

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

• Выравнивание текста по правой стороне и установка ширины 50%.  

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

• Ограничения по ширине и необходимость креативного подхода.  

• Два варианта реализации: по ширине и с ограничениями.  

• Копирование и перемещение значений шрифта в соответствующие разделы CSS.  

• Настройка размера, толщины и ширины текста.  

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

• Настройка отступов для иконок с разной высотой.  

• Регулировка margin и padding для достижения нужного результата.  

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

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

• Изменение градиента на вертикальный сверху вниз.  

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

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

• Настройка отступов и выравнивание текста по центру.  

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

• Настройка отступов для элементов: left 0, bottom 50, width 100%.  

• Изменение стилей для выравнивания элементов по центру.  

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

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

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

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

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

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

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

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

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

• Экспорт изображений без градиентов и скруглений для дальнейшей стилизации.  

• Экспорт изображений без градиентов и скруглений.  

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

• Подготовка изображений для дальнейшей стилизации через CSS.  

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

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

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

• Установка ширины и высоты блока.  

• Использование max-width и min-height для адаптивности.  

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

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

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

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

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

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

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

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

• Настройка отступов и идентификаторов для изображений.  

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

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

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

• Текст центрирован, настройка white-space вручную в пикселях.  

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

• Кнопка не по центру, установка flex-start для раздела.  

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

• Установление значений margin для соответствия макету.  

• Настройка высоты строки для текста, чтобы кнопка находилась на правильной позиции.  

• Корректировка white-space для соответствия тексту.  

• Выключение плагина perfect-pixel, настройка ключевой точки для адаптивной версии.  

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

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

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

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

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

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

• Копируем и вставляем блок галереи с настройками margin и grid.  

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

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

• Изменяем размеры изображений для корректного отображения на маленьких экранах.  

• Оптимизируем стили для элементов, чтобы избежать повторений.  

• Проверяем, что все свойства применяются корректно.  

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

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

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

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

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

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

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

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