Вёрстка сайта с 0 до результата | HTML, SCSS, БЭМ — Подробное ПОШАГОВОЕ объяснение | Часть 1

✏️ Первая часть мастер-класса по верстке лендинга по БЭМ методологии с применением препроцессора 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 — адаптация ⚠️ Внимание, препроцессор Sass в последних версиях совершенно не дружит с @import, которые мы в проекте использовали и компиляции могут препятствовать ошибки. Исправить ситуацию очень просто - выполните в терминале IDE команду: npm i -g sass@1.69.5 – после этого @import у вас по прежнему будет работать, как у меня на видео. 📚 Ссылки из видео: ➖ Макет Positivus в Figma:
➖ Репозиторий с кодом проекта:
➖ Сервис для поиска шрифтов Google Fonts:
➖ Сервис для преобразования файлов шрифтов в нужный формат:
➖ Файл для нормализации стилей (css-normalize):
➖ NPM-пакет css-normalize:
➖    • Как удобно управлять цветом SVG-иконок #sh...   ➖ Как лучше называть элементы в разметке:    • Имена классов в верстке | Как лучше называ...   💬 Коммьюнити-чат в телеграме (помощь новичкам):
🧑‍💻 Основной телеграм-канал:
❤️ Boosty (поддержать автора):
🗂️ Бесплатные курсы на канале: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для начина...   🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ:
📌 Автор: ➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Stepik (платные курсы и мастер-классы):
#frontend #фронтенд #верстка #версткасайтов