Такие ролики очень полезны для того, чтобы усваивать логику выбора способов оформления. Разработчики, как правило, осваивают азы , считая выбранный стиль достаточным. Так они не стремятся развиваться. А тут можно узнать нечто необычное, что в практике просто пропускаешь. У меня тоже свой стиль оформления, и кое-что я бы писал иначе. Но все же приятно видеть как другие блещут виртуозностью, это как песня.
Спасибо огромное, это фантастически полезный опыт для меня. Ещё буду разбирать ролик подробнее, сейчас же в первую очередь осознаю ошибку как я использовал отступы. Ведь действительно в макете все отцентрировано, а я просто статично перенес размеры по странной (мне сейчас это понятно, но в момент верстки мне эта ошибка казалась наоборот простым способом решения проблемы позиционирования, по типу "я простой парень, отступаю от края и горя не знаю") логике. По началу (т.е. мне как новичку) вообще сложно понять, как делать отступы между элементами, это действительно проблема - что от чего позиционировать, чтобы это было верно, чтобы соответствовало размерам по макету, как вообще распределить этот пазл. Теперь мне мне стало ясно, что отступы справа/слева по умолчанию от краев заставляют документ быть статичным в одном масштабе (определенном разрешении экрана) и при его смене надо быть готовым познать боль съезжания и заползания всего на всё :) Разберусь получше в паддингах и марджинах, чтобы не лепить их как попало. С отступами, display и position у меня и были основные запросы к гугл и я просто применил наиболее удачные стили в результате подбора для похожести по макету. Насчет округления фото команды я даже не думал, просто их экспортировал и так совпало, что они круглые. Это тоже взял себе на заметку. Основная фоновая картинка в хедере мне просто показалась какой-то большой относительно всего макета и я задал ей размер в пикселях, но раздумывал, что логично задавать ей высоту по размеру экрана. Понял, что устанавливать фиксированную ширину/высоту каждому элементу чревато и прихожу к осознанию пользы сетки в фотошоп или пусть той же сетки бутстрап (хоть вроде и читал о цели их существования, но с точки зрения применения на практике не понимал). Буду еще анализировать и несколько раз пересматривать (сейчас моя голова не первой свежести, просто хочется оставить комментарий, пока ролик "с пылу с жару", ваш разбор очень важен для меня). Все замечания и исправления выделил мысленным маркером. Еще раз спасибо за эту подробнейшую работу
Здравствуйте, можно поинтересоваться? Спустя два года (с выхода этого разбора) чего вы добились во фронтенде? (в плане навыков и нашли ли отличную компанию или на фрилансе и тп) И как вы учились на фронт, с помощью курсов или вы просто в какой-то момент решили своими силами изучать его?
@@anvlad1078 привет, я забил на это болт и зарабатываю копирайтом и модерацией, мне не нравится разбираться с программным кодом, разбираюсь с языковым, словесным, словарным кодом
@@Istanislav1 Ну сменил направление, но опыт всеравно приобрел, это хорошо. Только напримере макета странно как ты классы по бэму знал как сделать , а создать обертку для контента с отступами margin 0 auto не знал... Сетке bootstrap эту обертку создают с помощью класса .container , если без сетки то самому создавать нужно было. Я сам учусь месяц уже, нужно быть внимательным на все 100, где то забыл закарлючку поставить и вся работа перекосится))
Обожаю выравнивание с помощью свойства flex, однако, как оказывается, использую группу правил не на всю мощь, flex-row и flex-basis - очень полезные лайфхаки )
Формат огонь 🔥. Очень интересно как работает профессионал. Потому что научиться криво верстать можно быстро и легко, но благодаря таким видео появляется понимание и чистота кода. Спасибо 🤗
Спасибо, что делитесь с нами своими знаниями. Есть пожелание... При демонстрации экрана, пожалуйста, делайте шрифт немного больше, очень тяжело читать, честно говоря!!!
Спасибо за разбор макета. Я верстке не учусь, но интерисуюсь в общеобразовательных целях, как маркетолог. Нет ничего лучше чем на практике с комментариями посмотреть такое видео. Лично мне было весьма интересно на примере этого видео разобраться с css и принципами оберток и их правильного формирования в верстке. Я постоянно встречаю кривую верстку на сайтах своих клиентов и сталкиваюсь с проблемами правильной постановке задачи другим верстальщикам, которые должны это поправить. Часто получается совсем не то, что ты ставишь в задачу, так вот чтобы понять почему такое происходит и кто где налажал, приходиться понемного вникать в азы верстки. Уверен, что твой канал через пару лет будет очень популярен! Желаю успехов!
У меня сейчас точно такая проблема которая была у автора это верстки) одни padding и margin ,и леплю relative и absolute ... Полезное видео, пересмотрю ещё, но пока трудно понять как вы все так по флекс делаете)
Способ показанный в ролике проще и быстрее, но если бы расположение точки было бы не стандартным (например точка находилась по середине высоты строки) то тогда псевдоэлемент бы был незаменим.
У меня возникла идея. Вы выкладываете макет шаблона, далее через две недели делаете обзор по вёрстке макета. И многие будут проверять свой макет с вашим и задавать вопросы. Почему так, а не так написан код... И т.д. Я думаю, многим новичкам эта идея понравится. Не просто повторять вёрстку а самостоятельно поработать.
На 41:00 речь идёт о том, что в секции контент и команда нужно указать для обертки "flex-wrap:wrap;" . Это свойство говорит какбы "эй, если тебе мало места, то дуй на след строку, мудень" ))
опа)) а как можно сделать так,чтобы вы мой макет так посмотрели и указали мне на мои ошибки,можно в видео,можно без?? эта тема очень полезная для новичков,так как наставника у большинства нет,и приходится самим как то искать ошибки,а без знаний это почти не возможно!
я если честно впервые в жизни вижу, чтобы так было свёрстано, подписчик видимо специально хотел сделать максимально неправильно и тупо, других вариантов у меня в голове нет
Да когда же вы уже запомните отличие маржин от паддинг?))) Магжин это когда ты что-то отодвинул от себя, а паддинг это когда ты сам оброс невидимой стенкой))
Как добавлять пробелы(отступы) выделенным элементам в редакторе? весь гугл перерыл что то не нашел. Да и почему добавлять div элементы. для центрирования сайта? можно добавить только класс всем section элементам?Я так делаю
Странно что человек сверставший этот макет не знает как отцентрировать блоки но знает как задать абсолют элелементу, не Вы ли часом этот макет верстали что бы ошибки показать 🙄
Не забудьте заглянуть сюда:
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
Давайте больше подобных разборов
Такие ролики очень полезны для того, чтобы усваивать логику выбора способов оформления. Разработчики, как правило, осваивают азы , считая выбранный стиль достаточным. Так они не стремятся развиваться. А тут можно узнать нечто необычное, что в практике просто пропускаешь. У меня тоже свой стиль оформления, и кое-что я бы писал иначе. Но все же приятно видеть как другие блещут виртуозностью, это как песня.
Спасибо огромное, это фантастически полезный опыт для меня. Ещё буду разбирать ролик подробнее, сейчас же в первую очередь осознаю ошибку как я использовал отступы. Ведь действительно в макете все отцентрировано, а я просто статично перенес размеры по странной (мне сейчас это понятно, но в момент верстки мне эта ошибка казалась наоборот простым способом решения проблемы позиционирования, по типу "я простой парень, отступаю от края и горя не знаю") логике. По началу (т.е. мне как новичку) вообще сложно понять, как делать отступы между элементами, это действительно проблема - что от чего позиционировать, чтобы это было верно, чтобы соответствовало размерам по макету, как вообще распределить этот пазл. Теперь мне мне стало ясно, что отступы справа/слева по умолчанию от краев заставляют документ быть статичным в одном масштабе (определенном разрешении экрана) и при его смене надо быть готовым познать боль съезжания и заползания всего на всё :) Разберусь получше в паддингах и марджинах, чтобы не лепить их как попало. С отступами, display и position у меня и были основные запросы к гугл и я просто применил наиболее удачные стили в результате подбора для похожести по макету.
Насчет округления фото команды я даже не думал, просто их экспортировал и так совпало, что они круглые. Это тоже взял себе на заметку. Основная фоновая картинка в хедере мне просто показалась какой-то большой относительно всего макета и я задал ей размер в пикселях, но раздумывал, что логично задавать ей высоту по размеру экрана.
Понял, что устанавливать фиксированную ширину/высоту каждому элементу чревато и прихожу к осознанию пользы сетки в фотошоп или пусть той же сетки бутстрап (хоть вроде и читал о цели их существования, но с точки зрения применения на практике не понимал).
Буду еще анализировать и несколько раз пересматривать (сейчас моя голова не первой свежести, просто хочется оставить комментарий, пока ролик "с пылу с жару", ваш разбор очень важен для меня). Все замечания и исправления выделил мысленным маркером. Еще раз спасибо за эту подробнейшую работу
Здравствуйте, можно поинтересоваться?
Спустя два года (с выхода этого разбора) чего вы добились во фронтенде? (в плане навыков и нашли ли отличную компанию или на фрилансе и тп)
И как вы учились на фронт, с помощью курсов или вы просто в какой-то момент решили своими силами изучать его?
@@anvlad1078 привет, я забил на это болт и зарабатываю копирайтом и модерацией, мне не нравится разбираться с программным кодом, разбираюсь с языковым, словесным, словарным кодом
@@Istanislav1 лол, внезапно
@@anvlad1078 мне по душе литературный код, а не машинный, человеческий код богаче и древнее, им можно куда искуснее управлять реальностью
@@Istanislav1 Ну сменил направление, но опыт всеравно приобрел, это хорошо. Только напримере макета странно как ты классы по бэму знал как сделать , а создать обертку для контента с отступами margin 0 auto не знал... Сетке bootstrap эту обертку создают с помощью класса .container , если без сетки то самому создавать нужно было. Я сам учусь месяц уже, нужно быть внимательным на все 100, где то забыл закарлючку поставить и вся работа перекосится))
Большое спасибо за профессиональный разбор!!!
Обожаю выравнивание с помощью свойства flex, однако, как оказывается, использую группу правил не на всю мощь, flex-row и flex-basis - очень полезные лайфхаки )
Да, супер, больше подобных выпусков!!
Формат шикарен. Видео максимально полезное и ,что еще более важно, подкрепленное практикой. Хотелось бы макеты помассивнее, посложнее.
Клево смотреть как работают профи!=)
Мне нравится такой формат, с удовольствием отправлю Вам свою вёрстку, когда начну работать ☺️☺️☺️, спасибо 🙏🏻
Формат огонь 🔥. Очень интересно как работает профессионал. Потому что научиться криво верстать можно быстро и легко, но благодаря таким видео появляется понимание и чистота кода. Спасибо 🤗
первый раз было не скучно смотреть разбор верстки! :)
Спасибо, что делитесь с нами своими знаниями. Есть пожелание... При демонстрации экрана, пожалуйста, делайте шрифт немного больше, очень тяжело читать, честно говоря!!!
Спасибо за разбор макета. Я верстке не учусь, но интерисуюсь в общеобразовательных целях, как маркетолог. Нет ничего лучше чем на практике с комментариями посмотреть такое видео. Лично мне было весьма интересно на примере этого видео разобраться с css и принципами оберток и их правильного формирования в верстке. Я постоянно встречаю кривую верстку на сайтах своих клиентов и сталкиваюсь с проблемами правильной постановке задачи другим верстальщикам, которые должны это поправить. Часто получается совсем не то, что ты ставишь в задачу, так вот чтобы понять почему такое происходит и кто где налажал, приходиться понемного вникать в азы верстки. Уверен, что твой канал через пару лет будет очень популярен! Желаю успехов!
Спасибо огромное, отличное видео. Только начала интересоваться версткой и наблюдать за исправлением ошибок невероятно интересно)
У меня сейчас точно такая проблема которая была у автора это верстки) одни padding и margin ,и леплю relative и absolute ... Полезное видео, пересмотрю ещё, но пока трудно понять как вы все так по флекс делаете)
Классный ролик. Жаль макет не выложили для желающих сверстать с учетом ваших замечаний.
Формат офигенный, понял что флексы использую на 1%. Огромное спасибо!
Благодарю Вас за видео.
дякую! дуже допомогає такий формат!
Спасибо, очень хороший формат видео и подача, качество на высшем уровне.
Благодарю
Спасибо за проделанную работы!
Огонь! Спасибо!
Всё было классно, интересно и познавательно.
Благодарю!
Офигенная рубрика. Полезно очень !
Очень интересно и почти понятно для меня.Спасибо.
Спасибо, увидел свои слабые места, буду это исправлять.
Спасибо за контент. Красную точку еще можно было сделать псевдоэлементом after.
Способ показанный в ролике проще и быстрее, но если бы расположение точки было бы не стандартным (например точка находилась по середине высоты строки) то тогда псевдоэлемент бы был незаменим.
Очень круто! Узнал много нового.
Спасибо, сделайте шрифт больше в vs code
Именно то, что я искал, спасибо!
Спасибо за твою работу)
*_Ахренительно!_*
У меня возникла идея.
Вы выкладываете макет шаблона, далее через две недели делаете обзор по вёрстке макета. И многие будут проверять свой макет с вашим и задавать вопросы. Почему так, а не так написан код... И т.д.
Я думаю, многим новичкам эта идея понравится. Не просто повторять вёрстку а самостоятельно поработать.
Очень интересно! Буду следить за вашим контентом.
Спасибо!
Класс! 👍
Первый раз вижу))))))Очень круто.!
Можете мою вёрстку тоже разобрать, пожалуйста
коммент для продвижения
супер
Спасибо
будет верстка на бутстрап 3 или 4 ?
На 41:00 речь идёт о том, что в секции контент и команда нужно указать для обертки "flex-wrap:wrap;" . Это свойство говорит какбы "эй, если тебе мало места, то дуй на след строку, мудень" ))
Да, но -) Частенько такой подход эстетически выглядит не очень и стоит поменять направление оси через flex-direction. Зависит от ситуации.
Каким образом выделить ряд элементов и в один клик табуляцией подвинуть контент вправо?
Разве надо задавать body padding 0? По умолчанию у body нет внутренних отступов.
Походу все, кто начинает путь верстальщика делают этот макет)))
пасибааааа
Видео реально супер и очень полезное. Однако, мне как новичку 70% из этого было не понятно. Есть ли в планах для начала чистый html+css?
Этот макет сверстал подписчик после просмотра нескольких видео на этом канале... Всё, что используется в видео я показывал.
опа)) а как можно сделать так,чтобы вы мой макет так посмотрели и указали мне на мои ошибки,можно в видео,можно без?? эта тема очень полезная для новичков,так как наставника у большинства нет,и приходится самим как то искать ошибки,а без знаний это почти не возможно!
Скоро будет -) А если быть точнее, скорее всего в этом месяце. Следите за обновлениями, чтобы не пропустить анонс сбора заявок.
топ
Спасибо
я если честно впервые в жизни вижу, чтобы так было свёрстано, подписчик видимо специально хотел сделать максимально неправильно и тупо, других вариантов у меня в голове нет
Да когда же вы уже запомните отличие маржин от паддинг?))) Магжин это когда ты что-то отодвинул от себя, а паддинг это когда ты сам оброс невидимой стенкой))
Можно было просто написать margin: 0 auto; либо display:flex; justify-content:center;
Как добавлять пробелы(отступы) выделенным элементам в редакторе? весь гугл перерыл что то не нашел.
Да и почему добавлять div элементы. для центрирования сайта? можно добавить только класс всем section элементам?Я так делаю
А как попасть в разбор?
Приходите к автору домой в вечернем платье и попадаете на разбор )
@@stas9066 ахах
th-cam.com/video/fLHyW_4hLfo/w-d-xo.html я думаю вряд ли он это сам сверстал !
я недавно сверстал макет и каждую часть делал из разных видео)))))))
Странно что человек сверставший этот макет не знает как отцентрировать блоки но знает как задать абсолют элелементу, не Вы ли часом этот макет верстали что бы ошибки показать 🙄
Очень просто)
Человек может, что то знать, а что то не знать, что собственно очевидно
Спасибо!