VIDEO
✏️ Начинаем с нуля верстать несложный одностраничный сайт по фитнес тематике. Этот мастер-класс предназначен для новичков, однако для комфортной разработки вам необходимо знать теорию по HTML и CSS. Плейлисты с курсами по этим технологиям вы можете найти на канале, советую с ними ознакомиться, если ещё этого не сделали. 🔴 Timeline: ▶ 00:00 | Вступление ▶ 00:26 | Разбор макета Figma ▶ 01:21 | Анализ шрифтов макета, ч. 1 ▶ 01:53 | Dev-режим в Figma ▶ 02:25 | Анализ шрифтов макета, ч. 2 ▶ 03:21 | Поиск файлов шрифтов на Google Fonts ▶ 04:19 | Преобразование файлов шрифтов в woff2 через transfonter ▶ 04:49 | Подготовка файловой структуры ▶ 05:53 | Подключение стилей ▶ 06:06 | Подключение шрифтов ▶ 07:28 | Нормализация стилей ▶ 08:08 | Подготовка глобальных CSS-переменных ▶ 11:22 | Глобальные стили ▶ 12:02 | Стили утилитарного класса container ▶ 12:36 | Стили заголовков ▶ 13:07 | Разметка шапки ▶ 13:22 | Разметка логотипа ▶ 14:36 | Разметка меню ▶ 15:36 | Разметка блока с кнопками ▶ 17:49 | Стили шапки ▶ 18:10 | Стили меню ▶ 20:10 | Эффект наведения на ссылки ▶ 21:13 | Стили текущей ссылки меню ▶ 22:29 | Стили основной кнопки ▶ 24:46 | Стили блока с кнопками ▶ 25:05 | Исправление бага со сжатием логотипа по ширине ▶ 25:27 | Исправление баг с переносом строк в кнопках ▶ 26:02 | Стили бургер-кнопки ▶ 30:44 | Адаптив шапки ❗️ Для инспектирования стилей в Figma без dev-режима используйте плагин Design Prisma или Inspect Styles 📚 Ссылки из видео: ➖ Макет Kropp Fitness в Figma:
