No video

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

  Рет қаралды 26,209

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Күн бұрын

Привет! Новый марафон на канале) В этом видео верстаем лендинг с нуля до самого конца с помощью gulp, scss, css grid, БЭМ.
В этой части делаем адаптив сайта, это последняя часть марафона
github.com/max... - сборка Gulp
github.com/max... - готовая верстка на GitHub
www.figma.com/... - макет сайта
Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxg...
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Карта канала: blog.maxgraph....
Яндекс.Дзен: zen.yandex.ru/...
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_...
Тема VS Code: One Monokai
Шрифт VS Code: Consolas, 'Courier New', monospace
#ityoutubersru #марафонверстки #лендинг

Пікірлер: 132
@user-gx4kz9bb7q
@user-gx4kz9bb7q Жыл бұрын
Максим, спасибо за видео! 2 дня мучалась с Gulpом, никак не получалось подключить сборку, но не зря мучалась =) узнала оочень много нового для себя. Твоя подача материала просто супер
@knowledge9396
@knowledge9396 8 ай бұрын
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 Адаптив - Кнопка Бургер
@andreyfedyukin8360
@andreyfedyukin8360 Жыл бұрын
Спасибо! Очень полезный урок.
@marksonin9544
@marksonin9544 Жыл бұрын
Спасибо Мастер. Информативный, Полезный, Нужный контент. Погружаемся в обучение...
@_pheax
@_pheax Жыл бұрын
спасибо Макс .. дошел до конца ролика ;) . очень помогает понять сборку в работе, на практике, удачи автору
@romanhassazhyrov5558
@romanhassazhyrov5558 Жыл бұрын
Благодарю за выпуск. Запиши пожалуйста видео по новой сборке GULP и как пользоваться Webpack :)
@maxgraph
@maxgraph Жыл бұрын
Все это есть на канале)
@romanhassazhyrov5558
@romanhassazhyrov5558 Жыл бұрын
@@maxgraph видео по галп, уже 2 года)
@romanhassazhyrov5558
@romanhassazhyrov5558 Жыл бұрын
@@maxgraph этим видео уже 2 года.. актуальны?)
@fobianka2131
@fobianka2131 Жыл бұрын
спасибо за урок) для меня даже на скорости 1х быстро, такую вёрстку вижу второй раз, сама тем более так не верстала
@valerypobelenskiy1001
@valerypobelenskiy1001 Жыл бұрын
Максим огромное спсибо за твое время и труды) но интерактивности стало почему то меньше чем раньше ты заморачивался.....)
@maxgraph
@maxgraph Жыл бұрын
Это просто сайт простой. Будут сложнее
@user-lm9ee1gn5p
@user-lm9ee1gn5p Жыл бұрын
Спасибо большое
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
звук очень тихий!- но контент прекрасный
@maxgraph
@maxgraph Жыл бұрын
Почему тихий? Даже с заложенным ухом, с телефона, где громкость сама по себе не очень, прекрасно слышу.
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
@@maxgraph у других блогеров кто ведет марафоны по верстке отчетливо слышно, а на этом канале прислушиваться постоянно нужно, честно, не сочтите за наглость.
@user-zo6rp1xn8i
@user-zo6rp1xn8i 3 ай бұрын
Спасибо!❤
@user-bn6fl5yp2d
@user-bn6fl5yp2d 10 ай бұрын
спасибо) очень полезное и крутое видео
@dimasnytin
@dimasnytin Жыл бұрын
Круто🎉🎉🎉
@frd_11
@frd_11 Жыл бұрын
Макс приветствую! Благодарю за труды, и за то что делишься знаниями! Всегда есть что извлечь из марафонов) Хотел тебе кое-что подсказать по поводу исправления строк по stylelint. Суть в чём: Когда у тебя stylelint подчеркивает неправильное размещение строки, ты всегда выделяешь строку, вырезаешь, и вставляешь куда надо, так? есть путь короче (давно хотел тебе подсказать, руки не доходили написать). Можно просто поставить курсор на "ругающуюся" строку, зажать Alt, и стрелками вверх/вниз перемещать строку (только раскладка должна стоять eng).
@maxgraph
@maxgraph Жыл бұрын
Спасибо, но я привык так уже))
@andrey_ryzhko
@andrey_ryzhko Жыл бұрын
Тихий звук, под конец видео еще тише становится. Спасибо за марафон!
@maxgraph
@maxgraph Жыл бұрын
Звук не тихий. Прибавьте громкость)
@andrey_ryzhko
@andrey_ryzhko Жыл бұрын
@@maxgraph ошибаетесь, он действительно тихий.
@maxgraph
@maxgraph Жыл бұрын
У меня сейчас заложено ухо Включаю с телефона на середине Всё отлично слышу С компа уж молчу, идеально все
@orazaliorazali1000
@orazaliorazali1000 Жыл бұрын
Спасибо!
@TheRossnano
@TheRossnano Жыл бұрын
👍
@temikdrums
@temikdrums Жыл бұрын
🔥🔥🔥
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
41 vulnerabilities (15 moderate, 26 high) - вот что вывело в консоле после установки пакетов
@maxgraph
@maxgraph Жыл бұрын
Ничего страшного
@AlexYablochkinWebDesign
@AlexYablochkinWebDesign Жыл бұрын
Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.
@dquattro95
@dquattro95 9 ай бұрын
Максим, спасибо большое! Подскажи, можно как вариант, стили, к примеру, для кнопок .btn описывать в файле settings? Или прям отдельные компоненты создавать, хороший тон?
@maxgraph
@maxgraph 9 ай бұрын
Лучше в отдельные файлы все же) потом самому проще будет искать
@user-se6nj9qx9g
@user-se6nj9qx9g Жыл бұрын
Привет, спасибо за качественный контент. Вопрос: почему не используешь gulp-fonter и gulp-ttf2woff2 для автоматизации конвертации шрифтов?
@maxgraph
@maxgraph Жыл бұрын
Да не хочу)
@33mika777
@33mika777 Жыл бұрын
А что у Вас за плагин, который ругается в стилях на порядок атрибутов? Полезная вещь, хочу и себе такой.
@maxgraph
@maxgraph Жыл бұрын
Stylelint, урок есть на канале)
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
автор, вы красавчик! но вот беда с препроцессорами, не всегда видна вся структура файла со стилями, может есть возможность писать код, а потом переключаться на отображение сайта?- чтобы больше было видно структуры кода
@volklin
@volklin Жыл бұрын
Максим, привет! Спасибо за видео! У меня вопрос насчет Lazy Loading. Делал сайт для художника. Прокрутка картинок сделана через слайдер Swiper, которые лежат в теге Picture для разных размеров экрана. Есть ли смысл делать для img - lazy loading, если, например на Firefox, подгружается картинка в формате Webp ? Или может у Swiper есть такая функция, чтобы не все картинки сразу подгружались?
@maxgraph
@maxgraph Жыл бұрын
У свайпера есть свой лейзи, глянь доку)
@ssr.1989
@ssr.1989 Жыл бұрын
Привет, Максим! Я ищу на твоём канале видео вёрстки с JS, flex и scss, но не могу найти подходящее. Можешь подсказать видео или скинуть ссылку?
@dquattro95
@dquattro95 9 ай бұрын
Максим, подскажи плиз 1:25:41 почему обязательно нужно для блока .info__content задавать height: 100% ? я проверял, у меня контент центрируется норм, если просто min-height задать для .info
@maxgraph
@maxgraph 9 ай бұрын
Необязательно надо, просто это мои привычки)
@featureless6022
@featureless6022 5 ай бұрын
А из-за чего могут неработать паддинги?
@sartjhon3300
@sartjhon3300 9 ай бұрын
а кто именно ругается в vs-code? линтер какой то стоит, которому не нравится что counter-reset стоит не в начале?
@maxgraph
@maxgraph 9 ай бұрын
Stylelint
@sartjhon3300
@sartjhon3300 9 ай бұрын
@@maxgraph псб, весь день убил на знакомство и настройку, зато теперь моя лень может успокоится, ведь все мои стили автоматом красиво выстраиваются в правильном порядке ))
@AGDSGN
@AGDSGN Жыл бұрын
Здравствуйте. Спасибо за марафон. Вопрос по бургеру. Когда меню закрываешь, при этом если есть небольшой скролл на странице, происходит перемещение к верху страницы, потом назад на позицию откуда открывал меню. Как это поправить. Использовал вашу сборку.
@maxgraph
@maxgraph Жыл бұрын
А как сделан бургер?
@AGDSGN
@AGDSGN Жыл бұрын
@@maxgraph точно также как в видео.
@MultiEchelon
@MultiEchelon Жыл бұрын
Делаю все по видео и не могу подключить шрифты... (
@dmitryg.9533
@dmitryg.9533 Жыл бұрын
Привет, а есть видео где ты объясняешь свою сборку, то есть что за файлы по умолчанию, что за стили, настройки и тд?
@maxgraph
@maxgraph Жыл бұрын
Их несколько, по поиску про галп посмотри
@user-kc8ft5tz8l
@user-kc8ft5tz8l Жыл бұрын
Максим, ОЧЕНЬ ПРОШУ - объясни, как у тебя получается нажать на ссылку и не улететь после этого вверх, к шапке сайта. Например, в секции "partners" ( момент видео 1:36:23 ) у тебя даже не открывается отдельное окно, несмотря на то, что у нас там стоит target="_blank" ???! :-) В чем магия - просвети! Надо при этом какую-то клавишу держать нажатой или в браузере какой-то режим установить??? А то надоедает всякий раз возвращаться обратно к нужной секции.
@maxgraph
@maxgraph Жыл бұрын
Это я клавишей таб с клавиатуры нажал)
@user-kc8ft5tz8l
@user-kc8ft5tz8l Жыл бұрын
@@maxgraph Спасибо! :-)
@PomidorkaDe
@PomidorkaDe Жыл бұрын
Привет, заранее прошу прощения за глупый вопрос, подскажи пожалуйста, после того как закончил проект с твоей галп сборкой, сделал gulp build, как отправить папку app на удалённый реп github, а не все файлы?
@PomidorkaDe
@PomidorkaDe Жыл бұрын
UPD: порешал установкой gh-pages и gulp-gh-pages, тем самым теперь сайт открывается по линку гитхаба
@maxgraph
@maxgraph Жыл бұрын
В гит игноре прописать можно то, что не надо отправлять
@user-xt1ns1br7o
@user-xt1ns1br7o Жыл бұрын
Первый экран это слайдер, а снизу пагинация, видимо дизайнер забыл сделать активное состояние и добавить слайды.
@maxgraph
@maxgraph Жыл бұрын
Не думаю так =)
@Loveispanec
@Loveispanec Жыл бұрын
Я к стати тоже подумал, что в секции hero слайдер, а не просто картинка и ссылки и ниже видать тоже или табы или слайдер есть
@nikitabogus5541
@nikitabogus5541 Жыл бұрын
Максим, подскажи, плиз. Ввожу команду gulp в терминале, а выдает ошибку красными буквами: gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правил ьность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@maxgraph
@maxgraph Жыл бұрын
Галп не установлен возможно. Вбей ошибку в гугл)
@user-kc8ft5tz8l
@user-kc8ft5tz8l Жыл бұрын
Видимо, видео СТОЛЬ ПРЕКРАСНО, что все увлеклись версткой и абсолютно не обратили внимание на реквизиты к нему после даты публикации... Они в точности от макета Createx: "5 788 просмотров Дата премьеры: 7 янв. 2022 г. Верстка с нуля до выгрузки на хостинг №7, и так далее"! 🙂 Что ж - значит и мне нужно просмотреть!!! 😄
@maxgraph
@maxgraph Жыл бұрын
Поменял))
@user-ev4fg2ui7s
@user-ev4fg2ui7s Жыл бұрын
Добрый день. Почему вы используете стандартное создание переменных? А не то что есть у scss?
@maxgraph
@maxgraph Жыл бұрын
Здравствуйте. Больше нравится) да и доступ через js иногда нужен
@Small2202
@Small2202 Жыл бұрын
Здравствуйте, объясните для чего в данном проекте нужна сборка? как потом сайт залить на обычный хостинг?
@maxgraph
@maxgraph Жыл бұрын
Здравствуйте Просто сделал с помощью сборки, для этого не нужны причины) Можете выполнить команду gulp build и содержимое папки app выложить на хостинге
@andreyfedyukin8360
@andreyfedyukin8360 Жыл бұрын
Добрый день. В Вашем браузере есть закладка "Крутые сайты", могли бы Вы поделиться своей подборкой хороших сайтов для изучения? Спасибо.
@maxgraph
@maxgraph Жыл бұрын
Как нибудь))
@SergiyPolar
@SergiyPolar Жыл бұрын
Когда марафон по winter cms? 2 зимы ужо прошло 🤣
@maxgraph
@maxgraph Жыл бұрын
Я про него уже рассказывал. Как будет так будет)
@sartjhon3300
@sartjhon3300 8 ай бұрын
ок, след вопрос ) почему у тебя :active на ссылке меню перебивает @media(any-hover: hover) ведь стили медиазапросов пишутся ниже и ховер должен был перебить актив... как у меня ((
@maxgraph
@maxgraph 8 ай бұрын
я пишу active под ховером, потому и перебивает)
@sartjhon3300
@sartjhon3300 8 ай бұрын
@@maxgraph та нет же. Сборщик потом все равно все медиазапросы вниз втулит.
@maxgraph
@maxgraph 8 ай бұрын
@@sartjhon3300 почему это? если ему этого никто не скажет, ничего не втулит :)
@sartjhon3300
@sartjhon3300 8 ай бұрын
@@maxgraph разве это не обычная работа сборщика, группировать все медиа ниже всех остальных стилей?
@maxgraph
@maxgraph 8 ай бұрын
Вовсе нет)
@knowledge9396
@knowledge9396 5 ай бұрын
00:08:54 - Если у ссылки удаляется href, зачем тогда вообще использовать использовать ссылку?
@maxgraph
@maxgraph 5 ай бұрын
У сайта может появиться вторая страница, тогда href будет нужен
@knowledge9396
@knowledge9396 5 ай бұрын
@@maxgraph То есть, это исключительно задел на будущее, и не как не связано с семантической ролью ссылки?
@maxgraph
@maxgraph 5 ай бұрын
Да
@pavel.88
@pavel.88 Жыл бұрын
TOP!
@_fulgrim_9865
@_fulgrim_9865 9 ай бұрын
Скажите пожалуйста, как сделать в этой сборке переход на вторую страницу, делаю многостраничный сайт)
@maxgraph
@maxgraph 9 ай бұрын
Просто добавьте ещё один html файл рядом с index
@_fulgrim_9865
@_fulgrim_9865 9 ай бұрын
в gulp файле? @@maxgraph
@_fulgrim_9865
@_fulgrim_9865 9 ай бұрын
Cannot GET /src/page.html ошибка это вторая страница рядом с index.html
@_fulgrim_9865
@_fulgrim_9865 9 ай бұрын
c этим получилось)Спасибо. Вот только SCSS выдаёт ошибку Refused to apply style from 'localhost:3000/css/main.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
@bee0to1million
@bee0to1million Жыл бұрын
Макс подскажи, почемуто не отображаються картинки и svg в папках они есть . А на страницу не выводит почемуто
@maxgraph
@maxgraph Жыл бұрын
Не могу так угадать)
@bee0to1million
@bee0to1million Жыл бұрын
@@maxgraph спасибо за ответ, ценю твою работу и время, спасибо за твою работу
@bee0to1million
@bee0to1million Жыл бұрын
Но всёже не работает, не показывает svg и png. Я их подключаю просто через img, или их надо подключать через picture?
@user-frond-end_dev
@user-frond-end_dev Жыл бұрын
будет продолжение?, как это все залить на хостинг
@maxgraph
@maxgraph Жыл бұрын
Нет, только вёрстка
@user-gz8pt7cc3m
@user-gz8pt7cc3m Жыл бұрын
С гит хаба все загрузилось ба проект не грузится пишет вот что: "gulp" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.
@maxgraph
@maxgraph Жыл бұрын
Установите галп в систему
@user-gz8pt7cc3m
@user-gz8pt7cc3m Жыл бұрын
@@maxgraph всё заработало , Спасибо!!!
@user-gz8pt7cc3m
@user-gz8pt7cc3m Жыл бұрын
В терминале проекта процентов 30 красным отмечено ошибки какие то,первый раз с галп работаю
@maxgraph
@maxgraph Жыл бұрын
Значит стоит изучить галп, погуглить ошибки и тд
@Alexus1504
@Alexus1504 Жыл бұрын
Поговаривают, что Chat GPT скоро будет делать сайты только так!?????)) Возникает резонный вопрос.....
@alexanderfreeman2818
@alexanderfreeman2818 Жыл бұрын
Chat GPT уже начинают запрещать, во всяком случае в Италии он уже запрещён
@maxgraph
@maxgraph Жыл бұрын
"скоро" - это когда?) да и сомневаюсь, что он сможет написать какую-то адекватную логику)
@Alexus1504
@Alexus1504 Жыл бұрын
@@maxgraph Так вроде простой код он уже пишет?!
@maxgraph
@maxgraph Жыл бұрын
Ну да, простой пишет) но простого мало
@user-dk2nk5om2w
@user-dk2nk5om2w Жыл бұрын
​@@maxgraph он же развивается, скоро и сложный сможет
@mamehala4660
@mamehala4660 Жыл бұрын
У меня в фигме нет на панели layout grid 😒
@maxgraph
@maxgraph Жыл бұрын
Копию макета сделайте
@tytfacty
@tytfacty Жыл бұрын
перезапускаю vsc, сниппеты не работают, в чем может быть проблема?
@maxgraph
@maxgraph Жыл бұрын
Не знаю. Ещё раз перезапустить надо)
@AerO777DragoN
@AerO777DragoN 11 ай бұрын
Такая же проблема, перезапускал несколько раз VS Code
@bimal163
@bimal163 Жыл бұрын
скажите пожалуйста - почему при скачивании сборки галп не все файлы в архиве ?
@maxgraph
@maxgraph Жыл бұрын
Не все - это какие?
@roflan_prostreamer
@roflan_prostreamer Жыл бұрын
@@maxgraph нет папки .vscode со сниппетами
@maxgraph
@maxgraph Жыл бұрын
Включите в системе показ скрытых файлов) все есть
@roflan_prostreamer
@roflan_prostreamer Жыл бұрын
@@maxgraph теперь понял, почему не видно было, спасибо за подсказку)
@androsikys
@androsikys Жыл бұрын
тихо
@maxgraph
@maxgraph Жыл бұрын
Что не так? Смотрю с телефона БЕЗ наушников не на полной громкости - все слышу. Про компьютер уже молчу)
@MrNicePlant
@MrNicePlant Жыл бұрын
где остальные уроки
@maxgraph
@maxgraph Жыл бұрын
Зачем остальные? Тут один урок все верно
@MarselNz
@MarselNz 11 ай бұрын
1:43:46 5 считаем, 1 в уме?)))
@maxgraph
@maxgraph 11 ай бұрын
?
@evaito
@evaito Жыл бұрын
голова кипит 😶‍🌫
@razl0m425
@razl0m425 Жыл бұрын
А в чем смысл делать focus через js по классу?
@maxgraph
@maxgraph Жыл бұрын
Чтобы фокус работал только с клавиатуры
Адаптивная верстка сайтов. Общая теория и примеры
34:29
MaxGraph - cайты как страсть
Рет қаралды 10 М.
CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS
49:33
Prank vs Prank #shorts
00:28
Mr DegrEE
Рет қаралды 11 МЛН
Magic trick 🪄😁
00:13
Andrey Grechka
Рет қаралды 58 МЛН
Адаптивная верстка сайта на HTML CSS
2:00:35
ВебКадеми | Юрий Ключевский
Рет қаралды 117 М.
Налог на незнание JavaScript - [Hamster Kombat]
50:20