Прохожу марафон вместе с ребятами, максимально понятные объяснения. Поймет даже камушек. Поэтому рекомендую! В беде вас не оставят, всегда есть кому ответить на ваш вопрос.
CodeQuest, привет, возможно знаешь, как исправить ошибку: "gulp-notify: [HTML] Cannot read properties of null (reading '0')" ? Она возникает при указании alt в элементе img. И соответственно alt не попадает в public версию
Не решил проблему, но понял происхождение Так работает: Так нет: А переносы делает "Prettier - Code formatter v9.5.0" То есть такие переносы не перерабатываются плагином?(
Очень качественно все показано и рассказано. Автор молодец, сразу видно что старается. Успех и процветания твоему каналу. Супер годный контент. Спасибо! 🔥👍
@@CodeQuestRu button-Обычная кнопка. reset-Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние. submit-Кнопка для отправки данных формы на сервер.
Я сильно извиняюсь, а как же поведение интерактивных элементов в фокусе? Я конечно понимаю, что это больше про доступность и тема обширнейшая, но логично приучать таким вещам, что б выработался рефлекс до автоматизма 🙂
У меня возникла проблема. Пользуюсь вашей сборкой гальп. Первая проблема, это то, что некорректно работает свойство sourcemaps. Просто неверно отображает информацию, всё перемешивает. А во-вторых, на моменте, когда мы ставили картинки на бекграунд, у меня не верно переводит значение из scss в css. Под видео со сборкой гальп, кто то писал, что это webp css, меняет значения из support. Как убрать webp css со сборки? (я её у вас по подписке скачал)
@@CodeQuestRu если это всё указывать в ряд, т.е: background-image: url("../img/promo-house.png") no-repeat top 138px right 0, url("../img/promo-star.png") no-repeat top 16px left 26px;, то работать будет. Но мне важно понять, почему оно не верно работает, при абсолютно схожей сборке у меня, а вас это работало.
Всё круто! Только один момент смутил: для .promo__contact сделали margin-top: 50px. А если его наполнение изменится (а значит и высота) - снова подгадывать отступ сверху? :) Мне кажется, тут просится выравнивание по низу для .promo (align-items: flex-end) и при необходимости - уже играть отступом снизу у .promo__contact.
Хоть я и новичок, очень странную вещь увидел в nav зачем постоянно сбрасывать стили, если можно было файл reset.scss создать чтобы сбросить все стили. и отступ справа в списке лучше делать, чтобы у последнего элемента не было отступа.
@@CodeQuestRu трудно обучаться, когда у всех все по-разному, хотя у всех опыт по 10-15 лет и в Яндексе и иностранных компаниях, но каждый говорит что у другого что-то не так ( как с ремонтом, каждый мастер приходит и спрашивает кто это говно сделал
@@CodeQuestRu так в том то и дело что трудно)) 2 знакомых есть, один синьер фронтенд в Яндекст Деньгах в спб года 3 работает, воторой фронтенд в джет брейнс и у оба друг друга код засерают
Нет, не лучше. Потому что навигация nav-list у нас может размещаться в нескольких местах макета, например, в подвале. А nav у нас будет только один у основного меню
Не сработали фоновые изображения таким образом как в видео, тайм код 37:24 background-color: $color-bg-promo; background-image: url("../img/promo-house.png"), url("../img/bg-star.svg"); background-repeat: no-repeat, no-repeat; background-position: top 138px right 0, top 16px left 26px; Код выше сконвертировался в такую строку: url("../img/promo-house.png"), url("../img/bg-star.svg") no-repeat top 138px right 0 #F7F7F7 Сработал такой подход в лоб: background: url('../img/promo-house.png') no-repeat right 0 top 138px, $color-bg-promo url('../img/bg-star.svg') no-repeat top 16px left 26px;
0:00 - Анализ макета Figma
1:58 - Разметка шапки
5:57 - Размечаем промо-блок
12:49 - Стилизация шапки на Sass
14:57 - Главная навигация
18:41 - Оформление кнопок
20:57 - Блок смены языка
24:43 - Оформляем промо-блок
27:42 - Рейтинг
30:50 - Стилизуем список клиентов
33:14 - Блок контактов
35:49 - Фоновые изображения
37:27 - Pixel Perfect
Огромное спасибо за уроки! Среди всех роликов что я видел, у вас - самые топовые, самые полезные! Спасиибоо!
Спасибо за добрые слова =)
Прохожу марафон вместе с ребятами, максимально понятные объяснения. Поймет даже камушек. Поэтому рекомендую! В беде вас не оставят, всегда есть кому ответить на ваш вопрос.
Спасибо за видео! Всё очень доступно, много нового узнал и ещё есть, что узнавать ;)
Спасибо большое, для себя взял про БЭМ, прикольно выделяется практически каждую сущность.
Да, это очень удобно =)
Очень крутой ролик)
Что делает свойство font()?
Спасибо!
Мы же в ролике написали этот миксин. рассчитывает высоту строки в виде коэффициента и выводит его вместе с размером шрифта =)
Объяснения хорошие, только как можно верстать без ссылок на макет? Хотя бы в виде одной большой картинки.
Макет был на патреоне, сейчас перенесу на boosty
CodeQuest, привет, возможно знаешь, как исправить ошибку:
"gulp-notify: [HTML] Cannot read properties of null (reading '0')" ?
Она возникает при указании alt в элементе img. И соответственно alt не попадает в public версию
Не решил проблему, но понял происхождение
Так работает:
Так нет:
А переносы делает "Prettier - Code formatter
v9.5.0"
То есть такие переносы не перерабатываются плагином?(
Скорее всего проблема в каком-то из пакетов HTML, надо попробовать поотключать их и посмотреть, что будет
Макет не выложил? Хотел поверстать вместе а макета нет.
Это закрытый марафон, все макеты и исходники на патреоне =)
Очень качественно все показано и рассказано. Автор молодец, сразу видно что старается. Успех и процветания твоему каналу. Супер годный контент. Спасибо! 🔥👍
Спасибо =)
Добрый день! И где обещанная сборка gulp, после подписки?
Добрый день, а вы где подписались?
почему не указываете тип кнопок type button
Можно указывать, но вне формы все кнопки и так имеют тип "button"
@@CodeQuestRu
button-Обычная кнопка.
reset-Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
submit-Кнопка для отправки данных формы на сервер.
@@Medve.d я в курсе. Но по умолчанию без указания типа тег button имеет тип button вне формы, и submit внутри формы. Поэтому можно явно и не указывать
а где макет взять🤔
Макет на патреоне для участников марафона. Там мы его уже закончили полностью, видео запишу по мере возможности
Я сильно извиняюсь, а как же поведение интерактивных элементов в фокусе? Я конечно понимаю, что это больше про доступность и тема обширнейшая, но логично приучать таким вещам, что б выработался рефлекс до автоматизма 🙂
Согласен, можно было учесть
У меня возникла проблема. Пользуюсь вашей сборкой гальп. Первая проблема, это то, что некорректно работает свойство sourcemaps. Просто неверно отображает информацию, всё перемешивает. А во-вторых, на моменте, когда мы ставили картинки на бекграунд, у меня не верно переводит значение из scss в css. Под видео со сборкой гальп, кто то писал, что это webp css, меняет значения из support. Как убрать webp css со сборки? (я её у вас по подписке скачал)
Можно зайти в задачу img и там убрать плагин webp, также и в scss
@@CodeQuestRu спасибо, попробую. Просто странно, что у вас та же сборка, и на видео всё работает, а у меня нет =(
@@CodeQuestRu если это всё указывать в ряд, т.е: background-image: url("../img/promo-house.png") no-repeat top 138px right 0, url("../img/promo-star.png") no-repeat top 16px left 26px;, то работать будет. Но мне важно понять, почему оно не верно работает, при абсолютно схожей сборке у меня, а вас это работало.
@@CodeQuestRu это дело в сборке или в чём то ещё? что бы в других задачах не возникало таких проблем
@@serglebed2340 сейчас не смогу сказать, нужно будет поразбираться
Всё круто! Только один момент смутил: для .promo__contact сделали margin-top: 50px. А если его наполнение изменится (а значит и высота) - снова подгадывать отступ сверху? :) Мне кажется, тут просится выравнивание по низу для .promo (align-items: flex-end) и при необходимости - уже играть отступом снизу у .promo__contact.
Привет дружище. С меня как всегда лайк и комментарии.
Надеюсь видео пригодилось =)
@@CodeQuestRu Как всегда, все очень доступно. Молодчина! !
Хоть я и новичок, очень странную вещь увидел в nav зачем постоянно сбрасывать стили, если можно было файл reset.scss создать чтобы сбросить все стили. и отступ справа в списке лучше делать, чтобы у последнего элемента не было отступа.
Любые глобальные стили, включая сбросы, противоречат методологии БЭМ и делают блоки менее независимыми и универсальными
@@CodeQuestRu трудно обучаться, когда у всех все по-разному, хотя у всех опыт по 10-15 лет и в Яндексе и иностранных компаниях, но каждый говорит что у другого что-то не так ( как с ремонтом, каждый мастер приходит и спрашивает кто это говно сделал
@@anatolyannenko1821 для этого есть документация) а дальше выбирать только вам, кому верить, а кто учит не правильно =)
@@CodeQuestRu так в том то и дело что трудно)) 2 знакомых есть, один синьер фронтенд в Яндекст Деньгах в спб года 3 работает, воторой фронтенд в джет брейнс и у оба друг друга код засерают
В чем прикол использовать letter-spacing: 0.02em? Это ж, по сути, 0.32px и визуально никакого эффекта он не окажет. Лишний кусок кода.
Ну если лишний, не используй)
nav
nav__list
nav__item
nav__link
так лучше
Нет, не лучше. Потому что навигация nav-list у нас может размещаться в нескольких местах макета, например, в подвале. А nav у нас будет только один у основного меню
@@CodeQuestRu если это отдельный блок который вы думаете пере использовать то лучше не задавать такой класс
Не сработали фоновые изображения таким образом как в видео, тайм код 37:24
background-color: $color-bg-promo;
background-image: url("../img/promo-house.png"), url("../img/bg-star.svg");
background-repeat: no-repeat, no-repeat;
background-position: top 138px right 0, top 16px left 26px;
Код выше сконвертировался в такую строку:
url("../img/promo-house.png"), url("../img/bg-star.svg") no-repeat top 138px right 0 #F7F7F7
Сработал такой подход в лоб:
background: url('../img/promo-house.png') no-repeat right 0 top 138px, $color-bg-promo url('../img/bg-star.svg') no-repeat top 16px left 26px;