Вёрстка не совсем с нуля и до конца, так как многие подготовительные и промежуточные шаги опущены. Из-за этого не совсем понятно что куда и как, в итоге не получается тоже самое. Для совсем зеленых не пойдёт.
Трудно подобрать слова, чтоб выразить восхищение. Скорость работы и результат просто потрясающие. Такой пример лучшая мотивация усовершенствоваться в этой области. Огромное спасибо.
@@FreelancerLifeStyle Подскажите, я так понимаю вы открывали макет в редакторе Авокод? А чем щас открывать Psd форматы актуальнее и удобнее? Помимо платного авокода
Смотрел твой канал 4 месяца назад. До этого момента прочитал 2 книги. Джона Даккета HTML и CSS, и Кейта Гранта CSS для профи, сделал 6 макетов сложнейших, начал изучить JS. Теперь смотрю это видео и вспоминаю себя 4 месяца назад полного чайника и уже чувствую себя не так неловко когда ты шустро набираешь код
@@ЗапасЗнаний никакого отношения к программированию не имел в жизни. Начал задумываться в конце прошлого года в 21 год своей жизни осознав что не хочу работать по специальности, и с начала 2020 твердо решил начать с фронтенда, предварительно ознакомившись с направлениями. Вначале обучения было трудно сконцентрироваться даже на 5 минутных роликах по HTML от Гоши Дударя)). По мере понимания начал проводить все больше времени за изучением минимум 3-5 часов в день, паралелльно работая, оканчивая универ(писал диплом), тренируясь в зале. Конечно пришлось жертвовать чем-то, чтобы больше времени проводить за обучением верстке и не перегореть. Очень боялся практиковаться, даже сейчас не знаю почему. Поэтому сперва попробовал сверстать по видеоролику Анны Блок простой макет. Понял принцип построения и получил нужный первоначальный опыт, а потом пошло понеслось. Книги, ролики про фишки в верстке, вопросы в стаковерфлоу, хабре, улучшение английского, и самое главное мне уже не приходилось заставлять себя делать это, все шло само собой от желания. (может и приходилось, просто мне уже было все равно) Никаких платных курсов, только ютуб и практика + подробное изучение книг, не просто взять и прочитать, а выбирать такие книги в которых автор дает возможность практиковать изученное. Много раз готов был сдаться, но благодаря таким блогерам как Женя удалось сохранить мотивацию и продолжать двигаться. Сейчас вижу первые весомые плоды своего 5 месячного вкалывания
Отличный живой стрим. Детальный, понятный для новичка разбор вёрстки. Учиться у тебя одно удовольствие. Начинающим, как я сейчас, советую смотреть этот стрим и верстать макет после 20-го урока курса и вёрстки тренировочного макета по флексам. На этот момент как раз достаточно знаний. Если делать это ранее, то в голове, скорее всего, будет бардак и непонимание)
Собирался заняться практикой), вторая верстка на канале), думаю буду потихоньку списывать за Женей)),создал проект),начал смотреть) и понимаю, что это мы не проходили) и новый шаблон, много всяких добавлений ввели меня в ступор). Осталось смотреть за работой мастера) запоминать фишки и продолжать учебу).Очень приятно глянуть полностью работу верстальщика и тому к чему надо стремится в особенности к скорости работы) и к ювелирному наметанному глазу Фрилансера по жизни), спасибо большое за этот материал)
Высший класс ! Большое спасибо ! И еще Жека не надо оправдываться за длительность или скорость твоего мастер класса, кому надо тот смотрит а кому нужно всё быстро-быстро идёт на курсы "Full Stack Developer" за один месяц!)
Отличный стрим, как и другие уроки, много информации, освоил пока только небольшую часть, но подача материала настолько классная что есть желание продолжать.
Я только сейчас понял , что когда стрим смотрел - НИЧЕГО не понимал что происходит. А сейчас второй раз посмотрел и уже процентов 90 четко понял что , почему и зачем . А уроки по верстке я только на этом канале смотрю. ИТОГ - Жека очень хороший преподаватель ! Блин , не поверите у меня карты нет своей. Как заведу- сразу патроном стану .
Огромное спасибо, Евгений! Я вам реально благодарен за ваш труд! Есть место примерно перед уроком с SASS/SCSS которое по моему мнению дизориентирует! В том плане что не умея еще достаточного опыта и не понимая как там все работает начинаем верстать уже с препроцессором SASS/SCSS и все последующие ваши видео верстки тоже с препроцессором. Хотя в вашем же видео "ПЛАН РАЗВИТИЯ ФРОНТЭНД РАЗРАБОТЧИКА" вы советуете перед SCSSсом закрепить все на практике и лишь только ПОТооооМ начинать использовать этот инструмент. Я понимаю что как говорится "дареному коню в зубы не смотрят", но думаю что не я один проваливался в этом моменте! В связи с чем прошу вас Евгений, снять побольше видео с версткой простых макетов без использования препроцессора SASS/SCSS, используя только HTML и CSS!!! У вас есть видео "стрим 1 Верстка простого сайта" Вот побольше бы такого чтобы реально набраться опыта перед сложными макетами!
Так а что тебе мешает брать в интернете макеты и делать в css. А в sass, удобно все делать, в начальных уроках все уже объяснили на счёт css, зачем продолжать пользоваться тем чем в будущем ты почти не будешь пользоваться
@@му3онму3онович Макеты я пробовал верстать но знаний тогда не хватало для этого. Сейчас уже все норм. Я имел ввиду что проходя поэтапно курс есть место где без дополнительных знаний дальше не пройти. У Жеки уже есть видео где он верстает на чистом css с адаптивом. Относительно недавно вышло. Т. е он сам понял что в этом есть необходимость. Думаю не я один имел эту проблему. А по поводу того что на чистом css не придётся верстать это тоже не всегда. Как то я приходил в офис устраиваться и мне сказали что они только планируют начать пользоваться препроцессорами, а пока на чистом css. В любом случае полезно научиться
Классный канал! Очень понятно и доступно подается информация и даже просто когда чаю попить сажусь включаю какой-то стрим или видос с разбором домашки и можно наблюдать и открывать очень много для себя нового! Крутая замена всяким сериальчикам и ютуб-видосикам. Спасибо огромное!
Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/
Евгений, спасибо за отличную подачу материала!) Совет, если позволите: чтобы избежать лишних манипуляций с DOMом, вместо хака с классом *ibg* используйте замечательное свойство *object-fit* . Ведь манипуляции с css для браузеров всегда легче и безотказнее манипуляций с js
Спасибо за видео урок! Не понятно как работает тут методология верстки по BEM. С самого начала. я начал делать сам изначально, без просмотра видео, получилось:
EN RU ESP
Online ordering ... То есть пытался соблюдать вложенность элементов в блоке верхнего header - согласно видео урока по методологии BEM. А в видео получается:
EN RU ESP
Online ordering ... Почему в div header-top-lang последнее слово пишется через тире и вообще добавляется в ссылки, как будто это новый блок, хотя по смыслу это все еще элемент верхнего header, а значит нужно ставить __ и не прописывать lang (ведь допустима любая вложенность)? Тоже самое потом с лого. У меня: Если как в видео, то:
Фух... осилил стрим, разобрал всю верстку, прикинул как бы сам верстал и вынес по итогу не мало нужной инфы о том как лучше какие либо моменты верстать) Спасибо Жек! Идем далее
01:37:00 Шикарная коробочка для картинок. Теперь какую картинку не впихни, она вписывается в коробочку и не ломает вёрстки! Спасибо, Жека! P.S. Размер в процентах нужен не 100% (высота тогда будет равна ширине 220px, а по макету нужно 225), а 225/220*100=102,27%
Фух, сверстал. Все же не везде понимаю твою логику создания оберток. А в остальном все шикарно объясняешь ) Спасибо за труд, Женя! (Лайк как всегда прилагается!)
верстаю 4-й день по этому макету, это моя первая цельная верстка. То тут, то там все ломалось, иногда подсматриваю примерный ход действий ваш. JS JQUERY это боль, я с ними пока не был знаком, и кусок кода, где меняется картинка на фон, у меня оставляет и картинку и фон. Кстати scss тоже отваливается время от времени. В ОБЩЕМ миллион проблем всплывает, и когда ты без опыта, ты даже не понимаешь причин, но очень интересно :) Спасибо за контент.
Привет, как у тебя дела? Нашел ли ты подобный план изучения верстки с нуля (с дед-лайнами и конкретными материалами)? Если - да, скинь мне, pls. Я вот только начал заниматься, и тоже заинтересовал подобный подход к изучению.
Было очень интересно, спасибо:-) Хочу заметить, что очень сложно концентрироваться на работе отвечая на вопросы и разъясняя свои действия. Так что не так уж и долго вышло.
Все прекрасно) Но есть один нюанс) Уж если вы верстаете с целью научить людей, то вы хотя бы показывайте альтернативные варианты решения задачи)) например с теми же самыми картинками..)) а то получается что стрим может оказаться бесполезным, как только у вас и у других начнутся расхождения) а то вот это вот: Ну тут мои наработки и тут мои наработки, а вот тут тоже мои наработки и вообще я ускорюсь)) Вы же позиционируете себя как канал с образовательным контентом) а как можно научиться, если "ваши наработки" остаются ваши наработками без объяснения)) мое субъективное мнение.
Огромная благодарность, за твой колоссальный труд! Манера подачи материала очень заходит. Вопрос на счет отступов: как ты определяешь какой блок нужно отделить padding, а какой margin ?
За плечами уже 2 сверстанных простеньких макетика, решил сегодня посмотреть как дела у коллеги, загрузил макет выкроил время чтоб позаниматься, включил и охренел. Я такого ещё не проходил ) Что это? Какие миксины? Возвращаюсь обратно в лягушатник, разбираться с основами
Спасибо за твои труды, продолжай в том же духе! Подписался на патреоне, поддержать тебя только за радость, ведь то, что ты делаешь, это реально круто Буду ждать разбор новых макетов и уроки по JS)))
Никак не пойму, зачем так заморачиваться с картой если просто можно: 1. Перейдите в Google Карты. 2. Откройте карту или панораму из «Просмотра улиц», которую нужно добавить на сайт. 3. Нажмите на значок главного меню в левом верхнем углу экрана. 4. Выберите «Поделитесь с друзьями или получите код карты». 5. В открывшемся окне перейдите на вкладку «Код». 6. Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога. (Нашёл в интернете)
Жека, спасибо большое за такой крутой мастер-класс, очень много отличных вещей для себя почерпнул. Жду следующий с нетерпением. Скажи пожалуйста, я заметил, что ты через хот кейс как-то выделяешь все содержимое строки в css, просто ставя курсор в конце свойства. Я что-то так и не смог найти нужное сочетание. Есть только ctrl+l, но выделяется вся строка вместе с отступом.
Спасибо! Следующий стрим уже в черверг ruclips.net/video/xEpuaR837Ho/видео.html. По поводу выделения, это я так быстро орудую шифт + хоум (если я верно понял)
@@s0lo973 ну хозяин канала настроил gulp чтобы компилировать scss в css. У меня только в этом был вопрос, потому что в vs code встроенный компилятор только sass файлов
ну круто блин, профи он и есть профи, кто еще думает, что сможет отнять заказы у таких профи на биржах фриланса обучившись по любым курсам?... смешно так думать, я только шапку пытался сделать 3 часа...омг...постоянно что то не так получается....ппц
Привет, очень профессионально работаешь, спасибо за контент. Такой вопрос. Делаю проект, 9 страниц, почти каждая подключает разные библиотеки. Стоит ли весь css и js код компилить в один сжатый и применять для каждой страницы или лучше использовать отдельные скрипты со стилями для каждой страницы отдельно? При этом используется верстка по БЭМу и хотелось бы сохранить адекватную загрузку сайта без тормозов. Спасибо.
Спасибо. Тут все зависит от веса библиотек. Так же нужно помнить про кеш. то есть если вес в приделах розумного и поключив все у тебя зеленая зона на главной, то помни что скрипты кешируются (на правильной настройке сервака) то есть на других страницах уже ничего грузится не будет а вылетит из кеша. Разделяя же на разные файлы загрузка будет выполнятся несколько раз. И вот нужно смотреть что в итоге выгоднее в плане оптимизаци.
Пока посмотрел 25 минут, параллельно повторяя действия в редакторе. Возможно я тороплю события и дальше ты это объясняешь, но сейчас мне не понятно зачем в блоке с логотипом сам логотип оборачивать в , а потом задавать ему свойство display: inline-block? Ведь можно просто оставить тег , у которого display: inline-block по умолчанию. Или это была ошибка из-за спешки?
А можно вопрос - возможно, красивее было бы логотип сдвигать не через отрицательный марджин всей строке с меню, а просто сдвигом через релатив только одного логотипа? Или, что сразу приходит в голову - вынести вообще логотип в абсолют и тогда нет нужды разрывать меню на два отдельных nav, что как бы более семантично. Чем этот вариант хуже?
Жека! А почему саблайм?! Вроде как давно на ВС код переехал? Спасибо за очередную годноту! Странно, что патронов маловато. Неужели не хочется получать всякие плюшки? Ребята и девчата! Жека реально раздает всякие прикольные вещи, которые вы не найдете в его общеоткрытых уроках. Не реклама, если что. Просто сам пользуюсь и доволен как розовый слон.
Смотрю ролики последовательно, начал смотреть этот стрим и чет жестко задизморалился- какие-то флексы, непонятные свойства, которые в обучении идут потом, адаптивы, брейкпоинты, файлы JS...( наверное надо сначала смотреть плейлист, и только потом стримы?
Вопрос если импортировать эти шрифты с какого другого сайта, момент в том будут ли они работать если этот сайт `мордора`, на Украине без впн доступ будет или нет ?
Жека, при адаптиве меню, когда ты в отладчике работаешь, у тебя при сужении шапки всегда есть отступы справа и слева, а у меня слева плотно прилегает к контенту, а справа вообще один символ уходит за границу. Это какие то твои настройки или я что то не так делаю, вроде все идентично повторил несколько раз. Всю голову уже сломал.
начиная с этого этапа 40:25 не получается спрятать меню с помощью java скрипта( вроде все делаю, как на видео, а в итоге у меня значки языков (en, rus, esp) все равно остаются на своем месте, хотя по видео они должны спуститься пониже. Я в js полный ноль, поэтому эта тема для меня пока оч сложная. P.S: Евгений, жду не дождусь, когда у вас выйдут первые уроки по js)))
Вёрстка не совсем с нуля и до конца, так как многие подготовительные и промежуточные шаги опущены. Из-за этого не совсем понятно что куда и как, в итоге не получается тоже самое. Для совсем зеленых не пойдёт.
Пока что самый лучший верстальщик которого я встречал на RUclips в RU сегменте.
Спасибо!
И лучше думаю не будет.
Трудно подобрать слова, чтоб выразить восхищение. Скорость работы и результат просто потрясающие. Такой пример лучшая мотивация усовершенствоваться в этой области. Огромное спасибо.
Дякую! 🤘👍
@@FreelancerLifeStyle
Подскажите, я так понимаю вы открывали макет в редакторе Авокод?
А чем щас открывать Psd форматы актуальнее и удобнее? Помимо платного авокода
@@serge_0_- есть бесплатный ресурс Marsy. В одном из видео Евгений о нем рассказывает. Для начинающих верстальщиков более чем подходит
Не канал, а находка для тех, кто учится и прокачивает свою вёрстку! Спасибо за ваш труд!
Тайм-коды к видео:
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 Ответы на вопросы.
Спасибо!
Спасибо! Жаль, что комментарий не закреплён.
Смотрел твой канал 4 месяца назад. До этого момента прочитал 2 книги. Джона Даккета HTML и CSS, и Кейта Гранта CSS для профи, сделал 6 макетов сложнейших, начал изучить JS. Теперь смотрю это видео и вспоминаю себя 4 месяца назад полного чайника и уже чувствую себя не так неловко когда ты шустро набираешь код
@@ЗапасЗнаний никакого отношения к программированию не имел в жизни. Начал задумываться в конце прошлого года в 21 год своей жизни осознав что не хочу работать по специальности, и с начала 2020 твердо решил начать с фронтенда, предварительно ознакомившись с направлениями. Вначале обучения было трудно сконцентрироваться даже на 5 минутных роликах по HTML от Гоши Дударя)). По мере понимания начал проводить все больше времени за изучением минимум 3-5 часов в день, паралелльно работая, оканчивая универ(писал диплом), тренируясь в зале. Конечно пришлось жертвовать чем-то, чтобы больше времени проводить за обучением верстке и не перегореть. Очень боялся практиковаться, даже сейчас не знаю почему. Поэтому сперва попробовал сверстать по видеоролику Анны Блок простой макет. Понял принцип построения и получил нужный первоначальный опыт, а потом пошло понеслось. Книги, ролики про фишки в верстке, вопросы в стаковерфлоу, хабре, улучшение английского, и самое главное мне уже не приходилось заставлять себя делать это, все шло само собой от желания. (может и приходилось, просто мне уже было все равно) Никаких платных курсов, только ютуб и практика + подробное изучение книг, не просто взять и прочитать, а выбирать такие книги в которых автор дает возможность практиковать изученное. Много раз готов был сдаться, но благодаря таким блогерам как Женя удалось сохранить мотивацию и продолжать двигаться. Сейчас вижу первые весомые плоды своего 5 месячного вкалывания
Отличный живой стрим. Детальный, понятный для новичка разбор вёрстки. Учиться у тебя одно удовольствие. Начинающим, как я сейчас, советую смотреть этот стрим и верстать макет после 20-го урока курса и вёрстки тренировочного макета по флексам. На этот момент как раз достаточно знаний. Если делать это ранее, то в голове, скорее всего, будет бардак и непонимание)
Спасибо!
Вот я и сижу тут такая с бардаком в голове. Но не сдаемся, только вперед!
Собирался заняться практикой), вторая верстка на канале), думаю буду потихоньку списывать за Женей)),создал проект),начал смотреть) и понимаю, что это мы не проходили) и новый шаблон, много всяких добавлений ввели меня в ступор). Осталось смотреть за работой мастера) запоминать фишки и продолжать учебу).Очень приятно глянуть полностью работу верстальщика и тому к чему надо стремится в особенности к скорости работы) и к ювелирному наметанному глазу Фрилансера по жизни), спасибо большое за этот материал)
Я просто влюблён в этот подход к вёрстке.
Спасибо огромное тебе, Жень!)
Высший класс ! Большое спасибо ! И еще Жека не надо оправдываться за длительность или скорость твоего мастер класса, кому надо тот смотрит а кому нужно всё быстро-быстро идёт на курсы "Full Stack Developer" за один месяц!)
За один месяц Middle Full Stack
Отличный стрим, как и другие уроки, много информации, освоил пока только небольшую часть, но подача материала настолько классная что есть желание продолжать.
Я только сейчас понял , что когда стрим смотрел - НИЧЕГО не понимал что происходит. А сейчас второй раз посмотрел и уже процентов 90 четко понял что , почему и зачем . А уроки по верстке я только на этом канале смотрю. ИТОГ - Жека очень хороший преподаватель ! Блин , не поверите у меня карты нет своей. Как заведу- сразу патроном стану .
Спасибо большое! 👍
П\С можно оплатить через QIWI инструкция тут ruclips.net/channel/UCedskVwIKiZJsO8XdJdLKnAcommunity?lb=Ugz1zZfpH3QjAzVm6Zl4AaABCQ
Огромное спасибо, Евгений! Я вам реально благодарен за ваш труд! Есть место примерно перед уроком с SASS/SCSS которое по моему мнению дизориентирует! В том плане что не умея еще достаточного опыта и не понимая как там все работает начинаем верстать уже с препроцессором SASS/SCSS и все последующие ваши видео верстки тоже с препроцессором. Хотя в вашем же видео "ПЛАН РАЗВИТИЯ ФРОНТЭНД РАЗРАБОТЧИКА" вы советуете перед SCSSсом закрепить все на практике и лишь только ПОТооооМ начинать использовать этот инструмент. Я понимаю что как говорится "дареному коню в зубы не смотрят", но думаю что не я один проваливался в этом моменте! В связи с чем прошу вас Евгений, снять побольше видео с версткой простых макетов без использования препроцессора SASS/SCSS, используя только HTML и CSS!!! У вас есть видео "стрим 1 Верстка простого сайта" Вот побольше бы такого чтобы реально набраться опыта перед сложными макетами!
Так а что тебе мешает брать в интернете макеты и делать в css. А в sass, удобно все делать, в начальных уроках все уже объяснили на счёт css, зачем продолжать пользоваться тем чем в будущем ты почти не будешь пользоваться
@@му3онму3онович Макеты я пробовал верстать но знаний тогда не хватало для этого. Сейчас уже все норм. Я имел ввиду что проходя поэтапно курс есть место где без дополнительных знаний дальше не пройти. У Жеки уже есть видео где он верстает на чистом css с адаптивом. Относительно недавно вышло. Т. е он сам понял что в этом есть необходимость. Думаю не я один имел эту проблему. А по поводу того что на чистом css не придётся верстать это тоже не всегда. Как то я приходил в офис устраиваться и мне сказали что они только планируют начать пользоваться препроцессорами, а пока на чистом css. В любом случае полезно научиться
Я просто смотрю уже когда он выпустил все и я многое уже глянул, я просто не знаю в какой очередности все выходило)
Классный канал! Очень понятно и доступно подается информация и даже просто когда чаю попить сажусь включаю какой-то стрим или видос с разбором домашки и можно наблюдать и открывать очень много для себя нового! Крутая замена всяким сериальчикам и ютуб-видосикам. Спасибо огромное!
Спасибо вам за такой шикарный курс, желаю всего самого наилучшего, удачи на ютубе, ждем новые видео!
Отлично верстаешь, вроде 3 часа стрим, а смотреть не скучно (я смотрел запись)! Продолжай в том же духе и успехов тебе!
Вижу Жеку и сразу хочется пожать руку. Спасибо
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Спасибо за мастер-класс, Жека! Голова взрывается и много непонятного, и это все таки хорошо)
Как успехи?
@@climberg нормально, за исключением ibg, потому что он не работает так, как показано в видео, а попытки разобраться ни к чему не привели.
Класний макет підібрано для стриму! Візуально гарний, що аж самій закортіло спробувати його зверстати.
очень хочу стать верстальщиком. а дальше уже посмотрим!) учусь на твоем контенте. очень здорово, спасибо большое!!!
Евгений, спасибо за отличную подачу материала!)
Совет, если позволите: чтобы избежать лишних манипуляций с DOMом, вместо хака с классом *ibg* используйте замечательное свойство *object-fit* . Ведь манипуляции с css для браузеров всегда легче и безотказнее манипуляций с js
IE 11
Из одного видео нашёл кучу моментов, в которых я тупил и ты решил их, спасибо)
Супер, рад что полезно!
Вот бы тут был человек с тайм кодами )
Иногда нужно пересмотреть что-то спустя долгое время чтобы вспомнить тот или иной способ
А видео очень большое
Согласен :) 😅
Хороший пример, лучше один раз увидеть как делать правильно, чем самому к этому приходить
Спасибо за видео урок!
Не понятно как работает тут методология верстки по BEM. С самого начала.
я начал делать сам изначально, без просмотра видео, получилось:
EN
RU
ESP
Online ordering
...
То есть пытался соблюдать вложенность элементов в блоке верхнего header - согласно видео урока по методологии BEM.
А в видео получается:
EN
RU
ESP
Online ordering
...
Почему в div header-top-lang последнее слово пишется через тире и вообще добавляется в ссылки, как будто это новый блок, хотя по смыслу это все еще элемент верхнего header, а значит нужно ставить __ и не прописывать lang (ведь допустима любая вложенность)?
Тоже самое потом с лого. У меня:
Если как в видео, то:
Понравилось все, спасибо, но думаю наработки каждый должен брать по ходу роста профессиональных навыков. Удачи!
Верно, спасибо!
Фух... осилил стрим, разобрал всю верстку, прикинул как бы сам верстал и вынес по итогу не мало нужной инфы о том как лучше какие либо моменты верстать) Спасибо Жек! Идем далее
Супер! Только вперед!
Спасибо за труды) такую же фишку с бэкграундом картинкой родительского блока юзал при разработке темы на wordpress. полезный прием)
Да, штука полезная, выручает)
Вкачать навык и прийти к заработку в $100+ / час - звучит как прекрасная цель :)
Это да)
01:37:00 Шикарная коробочка для картинок. Теперь какую картинку не впихни, она вписывается в коробочку и не ломает вёрстки!
Спасибо, Жека!
P.S. Размер в процентах нужен не 100% (высота тогда будет равна ширине 220px, а по макету нужно 225), а 225/220*100=102,27%
Жека, крассава! Как всегда: чётко, по делу, никакой "воды"! Только полезная информация и навыки.
Спасибо! Стараюсь! 👍🤟
Старайся и дальше, так держать! И мы всегда будет твоими верными слушателями и последователями.
Отлично. Побольше бы таких уроков )) Удачи!!
Фух, сверстал. Все же не везде понимаю твою логику создания оберток. А в остальном все шикарно объясняешь ) Спасибо за труд, Женя! (Лайк как всегда прилагается!)
@@imbydlo1552 не было опыта.
@@imbydlo1552 вышло все норм. Тут главное начать.
верстаю 4-й день по этому макету, это моя первая цельная верстка. То тут, то там все ломалось, иногда подсматриваю примерный ход действий ваш. JS JQUERY это боль, я с ними пока не был знаком, и кусок кода, где меняется картинка на фон, у меня оставляет и картинку и фон. Кстати scss тоже отваливается время от времени. В ОБЩЕМ миллион проблем всплывает, и когда ты без опыта, ты даже не понимаешь причин, но очень интересно :) Спасибо за контент.
А сделай видос про четкий план изучение, например "вот неделя нужно за неделю изучить html сначала это потом это" ну ты понял, будет очень круто!
Что-то придумаю)
Клевая идея
Привет, как у тебя дела? Нашел ли ты подобный план изучения верстки с нуля (с дед-лайнами и конкретными материалами)? Если - да, скинь мне, pls. Я вот только начал заниматься, и тоже заинтересовал подобный подход к изучению.
@@default2199 webmasters.teamdev.com/#html
Хотите четкий план изучения? Смотрите строго с первого видео, не пропуская ни один урок, здесь у Жени.
Дякую дуже цікаво, і супер швидко (P.S. дивлюсь на швидкості 1.6-1.75) просто вогонь ,
Спасибо за видео. Много нового узнал о верстке
1:54:42 - всё я замолкаю
1:54:49 - "Отлично"
xD
Было очень интересно, спасибо:-) Хочу заметить, что очень сложно концентрироваться на работе отвечая на вопросы и разъясняя свои действия. Так что не так уж и долго вышло.
В общем-то однозначно лайк! Но со стороны, классов так много, что на 2-часе, в очередной раз запутавшись, просто забил на вёрстку :)
Как всегда круто, спасибо Жека
Пожалуйста!
аееее )))сверсталось)хоть я таргетом без js но все равно классно получилось! СПАСИБОООО!
Все прекрасно) Но есть один нюанс) Уж если вы верстаете с целью научить людей, то вы хотя бы показывайте альтернативные варианты решения задачи)) например с теми же самыми картинками..)) а то получается что стрим может оказаться бесполезным, как только у вас и у других начнутся расхождения) а то вот это вот: Ну тут мои наработки и тут мои наработки, а вот тут тоже мои наработки и вообще я ускорюсь)) Вы же позиционируете себя как канал с образовательным контентом) а как можно научиться, если "ваши наработки" остаются ваши наработками без объяснения)) мое субъективное мнение.
Жека, круто! Тоже так хочу) Мне этот макет неделю верстать
Уверен, все получится!
Да, с БЭМ конечно у меня проблемы. ВРоде урок по бэм посмотрел, понятно, но тут опять запутался, плюс куча оберток путают.
где можно посмотреть про полное приготовление к верстке , настрйока кит, scss и тд ?
Ура-а-а!!! Я стал патроном)))
Ура!
Без функции ibg (); в IE всё прекрасно работает, проверил. Лишний код в JS )
Ок)
Спасибо! Топ контент для новичка!
Спасибо большое! ТОП.
Пожалуйста!
Спасибо за стрим!) Я 4 дня это верстал))))
Ну, тоже ничего
Спасибо тебе большое!!!
Красотень вышла!!
Я рад)
Можно вопрос а зачем в mix flexbox ставить значение font-size: 0;?
Огромная благодарность, за твой колоссальный труд! Манера подачи материала очень заходит. Вопрос на счет отступов: как ты определяешь какой блок нужно отделить padding, а какой margin ?
Про отступы есть отдельный урок, стоит его посмотреть ruclips.net/video/RQqzOTUa9Ig/видео.html
За плечами уже 2 сверстанных простеньких макетика, решил сегодня посмотреть как дела у коллеги, загрузил макет выкроил время чтоб позаниматься, включил и охренел. Я такого ещё не проходил ) Что это? Какие миксины? Возвращаюсь обратно в лягушатник, разбираться с основами
Спасибо большое!
Спасибо за твои труды, продолжай в том же духе!
Подписался на патреоне, поддержать тебя только за радость, ведь то, что ты делаешь, это реально круто
Буду ждать разбор новых макетов и уроки по JS)))
Добрый день, Евгений. По моему нужно добавить background-color: white; в контейнер основной части и в footer. Спасибо видео отличное.
01:45:40 - Надёжные колонки на flex
Да!
О, да! Сколько же нервов мне съели мои стремные колонки на флексах) Наконец-то, нашел решение)
Никак не пойму, зачем так заморачиваться с картой если просто можно:
1. Перейдите в Google Карты.
2. Откройте карту или панораму из «Просмотра улиц», которую нужно добавить на сайт.
3. Нажмите на значок главного меню в левом верхнем углу экрана.
4. Выберите «Поделитесь с друзьями или получите код карты».
5. В открывшемся окне перейдите на вкладку «Код».
6. Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога.
(Нашёл в интернете)
Ну да, если с помощью js, то можно стилизировать. Но в этом случае это не нужно.
спасибо!)
Ништяк!
Спасибо!
Евгений, возможно ли, полученные на патреоне макеты использовать для своего портфолио или выложить на гит?
Да, конечно
Thank very much! It's very good content! You are cool man.
Tnx :)
За 2 месяца обучения html + css и 4 месяцам обучения JAVASCRIPT (без jquery итп.) сверстать смог)
У меня глаза открылись тоже через 6 месяцев. Очень много не слишком простой информации, которую нужно осмыслить. Удачи!
Молодец!
Спасибо! 🤟
Евгений СКРИПТЫ В СТУДИЮ, ЖДУ!!!!
Выложил: www.patreon.com/posts/materialy-so-no-30000661
@@FreelancerLifeStyle Скачал, спасибо огромное! Ждем новых видео!
Уже снимаю)
Женя, подскажи, пожалуйста, как в твоем новом шаблоне подключить карту. Там это немного по другому устроено.
На патреоне есть инструкция к шаблону!
Жека, спасибо большое за такой крутой мастер-класс, очень много отличных вещей для себя почерпнул. Жду следующий с нетерпением.
Скажи пожалуйста, я заметил, что ты через хот кейс как-то выделяешь все содержимое строки в css, просто ставя курсор в конце свойства. Я что-то так и не смог найти нужное сочетание. Есть только ctrl+l, но выделяется вся строка вместе с отступом.
Спасибо! Следующий стрим уже в черверг ruclips.net/video/xEpuaR837Ho/видео.html. По поводу выделения, это я так быстро орудую шифт + хоум (если я верно понял)
@@FreelancerLifeStyle Супер, все верно. Вот и еще одну фичу себе в багаж положил))) Еще раз спасибо!
вопрос, а перейдя на VS Code ты все равно пользуешься Prepros?
Узнал ответ? Есть надобность препроса в Vs code
@@s0lo973 ну хозяин канала настроил gulp чтобы компилировать scss в css. У меня только в этом был вопрос, потому что в vs code встроенный компилятор только sass файлов
@@s0lo973 настройки вроде он на патреоне выкладывал для подпищиков
ну круто блин, профи он и есть профи, кто еще думает, что сможет отнять заказы у таких профи на биржах фриланса обучившись по любым курсам?... смешно так думать, я только шапку пытался сделать 3 часа...омг...постоянно что то не так получается....ппц
Спасибо!
Буду атаковать:)
Привет, очень профессионально работаешь, спасибо за контент. Такой вопрос.
Делаю проект, 9 страниц, почти каждая подключает разные библиотеки. Стоит ли весь css и js код компилить в один сжатый и применять для каждой страницы или лучше использовать отдельные скрипты со стилями для каждой страницы отдельно? При этом используется верстка по БЭМу и хотелось бы сохранить адекватную загрузку сайта без тормозов. Спасибо.
Спасибо. Тут все зависит от веса библиотек. Так же нужно помнить про кеш. то есть если вес в приделах розумного и поключив все у тебя зеленая зона на главной, то помни что скрипты кешируются (на правильной настройке сервака) то есть на других страницах уже ничего грузится не будет а вылетит из кеша. Разделяя же на разные файлы загрузка будет выполнятся несколько раз. И вот нужно смотреть что в итоге выгоднее в плане оптимизаци.
@@FreelancerLifeStyle Ок, спасибо)
*Женя привет! А почему flexbox записан в виде миксина, а не шаблона например? Ведь там не используются переменные...*
Я такой же вопрос задавала. Женя сказал, что как-то само получилось. Можно и шаблоном.
Пока посмотрел 25 минут, параллельно повторяя действия в редакторе. Возможно я тороплю события и дальше ты это объясняешь, но сейчас мне не понятно зачем в блоке с логотипом сам логотип оборачивать в , а потом задавать ему свойство display: inline-block? Ведь можно просто оставить тег , у которого display: inline-block по умолчанию. Или это была ошибка из-за спешки?
Возможно, нужно смотреть уже не помню что там.
Жень, а у тебя не будет времени случайно запилить видос по кастомным картам? Или в этом видео уже исчерпывающся информация?
Сделаю!
@@FreelancerLifeStyle круто!)) Как же я рад!))
Спасибо за мастер-класс! А какие именно глюки с формами у айфонов?
Ну, например, закругленные углы. Самодеятельность с клавиатурой и прочее
Спасибооо!
Пожалуйста!
С webmoney можно поддержать твой канал? Или только через PayPal, я из Беларуси.
2:22:48 подключение карты
(комментарий для себя)
А можно вопрос - возможно, красивее было бы логотип сдвигать не через отрицательный марджин всей строке с меню, а просто сдвигом через релатив только одного логотипа? Или, что сразу приходит в голову - вынести вообще логотип в абсолют и тогда нет нужды разрывать меню на два отдельных nav, что как бы более семантично. Чем этот вариант хуже?
А можно сделать видео с примером верстки на flex не лэндинга, а простого трехколоночного сайта?
Жека! А почему саблайм?! Вроде как давно на ВС код переехал?
Спасибо за очередную годноту!
Странно, что патронов маловато. Неужели не хочется получать всякие плюшки?
Ребята и девчата! Жека реально раздает всякие прикольные вещи, которые вы не найдете в его общеоткрытых уроках.
Не реклама, если что. Просто сам пользуюсь и доволен как розовый слон.
Видео старое)
@@FreelancerLifeStyle Хах! Я на дату не посмотрел=))) Ну и ладно. Всё равно я этот ролик не видел, так для меня видео новое! Спасибо.
Смотрю ролики последовательно, начал смотреть этот стрим и чет жестко задизморалился- какие-то флексы, непонятные свойства, которые в обучении идут потом, адаптивы, брейкпоинты, файлы JS...( наверное надо сначала смотреть плейлист, и только потом стримы?
Верно, это мастер-классы а не уроки
пхах)) тоже прошел 15 уроков, вроде теперь следом идет эта верстка, но встречаются вещи, которые не учил - посмотрел, они чуть впереди по плейлисту))
Скрыл placeholder через css без js, то есть если элемент активен, то обращаюсь к плейсхолдер и размер шрифта в 0 ставлю. В итоге при клике текста нет.
Привет, как ты скопировал использованные классы?
У меня настроенный редактор. Вот видос по настройке ruclips.net/video/xWhTf_o86Lg/видео.html
Жека как выкроишь время оч ждем уроков по js / jquery.
Все по порядку. Уроки по js будут
чтоб получить доступ к материалам нужно подписаться на патрион?
Можно скачать твои наработки?
спс
Пожалуйста! 👍🤘
Вопрос
если импортировать эти шрифты с какого другого сайта, момент в том будут ли они работать если этот сайт `мордора`, на Украине без впн доступ будет или нет ?
Здраствуй , круто конечно, но чуть чуть трудно
Это масстер-класс. Есть плейлист с уроками
Жека, при адаптиве меню, когда ты в отладчике работаешь, у тебя при сужении шапки всегда есть отступы справа и слева, а у меня слева плотно прилегает к контенту, а справа вообще один символ уходит за границу. Это какие то твои настройки или я что то не так делаю, вроде все идентично повторил несколько раз. Всю голову уже сломал.
Много полезного материала. Большое спасибо за труд.
п.с. Если не трудно, напишите название плагина для хрома пиксель перфект.
Напиши в гугле pixel perfect и все найдёшь
круто, ток на моём уровне мне ещё всего не понять
начиная с этого этапа 40:25 не получается спрятать меню с помощью java скрипта( вроде все делаю, как на видео, а в итоге у меня значки языков (en, rus, esp) все равно остаются на своем месте, хотя по видео они должны спуститься пониже. Я в js полный ноль, поэтому эта тема для меня пока оч сложная. P.S: Евгений, жду не дождусь, когда у вас выйдут первые уроки по js)))
Такая же беда. Видимо js не подключается.
Сколько обойдется по стоимости заказчику верстка такого макета?)
От 30$ до ~100$ смотря кто и как будет делать.
Это с учетом обратной связи для формы, и с разным интерактивом? Или только за верстку?
Ничего не понял. Зачем мне результат верстки? Я же тут чтобы учиться. Все уже готово и я не пойму откуда что взялось. Что за &lock?
Уважаемый фрилансер, а макет доступен только по подписке на патрон?
Да, в багодарность за поддержку канала.
@@FreelancerLifeStyle спасибо