Вёрстка сайта с 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: https://www.figma.com/design/racHPrMN...
➖ Репозиторий с кодом проекта: https://github.com/aleksanderlamkov/p...
➖ Сервис для поиска шрифтов Google Fonts: https://fonts.google.com/
➖ Сервис для преобразования файлов шрифтов в нужный формат: https://transfonter.org/
➖ Файл для нормализации стилей (css-normalize): https://raw.githubusercontent.com/ale...
➖ NPM-пакет css-normalize: https://www.npmjs.com/package/@a1rth/...
➖    • Как удобно управлять цветом SVG-иконок #sh...   ➖ Как лучше называть элементы в разметке:    • Имена классов в верстке | Как лучше называ...   💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend
🧑‍💻 Основной телеграм-канал: https://t.me/AleksanderLamkov
❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале: 🟠 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), БЭМ: https://stepik.org/a/228315
📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315
#frontend #фронтенд #верстка #версткасайтов