Создание сайта с нуля + адаптивная вёрстка по макету! HTML | SCSS | БЭМ

✍️Курс: Вёрстка сайта с нуля до результата, используя современные технологии - SCSS, html, БЭМ.

Что разрабатываем: в данном видео создаём сайт на html и css с нуля, также я объясняю методологию БЭМ простым языком и показываю на реальном примере как делается адаптивная вёрстка сайта.

Рекомендую изучать новичкам, которые уже смотрели обучающие видеоматериалы по вёрстке и понимают как работает HTML и CSS + желательно понимать принцип работы flexbox.

📹Тайм-коды к видеокурсу:
00:00 - БЕСПЛАТНЫЙ фидбэк по твоему коду!
01:20 - анализ макета перед вёрсткой + разбор мышления верстальщика
07:57 - зачем нам NodeJS и как будем писать на SCSS
09:17 - установка плагина + демонстрация компиляции SCSS в CSS
13:10 - как я запускаю проект
16:21 - объяснение работы моего шаблона для вёрстки любых проектов с нуля
26:45 - начало вёрстки проекта
29:40 - поясняю за БЭМ простым языком
34:38 - продолжаем верстать часть первую
35:42 - стилизация первого экрана
42:18 - что делать, когда Figma заблокировала режим разработчиков(
42:57 - вёрстка dashboard
44:50 - стилизуем dashboard
50:47 - как я делаю подбор параметров для псевдоэлементов
51:38 - фиксим z-index и продолжаем вёрстку
52:37 - делаем стилизацию нижней части страницы с помощью clip-path
55:25 - фиксим баги в стилях и вёрстке
56:20 - вёрстка второго экрана лендинга
59:30 - стилизация второго экрана
1:02:08 - жёсткий тупняк и замыленный взгляд
1:04:03 - продолжаем верстать
1:04:49 - анализ дальнейшей вёрстки
1:05:05 - вёрстка третьего экрана лендинга
1:07:20 - добавляем стили для третьего экрана
1:09:06 - вёрстка pricing plans (4 экран)
1:12:13 - стилизация 4 экрана
1:14:00 - делаем скос на последнем блоке
1:15:16 - продолжаем стилизовать компоненты
1:17:30 - внезапно домашнее задание
1:17:44 - важный фикс вложенности!
1:18:05 - меняем классы в соответствии с БЭМ
1:18:45 - доделываем псевдоэлементы и элементы тарифов с ценами
1:20:25 - верстаем footer
1:24:00 - стилизация footer
1:24:30 - правим баг с линией
1:25:40 - стилизуем далее footer
1:28:00 - добавляем эффекты при наведении
1:29:40 - анализ дальнейшей вёрстки
1:31:28 - вёрстка бургер-меню
1:33:53 - начало адаптивной вёрстки
1:36:00 - принцип работы кнопки-бургер
1:40:00 - фиксим проблемы
1:42:42 - адаптив dashboard
1:50:37 - wrap-padding и адаптив оставшейся части
2:02:14 - секретная фича windows + мой курс по VS Code
2:03:40 - финал и подведение итогов!

✏️Автор курса:
— Telegram: @IT_shopen

Готовый проект на Github: https://github.com/Shopen101/landing-...

Каркас, чтобы сделать самому с нуля: https://github.com/Shopen101/landing-...

Получить бесплатный code review - https://t.me/+kLGXXG20XdIyZGQy
Макет сайта из курса в Figma - https://t.me/Figmab/487

Благодарю за просмотр!

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