Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?
@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))
Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти! Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит! Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая? Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике. Спасибо за очередную работу!
Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.
Большое спасибо за такое полезный видеоурок! Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал! Ещё раз спасибо "Сэнсэй"!
Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.
Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!
Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть
Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !
Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.
Жека привет,лайк тебе.мне как для новичка полезная инфа,зачастую мне не нравилось как вели себя контент и картинка в одной и той же секций(я про свои работы),а тут совсем другой подход,обязательно попробую,спасибо.
Привет,очень понравился твой ролик. Контент как всегда на высоте) Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении: Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))
html-структуру оставляем такой же; в css для блока .section добавляем flex-direction: row-reverse; для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px); вроде, так получается перевернуть
Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.
Спасибо! Все повторил. Получилось. До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.
Круто. Спасибо. Я когда-то мучился с подобными блоками. Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 40/60 это не заметная проблема, но если использовать 50/50 то чётко видно что блок не по центру относительно всего контента. Возможно нужно заменить vw на проценты Я исправил это вот так: flex: 0 0 50%; // Для 50/50
Я добавил в конце calc такое выражение "- (100vw - 100%) / 2", где 100vw - 100% для боди высчитает ширину скролла (это 17px в хроме), а делить на 2 нужно, поскольку margin слева и справа уменьшатся равномерно, а значит контент в контейнере уедет влево всего на 8,5px (17/2). Объяснять это не мое, но я пытался) Главное, что работает и для 50% и для 60%, и любых других. Например для (min-width: 1240px): было flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px)); стало flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px) - (100vw - 100%) / 2);
класс, спасибо! теперь мне опять есть чем заняться, попробовать тоже, но найти другое решение. по мне, так это лучший способ учиться - всегда пытаться превзойти свое учителя. а не повторять строка в строку.))) у меня дивиз по жизни прост -"если у кого-то это не получилось, это еще не значит что это невозможно!", тобишь, надо попробовать сделать то, что другие не смогли а не тупо повторять за другими..
@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.
Крутое решение, особенно калькуляция в конце. Спасибо! Как дополнение: раз уж мы используем object-fit и, стало быть, не поддерживаем IE, то можно параметризовать ширину контейнера (которая 1320px) и горизонтальные padding'и с помощью custom properties, calc станет нагляднее. И любопытный момент: после сдвига .section__image с помощью transform: translateX(-100%) горизонтальное переполнение у меня исчезло само собой, накидывать overflow-x: hidden на .section не пришлось. Интересно, почему. Chrome 85, Firefox 81.
Ребят у меня проблема возникла при верстке этого урока! на 8:04 Жека ставит на section__content свойство display:flex. Но когда я ставлю у меня контент ставится по середине(то есть, и текст и тайтл ровно по середине страницы, а мне это не нужно) В чем проблема? Кто знает можете объяснить? Заранее спасибо
Приятно смотреть и слушать профессионально до мелочей Если был рейтинг у вас было бы достойное место . Есть одна просьба расскажите по какому принципу пишутся названия классов и вложенности в них. Не могу продвигаться в обучении пока не пойму все мелочи которые определяют качество на сколько я понимаю. Заранее спасибо !!
Блин я ещё на 1.5 скорости смотрю, и как будто это всё искусственный интеллект делает. Надеюсь перед видео он это делал в 10 раз дольше и ломал голову как и я :D
Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(
Привет! Всё супер, правда я 2 варианта альтернативных на вскидку уже вижу, как добиться того же, только без calck, Да и кода гораздо по меньше. Если не поленюсь, и ты не будешь против, потом здесь скину ссылку на примеры
@@FreelancerLifeStyle Ну чё, норм решение, Евгений? Кстати в моём решении, что бы прям всё было вообще идеально(хотя для 99% и без калька норм), то достаточно добавить всего один медиа запрос, с размером основного общего контейнера @media only screen and (min-width: 900px){ .general { background-position: calc(40vw + (100vw - 900px)/10) center; } } этот размер для jsfiddle.net/bilder/emc10vus/
Сталкивались с таким?
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Подскажите, как понять к какому блоку задавать то или иное свойство? Как не запутаться во всех вложенностях? И как понять сколько всего надо добавить элементов div перед самим содержимым?
Было бы не плохо добавить не только по классу но и по id определять уникальный элемент) это Я про github.com/FreelancerLifeStyle/dynamic_adapt
Почему-то по формуле изображение всё равно внахлёст. Уже несколько раз переписал. В чём может быть проблема? Даже строчка в строчку по видео.
@@GANGST1ER возможно где то лишний или недостающий "} " , У меня однажды из-за одной лишней скобки пришлось долго помучаться
@@InspireInki Когда не знаю какая вложенность боков надо или тяжело представить последовательность в голове, то просто беру бумагу и начинаю набрасывать варианты )))
Блин! Есть у меня некое предчувствие, что никогда мне в ногу с Жекой не идти!
Я еще кучу годноты с прошлого года не изучил, а он тутор за тутором производит и производит!
Кто-то может вспомнить, у кого еще такая же бешеная продуктивность, да еще и мега толковая?
Вот чтобы не просто языком почесать и показать типа- Смотрите как я умею, а выпустить именно толковый контент, с классной подачей и детальным разбором происходящего в ролике.
Спасибо за очередную работу!
Пожалуйста! Рад что полезно!
Смотрю твой канал с самого начала своего пути в вебе, спасибо тебе за все, что ты делаешь. Ты очень помогаешь начинающим разработчикам, твой опыт и наглядные примеры решения проблем - бесценны. Продолжай в том же духе, твоя аудитория с тобой.
Спасибо большое!
Я не понимаю, так мало подписчиков потому что слишком годный и полезный контент?
Это же рай для начинающих (да и не только) верстальщиков
Большое спасибо за такое полезный видеоурок!
Ни в одной книжке так не расписано с примерами и подводными камнями! Спасибо огромное за столь проработанный материал!
Ещё раз спасибо "Сэнсэй"!
Спасибо!
Ох и заковыристая это всегда была задача. Очень хорошее решение! Посмотрел с большим интересом.
Спасибо!
Евген, ты меня каждый день спасаешь! на все вопросы ответы у тебя нахожу! спасибосики огроменные, жму руку!! F
Я рад!
Мне кажется Евгений для меня стал единственным полезным верстальщиком во всем ру ютубе
Спасибо!
Женя, спасибо за видео! Прям очень спас, вчера весь день на работе просидел с такой проблемой, сегодня за пару часов с твоим видосом сделал. У меня на макете две таких секции, одна со слайдером, другая с интерактивной картой вместо картинки. Проблем не возникло, все работает по твоей схеме адаптивно.
Оо я пару дней назад верстал по макету подобный сайт, я так намучился с этим, сказал дизайнеру что у него беды с башкой, а оказывается это у меня
Ахах)
😄
С бубном я уже потанцевал))) Красавчик! И весело и по делу.
Спасибо!
Наимощнейше? - КОНЕЧНО! спасибо за твои труды )
Пожалуйста!
Мне дико нравится это... "у нас все, казалось бы, классно работает, НО.... " и дальше пошла жара. Люблю такое.
Отличный контент!!! Все примеры вёрстки сохраняю на будущее . Спасибо за всё
Пожалуйста!
Только ночью верстал такой блок)) правда, до адаптива не дошел. Как раз вовремя, спасибо!
Пожалуйста!
Спасибо за полезное видео! Реально полезное, я как раз делаю сайт и возникли проблемы с таким блоком, в итоге фото сделал как background, и через background-size/background-position менял размеры и тд потом через media подгонял под разные экраны ... итоговым результатом я не остался доволен. Сейчас буду переделывать этот блок по твоему видео! Спасибо!
Пожалуйста!
Oчень полезная фишечка по адаптиву!!! Автор красавчек!!!
Спасибо!
Спасибо тебе Жека огромное!!! Крепкого тебе здоровья и ручки чтоб не болели... :-)!
Спасибо!
Тяжелооо... что-то я где-то упустила🤔 в обучающем курсе...Будем разбираться🧐😁 поэтапно💪👍 а разбираться хочу, потому что скопировать может каждый, самое главное - понимать суууть
Самые больные темы верстальщика затрагиваешь, очень круто!
Я рад)
Вот именно это я и искал! Очень круто и огромное спасибо!!!
Пожалуйста!
Ааааааааааа с ума сойти, три дня пыхтел над такой задачей и думал как-же всё таки будет правильно. А оказывает на моем любимом канале решение было, причем через гугл случайно наткнулся. Спасибо тебе огромное за такую важную информацию !
3 дня эт ерунда я неделю мучился правда я в этой теме всего 2 недели но всё же так долго решать даже для новичка зазорно и удачи с проектоми.
Лайк и комментарий. Таких видео должно быть больше.
Согласен меня очень мотивируют видосы
Спасибо!!
Спасибо большое за то что делишься знаниями !!!
Пожалуйста!
Очень круто!! Спасибо за материал и за возможность решить задачку с переворачиванием картинки и текста, пришлось хорошо разобраться в материале чтобы понять как ее решить. оказалось все очень просто.
Женя спасибо за видео.
Пожалуйста!
Как всегда, шикарно)) Спасибо!
Спасибо!
Очень интересно и познавательно! Спасибо Женя за классный урок👍
Пожалуйста!
Очень классное решение!
Спасибо Женя!!!
Пожалуйста!
Классные видио продолжай в том же духе МОЛОДЕЦ в будущем я поддержу канал!
Спасибо!
Сегодня использовал твоё решение в проекте, всё работает, как часы! Респект, Женя, давай еще! :))
Наконец-то справился :) Спасибо Жека! И людям что в комментариях пишут у кого-то подцепил похожую проблему, у другого её решение :)
Жека привет,лайк тебе.мне как для новичка полезная инфа,зачастую мне не нравилось как вели себя контент и картинка в одной и той же секций(я про свои работы),а тут совсем другой подход,обязательно попробую,спасибо.
Евгений дай Бог здоровья тебе и твоим близким, многих верстал ты вывел из депрессии )))
Ты - гений! Сильно помог с моей проблемой. Спасибо!
Как раз такая-же ситуация была. А выход оказался под рукой!)
Спасибо большое, отличная работа, однозначно в копилку! Я только добавил для .section__container ширину 100%, с малым контентом сжимался контейнер.
Вариации безграничны, главное это надежность
Это единственный канал, где я нашел годное решение данного вопроса
Ну що тут скажеш, контент як завжди на висоті по користі , подачі. Дякую 👍
Будь ласка
Это просто взрыв мозга! Но это то что я искал , спасибо!
Спасибо, за новый скилл нам)).
Пожалуйста!
Женя, красно тобі дякую! Щоб я без тебе робив!
Жека, как всегда видос на высоте)))
Если кто-то скажет за вложенность, никого не слушай, они не шарят в его силе)))
Ахах, та пусть говорят что хотят)
@@FreelancerLifeStyle верно)
Годнота!) супер, спасибо, Жека 😊👍
Пожалуйста!
Спасибо! Отправляем тебя в тренды !!!!!!! PUSH
Спасибо!
trend.push("Фрилансер по жизни - IT и фриланс");
СПАСИБО, ЧТО ТЫ ЕСТЬ!
Спасибо за мега-крутой и полезный урок! 😎💪
Привет,очень понравился твой ролик. Контент как всегда на высоте)
Хотелось бы подкинуть идею для видео,например,мне интересно посмотреть туториал на эту темы в твоем оформлении:
Как сделать прелоадер,каким образом его можно анимировать,подключать и т.д
Как по мне очень интересная тема для разбора,буду рад если выйдет ролик с ней. Удачи))
Евгений, благодарю
Пожалуйста!
Ты просто чудо!
Спасибо!
Просто лучший!
Жека, спасибо большое!! Ты крут!!! 🔥💪
Пожалуйста!
Как же сделать картинку слева, а контент справа? Пожалуйста, помогите
тоже мучаюсь и не могу понять))
Сначала пишешь див с картинкой, а потом див с body. Просто порядок меняй и все
flex-direction: row-reverse
html-структуру оставляем такой же;
в css для блока .section добавляем flex-direction: row-reverse;
для картинки применяем transform: translate(100%, 0px); вместо transform: translate(-100%, 0px);
вроде, так получается перевернуть
Просто лучший!!! Срочно открывай свою школу!
Спасибо! Курс попросьбе зрителей планируется на осень
Огонь 🔥🔥🔥🔥🔥🔥🔥 спасибо Жека🙏
Пожалуйста!
Огромное спасибо! Просто супер решение!
Жекич лучший!
Спасибо!
Дуже потрiбна реч!
Каеф. Привет из Сум!
С первого заказа с фриланса стану патроном
Спасибо!
Класс! Чудеса математики ))) Спасибо
лучшие видосы! ты ТОП!
Спасибо!
Дякую тобі, це надзвичайна інформація, якої я більше ніде не зустрічав, це факт!🫡
Жека, спасибо, лайк!
Пожалуйста!
зубодробительная штучка. спасибо!
Пожалуйста!
Благодарю Вас за видео.
Супер!!!
Я наверное так никогда не смогу...(((
Женя, спасибо за видос. А как быть если картинку нужно разместить слева, а контент справа?
блоки местами поменять
@@leonardrutto8381 так не получается почему-то...
@@xenokskings2201 Можно поменять с flex свойством flex-direction
@@i_am_Kamil не работает так
Жека, как всегда лучший! Спасибо тебе! Но есть вопрос: где взять мотивацию в нынешнее время, чтобы не забросить поприще верстальщика?
Может тут что поможет th-cam.com/play/PLM6XATa8CAG5tj86KRCFVbPodt5TGQEF9.html
Одразу лайк і комент!!!
Дякую!
Лайк не глядя!)
Спасибо!
Месяцев 5 назад первый раз ознакомился с данным видео. А научился делать только сейчас, пришлось на заказе внедрять. Только вот картинка была слева и были некоторые отличия в подходе.
Отличное видео! (Я даже знаю где я смогу это применить 🤔☺️)
Супер!
Спасибо! Все повторил. Получилось.
До этого пытался использовать Ваши формулы для изменения ширины элементов, где первоначальной единицей измерения (первое значение в формуле рх), пробовал изменить на vw, мне так нужно было. Но формула, не захотела правильно работать. Наверное что-то с взаимодействием единиц измерения. Пока не разобрался, оставил px.
Круто. Спасибо. Я когда-то мучился с подобными блоками.
Я заметил небольшую проблему: при появлении скрола у страницы, блок с картинкой смещается влево на несколько пикселей. Это видно если сравнить этот блок на странице со скролом и без. При 40/60 это не заметная проблема, но если использовать 50/50 то чётко видно что блок не по центру относительно всего контента. Возможно нужно заменить vw на проценты
Я исправил это вот так:
flex: 0 0 50%; // Для 50/50
Я добавил в конце calc такое выражение "- (100vw - 100%) / 2", где 100vw - 100% для боди высчитает ширину скролла (это 17px в хроме), а делить на 2 нужно, поскольку margin слева и справа уменьшатся равномерно, а значит контент в контейнере уедет влево всего на 8,5px (17/2). Объяснять это не мое, но я пытался) Главное, что работает и для 50% и для 60%, и любых других.
Например для (min-width: 1240px):
было
flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px));
стало
flex: 0 0 calc(50vw - (0.4 - 0.5) * (1200px) - (100vw - 100%) / 2);
Привет Жека, классный видео получился.Спасибо...а будет видео по валидации формы?
Будет!
класс, спасибо! теперь мне опять есть чем заняться, попробовать тоже, но найти другое решение. по мне, так это лучший способ учиться - всегда пытаться превзойти свое учителя. а не повторять строка в строку.))) у меня дивиз по жизни прост -"если у кого-то это не получилось, это еще не значит что это невозможно!", тобишь, надо попробовать сделать то, что другие не смогли а не тупо повторять за другими..
Супер, буду ждать решение!
только реализовал решение легче, с одной функцией calc() на весь код
@@maksimlegit5264 так поделись кодом на codepen
Спасибо
Первый лайкос :)
Спасибос!
Очень качественный контент, продолжай в том же духе!!! Какой программой для макетов ты пользуешься ?
Спасибо! Вот th-cam.com/video/Mo8m8SW_8H0/w-d-xo.html
Никак не могу дойти до решения реализации обратной ситуации (изображение - слева, контент - справа)
Нашел?)
@@const1525 Та же фигня, сейчас пробовать буду)
@@deckards6288 Если получится, отпишись))
@@const1525 в случае с картинкой помог пример из комментов: vitya8989.github.io/padding/. А вот если тебе нужно блоку с текстом, фон сделать на всю ширину, а сам текст по контейнеру выравнять, это не поможет.
ДЯКУЮ це те що я шукав
👍👍👍
Спасибо!
О контент)
Ага)
Подскажите пожалуйста, если использовать в этом случае bootstrap, то будет ли легче реализовать эту задачу? будет ли проще?
Крутое решение, особенно калькуляция в конце. Спасибо!
Как дополнение: раз уж мы используем object-fit и, стало быть, не поддерживаем IE, то можно параметризовать ширину контейнера (которая 1320px) и горизонтальные padding'и с помощью custom properties, calc станет нагляднее.
И любопытный момент: после сдвига .section__image с помощью transform: translateX(-100%) горизонтальное переполнение у меня исчезло само собой, накидывать overflow-x: hidden на .section не пришлось. Интересно, почему. Chrome 85, Firefox 81.
Ребят у меня проблема возникла при верстке этого урока! на 8:04 Жека ставит на section__content свойство display:flex. Но когда я ставлю у меня контент ставится по середине(то есть, и текст и тайтл ровно по середине страницы, а мне это не нужно) В чем проблема? Кто знает можете объяснить? Заранее спасибо
Приятно смотреть и слушать профессионально до мелочей Если был рейтинг у вас было бы достойное место . Есть одна просьба расскажите по какому принципу пишутся названия классов и вложенности в них. Не могу продвигаться в обучении пока не пойму все мелочи которые определяют качество на сколько я понимаю. Заранее спасибо !!
Спасибо, о нейминге тут th-cam.com/video/HihYQVuH64U/w-d-xo.html
@@FreelancerLifeStyle спасибо !!!!!!!!
Класс
Спасибо!
Ніфіга не зрозумів, але цікаво і виглядить кльово. Треба пальчиками повторити те що в відео - тоді дійде. )))
Но ведь, если ширина экрана будет большой (больше 1360px), например 4000px, то всё будет выглядеть очень плохо.
Блин я ещё на 1.5 скорости смотрю, и как будто это всё искусственный интеллект делает. Надеюсь перед видео он это делал в 10 раз дольше и ломал голову как и я :D
Спасибо за видео. Огонь 🔥. Правда не с первого раза всё получилось. Всё повторил, но пока не установил для section__container свойство width: 100% изображение так и налазило на контент (для 40% и 60%). А в видео всё прекрасно работало и без этого. Так и не понял почему(
норм решение)
а вы чекали кроссбраузерность в Эдже или в десктопном Сафари? (за ИЕ молчу)
ЭДЖ без проблем, ПК сафари под рукой нет (я на винде) но тут ничего такого нет, должно работать)
Приветствую. Скажите пожалуйста что за музыка играет в начале?
Привет! Всё супер, правда я 2 варианта альтернативных на вскидку уже вижу, как добиться того же, только без calck, Да и кода гораздо по меньше. Если не поленюсь, и ты не будешь против, потом здесь скину ссылку на примеры
Буду ждать. Только нужно оставить ограничивающий контейнер, отступы не дают нужного результата
@@FreelancerLifeStyle ну примерно как то так, на скорую руку
jsfiddle.net/bilder/emc10vus/ - пойдёт? Я навскидку предполагал просто)
@@FreelancerLifeStyle Ну чё, норм решение, Евгений? Кстати в моём решении, что бы прям всё было вообще идеально(хотя для 99% и без калька норм), то достаточно добавить всего один медиа запрос, с размером основного общего контейнера
@media only screen and (min-width: 900px){
.general {
background-position: calc(40vw + (100vw - 900px)/10) center;
}
}
этот размер для jsfiddle.net/bilder/emc10vus/
This is awesome !
Жек,ты используешь бутстрап,или пишешь медиа-запросы?
Медиа
Как наоборот справа контент, слева картинка?
Жень, подскажи, пожалуйста, шрифт, что используется в макете, на котором объяснял в начале видео, где написано "Shedule a Call with Our Specialist"