Трудно подобрать слова, чтоб выразить восхищение. Скорость работы и результат просто потрясающие. Такой пример лучшая мотивация усовершенствоваться в этой области. Огромное спасибо.
@@FreelancerLifeStyle Подскажите, я так понимаю вы открывали макет в редакторе Авокод? А чем щас открывать Psd форматы актуальнее и удобнее? Помимо платного авокода
Вёрстка не совсем с нуля и до конца, так как многие подготовительные и промежуточные шаги опущены. Из-за этого не совсем понятно что куда и как, в итоге не получается тоже самое. Для совсем зеленых не пойдёт.
Отличный живой стрим. Детальный, понятный для новичка разбор вёрстки. Учиться у тебя одно удовольствие. Начинающим, как я сейчас, советую смотреть этот стрим и верстать макет после 20-го урока курса и вёрстки тренировочного макета по флексам. На этот момент как раз достаточно знаний. Если делать это ранее, то в голове, скорее всего, будет бардак и непонимание)
Смотрел твой канал 4 месяца назад. До этого момента прочитал 2 книги. Джона Даккета HTML и CSS, и Кейта Гранта CSS для профи, сделал 6 макетов сложнейших, начал изучить JS. Теперь смотрю это видео и вспоминаю себя 4 месяца назад полного чайника и уже чувствую себя не так неловко когда ты шустро набираешь код
@@ЗапасЗнаний никакого отношения к программированию не имел в жизни. Начал задумываться в конце прошлого года в 21 год своей жизни осознав что не хочу работать по специальности, и с начала 2020 твердо решил начать с фронтенда, предварительно ознакомившись с направлениями. Вначале обучения было трудно сконцентрироваться даже на 5 минутных роликах по HTML от Гоши Дударя)). По мере понимания начал проводить все больше времени за изучением минимум 3-5 часов в день, паралелльно работая, оканчивая универ(писал диплом), тренируясь в зале. Конечно пришлось жертвовать чем-то, чтобы больше времени проводить за обучением верстке и не перегореть. Очень боялся практиковаться, даже сейчас не знаю почему. Поэтому сперва попробовал сверстать по видеоролику Анны Блок простой макет. Понял принцип построения и получил нужный первоначальный опыт, а потом пошло понеслось. Книги, ролики про фишки в верстке, вопросы в стаковерфлоу, хабре, улучшение английского, и самое главное мне уже не приходилось заставлять себя делать это, все шло само собой от желания. (может и приходилось, просто мне уже было все равно) Никаких платных курсов, только ютуб и практика + подробное изучение книг, не просто взять и прочитать, а выбирать такие книги в которых автор дает возможность практиковать изученное. Много раз готов был сдаться, но благодаря таким блогерам как Женя удалось сохранить мотивацию и продолжать двигаться. Сейчас вижу первые весомые плоды своего 5 месячного вкалывания
Высший класс ! Большое спасибо ! И еще Жека не надо оправдываться за длительность или скорость твоего мастер класса, кому надо тот смотрит а кому нужно всё быстро-быстро идёт на курсы "Full Stack Developer" за один месяц!)
Собирался заняться практикой), вторая верстка на канале), думаю буду потихоньку списывать за Женей)),создал проект),начал смотреть) и понимаю, что это мы не проходили) и новый шаблон, много всяких добавлений ввели меня в ступор). Осталось смотреть за работой мастера) запоминать фишки и продолжать учебу).Очень приятно глянуть полностью работу верстальщика и тому к чему надо стремится в особенности к скорости работы) и к ювелирному наметанному глазу Фрилансера по жизни), спасибо большое за этот материал)
Отличный стрим, как и другие уроки, много информации, освоил пока только небольшую часть, но подача материала настолько классная что есть желание продолжать.
Огромное спасибо, Евгений! Я вам реально благодарен за ваш труд! Есть место примерно перед уроком с SASS/SCSS которое по моему мнению дизориентирует! В том плане что не умея еще достаточного опыта и не понимая как там все работает начинаем верстать уже с препроцессором SASS/SCSS и все последующие ваши видео верстки тоже с препроцессором. Хотя в вашем же видео "ПЛАН РАЗВИТИЯ ФРОНТЭНД РАЗРАБОТЧИКА" вы советуете перед SCSSсом закрепить все на практике и лишь только ПОТооооМ начинать использовать этот инструмент. Я понимаю что как говорится "дареному коню в зубы не смотрят", но думаю что не я один проваливался в этом моменте! В связи с чем прошу вас Евгений, снять побольше видео с версткой простых макетов без использования препроцессора SASS/SCSS, используя только HTML и CSS!!! У вас есть видео "стрим 1 Верстка простого сайта" Вот побольше бы такого чтобы реально набраться опыта перед сложными макетами!
Так а что тебе мешает брать в интернете макеты и делать в css. А в sass, удобно все делать, в начальных уроках все уже объяснили на счёт css, зачем продолжать пользоваться тем чем в будущем ты почти не будешь пользоваться
@@му3онму3онович Макеты я пробовал верстать но знаний тогда не хватало для этого. Сейчас уже все норм. Я имел ввиду что проходя поэтапно курс есть место где без дополнительных знаний дальше не пройти. У Жеки уже есть видео где он верстает на чистом css с адаптивом. Относительно недавно вышло. Т. е он сам понял что в этом есть необходимость. Думаю не я один имел эту проблему. А по поводу того что на чистом css не придётся верстать это тоже не всегда. Как то я приходил в офис устраиваться и мне сказали что они только планируют начать пользоваться препроцессорами, а пока на чистом css. В любом случае полезно научиться
Я только сейчас понял , что когда стрим смотрел - НИЧЕГО не понимал что происходит. А сейчас второй раз посмотрел и уже процентов 90 четко понял что , почему и зачем . А уроки по верстке я только на этом канале смотрю. ИТОГ - Жека очень хороший преподаватель ! Блин , не поверите у меня карты нет своей. Как заведу- сразу патроном стану .
Классный канал! Очень понятно и доступно подается информация и даже просто когда чаю попить сажусь включаю какой-то стрим или видос с разбором домашки и можно наблюдать и открывать очень много для себя нового! Крутая замена всяким сериальчикам и ютуб-видосикам. Спасибо огромное!
Евгений, спасибо за отличную подачу материала!) Совет, если позволите: чтобы избежать лишних манипуляций с DOMом, вместо хака с классом *ibg* используйте замечательное свойство *object-fit* . Ведь манипуляции с css для браузеров всегда легче и безотказнее манипуляций с js
Фух... осилил стрим, разобрал всю верстку, прикинул как бы сам верстал и вынес по итогу не мало нужной инфы о том как лучше какие либо моменты верстать) Спасибо Жек! Идем далее
01:37:00 Шикарная коробочка для картинок. Теперь какую картинку не впихни, она вписывается в коробочку и не ломает вёрстки! Спасибо, Жека! P.S. Размер в процентах нужен не 100% (высота тогда будет равна ширине 220px, а по макету нужно 225), а 225/220*100=102,27%
Привет, как у тебя дела? Нашел ли ты подобный план изучения верстки с нуля (с дед-лайнами и конкретными материалами)? Если - да, скинь мне, pls. Я вот только начал заниматься, и тоже заинтересовал подобный подход к изучению.
Спасибо за видео урок! Не понятно как работает тут методология верстки по BEM. С самого начала. я начал делать сам изначально, без просмотра видео, получилось:
EN RU ESP
Online ordering ... То есть пытался соблюдать вложенность элементов в блоке верхнего header - согласно видео урока по методологии BEM. А в видео получается:
EN RU ESP
Online ordering ... Почему в div header-top-lang последнее слово пишется через тире и вообще добавляется в ссылки, как будто это новый блок, хотя по смыслу это все еще элемент верхнего header, а значит нужно ставить __ и не прописывать lang (ведь допустима любая вложенность)? Тоже самое потом с лого. У меня: Если как в видео, то:
Фух, сверстал. Все же не везде понимаю твою логику создания оберток. А в остальном все шикарно объясняешь ) Спасибо за труд, Женя! (Лайк как всегда прилагается!)
верстаю 4-й день по этому макету, это моя первая цельная верстка. То тут, то там все ломалось, иногда подсматриваю примерный ход действий ваш. JS JQUERY это боль, я с ними пока не был знаком, и кусок кода, где меняется картинка на фон, у меня оставляет и картинку и фон. Кстати scss тоже отваливается время от времени. В ОБЩЕМ миллион проблем всплывает, и когда ты без опыта, ты даже не понимаешь причин, но очень интересно :) Спасибо за контент.
Все прекрасно) Но есть один нюанс) Уж если вы верстаете с целью научить людей, то вы хотя бы показывайте альтернативные варианты решения задачи)) например с теми же самыми картинками..)) а то получается что стрим может оказаться бесполезным, как только у вас и у других начнутся расхождения) а то вот это вот: Ну тут мои наработки и тут мои наработки, а вот тут тоже мои наработки и вообще я ускорюсь)) Вы же позиционируете себя как канал с образовательным контентом) а как можно научиться, если "ваши наработки" остаются ваши наработками без объяснения)) мое субъективное мнение.
Было очень интересно, спасибо:-) Хочу заметить, что очень сложно концентрироваться на работе отвечая на вопросы и разъясняя свои действия. Так что не так уж и долго вышло.
Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/
За плечами уже 2 сверстанных простеньких макетика, решил сегодня посмотреть как дела у коллеги, загрузил макет выкроил время чтоб позаниматься, включил и охренел. Я такого ещё не проходил ) Что это? Какие миксины? Возвращаюсь обратно в лягушатник, разбираться с основами
Спасибо за твои труды, продолжай в том же духе! Подписался на патреоне, поддержать тебя только за радость, ведь то, что ты делаешь, это реально круто Буду ждать разбор новых макетов и уроки по JS)))
Огромная благодарность, за твой колоссальный труд! Манера подачи материала очень заходит. Вопрос на счет отступов: как ты определяешь какой блок нужно отделить padding, а какой margin ?
Жека! А почему саблайм?! Вроде как давно на ВС код переехал? Спасибо за очередную годноту! Странно, что патронов маловато. Неужели не хочется получать всякие плюшки? Ребята и девчата! Жека реально раздает всякие прикольные вещи, которые вы не найдете в его общеоткрытых уроках. Не реклама, если что. Просто сам пользуюсь и доволен как розовый слон.
Пока посмотрел 25 минут, параллельно повторяя действия в редакторе. Возможно я тороплю события и дальше ты это объясняешь, но сейчас мне не понятно зачем в блоке с логотипом сам логотип оборачивать в , а потом задавать ему свойство display: inline-block? Ведь можно просто оставить тег , у которого display: inline-block по умолчанию. Или это была ошибка из-за спешки?
Привет, очень профессионально работаешь, спасибо за контент. Такой вопрос. Делаю проект, 9 страниц, почти каждая подключает разные библиотеки. Стоит ли весь css и js код компилить в один сжатый и применять для каждой страницы или лучше использовать отдельные скрипты со стилями для каждой страницы отдельно? При этом используется верстка по БЭМу и хотелось бы сохранить адекватную загрузку сайта без тормозов. Спасибо.
Спасибо. Тут все зависит от веса библиотек. Так же нужно помнить про кеш. то есть если вес в приделах розумного и поключив все у тебя зеленая зона на главной, то помни что скрипты кешируются (на правильной настройке сервака) то есть на других страницах уже ничего грузится не будет а вылетит из кеша. Разделяя же на разные файлы загрузка будет выполнятся несколько раз. И вот нужно смотреть что в итоге выгоднее в плане оптимизаци.
Жека, спасибо большое за такой крутой мастер-класс, очень много отличных вещей для себя почерпнул. Жду следующий с нетерпением. Скажи пожалуйста, я заметил, что ты через хот кейс как-то выделяешь все содержимое строки в css, просто ставя курсор в конце свойства. Я что-то так и не смог найти нужное сочетание. Есть только ctrl+l, но выделяется вся строка вместе с отступом.
Спасибо! Следующий стрим уже в черверг th-cam.com/video/xEpuaR837Ho/w-d-xo.html. По поводу выделения, это я так быстро орудую шифт + хоум (если я верно понял)
Никак не пойму, зачем так заморачиваться с картой если просто можно: 1. Перейдите в Google Карты. 2. Откройте карту или панораму из «Просмотра улиц», которую нужно добавить на сайт. 3. Нажмите на значок главного меню в левом верхнем углу экрана. 4. Выберите «Поделитесь с друзьями или получите код карты». 5. В открывшемся окне перейдите на вкладку «Код». 6. Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога. (Нашёл в интернете)
А можно вопрос - возможно, красивее было бы логотип сдвигать не через отрицательный марджин всей строке с меню, а просто сдвигом через релатив только одного логотипа? Или, что сразу приходит в голову - вынести вообще логотип в абсолют и тогда нет нужды разрывать меню на два отдельных nav, что как бы более семантично. Чем этот вариант хуже?
Смотрю ролики последовательно, начал смотреть этот стрим и чет жестко задизморалился- какие-то флексы, непонятные свойства, которые в обучении идут потом, адаптивы, брейкпоинты, файлы JS...( наверное надо сначала смотреть плейлист, и только потом стримы?
ну круто блин, профи он и есть профи, кто еще думает, что сможет отнять заказы у таких профи на биржах фриланса обучившись по любым курсам?... смешно так думать, я только шапку пытался сделать 3 часа...омг...постоянно что то не так получается....ппц
Вопрос если импортировать эти шрифты с какого другого сайта, момент в том будут ли они работать если этот сайт `мордора`, на Украине без впн доступ будет или нет ?
Большое спасибо. Очень круто, поэтому буду учится с шаблоном работать на патреоне. Вопрос: в IT постоянно появляется что-то новое, как ты об этом узнаешь на фрилансе? Я так понимаю, от общения с другими фрилансерами?
начиная с этого этапа 40:25 не получается спрятать меню с помощью java скрипта( вроде все делаю, как на видео, а в итоге у меня значки языков (en, rus, esp) все равно остаются на своем месте, хотя по видео они должны спуститься пониже. Я в js полный ноль, поэтому эта тема для меня пока оч сложная. P.S: Евгений, жду не дождусь, когда у вас выйдут первые уроки по js)))
Может кто сталкивался с такой проблемой. Делал все как у жени, но во втором блоке с колонками почему то не отображаются картинки (ibg). P.S. Стартовый шаблон не использовал , самостоятельно подключал ibg , в первом блоке все норм отобразилось, а во втором нет(
@@s0lo973 ну хозяин канала настроил gulp чтобы компилировать scss в css. У меня только в этом был вопрос, потому что в vs code встроенный компилятор только sass файлов
учусь у тебя/ очень круто рассказываешь/ единственное что я не знаю как мне отточить навык верстки на твоих уроках, так как я сейчас остановился на flexbox а здесь очень много не понятных мне терминов и фитчей/ но скажу так что теперь из за этого я страдаю, так как я купил год назад курс на юдеми и там парень делает все с помощью бустреп и не правильно указывает падинги )) смотрю его уроки но делаю как ты делаешь и голова в кашу но я пытаюсь )) хочу пойти на твой курс по учебе но я не могу себе этого позволить ( спасибо что ты есть )
еще странно, я все повторяла, и на моменте когда проверяем шапку на эмуляции(в эйдже) независимо от размера устройства меню остается как есть, ничего не съезжает
Здравствуйте Евгений, скажите пожалуйста сочетание клавиш "выделения содержимого кавычек" и еще вопрос, в хроме у меня при уменьшении до мобильной версии, шапка с меню не схлопывается а тупо уменьшается до мелкого шрифта, скажите пожалуйста в чем может быть причина?
Жека, при адаптиве меню, когда ты в отладчике работаешь, у тебя при сужении шапки всегда есть отступы справа и слева, а у меня слева плотно прилегает к контенту, а справа вообще один символ уходит за границу. Это какие то твои настройки или я что то не так делаю, вроде все идентично повторил несколько раз. Всю голову уже сломал.
Пока что самый лучший верстальщик которого я встречал на TH-cam в RU сегменте.
Спасибо!
И лучше думаю не будет.
Трудно подобрать слова, чтоб выразить восхищение. Скорость работы и результат просто потрясающие. Такой пример лучшая мотивация усовершенствоваться в этой области. Огромное спасибо.
Дякую! 🤘👍
@@FreelancerLifeStyle
Подскажите, я так понимаю вы открывали макет в редакторе Авокод?
А чем щас открывать Psd форматы актуальнее и удобнее? Помимо платного авокода
@@serge_0_- есть бесплатный ресурс Marsy. В одном из видео Евгений о нем рассказывает. Для начинающих верстальщиков более чем подходит
Вёрстка не совсем с нуля и до конца, так как многие подготовительные и промежуточные шаги опущены. Из-за этого не совсем понятно что куда и как, в итоге не получается тоже самое. Для совсем зеленых не пойдёт.
Не канал, а находка для тех, кто учится и прокачивает свою вёрстку! Спасибо за ваш труд!
Отличный живой стрим. Детальный, понятный для новичка разбор вёрстки. Учиться у тебя одно удовольствие. Начинающим, как я сейчас, советую смотреть этот стрим и верстать макет после 20-го урока курса и вёрстки тренировочного макета по флексам. На этот момент как раз достаточно знаний. Если делать это ранее, то в голове, скорее всего, будет бардак и непонимание)
Спасибо!
Вот я и сижу тут такая с бардаком в голове. Но не сдаемся, только вперед!
Смотрел твой канал 4 месяца назад. До этого момента прочитал 2 книги. Джона Даккета HTML и CSS, и Кейта Гранта CSS для профи, сделал 6 макетов сложнейших, начал изучить JS. Теперь смотрю это видео и вспоминаю себя 4 месяца назад полного чайника и уже чувствую себя не так неловко когда ты шустро набираешь код
@@ЗапасЗнаний никакого отношения к программированию не имел в жизни. Начал задумываться в конце прошлого года в 21 год своей жизни осознав что не хочу работать по специальности, и с начала 2020 твердо решил начать с фронтенда, предварительно ознакомившись с направлениями. Вначале обучения было трудно сконцентрироваться даже на 5 минутных роликах по HTML от Гоши Дударя)). По мере понимания начал проводить все больше времени за изучением минимум 3-5 часов в день, паралелльно работая, оканчивая универ(писал диплом), тренируясь в зале. Конечно пришлось жертвовать чем-то, чтобы больше времени проводить за обучением верстке и не перегореть. Очень боялся практиковаться, даже сейчас не знаю почему. Поэтому сперва попробовал сверстать по видеоролику Анны Блок простой макет. Понял принцип построения и получил нужный первоначальный опыт, а потом пошло понеслось. Книги, ролики про фишки в верстке, вопросы в стаковерфлоу, хабре, улучшение английского, и самое главное мне уже не приходилось заставлять себя делать это, все шло само собой от желания. (может и приходилось, просто мне уже было все равно) Никаких платных курсов, только ютуб и практика + подробное изучение книг, не просто взять и прочитать, а выбирать такие книги в которых автор дает возможность практиковать изученное. Много раз готов был сдаться, но благодаря таким блогерам как Женя удалось сохранить мотивацию и продолжать двигаться. Сейчас вижу первые весомые плоды своего 5 месячного вкалывания
Тайм-коды к видео:
2:55 Подключение шрифтов.
9:33 Анализ и настройка адаптивности. Ширина контентной части.
10:40 Анализ и верстка шапки.
16:30 По поводу лишних оберток.
17:15 Стилизация шапки.
22:07 Стилизация шапки "header-bottom".
25:58 Подгонка шапки под PixelPerfect.
33:08 Адаптив шапки. Breakpoints.
1:03:55 Структура папок и файлов для картинок.
1:05:13 Верстка 1ого блога "private".
1:06:47 Верстка кнопки. Класс "btn".
1:09:35 Стилизация 1ого блока "private".
1:18:25 Адаптив 1ого блока "private".
1:26:30 Верстка 2ого блока "products".
1:30:50 Стилизация 2ого блока "products".
1:49:17 Адаптив 2ого блока "products".
1:52:22 Починка шапки.
1:54:50 Верстка 3ого блока "why".
1:58:21 Стилизация 3ого блока "why".
2:05:38 Адаптив 3ого блока "why".
2:08:55 Верстка 4ого блока "contacts".
2:16:11 Стилизация 4ого блока "contacts".
2:32:12 Адаптив 4ого блока "contacts".
2:34:38 Верстка подвала.
2:38:37 Ответы на вопросы.
Спасибо!
Спасибо! Жаль, что комментарий не закреплён.
Высший класс ! Большое спасибо ! И еще Жека не надо оправдываться за длительность или скорость твоего мастер класса, кому надо тот смотрит а кому нужно всё быстро-быстро идёт на курсы "Full Stack Developer" за один месяц!)
За один месяц Middle Full Stack
Собирался заняться практикой), вторая верстка на канале), думаю буду потихоньку списывать за Женей)),создал проект),начал смотреть) и понимаю, что это мы не проходили) и новый шаблон, много всяких добавлений ввели меня в ступор). Осталось смотреть за работой мастера) запоминать фишки и продолжать учебу).Очень приятно глянуть полностью работу верстальщика и тому к чему надо стремится в особенности к скорости работы) и к ювелирному наметанному глазу Фрилансера по жизни), спасибо большое за этот материал)
Отличный стрим, как и другие уроки, много информации, освоил пока только небольшую часть, но подача материала настолько классная что есть желание продолжать.
Я просто влюблён в этот подход к вёрстке.
Спасибо огромное тебе, Жень!)
Огромное спасибо, Евгений! Я вам реально благодарен за ваш труд! Есть место примерно перед уроком с SASS/SCSS которое по моему мнению дизориентирует! В том плане что не умея еще достаточного опыта и не понимая как там все работает начинаем верстать уже с препроцессором SASS/SCSS и все последующие ваши видео верстки тоже с препроцессором. Хотя в вашем же видео "ПЛАН РАЗВИТИЯ ФРОНТЭНД РАЗРАБОТЧИКА" вы советуете перед SCSSсом закрепить все на практике и лишь только ПОТооооМ начинать использовать этот инструмент. Я понимаю что как говорится "дареному коню в зубы не смотрят", но думаю что не я один проваливался в этом моменте! В связи с чем прошу вас Евгений, снять побольше видео с версткой простых макетов без использования препроцессора SASS/SCSS, используя только HTML и CSS!!! У вас есть видео "стрим 1 Верстка простого сайта" Вот побольше бы такого чтобы реально набраться опыта перед сложными макетами!
Так а что тебе мешает брать в интернете макеты и делать в css. А в sass, удобно все делать, в начальных уроках все уже объяснили на счёт css, зачем продолжать пользоваться тем чем в будущем ты почти не будешь пользоваться
@@му3онму3онович Макеты я пробовал верстать но знаний тогда не хватало для этого. Сейчас уже все норм. Я имел ввиду что проходя поэтапно курс есть место где без дополнительных знаний дальше не пройти. У Жеки уже есть видео где он верстает на чистом css с адаптивом. Относительно недавно вышло. Т. е он сам понял что в этом есть необходимость. Думаю не я один имел эту проблему. А по поводу того что на чистом css не придётся верстать это тоже не всегда. Как то я приходил в офис устраиваться и мне сказали что они только планируют начать пользоваться препроцессорами, а пока на чистом css. В любом случае полезно научиться
Я просто смотрю уже когда он выпустил все и я многое уже глянул, я просто не знаю в какой очередности все выходило)
Я только сейчас понял , что когда стрим смотрел - НИЧЕГО не понимал что происходит. А сейчас второй раз посмотрел и уже процентов 90 четко понял что , почему и зачем . А уроки по верстке я только на этом канале смотрю. ИТОГ - Жека очень хороший преподаватель ! Блин , не поверите у меня карты нет своей. Как заведу- сразу патроном стану .
Спасибо большое! 👍
П\С можно оплатить через QIWI инструкция тут th-cam.com/channels/edskVwIKiZJsO8XdJdLKnA.htmlcommunity?lb=Ugz1zZfpH3QjAzVm6Zl4AaABCQ
Классный канал! Очень понятно и доступно подается информация и даже просто когда чаю попить сажусь включаю какой-то стрим или видос с разбором домашки и можно наблюдать и открывать очень много для себя нового! Крутая замена всяким сериальчикам и ютуб-видосикам. Спасибо огромное!
Спасибо вам за такой шикарный курс, желаю всего самого наилучшего, удачи на ютубе, ждем новые видео!
Отлично верстаешь, вроде 3 часа стрим, а смотреть не скучно (я смотрел запись)! Продолжай в том же духе и успехов тебе!
Вижу Жеку и сразу хочется пожать руку. Спасибо
Спасибо за мастер-класс, Жека! Голова взрывается и много непонятного, и это все таки хорошо)
Как успехи?
@@climberg нормально, за исключением ibg, потому что он не работает так, как показано в видео, а попытки разобраться ни к чему не привели.
Из одного видео нашёл кучу моментов, в которых я тупил и ты решил их, спасибо)
Супер, рад что полезно!
очень хочу стать верстальщиком. а дальше уже посмотрим!) учусь на твоем контенте. очень здорово, спасибо большое!!!
Вот бы тут был человек с тайм кодами )
Иногда нужно пересмотреть что-то спустя долгое время чтобы вспомнить тот или иной способ
А видео очень большое
Согласен :) 😅
Спасибо за труды) такую же фишку с бэкграундом картинкой родительского блока юзал при разработке темы на wordpress. полезный прием)
Да, штука полезная, выручает)
Класний макет підібрано для стриму! Візуально гарний, що аж самій закортіло спробувати його зверстати.
Евгений, спасибо за отличную подачу материала!)
Совет, если позволите: чтобы избежать лишних манипуляций с DOMом, вместо хака с классом *ibg* используйте замечательное свойство *object-fit* . Ведь манипуляции с css для браузеров всегда легче и безотказнее манипуляций с js
IE 11
Понравилось все, спасибо, но думаю наработки каждый должен брать по ходу роста профессиональных навыков. Удачи!
Верно, спасибо!
Фух... осилил стрим, разобрал всю верстку, прикинул как бы сам верстал и вынес по итогу не мало нужной инфы о том как лучше какие либо моменты верстать) Спасибо Жек! Идем далее
Супер! Только вперед!
Жека, крассава! Как всегда: чётко, по делу, никакой "воды"! Только полезная информация и навыки.
Спасибо! Стараюсь! 👍🤟
Старайся и дальше, так держать! И мы всегда будет твоими верными слушателями и последователями.
Хороший пример, лучше один раз увидеть как делать правильно, чем самому к этому приходить
01:37:00 Шикарная коробочка для картинок. Теперь какую картинку не впихни, она вписывается в коробочку и не ломает вёрстки!
Спасибо, Жека!
P.S. Размер в процентах нужен не 100% (высота тогда будет равна ширине 220px, а по макету нужно 225), а 225/220*100=102,27%
Вкачать навык и прийти к заработку в $100+ / час - звучит как прекрасная цель :)
Это да)
А сделай видос про четкий план изучение, например "вот неделя нужно за неделю изучить html сначала это потом это" ну ты понял, будет очень круто!
Что-то придумаю)
Клевая идея
Привет, как у тебя дела? Нашел ли ты подобный план изучения верстки с нуля (с дед-лайнами и конкретными материалами)? Если - да, скинь мне, pls. Я вот только начал заниматься, и тоже заинтересовал подобный подход к изучению.
@@default2199 webmasters.teamdev.com/#html
Хотите четкий план изучения? Смотрите строго с первого видео, не пропуская ни один урок, здесь у Жени.
Спасибо за видео урок!
Не понятно как работает тут методология верстки по BEM. С самого начала.
я начал делать сам изначально, без просмотра видео, получилось:
EN
RU
ESP
Online ordering
...
То есть пытался соблюдать вложенность элементов в блоке верхнего header - согласно видео урока по методологии BEM.
А в видео получается:
EN
RU
ESP
Online ordering
...
Почему в div header-top-lang последнее слово пишется через тире и вообще добавляется в ссылки, как будто это новый блок, хотя по смыслу это все еще элемент верхнего header, а значит нужно ставить __ и не прописывать lang (ведь допустима любая вложенность)?
Тоже самое потом с лого. У меня:
Если как в видео, то:
Фух, сверстал. Все же не везде понимаю твою логику создания оберток. А в остальном все шикарно объясняешь ) Спасибо за труд, Женя! (Лайк как всегда прилагается!)
@@imbydlo1552 не было опыта.
@@imbydlo1552 вышло все норм. Тут главное начать.
Спасибо за видео. Много нового узнал о верстке
Отлично. Побольше бы таких уроков )) Удачи!!
верстаю 4-й день по этому макету, это моя первая цельная верстка. То тут, то там все ломалось, иногда подсматриваю примерный ход действий ваш. JS JQUERY это боль, я с ними пока не был знаком, и кусок кода, где меняется картинка на фон, у меня оставляет и картинку и фон. Кстати scss тоже отваливается время от времени. В ОБЩЕМ миллион проблем всплывает, и когда ты без опыта, ты даже не понимаешь причин, но очень интересно :) Спасибо за контент.
Как всегда круто, спасибо Жека
Пожалуйста!
Жека, круто! Тоже так хочу) Мне этот макет неделю верстать
Уверен, все получится!
1:54:42 - всё я замолкаю
1:54:49 - "Отлично"
xD
Все прекрасно) Но есть один нюанс) Уж если вы верстаете с целью научить людей, то вы хотя бы показывайте альтернативные варианты решения задачи)) например с теми же самыми картинками..)) а то получается что стрим может оказаться бесполезным, как только у вас и у других начнутся расхождения) а то вот это вот: Ну тут мои наработки и тут мои наработки, а вот тут тоже мои наработки и вообще я ускорюсь)) Вы же позиционируете себя как канал с образовательным контентом) а как можно научиться, если "ваши наработки" остаются ваши наработками без объяснения)) мое субъективное мнение.
Спасибо большое! ТОП.
Пожалуйста!
Дякую дуже цікаво, і супер швидко (P.S. дивлюсь на швидкості 1.6-1.75) просто вогонь ,
аееее )))сверсталось)хоть я таргетом без js но все равно классно получилось! СПАСИБОООО!
В общем-то однозначно лайк! Но со стороны, классов так много, что на 2-часе, в очередной раз запутавшись, просто забил на вёрстку :)
Было очень интересно, спасибо:-) Хочу заметить, что очень сложно концентрироваться на работе отвечая на вопросы и разъясняя свои действия. Так что не так уж и долго вышло.
Спасибо! Топ контент для новичка!
Спасибо тебе большое!!!
Спасибо за стрим!) Я 4 дня это верстал))))
Ну, тоже ничего
Да, с БЭМ конечно у меня проблемы. ВРоде урок по бэм посмотрел, понятно, но тут опять запутался, плюс куча оберток путают.
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Без функции ibg (); в IE всё прекрасно работает, проверил. Лишний код в JS )
Ок)
Спасибо большое!
Красотень вышла!!
Я рад)
За плечами уже 2 сверстанных простеньких макетика, решил сегодня посмотреть как дела у коллеги, загрузил макет выкроил время чтоб позаниматься, включил и охренел. Я такого ещё не проходил ) Что это? Какие миксины? Возвращаюсь обратно в лягушатник, разбираться с основами
Добрый день, Евгений. По моему нужно добавить background-color: white; в контейнер основной части и в footer. Спасибо видео отличное.
Ура-а-а!!! Я стал патроном)))
Ура!
где можно посмотреть про полное приготовление к верстке , настрйока кит, scss и тд ?
Спасибо за твои труды, продолжай в том же духе!
Подписался на патреоне, поддержать тебя только за радость, ведь то, что ты делаешь, это реально круто
Буду ждать разбор новых макетов и уроки по JS)))
Ништяк!
Спасибо!
Огромная благодарность, за твой колоссальный труд! Манера подачи материала очень заходит. Вопрос на счет отступов: как ты определяешь какой блок нужно отделить padding, а какой margin ?
Про отступы есть отдельный урок, стоит его посмотреть th-cam.com/video/RQqzOTUa9Ig/w-d-xo.html
Thank very much! It's very good content! You are cool man.
Tnx :)
01:45:40 - Надёжные колонки на flex
Да!
О, да! Сколько же нервов мне съели мои стремные колонки на флексах) Наконец-то, нашел решение)
Молодец!
Спасибо! 🤟
Можно вопрос а зачем в mix flexbox ставить значение font-size: 0;?
За 2 месяца обучения html + css и 4 месяцам обучения JAVASCRIPT (без jquery итп.) сверстать смог)
У меня глаза открылись тоже через 6 месяцев. Очень много не слишком простой информации, которую нужно осмыслить. Удачи!
Буду атаковать:)
Спасибооо!
Пожалуйста!
Жека! А почему саблайм?! Вроде как давно на ВС код переехал?
Спасибо за очередную годноту!
Странно, что патронов маловато. Неужели не хочется получать всякие плюшки?
Ребята и девчата! Жека реально раздает всякие прикольные вещи, которые вы не найдете в его общеоткрытых уроках.
Не реклама, если что. Просто сам пользуюсь и доволен как розовый слон.
Видео старое)
@@FreelancerLifeStyle Хах! Я на дату не посмотрел=))) Ну и ладно. Всё равно я этот ролик не видел, так для меня видео новое! Спасибо.
Пока посмотрел 25 минут, параллельно повторяя действия в редакторе. Возможно я тороплю события и дальше ты это объясняешь, но сейчас мне не понятно зачем в блоке с логотипом сам логотип оборачивать в , а потом задавать ему свойство display: inline-block? Ведь можно просто оставить тег , у которого display: inline-block по умолчанию. Или это была ошибка из-за спешки?
Возможно, нужно смотреть уже не помню что там.
Привет, очень профессионально работаешь, спасибо за контент. Такой вопрос.
Делаю проект, 9 страниц, почти каждая подключает разные библиотеки. Стоит ли весь css и js код компилить в один сжатый и применять для каждой страницы или лучше использовать отдельные скрипты со стилями для каждой страницы отдельно? При этом используется верстка по БЭМу и хотелось бы сохранить адекватную загрузку сайта без тормозов. Спасибо.
Спасибо. Тут все зависит от веса библиотек. Так же нужно помнить про кеш. то есть если вес в приделах розумного и поключив все у тебя зеленая зона на главной, то помни что скрипты кешируются (на правильной настройке сервака) то есть на других страницах уже ничего грузится не будет а вылетит из кеша. Разделяя же на разные файлы загрузка будет выполнятся несколько раз. И вот нужно смотреть что в итоге выгоднее в плане оптимизаци.
@@FreelancerLifeStyle Ок, спасибо)
Жека, спасибо большое за такой крутой мастер-класс, очень много отличных вещей для себя почерпнул. Жду следующий с нетерпением.
Скажи пожалуйста, я заметил, что ты через хот кейс как-то выделяешь все содержимое строки в css, просто ставя курсор в конце свойства. Я что-то так и не смог найти нужное сочетание. Есть только ctrl+l, но выделяется вся строка вместе с отступом.
Спасибо! Следующий стрим уже в черверг th-cam.com/video/xEpuaR837Ho/w-d-xo.html. По поводу выделения, это я так быстро орудую шифт + хоум (если я верно понял)
@@FreelancerLifeStyle Супер, все верно. Вот и еще одну фичу себе в багаж положил))) Еще раз спасибо!
Евгений СКРИПТЫ В СТУДИЮ, ЖДУ!!!!
Выложил: www.patreon.com/posts/materialy-so-no-30000661
@@FreelancerLifeStyle Скачал, спасибо огромное! Ждем новых видео!
Уже снимаю)
Никак не пойму, зачем так заморачиваться с картой если просто можно:
1. Перейдите в Google Карты.
2. Откройте карту или панораму из «Просмотра улиц», которую нужно добавить на сайт.
3. Нажмите на значок главного меню в левом верхнем углу экрана.
4. Выберите «Поделитесь с друзьями или получите код карты».
5. В открывшемся окне перейдите на вкладку «Код».
6. Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога.
(Нашёл в интернете)
Ну да, если с помощью js, то можно стилизировать. Но в этом случае это не нужно.
спасибо!)
Евгений, возможно ли, полученные на патреоне макеты использовать для своего портфолио или выложить на гит?
Да, конечно
Жень, а у тебя не будет времени случайно запилить видос по кастомным картам? Или в этом видео уже исчерпывающся информация?
Сделаю!
@@FreelancerLifeStyle круто!)) Как же я рад!))
Скрыл placeholder через css без js, то есть если элемент активен, то обращаюсь к плейсхолдер и размер шрифта в 0 ставлю. В итоге при клике текста нет.
А можно вопрос - возможно, красивее было бы логотип сдвигать не через отрицательный марджин всей строке с меню, а просто сдвигом через релатив только одного логотипа? Или, что сразу приходит в голову - вынести вообще логотип в абсолют и тогда нет нужды разрывать меню на два отдельных nav, что как бы более семантично. Чем этот вариант хуже?
2:22:48 подключение карты
(комментарий для себя)
*Женя привет! А почему flexbox записан в виде миксина, а не шаблона например? Ведь там не используются переменные...*
Я такой же вопрос задавала. Женя сказал, что как-то само получилось. Можно и шаблоном.
А можно сделать видео с примером верстки на flex не лэндинга, а простого трехколоночного сайта?
С webmoney можно поддержать твой канал? Или только через PayPal, я из Беларуси.
Женя, подскажи, пожалуйста, как в твоем новом шаблоне подключить карту. Там это немного по другому устроено.
На патреоне есть инструкция к шаблону!
Ничего не понял. Зачем мне результат верстки? Я же тут чтобы учиться. Все уже готово и я не пойму откуда что взялось. Что за &lock?
спс
Пожалуйста! 👍🤘
Смотрю ролики последовательно, начал смотреть этот стрим и чет жестко задизморалился- какие-то флексы, непонятные свойства, которые в обучении идут потом, адаптивы, брейкпоинты, файлы JS...( наверное надо сначала смотреть плейлист, и только потом стримы?
Верно, это мастер-классы а не уроки
пхах)) тоже прошел 15 уроков, вроде теперь следом идет эта верстка, но встречаются вещи, которые не учил - посмотрел, они чуть впереди по плейлисту))
ну круто блин, профи он и есть профи, кто еще думает, что сможет отнять заказы у таких профи на биржах фриланса обучившись по любым курсам?... смешно так думать, я только шапку пытался сделать 3 часа...омг...постоянно что то не так получается....ппц
Спасибо!
Спасибо за мастер-класс! А какие именно глюки с формами у айфонов?
Ну, например, закругленные углы. Самодеятельность с клавиатурой и прочее
Вопрос
если импортировать эти шрифты с какого другого сайта, момент в том будут ли они работать если этот сайт `мордора`, на Украине без впн доступ будет или нет ?
Подскажите, почему картинка (как бэкграунд) начала увеличиваться по высоте, хотя паддинг-боттом 100%? Что-то я не понимаю. 1:36:28
Большое спасибо. Очень круто, поэтому буду учится с шаблоном работать на патреоне. Вопрос: в IT постоянно появляется что-то новое, как ты об этом узнаешь на фрилансе? Я так понимаю, от общения с другими фрилансерами?
Я умею читать, читаю новости и статьи.
начиная с этого этапа 40:25 не получается спрятать меню с помощью java скрипта( вроде все делаю, как на видео, а в итоге у меня значки языков (en, rus, esp) все равно остаются на своем месте, хотя по видео они должны спуститься пониже. Я в js полный ноль, поэтому эта тема для меня пока оч сложная. P.S: Евгений, жду не дождусь, когда у вас выйдут первые уроки по js)))
Такая же беда. Видимо js не подключается.
Может кто сталкивался с такой проблемой. Делал все как у жени, но во втором блоке с колонками почему то не отображаются картинки (ibg).
P.S. Стартовый шаблон не использовал , самостоятельно подключал ibg , в первом блоке все норм отобразилось, а во втором нет(
Много полезного материала. Большое спасибо за труд.
п.с. Если не трудно, напишите название плагина для хрома пиксель перфект.
Напиши в гугле pixel perfect и все найдёшь
@media (max-width: $md1+px) {
margin: 0px 20px 0px 0px;
}
у меня ошибка когда плюсую -> $md1+px
ошибка на - px
что я упускаю ?
вопрос, а перейдя на VS Code ты все равно пользуешься Prepros?
Узнал ответ? Есть надобность препроса в Vs code
@@s0lo973 ну хозяин канала настроил gulp чтобы компилировать scss в css. У меня только в этом был вопрос, потому что в vs code встроенный компилятор только sass файлов
@@s0lo973 настройки вроде он на патреоне выкладывал для подпищиков
учусь у тебя/ очень круто рассказываешь/ единственное что я не знаю как мне отточить навык верстки на твоих уроках, так как я сейчас остановился на flexbox а здесь очень много не понятных мне терминов и фитчей/ но скажу так что теперь из за этого я страдаю, так как я купил год назад курс на юдеми и там парень делает все с помощью бустреп и не правильно указывает падинги )) смотрю его уроки но делаю как ты делаешь и голова в кашу но я пытаюсь )) хочу пойти на твой курс по учебе но я не могу себе этого позволить ( спасибо что ты есть )
как успехи?
еще странно, я все повторяла, и на моменте когда проверяем шапку на эмуляции(в эйдже) независимо от размера устройства меню остается как есть, ничего не съезжает
Здравствуйте Евгений, скажите пожалуйста сочетание клавиш "выделения содержимого кавычек" и еще вопрос, в хроме у меня при уменьшении до мобильной версии, шапка с меню не схлопывается а тупо уменьшается до мелкого шрифта, скажите пожалуйста в чем может быть причина?
Если верно помню это умееет emmet, нужно посмотреть настройки и назначить свое сочетание
Адаптив th-cam.com/video/XbnAKjjlgc4/w-d-xo.html
👍🎉
Спасибо!
Жека, при адаптиве меню, когда ты в отладчике работаешь, у тебя при сужении шапки всегда есть отступы справа и слева, а у меня слева плотно прилегает к контенту, а справа вообще один символ уходит за границу. Это какие то твои настройки или я что то не так делаю, вроде все идентично повторил несколько раз. Всю голову уже сломал.