Первая часть мастер-класса по верстке лендинга по БЭМ методологии с применением препроцессора Sass на диалекте SCSS. Подготоавливаем файловую структуру, анализируем макет, готовим шрифты, миксины, медиазапросы, утилитарные и глобальные классы. Верстаем шапку, секции hero и services. Timeline: 00:00 | Вступление 00:32 | Подготовка файловой структуры 02:32 | Нормализация стилей 04:30 | Анализ макета, заполнение глобальных CSS-переменных 09:45 | Подключение шрифтов 11:45 | Подготовка миксинов 16:09 | Миксины медиазапросов 21:22 | Утилитарные классы 23:27 | Глобальные стили 27:22 | Шапка страницы — разметка 36:02 | Шапка страницы — стилизация 43:02 | Шапка страницы — адаптация 56:50 | Секция Hero — разметка 01:02:52 | Секция Hero — стилизация 01:07:21 | Секция Hero — адаптация 01:19:24 | Секция Services — разметка 01:27:59 | Секция Services — стилизация 01:45:28 | Секция Services — адаптация Ссылки: Макет Positivus в Figma:
Репозиторий с кодом проекта:
Сервис для поиска шрифтов Google Fonts:
Сервис для преобразования файлов шрифтов в нужный формат:
Файл для нормализации стилей (css-normalize):
NPM-пакет css-normalize:
• Как удобно управлять цветом SVG-иконо... Как лучше называть элементы в разметке: • Имена классов в верстке | Как лучше н... Чат в телеграмме (помощь новичкам):
PREAX (онлайн-платформа для получения РЕАЛЬНОГО опыта работы):
Реклама ООО «ПРЕАКС ПЛЭТФОРМ» ОГРН 1237700372755, ИНН 9727035595 Boosty (поддержать канал):
Бесплатные курсы на канале: HTML: • HTML курс 2025 CSS: • CSS курс 2025 JS: • JavaScript курс 2025 A11y: • Accessibility курс 2025 Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для н... Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTM... Frontend Roadmap 2024 • Frontend Roadmap 2024 | Что должен уч... Автор: Личный сайт:
Telegram:
Boosty:
GetMentor:
Solvery:
#frontend #фронтенд #верстка #версткасайтов
