#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

Начинаем с нуля верстать несложный одностраничный сайт по фитнес тематике. Этот мастер-класс предназначен для новичков, однако для комфортной разработки вам необходимо знать теорию по 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 | Адаптив шапки Ссылки: Макет Kropp Fitness в Figma:
Репозиторий с кодом проекта:
Сервис для поиска шрифтов Google Fonts:
Сервис для преобразования файлов шрифтов в нужный формат:
Файл для нормализации стилей (css-normalize):
NPM-пакет css-normalize:
Чат в телеграмме (помощь новичкам):
PREAX (онлайн-платформа для получения РЕАЛЬНОГО опыта работы):
Реклама ООО «ПРЕАКС ПЛЭТФОРМ» ОГРН 1237700372755, ИНН 9727035595 Boosty (поддержать канал):
Бесплатные курсы на канале: HTML: • HTML курс 2024 CSS: • CSS курс 2024 JS: • JavaScript курс 2024 A11y: • Accessibility курс 2024 Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для н... Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTM... Frontend Roadmap 2024 • Frontend Roadmap 2024 | Что должен уч... Автор: Личный сайт:
Telegram:
Boosty:
GetMentor:
Solvery:
#frontend #фронтенд #верстка #версткасайтов