Создание сайта с нуля + адаптивная вёрстка по макету! 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: Каркас, чтобы сделать самому с нуля: Получить бесплатный code review - Макет сайта из курса в Figma - Благодарю за просмотр! #frontend #фронтенд #вёрстка
