Вёрстка сайта с 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 — адаптация

📚 Ссылки:
➖ Макет Positivus в Figma: https://www.figma.com/file/racHPrMNd7...
➖ Репозиторий с кодом проекта: 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-иконо...  
➖ Как лучше называть элементы в разметке:    • Имена классов в верстке | Как лучше н...  

💬 Чат в телеграмме (помощь новичкам):
https://t.me/friendlyFrontendChat

🔸 Boosty (поддержать канал):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML:    • HTML курс 2024  
🔵 CSS:    • CSS курс 2024  
🟡 JS:    • JavaScript курс 2024  
🟢 A11y:    • Accessibility курс 2024  
⚪️ Мастер-класс по верстке для новичков:    • Верстка Kropp Fitness (HTML, CSS)  
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Верстка Positivus (HTML, БЭМ, SCSS)  
🗺 Frontend Roadmap 2024    • Frontend Roadmap 2024 | Что должен уч...  

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/friendlyFrontend
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Solvery: https://solvery.io/mentor/aleksanderl...

#frontend #фронтенд #верстка #версткасайтов