Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse

Адаптивная HTML SCSS верстка сайта из Figma лендинга жилого комплекса LoftHouse.

Верстка по пакету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. JS скрипты для маски номера телефона, скрипт для youtube lightbox видео, скрипт для yandex карты с кастомным пином, тонкой CSS стилизацией и JS настройкой карты.

Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:

00:00 Обзор проекта
01:49 Курс по верстке сайтов
04:07 Сборка SCSS в редакторе VS Code
07:20 Структура SCSS файлов
12:55 Шрифты
20:54 Переменные. Цвета
23:58 Базовые стили

Верстка десктоп

26:39 Шапка. Фон
34:53 Шапка. Навигация
51:28 Шапка. Заголовок и адрес
1:12:27 Секция Benefits c иконками
1:25:25 Секция "Наши квартиры"
1:30:35 Стили для отдельной карточки
1:54:09 Секция CTA. Форма заявки
2:16:59 Секция с видео
2:31:17 Секция с картой
2:35:07 Секция Feedback. Форма заявки
2:41:29 Подвал
3:00:36 Декор элементы
3:14:23 Миксин для декор элементов

Мобильная адаптация

3:19:47 Мобильная адаптация. Медиазапрос и миксин
3:27:50 Адаптация шапки
3:36:21 Иконка моб навигации
3:39:36 Мобильная навигация CSS
3:51:54 Мобильная навигация JS
3:58:29 Адаптация секции Benefits
4:05:40 Адаптация секции с карточками
4:12:56 Адаптация секции CTA
4:18:30 Адаптация секции с видео
4:20:46 Адаптация секции с картой
4:22:31 Адаптация секции Feedback
4:24:55 Адаптация подвала
4:27:10 Оптимизация графики

JS Скрипты

4:31:19 JS маска для номера телефона
4:37:43 JS lightbox для youtube видео

Yandex карта

4:42:04 Регистрация в API Yandex карт
4:43:32 Подключение карты на страницу
4:46:30 Центр карты
4:48:12 Кастомная метка
4:54:24 Baloon. Инфобокс с адресом
4:55:42 Настройка и стилизация отображения карты
5:04:50 Финал

[rwgnube]

Благодарю вас Юрий за ваш труд! Контент на отлично!

[gzptccm]

Спасибо огромное за Ваш труд, всё доступно объясняли, всё получилось как у Вас!!!

[iT_Yakuza]

Классный урок! Благодарю! по подаче - все понравилось, без воды, все понятно и по делу.

[АндрейЗак]

как всегда много нового и интересного, простыми словами и на наглядном примере)) спасибо за видео

[mialii]

Спасибо за урок! Очень много взяла для себя нового)

[KonstantinValov]

Добрый день!). Выполнил всë по видео не торопясь за 12+ часов.
Получил кучу опыта и закрепил знания с Вашего курса по вëрстке. Спасибо за видео!).
Очень понравилось, что в проекте 1 точка перелома для адаптации, а так же полный курс работы с Яндекс картой + работа с grid.
Огромное спасибо!!!

[joonlorka]

Спасибо, очень интересно и макет подобрали отличный!

[shishmakov]

Прекрасный дизайн, очень подробное объяснение, спокойный голос и качественный микрофон. Делал сайты с CSS, теперь узнал про SCSS, миксины, как карту прикрепить и стилизовать. Поставил два лайка (с двух аккаунтов)

[ivangorshinev]

Приятно наблюдать как Вы, Юрий, развиваетесь как преподаватель) Новый формат, я уверен, людям зайдет! 👍 Спасибо за новую порцию мотивации🙌

[pnnstmi]

Добрый день. Спасибо за отличный контент! Было бы здорово, если бы сделали подробный урок по валидации и отправке форм. Особенно на примере с маской для международных телефонов.

[zjytxgr]

Очень жду новых уроков от вас. Все понятно, легко учиться и запоминается на ваших примерах. P.S. Я сейчас нарабатываю практику и искал что-то с SCSS, и наткнулся на это видео. Именно с него я начал знакомство с данным каналом. После верстки этого макета, я нашел запись годичной давности в трансляциях, где также использовался SCSS. Было немного неудобно делать его, потому что, ссылаясь на комментарий внизу, уровень преподавания кардинально отличается. В этом видео я впитывал информацию о том, как нужно верстать. В видео годичной давности я сам хотел подсказывать вам в некоторых моментах, опираясь на знания, полученные из этого ролика. Очень жду новых сложных версток с использованием разных тонкостей. Спасибо вам большое!

[Anatoli-bqpe]

Обязательно надо сверстать! У Юрия реально дар преподавать Frontend)

[akhmad_goytinski]

Спасибо Юрий за видео! Всё отлично получилось, работал на локальном сервере Open Server Panel - 6, новая версия. Макет, материалы и готовый код нашёл. Получил огромный опыт с Вашего видео курса. С уважением Ахмад

[gtaplayer]

Всем привет! Отлично, применение SCSS, Grid и Flexbox, JS 👍

[rwwisqe]

@WebCademy, Спасибо за отличный урок . Макет классный. Фичи отличные. Сделать получилось. Как пожелание на будущее покажи js lightbox, JS маска для номера телефона на gulp как их подключать и т.д.. И уроки scss нужны на канал про миксины и т.д некий обзор с примерами показать зачем они нужны + в каких вариантах их стоит прописывать. Коллегам и друзьям данное видео и школу буду рекомендовать и т.д.

[katenka_katrusya]

Огромнейшее спасибо за такое видео! Всё очень полезно. Я первый раз работала с scss, настроила только в Вебшторме, уж очень мне полюбился, пришлось попыхтеть, но на будущее явно это пригодится. Очень ценно, что делитесь такими полезностями, как маска для телефонных номеров, вы просто экономите кучу времени тем, кому это пригодится. Миксины - вещь, очень удобно.
Сначала подключала скрипты в head через defer, но потом пошло что-то не так и видео открывалось не так)), ну что жжжж, пришлось подключить в конце боди, не получилось повыделываться). Ещё очень красивый макет, прям зашёл, захотелось всем показать потом готовую страничку 😁.
Просто вау, что показали как подключить карту.
Ваш контент замечательный. Я столько времени пыталась найти толковое видео по вёрстке с фичами, а тут вы, совпало всё: и макет красивый, и видео на странице, и карта, и анимации изображений. Столько всего полезного, спасибо вам огромное за качественный контент!

[DaniaSigida]

Вот на счёт <br> я даже очень согласен, почему то масса верстальщиков его боятся как огня! ой а если потом заголовок будет менятся и перенос надо будет с третьего слова..., ну перенеси тэг... если есть сомнения можно ограничить контейнер и поставить тэг есле надо или убтарь есле не надо...

[antonbobryshev]

Заметил такой момент: при перестроении карточек в apartments на разрешении менее 640px карточки не встают по центру. Думаю, нужно добавить изначально в .card: {margin: 0 auto}; Тогда все смотрится как надо по центру!

[pohylth]

Добрый день! Можете ли сделать пример с подключением Google карти?

[mihascooter]

Я ещё только, учусь прохожу уроки по портфолио))