✏️ Первая часть мастер-класса по верстке лендинга по БЭМ методологии с применением препроцессора 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: [ Ссылка ]?type=design&mode=design&t=ykQwCDIrWJP3ali1-1
➖ Репозиторий с кодом проекта: [ Ссылка ]
➖ Сервис для поиска шрифтов Google Fonts: [ Ссылка ]
➖ Сервис для преобразования файлов шрифтов в нужный формат: [ Ссылка ]
➖ Файл для нормализации стилей (css-normalize): [ Ссылка ]
➖ NPM-пакет css-normalize: [ Ссылка ]
➖ [ Ссылка ]
➖ Как лучше называть элементы в разметке: [ Ссылка ]
💬 Чат в телеграмме (помощь новичкам):
[ Ссылка ]
🔸 Boosty (поддержать канал):
[ Ссылка ]
🗂️ Бесплатные курсы на канале:
🟠 HTML: [ Ссылка ]
🔵 CSS: [ Ссылка ]
🟡 JS: [ Ссылка ]
🟢 A11y: [ Ссылка ]
⚪️ Мастер-класс по верстке для новичков: [ Ссылка ]
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): [ Ссылка ]
🗺 Frontend Roadmap 2024 [ Ссылка ]
📌 Автор:
➖ Личный сайт: [ Ссылка ]
➖ Telegram: [ Ссылка ]
➖ Boosty: [ Ссылка ]
➖ GetMentor: [ Ссылка ]
➖ Solvery: [ Ссылка ]
#frontend #фронтенд #верстка #версткасайтов
Ещё видео