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
@pablodehulio4006
Жыл бұрын
Огромное спасибо за уроки! Среди всех роликов что я видел, у вас - самые топовые, самые полезные! Спасиибоо!
@CodeQuestRu
Жыл бұрын
Спасибо за добрые слова =)
@dennymaverick5472
2 жыл бұрын
Спасибо за видео! Всё очень доступно, много нового узнал и ещё есть, что узнавать ;)
@UCnBUnAmcvCs8FePEtmn
2 жыл бұрын
Прохожу марафон вместе с ребятами, максимально понятные объяснения. Поймет даже камушек. Поэтому рекомендую! В беде вас не оставят, всегда есть кому ответить на ваш вопрос.
@АлександрСитников-ы7я
2 жыл бұрын
Очень качественно все показано и рассказано. Автор молодец, сразу видно что старается. Успех и процветания твоему каналу. Супер годный контент. Спасибо! 🔥👍
@CodeQuestRu
2 жыл бұрын
Спасибо =)
@BrestSouth
2 жыл бұрын
Спасибо большое, для себя взял про БЭМ, прикольно выделяется практически каждую сущность.
@CodeQuestRu
2 жыл бұрын
Да, это очень удобно =)
@maksgeer5263
2 жыл бұрын
Очень крутой ролик) Что делает свойство font()?
@CodeQuestRu
2 жыл бұрын
Спасибо! Мы же в ролике написали этот миксин. рассчитывает высоту строки в виде коэффициента и выводит его вместе с размером шрифта =)
@turembekov
2 жыл бұрын
Привет дружище. С меня как всегда лайк и комментарии.
@CodeQuestRu
2 жыл бұрын
Надеюсь видео пригодилось =)
@turembekov
2 жыл бұрын
@@CodeQuestRu Как всегда, все очень доступно. Молодчина! !
@MaksymMinenko
2 жыл бұрын
Объяснения хорошие, только как можно верстать без ссылок на макет? Хотя бы в виде одной большой картинки.
@CodeQuestRu
2 жыл бұрын
Макет был на патреоне, сейчас перенесу на boosty
@alexdreamer11
2 жыл бұрын
Макет не выложил? Хотел поверстать вместе а макета нет.
@CodeQuestRu
2 жыл бұрын
Это закрытый марафон, все макеты и исходники на патреоне =)
@SergiyPolar
2 жыл бұрын
Я сильно извиняюсь, а как же поведение интерактивных элементов в фокусе? Я конечно понимаю, что это больше про доступность и тема обширнейшая, но логично приучать таким вещам, что б выработался рефлекс до автоматизма 🙂
@CodeQuestRu
2 жыл бұрын
Согласен, можно было учесть
@StikMrShtormer
2 жыл бұрын
CodeQuest, привет, возможно знаешь, как исправить ошибку: "gulp-notify: [HTML] Cannot read properties of null (reading '0')" ? Она возникает при указании alt в элементе img. И соответственно alt не попадает в public версию
@StikMrShtormer
2 жыл бұрын
Не решил проблему, но понял происхождение Так работает: Так нет: А переносы делает "Prettier - Code formatter v9.5.0" То есть такие переносы не перерабатываются плагином?(
@CodeQuestRu
2 жыл бұрын
Скорее всего проблема в каком-то из пакетов HTML, надо попробовать поотключать их и посмотреть, что будет
@Garik-e8l
2 жыл бұрын
Добрый день! И где обещанная сборка gulp, после подписки?
@CodeQuestRu
2 жыл бұрын
Добрый день, а вы где подписались?
@SergeyChaban
2 жыл бұрын
Всё круто! Только один момент смутил: для .promo__contact сделали margin-top: 50px. А если его наполнение изменится (а значит и высота) - снова подгадывать отступ сверху? :) Мне кажется, тут просится выравнивание по низу для .promo (align-items: flex-end) и при необходимости - уже играть отступом снизу у .promo__contact.
@animegeng3114
2 жыл бұрын
а где макет взять🤔
@CodeQuestRu
2 жыл бұрын
Макет на патреоне для участников марафона. Там мы его уже закончили полностью, видео запишу по мере возможности
@Medve.d
2 жыл бұрын
почему не указываете тип кнопок type button
@CodeQuestRu
2 жыл бұрын
Можно указывать, но вне формы все кнопки и так имеют тип "button"
@Medve.d
2 жыл бұрын
@@CodeQuestRu button-Обычная кнопка. reset-Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние. submit-Кнопка для отправки данных формы на сервер.
@CodeQuestRu
2 жыл бұрын
@@Medve.d я в курсе. Но по умолчанию без указания типа тег button имеет тип button вне формы, и submit внутри формы. Поэтому можно явно и не указывать
@serglebed2340
2 жыл бұрын
У меня возникла проблема. Пользуюсь вашей сборкой гальп. Первая проблема, это то, что некорректно работает свойство sourcemaps. Просто неверно отображает информацию, всё перемешивает. А во-вторых, на моменте, когда мы ставили картинки на бекграунд, у меня не верно переводит значение из scss в css. Под видео со сборкой гальп, кто то писал, что это webp css, меняет значения из support. Как убрать webp css со сборки? (я её у вас по подписке скачал)
@CodeQuestRu
2 жыл бұрын
Можно зайти в задачу img и там убрать плагин webp, также и в scss
@serglebed2340
2 жыл бұрын
@@CodeQuestRu спасибо, попробую. Просто странно, что у вас та же сборка, и на видео всё работает, а у меня нет =(
@serglebed2340
2 жыл бұрын
@@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;, то работать будет. Но мне важно понять, почему оно не верно работает, при абсолютно схожей сборке у меня, а вас это работало.
@serglebed2340
2 жыл бұрын
@@CodeQuestRu это дело в сборке или в чём то ещё? что бы в других задачах не возникало таких проблем
@CodeQuestRu
2 жыл бұрын
@@serglebed2340 сейчас не смогу сказать, нужно будет поразбираться
@anatolyannenko1821
2 жыл бұрын
Хоть я и новичок, очень странную вещь увидел в nav зачем постоянно сбрасывать стили, если можно было файл reset.scss создать чтобы сбросить все стили. и отступ справа в списке лучше делать, чтобы у последнего элемента не было отступа.
@CodeQuestRu
2 жыл бұрын
Любые глобальные стили, включая сбросы, противоречат методологии БЭМ и делают блоки менее независимыми и универсальными
@anatolyannenko1821
2 жыл бұрын
@@CodeQuestRu трудно обучаться, когда у всех все по-разному, хотя у всех опыт по 10-15 лет и в Яндексе и иностранных компаниях, но каждый говорит что у другого что-то не так ( как с ремонтом, каждый мастер приходит и спрашивает кто это говно сделал
@CodeQuestRu
2 жыл бұрын
@@anatolyannenko1821 для этого есть документация) а дальше выбирать только вам, кому верить, а кто учит не правильно =)
@anatolyannenko1821
2 жыл бұрын
@@CodeQuestRu так в том то и дело что трудно)) 2 знакомых есть, один синьер фронтенд в Яндекст Деньгах в спб года 3 работает, воторой фронтенд в джет брейнс и у оба друг друга код засерают
@igormajrov8444
2 жыл бұрын
В чем прикол использовать letter-spacing: 0.02em? Это ж, по сути, 0.32px и визуально никакого эффекта он не окажет. Лишний кусок кода.
@CodeQuestRu
2 жыл бұрын
Ну если лишний, не используй)
@Medve.d
2 жыл бұрын
nav nav__list nav__item nav__link так лучше
@CodeQuestRu
2 жыл бұрын
Нет, не лучше. Потому что навигация nav-list у нас может размещаться в нескольких местах макета, например, в подвале. А nav у нас будет только один у основного меню
@Medve.d
2 жыл бұрын
@@CodeQuestRu если это отдельный блок который вы думаете пере использовать то лучше не задавать такой класс
@StikMrShtormer
2 жыл бұрын
Не сработали фоновые изображения таким образом как в видео, тайм код 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;
Пікірлер: 49