Объяснения супер, я нигде такого больше не видела, спасибо огромное за такую работу! Решила восстановить все свои знания и наконец перейти во фронтенд, не откладывая в дальний угол, тем более когда такие классные вечеринки! Плюс потрясающий юмор! На 5 февраля 2024 года в Фигме больше нет бесплатного доступа к панели разработчика, можно по другому скопировать стили (через правую кнопку мыши)
Лайк не глядя. Я ещё не доделал сайт про свечи а уже новый макет сегодня однозначно отличный день! Спасибо вам Вадим за то что даёте возможность обучаться даже таким бомжам как я.)))
В багатьох ютуберів в яких я проходив верстку під час відео аж хочеться спати, але ваш підхід до відео особий, ви з вашими жартами заряджаєте позитивом що аж хочеться без перервно проходить вашу верстку🫡 Дякую!!!
Супер видосы , если честно, когда-то давно мне посоветовали тебя, но руки не доходили посмотреть по видео, сейчас зашел посмотреть верстку и я в восторге, если честно) и с юмором, и много полезной информации, кайф
Макет хоть и небольшой, но прикольный, красочный. Ждем продолжения верстки. Вадим, большое спасибо за контент, реально очень много практики. Понемного подтягиваю js. Думаю, отличный вариант сделать логику так. Всем кнопкам с наушниками задать data-атрибуты типа data-color. При нажатии брать этот параметр и задавать его всем изображениям в виде setAttribute src. Нужно просто соответственно назвать все картинки. Градиенты можно подвязать к заранее созданным классам, типа идентификаторам. Текущую кнопку прятать путем добавления класса или инлайн-стилей, а все остальные показывать.
Лайк однозначный, но не могу не сказать. Хотелось бы увидеть видео где верстаешь с использованием rem. Будет куда полезнее чем однотипную верстку на пикселях смотреть
Спасибо за информативное видео. Вопрос может показаться глупым, но почему на 1:06:03 для .title--s мы просто не использовали position: relative; top:40px? Или top:40px может как-то повлиять на создание анимации в будущем?
41:00 - с каких пор модификаторы стало допустимо использовать в отрыве от модифицируемого блока? Модификатор - это не самостоятельная сущность. Из официальной документации: "С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее."
Вітаю! Розумію, що треба показати різні варіації того, з чим можна стикнутися на практиці - я маю на увазі те, як запхати текст під зображення і таке інше. За це окреме дякую, так як інфа дійсно дуже корисна! Проте я б мабудь зробив це зображення в PS. І при адаптуванні все це було б простіше.
Вадим, у меня возникла проблема. Повторил все шаги, как в видео, но в моем проекте расстояние между буквами в title выглядит значительно меньше, чем у тебя. Проверил все настройки, использовал Google Fonts, но даже там у букв (например, 'AX') расстояние меньше, и текст выглядит слитным. В чем может быть причина такой разницы в межбуквенном интервале?
було б дуже круто почути від вас як вивчати js коли ти вивчив вже основи,де брати практику? звідки брати ідеї для проектів? і взагалі як розвиватись в js
На tailwind быстрее верстать. И есть еще вопрос: А на сколько актуально заниматься ручной версткой и натяжка на WordPress и прочие CMS? Не лучше ли учить React или Svelte и становиться фронтендером, используя готовые UI киты?
ты не всегда сможешь использовать ui киты, часто придется что-то руками делать. стилизовать из ui китов элементы тоже очень сложно порой... а на верстку наверное сложно будет работу найти или потолок будет 400-500 долларов и всьо
@@NIReeMK Ясно, что придется что-то кастомизировать. Но все же без фреймворков и хоть каких-то готовых компоненов очень долго писать код. А время - деньги
И еще: не обязательно использовать весь UI kit. Можно импортировать лишь те, компоненты, которые тебе понадобятся и которые ненужно сильно кастомизировать. Плюс есть еще headless библиотеки, в которых отсутствуют css стили, что позволяет полностью кастомизировать с нуля компонент
Я так потримаю ты из Украины? У меня есть Украинский канал, Там как раз вышло видео про эту программу VS Code налаштування для ефективної роботи, топові плагіни для верстки сайтів th-cam.com/video/MbQPfOJAnlM/w-d-xo.html
А можно картинке в хедере задать индекс 10, а буквам которые сверху картинки задавать индекс 11, а тем кто ниже картинки, задавать индекс 9? Тогда фон будет на своём самом нижнем уровне, картинка выше него, а буквы могут быть выше или ниже картинки.
41:10 модификатор в бэм можно использовать только вместе с элементом или блоком, сам по себе он не может использоваться конкретно тут логичнее было бы использовать элементы title__***
Привет, смотрю видео и думаю. Очень высокий уровень задержания аудитории у вас на всех таких видео наверное. Очень жалко что от российских просмотров нет монетизации(((. Казахстан, укр, беларусь, все равно мало. Эххх
@@vadymprokopchuk мне незачем, а если на масштабе, например, 80 смотрится ужасно,в целом, Вадос, надо с этим заморачиваться или пусть человек сделает масштаб меньше?
С нятягой вывез 11-и часовой видос,но после вёрстки я понял ,что без сада-маза не стать роботом-ТЕРМИНАТОРОМ,поэтому продолжим вечеринку и начнём верстать новый.Как мы поняли МАСТЕР ЗНАЕТ СВОЁ ДЕЛО, доверимся ему и да пребудет с нами мудрость правильного распределения временных потоков дабы не поймать про*сти господи*крастинацию.
ребят я уже устал так учиться, верстаю в точности как у автора, но у меня паддинги и марджины образуются, а у него нет, код один в один но у меня все равно дичь.... тот же хром использую, пишу в брекетс, menu__list просто стоит у левого края под яблоком , ни на что не реагирует кроме float: right; хотя автор не прибегал к таким методам
Скорее всего надо обнулить стили браузеров с помощью reset.css или normalize.css, подключить один из их в первую очередь, а ниже подключать все прочие кастомные стили
Уже даже это версткой назвать сложно) , я понимаю что это для начинающих, но все же. Можно же не городить гору стилей, в каждом селекторе, а написать пару простых миксинов, сделать стили реюзбельными, подключить авто префксер и резет цсс. Или такое уже не потянут начинающие?) Лучше же им показать что css файлы на 1000 строк это круто.
Я примерно понимаю о чем ты написал. В фигме переменные работают по похожим принципам. Но, я уверен, что человек открывший впервые фигму для верстки и решивший начать верстать , все что ты написал: Ты че материшься?
@@vadymprokopchuk Короче я немного подкрутил по своему left, right, translate(), и вроде всё получилось. Не знаю почему не вышло изначально, но проверял всё, я повторял точ в точ, и такое бывает. Я начинающий Фронтендер, учусь вот, хожу на курсы у себя в городе. У меня во вторник будет испит, нужно будет презентовать свой сайт. Там можно любо какой, по бесплатным макетам я бы не успел сделать, а вот когда есть всё изложенно в видео, то может и успею. Иногда просто прихожу в тупик в процессе вёрстки и всё не можу ничего с этим сделать, может через день прийдёт решение в голову а может и нет.
был перерыв в верстке, восстановить навыки решил по твоим урокам, они лучшие
спасибо
Объяснения супер, я нигде такого больше не видела, спасибо огромное за такую работу! Решила восстановить все свои знания и наконец перейти во фронтенд, не откладывая в дальний угол, тем более когда такие классные вечеринки!
Плюс потрясающий юмор!
На 5 февраля 2024 года в Фигме больше нет бесплатного доступа к панели разработчика, можно по другому скопировать стили (через правую кнопку мыши)
Я видео записал по этому поводу, последне, посмотрите
@@vadymprokopchuk спасибо 🙏
ваш юмор это нечто, безумно интересно вас слушать и учиться. Спасибо!
Лайк не глядя. Я ещё не доделал сайт про свечи а уже новый макет сегодня однозначно отличный день! Спасибо вам Вадим за то что даёте возможность обучаться даже таким бомжам как я.)))
=)) круть)
Лайк сразу же! Вадим, спасибо за такие душевные и информативные ролики! Лучший🥹
Классный ты парень, и практикую и смеюсь. Харизма классная у тебя! Спасибо, что ты есть, по больше подписчиков желаю!
В багатьох ютуберів в яких я проходив верстку під час відео аж хочеться спати, але ваш підхід до відео особий, ви з вашими жартами заряджаєте позитивом що аж хочеться без перервно проходить вашу верстку🫡
Дякую!!!
це супер, дякую
100%
из-за учебы подзабыл версточку, решил вернутся, возвращение блудного сына, спасибо за видос, ЛУЧШИЙ!!!!
Вадим спасибо за Ваш труд. Здоровья Вам и вашей семье, мирного неба.
благодарю
Супер видосы , если честно, когда-то давно мне посоветовали тебя, но руки не доходили посмотреть по видео, сейчас зашел посмотреть верстку и я в восторге, если честно) и с юмором, и много полезной информации, кайф
круто, спасибо
Вадим спасибо огромное за твои уроки, за твой труд!!!!
спасибо
Спасибо за очередную порцию полезного контента, макет балдежный!
++++++
Макет хоть и небольшой, но прикольный, красочный. Ждем продолжения верстки. Вадим, большое спасибо за контент, реально очень много практики.
Понемного подтягиваю js. Думаю, отличный вариант сделать логику так. Всем кнопкам с наушниками задать data-атрибуты типа data-color. При нажатии брать этот параметр и задавать его всем изображениям в виде setAttribute src. Нужно просто соответственно назвать все картинки.
Градиенты можно подвязать к заранее созданным классам, типа идентификаторам.
Текущую кнопку прятать путем добавления класса или инлайн-стилей, а все остальные показывать.
Бро самые топовые уроки практики вёрстки, спасибо тебе.
Фуру лайков этому великому человеку!
да да да
@@vadymprokopchuk oru
Подскажите, а не проще ли было картинке задать position releative, тексту - absolute и просто расставить z-index и top/left/bottom/right?
нуссс,начнемс тебя верстать! спасибо Вадосу за видосы
Супер. Как всегда лучший😊
благодарю
Спасибо за классную вечеринку! Жду тусовку с JS!
100%, скоро
Спасибо за видео, с удовольствием с вами поверстаю)) Очень нравятся ваши видео!!!!
Король вечеринок здорового человека. Спасибо, дядя!
Как всегда - супер!👍👍👍
7 минут видео смотрю,уже три раза смеялся))
Очень классная вечеринка, диджею респект!!!!!!!!
Лайк однозначный, но не могу не сказать.
Хотелось бы увидеть видео где верстаешь с использованием rem. Будет куда полезнее чем однотипную верстку на пикселях смотреть
Ура !!! новая вечеринка . Спасибо
Ураааа =)
Вадос спасибо за видом😊 ты лучший 💪👍
Спасибо за информативное видео.
Вопрос может показаться глупым, но почему на 1:06:03 для .title--s мы просто не использовали position: relative; top:40px? Или top:40px может как-то повлиять на создание анимации в будущем?
Спасибо огромное за такие годные и крутые советы
Тег это строчный элемент🙂
Спасибо за видео, жду продолжения 🎉
Очень круто, продолжай!
Дякую за Вашу роботу)!!!
спасибо ,я только начинаю учить ,видосики супер ,
Why this author, until now, has not been awarded an Oscar for the best videos on the illustrative example of website creation!?
норм такая вечеринка, спасибо брат✌
Как всегда -Пишем лайки,ставим комментарии))
Рад новой вечеринке 😂
спасибо
41:00 - с каких пор модификаторы стало допустимо использовать в отрыве от модифицируемого блока? Модификатор - это не самостоятельная сущность.
Из официальной документации:
"С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее."
Очень круто. Спасибо.
Добавил в смотреть позже , сейчас потому что js учу, потом залечу на вечеринку)
Вітаю! Розумію, що треба показати різні варіації того, з чим можна стикнутися на практиці - я маю на увазі те, як запхати текст під зображення і таке інше. За це окреме дякую, так як інфа дійсно дуже корисна!
Проте я б мабудь зробив це зображення в PS. І при адаптуванні все це було б простіше.
Привет, что за шрифт в vs у тебя?
Вадим, у меня возникла проблема. Повторил все шаги, как в видео, но в моем проекте расстояние между буквами в title выглядит значительно меньше, чем у тебя. Проверил все настройки, использовал Google Fonts, но даже там у букв (например, 'AX') расстояние меньше, и текст выглядит слитным. В чем может быть причина такой разницы в межбуквенном интервале?
Нашел причину, оказывается надо было отключить на сайте google fonts Optical Size
Спасибо выпуск пушка
Всё хорошо, ешё бы картинки были бы в макете, что бы тренироваться можно было без проблем
Как открыть гугл документ, у меня не открывается
через какое приложение?
Лайк от души!
super, muper, giper
було б дуже круто почути від вас як вивчати js коли ти вивчив вже основи,де брати практику? звідки брати ідеї для проектів? і взагалі як розвиватись в js
Неперевершено!!!😵💫
дякую
Лайк, коммент. Спасибо
Благодарю
здарова капитан ! 🛳👍
прописываю все так же , ну почему то когда нажимаешь ентер у по другому строки идут
но содержимое то такое?
@@vadymprokopchuk да , на время оставил , верстаю страницу с iPhone , там все идёт хорошо ,спасибо
@@МаксимСинягин-я1ъ супер
У меня почему то макет не открывается, можно ссылку на саму фигму
потом на адаптиве начнуться танцы с бубном на этом блоке,наверно оптимально изначально картинку с текстом в ней выкачать на прозрачном фоне
Здравствуйте,а что такое reset.css и откуда его взять?
скачали с инета, обнуляет стандартные стили от браузеров
На tailwind быстрее верстать. И есть еще вопрос: А на сколько актуально заниматься ручной версткой и натяжка на WordPress и прочие CMS? Не лучше ли учить React или Svelte и становиться фронтендером, используя готовые UI киты?
ты не всегда сможешь использовать ui киты, часто придется что-то руками делать. стилизовать из ui китов элементы тоже очень сложно порой... а на верстку наверное сложно будет работу найти или потолок будет 400-500 долларов и всьо
@@NIReeMK Ясно, что придется что-то кастомизировать. Но все же без фреймворков и хоть каких-то готовых компоненов очень долго писать код. А время - деньги
И еще: не обязательно использовать весь UI kit. Можно импортировать лишь те, компоненты, которые тебе понадобятся и которые ненужно сильно кастомизировать. Плюс есть еще headless библиотеки, в которых отсутствуют css стили, что позволяет полностью кастомизировать с нуля компонент
А где вы пишите код для сайта? Просто впервые хочу попробовать, а никто не пишет где это все дело происходит
Я так потримаю ты из Украины? У меня есть Украинский канал, Там как раз вышло видео про эту программу VS Code налаштування для ефективної роботи, топові плагіни для верстки сайтів
th-cam.com/video/MbQPfOJAnlM/w-d-xo.html
Вадим, а какая цветовая тема у тебя в VS Code?
material
А можно картинке в хедере задать индекс 10, а буквам которые сверху картинки задавать индекс 11, а тем кто ниже картинки, задавать индекс 9? Тогда фон будет на своём самом нижнем уровне, картинка выше него, а буквы могут быть выше или ниже картинки.
я который под конец видео кричу "букву М по ниже надо!!" xddd
Познавательное видео! Подскажи, как сделать такую же тему и стиль, как у тебя
Вадим. ты таки с Одессы?
нет, из Харькова
Ну добре тримайтеся там. бажаю вам якнайшвидшої перемоги. Слава Україні. ви з вашими жартами заряджаєте позитивом Дякую @@vadymprokopchuk
41:10 модификатор в бэм можно использовать только вместе с элементом или блоком, сам по себе он не может использоваться
конкретно тут логичнее было бы использовать элементы title__***
вот что я люблю)
Привет, смотрю видео и думаю. Очень высокий уровень задержания аудитории у вас на всех таких видео наверное. Очень жалко что от российских просмотров нет монетизации(((. Казахстан, укр, беларусь, все равно мало. Эххх
У меня фигма пишет совершенно другие размеры, при нажатии на кнопку в фигме она показывает падинги: 16px 112px... - в чем прикол?
изначально я старый макет залил, перекачай, может в этом дело
А че header__content, а не секция hero? На твоем же курсе так учили (SimpleFood)
На курсе и будут так учить... Это не курс, тут можно с костылями, чтоб посложнее.
Что за программа в начале видео
figma
@@vadymprokopchuk спасибо
Почему не используйте live server?
использую, просто не на видео, а в своей работе
с помощью чего нужно открывать макет
figma
50:33 .title { isolation: isolate } .title--pod { z-index: -1 }
не работает.
isolation: isolate нужно не title , а блоку с фоном. Тогда работает.
Лайк за Харьков))
макет не могу открыть ?
попробуй онлайн версию фигма
Как включит красную рамку для контейнера ???И как включить такую линейку для того чтобы померить макет 31:45 ???
Что-то макет немного не соответствует тому, что на видосе 🤔 Дизайнер внёс правки?
перекачай, не тот изначально залил
крутяк , чотко !
дякую!
дякую
а что если изменять масштаб и эти буквы прыгают?)
зачем менять масштаб ?)
@@vadymprokopchuk мне незачем, а если на масштабе, например, 80 смотрится ужасно,в целом, Вадос, надо с этим заморачиваться или пусть человек сделает масштаб меньше?
@@xdayx53 та масштабирование вообще оч редко используется и точно не на этом сайте, тут точно не стоит заморачиваться
Аминь!
С нятягой вывез 11-и часовой видос,но после вёрстки я понял ,что без сада-маза не стать роботом-ТЕРМИНАТОРОМ,поэтому продолжим вечеринку и начнём верстать новый.Как мы поняли МАСТЕР ЗНАЕТ СВОЁ ДЕЛО, доверимся ему и да пребудет с нами мудрость правильного распределения временных потоков дабы не поймать про*сти господи*крастинацию.
вечеринка!
она самая
Да это КРУЧЕЕЕЕЕ, чем у андриканича!!!!!
ребят была у кого-нибудь проблема с пространством между спанами в хедере? я себе щас голову сломаю
Было. Надо написать именно как у него в видосе, если каждый спан на новую строчку переносить, то появляются пробелы.
Приветик !
Заметка для меня 40:26
39:30 - Пхппхпхпхпхпхпх
Ну если это не божество, то что это? Вот кого кого, а его GPT не заменит)
=))) спасибо )
ура
Было бы интересно посмотреть как сделать адаптив хедера
будет в 3 видосе
вы забыли там еще бэграунд где буква М и там под наушником
Відразу зрозумів що ти з Харкова 😅
ребят я уже устал так учиться, верстаю в точности как у автора, но у меня паддинги и марджины образуются, а у него нет, код один в один но у меня все равно дичь.... тот же хром использую, пишу в брекетс, menu__list просто стоит у левого края под яблоком , ни на что не реагирует кроме float: right; хотя автор не прибегал к таким методам
Скорее всего надо обнулить стили браузеров с помощью reset.css или normalize.css, подключить один из их в первую очередь, а ниже подключать все прочие кастомные стили
Уже даже это версткой назвать сложно) , я понимаю что это для начинающих, но все же. Можно же не городить гору стилей, в каждом селекторе, а написать пару простых миксинов, сделать стили реюзбельными, подключить авто префксер и резет цсс. Или такое уже не потянут начинающие?) Лучше же им показать что css файлы на 1000 строк это круто.
Я примерно понимаю о чем ты написал. В фигме переменные работают по похожим принципам. Но, я уверен, что человек открывший впервые фигму для верстки и решивший начать верстать , все что ты написал: Ты че материшься?
Конда продолжение?
сегодня
збс
13:20
Блин, у меня почему-то надпись большыми буквами не так стала, хотя я повторял всё точ в точ за вами, капец
значит, что-то не так, может ошибка орфографическая
@@vadymprokopchuk Короче я немного подкрутил по своему left, right, translate(), и вроде всё получилось. Не знаю почему не вышло изначально, но проверял всё, я повторял точ в точ, и такое бывает. Я начинающий Фронтендер, учусь вот, хожу на курсы у себя в городе. У меня во вторник будет испит, нужно будет презентовать свой сайт. Там можно любо какой, по бесплатным макетам я бы не успел сделать, а вот когда есть всё изложенно в видео, то может и успею. Иногда просто прихожу в тупик в процессе вёрстки и всё не можу ничего с этим сделать, может через день прийдёт решение в голову а может и нет.
в тебе не працює макет скачує кривий файл
У всіх норм, отже проблема на твоїй стороні
@@vadymprokopchuk та я трохи тупанув сорян , дяк за інфу
Аххха я орнул ах харьков😂😂 ар запорожье аа киев😂
Почему ваш платный курс по верстке недоступен граждана РФ и РБ?
потому что автор гражданин Украины
🤡🤡🤡