Чтение макета дизайна. Определение элементов на странице на реальных примерах

[@FreelancerLifeStyle]

Полезно? Содержание: 00:00 - Вступление 00:42 - Определить структуру 04:33 - Определить контейнер 11:16 - Определить меню, выпадающие меню и элементы 15:53 - Определить ссылки 19:29 - Определить полноэкранные элементы 22:31 - Определить слайдеры 26:07 - Определить табы 27:56 - Определить спойлеры 29:44 - Определить элементы форм 32:59 - Определить прочие элементы 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@ЕвгенийБаркас]

Очень полезно, ты как всегда вовремя)

[@cerporan2323]

За содержание с временными метками к своим видео ты достоин отдельного места в раю

[@lera6580]

Полезно =) послушала удовольствием хоть и не новичок

[@jackpeterson541]

Можно макеты, пожалуйста хотелось бы практиковать ))

[@mew6085]

ОЧЕНЬ

[@kostyalopuh955]

Я один ещё ни разу не видел негативного комментария у Жеки?А это потому,что автор реально молодец и делает всё с душой и на совесть.Побольше бы таких,Молодец с большой буквы)

[@annagrigorewa]

Дизы только ставят молча...Просто знают, что если напишут негативный коммент, то мы просто порвём))))

[@FreelancerLifeStyle]

Спасибо! Стараюсь!

[@kostyalopuh955]

Анна Григорьева да я думаю,что если они поставят диз,Жека научит нас по ип вычислять,мы всё равно найдем их xD

[@deniskotov]

@@kostyalopuh955 Ахахаха)))) Точно)) А вот и идейка для рубрики "Как это сделать")))

[@sasha-quimby]

Вся фишка в том, что Вы делаете РЕАЛЬНО насущные видео. Просто огромное человеческое спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@fly8r358]

Евгений, хотелось бы увидеть видео по верстке форм. С различным расположением полей, стилизацией и тп. На мой взгляд, было бы тоже интересно. Спасибо.

[@ЕвгенийБаркас]

И отправкой форм на почту ещё бы

[@codedreams3209]

Я бы предпочёл выполнение элементов форм каталога товаров, какие подходы, что лучше использовать для разработки jQuery-ui, другие jQuery плагины, или уже на фреймворке делать реакт/вью?

[@MegaSmith37]

Я человек простой! Вижу новый видос фрилансера по жизни , ставлю лайк не гляда ибо 100% видосик топ как и весь его канал!

[@FreelancerLifeStyle]

Спасибо большое!

[@sv_smile]

Мне кажется, это основа основ. С чего необходимо начинать погружение. Благодарю за твои знания и время!

[@annagrigorewa]

Женя, да ты еще и эстет! Первые секунды видео - просто красота!

[@FreelancerLifeStyle]

Люблю красоту) Спасибо!

[@Denis-t2m]

О да это же сборник моих ошибок, я просто не понимал, где что и как должно работать. Я уверен, что это видео будет очень полезно для всех начинающих. Как всегда супер! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@tochcha2971]

Круто! Мало кому приходило в голову сделать такое видео. Чтение макета - важнейшая вещь для начинающих. И кстати, хотелось бы более подробного разбора верстки очень нестандартных дизайнов. Что делать фоном, что картинкой, что поцепить абсолютом, а что fixed. Как это будет функционировать на мобилках и т.п.

[@FreelancerLifeStyle]

Спасибо! Подробно уже на верстках макетов покажу

[@Alexey_Gri]

Присоединяюсь к комменту, тоже интересуют эти моменты...

[@СергейК-б6н]

Более подробных объяснений я ещё не видел этой планете нужно больше таких людей 😎

[@СемёнЗахаренко-л8з]

Просматривая этот ролик я понимаю как долго мне ещё пахать чтобы сделать хоть что-то идентичное с показанным в вашем видео. Спасибо за информацию в свободном доступе. Прошёл платные курсы по css и html и сейчас понимаю, что с ваших видео выложенных бесплатно толку в разы больше.

[@FreelancerLifeStyle]

Я рад что полезно!

[@mannoir6926]

Вот это реально полезно! Все темки наподобие различных тэгов и свойств можно посмотреть в мильёне разных мест, а вот что делать реально по шагам на фрилансе - за это просют большую денежку и даже за неё не всегда дают годноту. Ждём продолжения.

[@FreelancerLifeStyle]

Спасибо!

[@ОлегПетрович-с5р]

Это очень полезно и будущему тестировщику веба. Четко знать расположение и категории элементов при написании автотестов на том же селениуме.

[@FreelancerLifeStyle]

Отлично, я рад!

[@uribemak5534]

Ты очень помогаешь начинающим людям которые постигают front end. А когда увидел, что из Ужгорода то вообще стал самым моим любимым ютубером. Привет Лоцику))

[@FreelancerLifeStyle]

Спасибо! Я рад! Привет передал)

[@uribemak5534]

@@FreelancerLifeStyle я тоже родом из УнгварВароша) Сейчас учусь на front-end_едера. Но твои уроки мне во многом помогли определиться в направлении моей деятельности. Спасибо тебе большое, за такую благородную миссию.

[@KennyBoss]

Самый лучший канал про верстку!

[@FreelancerLifeStyle]

Спасибо!

[@ГрибБлевантон]

Как всегда супер. Было бы не плохо теперь урок по макету с тату салоном, там много интересного и сложного, по крайней мере для меня. Типа марафон по верстке такого сайта

[@kotlancer]

Полностью поддерживаю!

[@АлёнаГеращенко-ч9и]

@@kotlancer я тоже-будет полезно новичкам

[@FreelancerLifeStyle]

для новичков будет сложно, но в качестве мастер-класса можно будет сделать

[@melissasofie7681]

На канал не только новички заходят, я видео с версткой для новичков даже уже не открываю, если уж верстать за компанию, то что-нибудь сложное, а то для старичков это бессмысленное убийство времени.

[@massqeen5496]

@@FreelancerLifeStyle да, макет крайне интересный, мастер-класс просим))

[@witch_999]

Спасибо тебе огромное! Твои знания и опыт, которые ты передаешь нам, бесценны

[@ИгорьГлазков-с1б]

Евгений, очень содержательно. Спасибо за видео. Здоровья и Хорошего Настроения.

[@FreelancerLifeStyle]

Спасибо, взаимно!

[@Sweet_and_joy]

Ребята! Жеке можно ставить не один лайк, а много! Ставьте дополнительные лайки на комментарии других подписчиков!

[@maybelater9915]

Выпуск - огонь вообще) А еще, давненько стримов по верстке не было)) было бы круто как раз заверстать подобный интернет магазин))

[@FreelancerLifeStyle]

Спасибо, будет!

[@maybelater9915]

@@FreelancerLifeStyle лично я, жду с нетерпением))

[@isok.atyrau]

@@FreelancerLifeStyle спасибо за хороший контент, с нетерпением жду вашего стрима))))

[@xx113355]

Большое спасибо за отличное видео. Смотрю с удовольствием, процесс обучения построен достаточно грамотно и слушать вас очень интересно.

[@FreelancerLifeStyle]

Я рад!

[@nadehzdapechen]

Я работаю на UTeste и это видео было очень полезным.

[@FreelancerLifeStyle]

Я рад!

[@posadcom]

Спасибо! Мне не сложно написать комментарий, а автору и приятно и полезно для канала)

[@FreelancerLifeStyle]

Спасибо!

[@hdfilms29]

Очень интересный и информативный сайт с реальными демонстративными примерами из жизни и реальной работы, мне как новичку этот сайт оказался как кладезь фундаментальных знаний с многими ответами на те вопросы которые возникают у новичка в этом нелегком но интересном деле вплоть до разговоров того как и о чем разговаривать с заказчиком. Сейчас начинаю проходить обучение HTML, SCC и JS обучения. На мой взгляд сайт очень полезный и информативный!!!

[@ДанилБуткин]

Отличный видос 🔥 Посмотрел все на одном дыхании , оч полезно ❤️🔥

[@FreelancerLifeStyle]

Супер, я рад!

[@andrewi2121]

Как всегда крутая подача контента, минимальное количество воды, щепотка юмора, все то что делает данный канал таким крутым! Жека, было бы круто от тебя чаще видеть стримы по верстке различных макетов, ждем новых видосов!

[@FreelancerLifeStyle]

Спасибо! Я уже планирую верстку

[@ukraine_son]

Спасибо, было полезно. Правда хочется видеть побольше видосов про создание отдельных элементов интерфейса.

[@FreelancerLifeStyle]

Всмысле верстку? Да такие видео уже запланированы

[@ДмитрийЕвсиевич]

Хорошая, а главное - правильная фраза в конце!

[@Glamochka]

Спасибо большое, что делитесь этими знаниями!!!

[@YaniaRZ]

Круто, вот таких видео тоже очень хочется, на понимание общих принципов, структуры, вложенности итд.

[@Pro10056Bah]

Контент пушка)) Спасибо Жеке за его труды!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@МиколаЛавренюк-й7ш]

Спасибо за все что ты делаешь!!! Очень крутое и интересное видео, очень прям круто наблюдать за реальными проектами.

[@FreelancerLifeStyle]

Пожалуйста!

[@ENS357]

За шутку про "Адидас" однозначно лайк!))

[@Андрій-т8р]

Очень полезно, спасибо ☺️👍 Хотелось бы мастер-класс по верстке интернет магазина☺️

[@FreelancerLifeStyle]

Как будет время сделаю

[@daniilthegunner843]

Круто! Хочется почаще верстку каких-то непростых элементов видеть, например как вертикальное меню на одном из этих сайтов с колбасой вроде)) И вообще верстку целых макетов для продвинутых.

[@FreelancerLifeStyle]

понял, будет

[@Anna-vm9sf]

Спасибо за видео, было интересно. Смотрела на скорости 1,25

[@FreelancerLifeStyle]

Пожалуйста!

[@МистерБут-ф4т]

Я всё больше думаю поступить на учёбу к этому преподавателю)👍 Жека начал смотреть твои бесплатные уроки, и я скажу сдвиг есть в знаниях вёрстки 👍👍👍 очень понятно объясняешь!👍👍👍

[@FreelancerLifeStyle]

Я рад!

[@sashuk_keshuk9292]

СПАСИБО ОГРОМНОЕ, АФИГЕННЫЙ УРОК, ВОТ БЫ В ШКОЛАХ ТАК ПРЕПОДАВАЛИ И НЕ ЗАСТАВЛЯЛИ БЫ ГОВОРИТЬ УЧЕНИКОВ НАСИЛЬНО "СПАСИБО ЗА УРОК", ТАК ОНИ БЫ САМИ ЭТО ГОВОРИЛИ БЫ)))

[@zmeygorynych5684]

Чисто в самом начале видоса поймал интерес и на одном дыхании)

[@FreelancerLifeStyle]

Я рад!

[@ieron]

Жека, я тебя поздравляю с 50к подписчиками!!!! Мне очень нравится, что ты делишься своим драгоценным опытом. Продолжай в том же духе :) И главное помни... Живи, а работай в свободное время ;)

[@FreelancerLifeStyle]

Спасибо!!!

[@андрейтищенко-х8м]

Наверное Женя обладает экстрасенсорной способностью улавливать мысли жителей планеты. Буквально вчера я подумал, ну вот загрузил я макет в граф. редактор, и что дальше с ним делать. А сегодня смотрю видео где Женя все доступно рассказывает.

[@FreelancerLifeStyle]

Супер, я рад!

[@АллаМакул]

Как всегда четко и информативно, спасибо:)

[@FreelancerLifeStyle]

Пожалуйста!

[@МириСеидов-е1х]

Это просто супер полезный ролик! Низкий поклон!

[@FreelancerLifeStyle]

Пожалуйста! Рад что полезно!

[@ok_sankytos4543]

Дякую!) Інформативно 👍 Хотілось би ще побачити відео з версткою схожих сайтів ,якщо б була така можливість

[@FreelancerLifeStyle]

Будь ласка!

[@Alex-vj9vs]

Не в тему видео, но все же. Евгений, поздравляю с 50к подписчиков! Это же целая половина от сотни тысяч, прям как небольшой городок. Так держать! Спасибо за то, что ты для нас делаешь. Желаю тебе не сбавлять обороты, ещё больше преданных фанатов и продолжать быть Робином Гудом от мира Фронт-Энда.

[@FreelancerLifeStyle]

Супер! Спасибо!!!

[@vasilich4582]

Контент бомба очень много нового узнал. Жека как всегда красавчик!

[@FreelancerLifeStyle]

Спасибо!

[@AlinaDotsenko-d6q]

Очень информативное и полезное видео, спасибо! 😉

[@FreelancerLifeStyle]

Пожалуйста!

[@Snegurjan]

Ну не в лесу конечно ))))))))) Тут я в голос начал смеяться!! Чувак ,очень круто подаешь материал, знания + опыт + чувство юмора !Однозначно лайк и подписка со всех своих аккаунтов!

[@FreelancerLifeStyle]

Спасибо!

[@Snegurjan]

Фрилансер по жизни - IT и фриланс Это тебе спасибо.Я не знаю представляешь ли ты сколько судеб ты изменил,скольким людям ты помог !?Говорят: «Если ты приносишь пользую людям,то ты хороший человек»Так вот,ты супер -человек!!!!!💪🏻💪🏻💪🏻

[@СергейТерещенко-р8н]

Евгений, спасибо за видео.

[@FreelancerLifeStyle]

Пожалуйста!

[@kpa6ok]

Такой говор смотрел бы и смотрел) очень интересно рассказываете)

[@ДжахонгирМуминов-х9ч]

Отлично. Побольше технических видео для не технических спецов в ИТ!

[@МаксимКрутов-е8б]

Отличный урок. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@ТетянаПересипкіна]

Первые секунды видео - красота. Женя, ты эстет! Ты лучший! Информация ролика очень полезная. Спасибо! А вот это розовое цветущее чудо, в ролике за тобой, как зовется? А будут видео по формам? По отправке их, с написанием js- и php- кодов.

[@FreelancerLifeStyle]

Дерево Сакура. Ролики будут

[@гоблинвася-п7о]

Полезно, не то слово. Ещё один отличный видос в коллекцию курса по вёрстке. Опять половина вопросов на созвон вычёркивается))) Ну что ж, больше времени поговорить "за жизнь".

[@FreelancerLifeStyle]

Отлично! Я всегда рад)

[@drax5989]

Спасибо за обучение!

[@FreelancerLifeStyle]

Пожалуйста!

[@АлёнаГеращенко-ч9и]

спасибо за полезное для новичков видео. Легкий музыкальный фон и что-то ритмично стучит(немного отвлекает от объяснения)

[@FreelancerLifeStyle]

Пожалуйста! Хм, послушаю что там..

[@АлёнаГеращенко-ч9и]

@@FreelancerLifeStyle прошу прощения за такой комментарий-возможно постоянная изоляция дома действует))))))

[@ВикаОношко-л8ж]

Очень полезное видео.спасибо.записывай видео почаще!

[@zulagwido1309]

Как всегда МЕГАПОЛЕЗНО! :-) Вот ты показывал сайт Wooder. Хорошо бы снять видео, как верстать подобный нестандартный проект!

[@Djay121121]

Ждём видос про велотему) Твои велосипеды, про одежду, которую используешь и т.д.)))

[@ЕвгенийБаркас]

Я бы с удовольствием посмотрел красоты где Жека катает.

[@БендерЗадунайский-щ9ы]

не в тему

[@ОльгаК-ф8р]

Женя, очень полезно!!! Крутая информация! Я учусь на платных курсах, но там такого не дают, к сожалению. Спасибо огромное!!!

[@dmitriikulbaka1862]

Похвалой прям засыпают по достоинству - лучший из лучших! 🤘 Но есть детский вопрос - посоветуй сайтики, где брать макеты для практики? Постоянно криво-косые попадаются на просторах интернета.

[@FreelancerLifeStyle]

Спасибо! Ну тут есть psd-html-css.ru/shablony/psd-shablony-saytov Еще на патреоне я выкладываю

[@ФутбольныйМячик-е5с]

Здорово объясняешь!

[@FreelancerLifeStyle]

Спасибо!

[@Code.bless_you]

Жень, ты просто 1-й))Победа-это быть первым после тебя)

[@lagglite3180]

Жека в у розового дерева, Жека в лесу, Жека у компьютера! Супер! Лайк!

[@FreelancerLifeStyle]

Спасибо!

[@stelsboii]

Нравится твой канал! Буду изучать дальше)

[@vadimsib3378]

Больше верстки бы увидеть практической на разных макетах... давно не было выпусков с версткой, имхо это самые полезные видео - когда ты потом можешь все это пересмотреть и сделать свою работу по примеру в видео.

[@FreelancerLifeStyle]

Все будет

[@TheSeVeG]

Спасибо! Очень полезно!

[@FreelancerLifeStyle]

Пожалуйста!

[@luiwoterlow7215]

татуировки - класс)) и видео то же, очень информативно, спасибо!!

[@yuriismakota9574]

Да, было бы круто, посмотреть на мастер класс верстки, сайта тату салона)!!! Огонь, спасибо за твои труды!!!

[@no_way_back813]

Все просто и доходчиво, отличное видео)

[@FreelancerLifeStyle]

Спасибо!

[@arikgevorgyan809]

Ну просто лучший) Жека а можно показать как делать эту анимацию картинки во время скролла как в этом видео на сайте мебеля?)) Мне очень хочется узнать как такое делать.

[@stra1f595]

Мне тоже!!!

[@FreelancerLifeStyle]

ну как-то покажу, это не так просто)

[@arikgevorgyan809]

Знаю, поэтому и попросил)))😄

[@goldenmoment6491]

Это просто бомба лайк.

[@FreelancerLifeStyle]

Супер!

[@uk-lych_sveta]

Приветос!!! Ждем новый урок по JS, пересматриваем имеющиеся.

[@denysmaksymuck]

Сними пожалуйста видео про как зделать разные виды слайдера?

[@FreelancerLifeStyle]

Есть большой выпуск про slick, будут и про другие kzbin.info/www/bejne/qImxl3ecptmAaa8

[@Dmytrokan]

Спасибо за видео, пойду учить html, мотивирует норм видос

[@АлександрБаранов-ч6я]

Отлично, очень полезно

[@FreelancerLifeStyle]

Супер! Я рад!

[@gms2mygames349]

*Спасибо за видом жека, а я всё игру свою пишу*

[@FreelancerLifeStyle]

Отлично!

[@timurbarkin5580]

Жень, можно запилить видео по более детальным формам, то есть их стилизации и правильно настроенным метолом отправки, чтоб все работало. Что-то вроде поиска по сайту, отправка письма о регистрации и все в таком духе. Видео получилось огненным, спасибо за уроки, с меня подписка на патроне как только будет монета!

[@FreelancerLifeStyle]

Что-то придумаю

[@КириллТимофеев-п1л]

Учусь верстке, чтобы не было одного кнопочного телефона на всю жизнь. Жека, спасибо!

[@FreelancerLifeStyle]

Хех) Пожалуйста!

[@aleksandrmatyka3118]

Было бы интересно увидеть верстку адаптивной таблицы)

[@yankuandykov4392]

Евгений, отличное видео! Хотел спросить, а можно видео как вы верстаете сайт художественных татуировок из видео, там очень много моментов которые не понятно как верстать. Такое видео было бы очень кстати)

[@FreelancerLifeStyle]

Как будет возможность сделаю

[@yankuandykov4392]

@@FreelancerLifeStyle Спасибо большое за ваш труд)

[@maks-rst]

Мать моя женщина, какие сложные макеты, я даже не представляю как их верстать!

[@Степан-с4х7к]

От души братишка дорогой!

[@FreelancerLifeStyle]

Пожалуйста!

[@НиколайТурист]

Лайк, круто!) и аудитория у Жеки крутая!))) всем добра))

[@FreelancerLifeStyle]

Спасибо!

[@andreypolkeyev6595]

как же вовремя

[@FreelancerLifeStyle]

Супер!

[@poKyrill_kh]

Круто-полезно, спасибо!

[@СергейК-б6н]

Жека красава 😎 все расскажет все покажет 😎😎😎

[@ДмитрийКласс-н4б]

Даешь видео по верстке всех этих сайтов) Очень интересно как реализовано слежение обьекта по всему сайту 20:59

[@flomaster3221]

Евгений,видос огонь,посмотрел на этом дыхании. Можешь рассказать о своём режиме дня?

[@FreelancerLifeStyle]

Тут есть часть kzbin.info/www/bejne/bJSyo2eweNGVq9E

[@monovlog5854]

Понравилось в конце - живи, а работай в свободное время. Многое дает понять о правильном подходе и использовании личного времени

[@FreelancerLifeStyle]

Это слоган по жизни!

[@stra1f595]

Пришел научиться читать, научился, только макет...

[@FreelancerLifeStyle]

Хех, это отличный навык)

[@friden_craw]

Неплохой видос, я не особо мастер в чтении макетов, чтобы критиковать, ибо прям уж ошибок и неточностей не заметил... Но блин, я чаще всего наблюдал за отзеркаленным курсором.

[@FreelancerLifeStyle]

Я левша)

[@Yaleks91]

Круто) а давно это такие отрезки с названиями прямо на строке прогресса видео появились? У тебя первого такое заметил)

[@FreelancerLifeStyle]

Недавно

[@Fhiwa]

Nice aploud. 👍👍

[@FreelancerLifeStyle]

Tnx)

[@otk5545]

Ну ти крутий. 👍👍👍

[@amirych]

Надо добавить еще чтение с мобильного и десктопного макета, как правильно думать в случае с mobile first подходом. Слайдер - это когда одна картинка или контентный блок переключается(fadein/out, slide), а когда не один такой блок скроллится, это уже Карусель. Пагинация(dots) и thumbnails приcущи как слайдеру так и карусели.

[@FreelancerLifeStyle]

Ну это отдельная тема.. По поводу слайдеров, я бы не усложнял ;)

[@GrifanoRide]

Очень полезно, Женя мне кажется, что конец как-то неожиданно прервался. Подозреваю, что может быть вторая серия по чтению макета? Или мне показалось? Тоже возникла мысль/просьба о очередном уроке в курс, про формы. Еще идея для видео с такими элементами как popup, переходы между fullscreen блоками, реализацию применения скрола. Ну а в целом конечно же как всегда) Много положительных эмоций)

[@FreelancerLifeStyle]

Все будет!

[@MykhailoBazalii]

С 50000🎉🎂🎇

[@FreelancerLifeStyle]

Спасибо!!

[@mrcrimor4881]

Привет! Я как и все благодарен твоим видео, они очень информативные и интересные. У тебя в одном стриме по верстке засветилась классная галлерея. Сними пожалуйста ролик, как сделать такую же. Спасибо.

[@FreelancerLifeStyle]

Ок, что-то придумаю)

[@velobarahlo]

Спасибо 👍

[@FreelancerLifeStyle]

Пожалуйста!