Адаптивная верстка сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Макет Recidiviz

Привет! Новый марафон на канале) В этом видео верстаем лендинг с нуля до самого конца с помощью gulp, scss, css grid, БЭМ.

В этой части делаем адаптив сайта, это последняя часть марафона

Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

Тема VS Code: One Monokai
Шрифт VS Code: Consolas, 'Courier New', monospace

#ityoutubersru #марафонверстки #лендинг

[marksonin]

Спасибо Мастер. Информативный, Полезный, Нужный контент. Погружаемся в обучение...

[gxkzbbq]

Максим, спасибо за видео! 2 дня мучалась с Gulpом, никак не получалось подключить сборку, но не зря мучалась =) узнала оочень много нового для себя. Твоя подача материала просто супер

[_pheax]

спасибо Макс .. дошел до конца ролика ;) . очень помогает понять сборку в работе, на практике, удачи автору

[romanhassazhyrov]

Благодарю за выпуск. Запиши пожалуйста видео по новой сборке GULP и как пользоваться Webpack :)

[fobianka]

спасибо за урок) для меня даже на скорости 1х быстро, такую вёрстку вижу второй раз, сама тем более так не верстала

[bnflypd]

спасибо) очень полезное и крутое видео

[frd_]

Макс приветствую!
Благодарю за труды, и за то что делишься знаниями! Всегда есть что извлечь из марафонов)
Хотел тебе кое-что подсказать по поводу исправления строк по stylelint.
Суть в чём:
Когда у тебя stylelint подчеркивает неправильное размещение строки, ты всегда выделяешь строку, вырезаешь, и вставляешь куда надо, так?
есть путь короче (давно хотел тебе подсказать, руки не доходили написать).
Можно просто поставить курсор на "ругающуюся" строку, зажать Alt, и стрелками вверх/вниз перемещать строку (только раскладка должна стоять eng).

[valerypobelenskiy]

Максим огромное спсибо за твое время и труды) но интерактивности стало почему то меньше чем раньше ты

[knowledge]

00:03:05 Сборка Gulp
00:08:21 section - header
00:11:05 Класс grid и flex
00:16:14 section - header - Фон для секции hero
00:20:44 Подключение шрифтов
00:25:38 section - header - focus hover active
00:29:35 section - hero
00:33:12 Компонент кнопки
00:37:13 section - hero - Несоответствие фонового изображения
00:38:00 section - hero - Список ссылок
00:43:55 section - hero - focus hover active
00:45:51 section - steps
00:51:45 section - steps - Применение CSS counters
00:54:15 section - steps - Декорирование списка
00:57:43 section - approach
01:06:55 Применение img srcset
01:11:15 section - approach__bottom
01:18:49 section - info
01:27:52 section - partners
01:34:42 section - partners - focus hover active
01:36:29 img graphics
01:38:43 section - information
01:44:50 section - information - grid внутри grid
01:48:01 img graphics - Корректировка
01:50:03 section - press
02:06:48 section - where
02:12:06 footer
02:24:56 section - press, footer - focus hover active
02:29:44 Адаптив - Планшет
02:38:07 Адаптив - Мобильный
02:49:44 Адаптив - Кнопка Бургер

[AlexYablochkinWebDesign]

Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям, где хотим также интегрировать карту, слушай, есть ли у тебя исходных код или гайд, или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты, она увеличилась ?Буду благодарен за ответ.

[frond-end_dev]

автор, вы красавчик! но вот беда с препроцессорами, не всегда видна вся структура файла со стилями, может есть возможность писать код, а потом переключаться на отображение сайта?- чтобы больше было видно структуры кода

[volklin]

Максим, привет!
Спасибо за видео!
У меня вопрос насчет Lazy Loading.
Делал сайт для художника. Прокрутка картинок сделана через слайдер Swiper, которые лежат в теге Picture для разных размеров экрана.
Есть ли смысл делать для img - lazy loading, если, например на Firefox, подгружается картинка в формате Webp ?
Или может у Swiper есть такая функция, чтобы не все картинки сразу подгружались?

[ssr.]

Привет, Максим!

Я ищу на твоём канале видео вёрстки с JS, flex и scss, но не могу найти подходящее. Можешь подсказать видео или скинуть ссылку?

[dquattro]

Максим, спасибо большое!
Подскажи, можно как вариант, стили, к примеру, для кнопок .btn описывать в файле settings? Или прям отдельные компоненты создавать, хороший тон?

[andrey_ryzhko]

Тихий звук, под конец видео еще тише становится. Спасибо за марафон!

[mika]

А что у Вас за плагин, который ругается в стилях на порядок атрибутов? Полезная вещь, хочу и себе такой.

[dquattro]

Максим, подскажи плиз 1:25:41
почему обязательно нужно для блока .info__content задавать height: 100% ? я проверял, у меня контент центрируется норм, если просто min-height задать для .info

[AGDSGN]

Здравствуйте. Спасибо за марафон. Вопрос по бургеру. Когда меню закрываешь, при этом если есть небольшой скролл на странице, происходит перемещение к верху страницы, потом назад на позицию откуда открывал меню. Как это поправить. Использовал вашу сборку.

[frond-end_dev]

звук очень тихий!- но контент прекрасный

[senjqxg]

Привет, спасибо за качественный контент. Вопрос: почему не используешь gulp-fonter и gulp-ttf2woff2 для автоматизации конвертации шрифтов?