Верстка сайта с нуля для начинающих | Практика | HTML | CSS | Vite | Figma

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

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

• Будут использоваться Flexbox и Grid.  

• Сайт состоит из стартового блока, сервиса, формы для записи, футера и хедера.  

• Для верстки понадобятся HTML, CSS и JavaScript.  

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

• Установите NodJS и пакетный менеджер npm.  

• Создайте проект с помощью команды npm init.  

• Запустите сервер с помощью npm run dev.  

• Перейдите в директорию проекта и установите пакеты.  

• Запустите сайт с помощью npm start.  

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

• Основные файлы: index.html, script.js и style.css.  

• Начните верстку с основных блоков сайта.  

• Оцените дизайн и разбейте его на блоки.  

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

• Начните с верстки хедера и футера.  

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

• Очистите index.html и style.css.  

• Используйте шрифты, предоставленные NodJS.  

• Настройте классы для основных блоков.  

• Подготовьте блоки для верстки.  

• Наполните хедер и футер.  

• Подготовьте стили для основных блоков.  

• Подготовлены блоки для задания стилей.  

• Начинается верстка хедера.  

• Хедер состоит из логотипа и навигации.  

• Логотип и навигация расположены горизонтально.  

• Используется тег nav для навигации.  

• Автор не обладает навыками семантической верстки.  

• Навигация заключается в тег nav.  

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

• Создается список блоков с помощью тега ul.  

• Используется тег a для создания ссылок.  

• Атрибут href задается для каждой ссылки.  

• Все теги написаны в одну строку.  

• Меню состоит из четырех блоков.  

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

• Убираются круглые точки у элементов.  

• Задается размер шрифта для каждого элемента.  

• Используется свойство font-size для тега a.  

• Убирается подчеркивание текста.  

• Элементы размещаются в одну строку с помощью display flex.  

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

• Меню готово, но элементы скачут при наведении.  

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

• Задается ширина для меню, чтобы элементы не скакали.  

• Убираются марджи и пани для предотвращения скачков.  

• Хедер выравнивается по одной линии.  

• Логотип располагается слева, навигация справа.  

• Задаются цвета и размеры для логотипа.  

• Добавляется класс для контейнера.  

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

• Контейнер будет центрироваться по ширине.  

• Создан класс "контейнер" с шириной 1200 пикселей и автомарджином.  

• Добавлен класс "контейнер" к тегу "хедер".  

• Контент теперь имеет границы и не расползается при уменьшении ширины.  

• Логотип и навигация отцентрированы с помощью свойства "display: flex".  

• Добавлен отступ 96 пикселей сверху страницы.  

• Логотип заменен на якорь, ведущий на главную страницу.  

• Добавлены идентификаторы для блоков "мейн", "сервайс" и "футер".  

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

• Футер имеет градиентный цвет и высоту 400 пикселей.  

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

• Добавлены классы для футер-контента и футер-контент-блока.  

• Логотип футера имеет высоту 29 пикселей и белый цвет.  

• Логотип находится в первом блоке и ведет к главной странице.  

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

• Логотип внутри футера и заполнение основного текста.  

• Использование тега p для блочного параграфа, который занимает всю ширину страницы.  

• Вставка текста в футер и настройка навигации.  

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

• Проверка цвета текста и настройка ширины и высоты строки.  

• Создание футер-копирайта и настройка его свойств.  

• Настройка расстояний и padding для футер-меню.  

• Создание футер-меню с навигацией и настройка его стилей.  

• Завершение левой части футера и настройка расстояний.  

• Создание футер-меню с навигацией и настройка его стилей.  

• Проверка и исправление ошибок в футере.  

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

• Вставка элементов с классом меню и анхор тегами.  

• Завершение работы с навигацией и проверка результатов.  

• Меню состоит из элементов с атрибутами, которые можно задать с помощью селекторов.  

• Элементы: мейн, сервис, родма, контакт.  

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

• Для футера нужно указать display: inline-block.  

• Футер содержит ссылки на мейн, сервис, родма и контакт.  

• Основные страницы будут наполнены контентом с помощью Figma.  

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

• Изображение сохранено в формате PNG и добавлено в проект.  

• Для изображения заданы размеры и атрибут alt для диктора.  

• Описание и тайтл находятся в блоке с классом main-description.  

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

• Описание сайта и кнопка имеют свои стили.  

• Общие кнопки имеют бордер и высоту 56 пикселей.  

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

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

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

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

• Устанавливаем падинги: верхний 145 пикселей, правый 0 пикселей, нижний 235 пикселей, левый 0 пикселей.  

• Для кнопки ТГП добавляем марджин ботом 140 пикселей.  

• Проверяем дизайн, первый блок готов.  

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

• Устанавливаем позишн стики топ ноль, чтобы панель не прилипала к странице.  

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

• Все изображения перетащены в директорию паблик с префиксом "сервайс".  

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

• Задаем бэкграунд color и паддинги для блока.  

• Создаем отдельный тайтл для блока "сервайс" с размером 45 пикселей и высотой 700 пикселей.  

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

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

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

• Задаем высоту колонок, ширину колонок и высоту каждой строки.  

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

• Используем тимплейт для создания колонок.  

• Задаем фиксированную высоту для колонок.  

• Завершаем работу с карточками, добавляя борд радиус и расстояние между блоками.  

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

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

• Кнопка называется "лермо" и должна быть по центру.  

• Создан отдельный класс для кнопки и добавлен в блок.  

• Кнопка должна быть по центру, используется класс "батон".  

• Кнопка шире, чем в дизайне, задана ширина 282 пикселя.  

• Кнопка готова, теперь нужно заполнить карточки.  

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

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

• Изображения заполнены, осталось заполнить карточки текстом.  

• Созданы два типа текста: тайтл и описание услуги.  

• Тайтл имеет свойство display: block, описание - display: none.  

• Заданы стили для текста: шрифт, размер, цвет.  

• Текст копируется и заверстывается для каждой карточки.  

• Задаются размеры и расстояния для текста.  

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

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

• Доделан хедер, добавлены классы для флекса и гиф контейнера.  

• Хедер теперь всегда белый и имеет фиксированную ширину.  

• Хедер работает на главную страницу.  

• Следующий блок - род мап, который включает изображения и тайтлы.  

• Созданы классы для флекса и изображения.  

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

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

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

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

• Указаны ширина и маргины для род мап скрипшена.  

• Заданы стили для текста и кнопок.  

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

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

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

• Указываем контент кнопки с помощью display flex.  

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

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

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

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

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

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

• Проверяем навигацию и заполняем сайт.  

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

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

• Применяем background-color и padding.  

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

• Применяем общие цвета и тексты для блока контактов.  

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

• Проверяем, что ничего не сломалось после изменений.  

• Добавляем блок с padding и border-radius.  

• Применяем градиентный фон и border-radius.  

• Добавляем форму на страницу и настраиваем отступы.  

• Форма создается с помощью тега <form>.  

• Атрибут action указывает адрес для отправки данных.  

• Для верстки используется класс <contact-form>.  

• Поля ввода добавляются с помощью тега <input>.  

• Для разбиения полей на строки используется тег <div>.  

• Атрибуты type и name определяют тип и значение поля.  

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

• Поле ввода можно сделать прозрачным с помощью background-color.  

• Поле ввода должно иметь ширину 100% и border-box для корректного отображения.  

• Кнопка имеет белый цвет и белый border.  

• Ширина кнопки также 100%.  

• Кнопка должна быть обернута в div с классом <contact-form-control>.  

• Добавляется заголовок с классом <contact-form-block>.  

• Заголовок имеет белый цвет и центрируется.  

• Кнопка размещается с отступом 16 пикселей.  

• Верстка полезна для фронтенд-разработчиков.  

• Рекомендуется начать с верстки нескольких сайтов.  

• Можно использовать инструменты, такие как Figma, для практики.  

• Практиковаться можно с помощью шаблонов Figma.