Марафон по верстке. Часть №1. Адаптивная верстка макета с нуля GULP SCSS JS

Адаптивно с нуля сверстаем интересный макет. Я буду комментировать все свои действия. Использовать буду свою сборку GULP, наработки на чистом JS и SCSS.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
👉 Вторая часть марафона - • Марафон по верстке. Ча...
👉 Третья часть марафона - • Марафон по верстке. Ча...
☝️ Во время мастер-классов и марафонов не обзательно все знать, важно смотреть на принимаемые решения и практики!
👉 Макет + шрифты (в открытом доступе) - / 32690819
👉 Настройка редактора VS Code - • VS Code настройка уста...
👉 БЕСПЛАТНЫЙ КУРС по верстке сайтов (Front End). Уроки HTML CSS JS:
• БЕСПЛАТНЫЙ курс по вер...
🤟 Результат верстки выложен для подписчиков на патреоне - / rezultat-36532582
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@pivrock913]

Спасибо, Жек! Классная тема с динамическим адаптивном! Побольше таких добрых и открытых людей!

[@FreelancerLifeStyle]

Пожалуйста!

[@natalyoktar2]

Низкий тебе поклон и искренне уважение за твои труды... дай тебе,Бог,здоровья и всех земных благ... ты замечательный ЧЕЛОВЕК....спасибо тебе...

[@user-fy2wk6ms7m]

Ты лучший! Все ясно понятно. Для тебя отдельное место в раю. Учусь, учусь и учусь.

[@FreelancerLifeStyle]

Спасибо!

[@user-fs3yr9yk6n]

ещё учишься?)

[@deevue_sews]

Всё здорово и полезно было. Мне нравится когда всё подробно объясняется, пусть это будет долго, главное детально обо всем узнать. Так что не спеши, мы знаем что ты верстаешь быстрее всех на свете), мне лично не скорость твоей верстки нужна, а твои знания и твои техники. Спасибо!

[@FreelancerLifeStyle]

Ясно, я бы и сам хоть целый день сидел на стриме, но есть и другие дела)

[@user-qh5ok1ks3o]

Давно просил о новом подобном видео и здесь и на патреоне, спасибо Евгений, радуйте нас по возможности по чаще)!

[@FreelancerLifeStyle]

Пожалуйста! Стараюсь!

[@user-vr1pq9iq9f]

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

[@user-vn1ho3gu5b]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@vitaliy6189]

Это нечто! Впервые вижу такой мастер-класс. Теперь обязательно просмотрю все твои видео уроки. Очень интересно и доступно обьясняешь!

[@user-dz7wd1es8i]

Ух как же я этого ждал))) Добавил к себе в копилку новые "фишки", спасибо, очень интересно и полезно

[@FreelancerLifeStyle]

Пожалуйста!

[@user-siergy]

Интересное решение с кнопкой. Все доступно и понятно. Спасибо за стоящий контент. Реально лучший канал среди всех которые наблюдаю.

[@mumino7]

Очень полезный стрим, большое спасибо Жека :)

[@FreelancerLifeStyle]

Пожалуйста!

[@lesyadorosh1805]

Крутой марафон! Жду с нетерпением вторую часть!!!

[@FreelancerLifeStyle]

Спасибо! Уже завтра!

[@dmitrid.317]

Очень профессиональная работа! Спасибо Жека, так держать!

[@FreelancerLifeStyle]

Спасибо!

[@user-hq4qs6vs5d]

Большое спасибо за марафон. С нетерпением жду следующей части

[@FreelancerLifeStyle]

Пожалуйста, уже завтра!

[@user-qk1ij4ls1y]

О как же это классно что есть ссылки на последующие части!!!! :D

[@user-su1vo4wg2t]

Крутой марафон, по скорей бы следующий))))

[@FreelancerLifeStyle]

Супер!

[@user-gl6ph9gc6b]

Женя, спасибо большое, смотрел взахлёб, оочень круто, ну как всегда вообщем)

[@FreelancerLifeStyle]

Спасибо!

[@loralinda4398]

Круто. Идеальная верстка. Каждый раз что- то новое суперкрутое. Ты - супер!!! Спасибооооооо

[@FreelancerLifeStyle]

Пожалуйста, но к идеального ничего нет)

[@loralinda4398]

@@FreelancerLifeStyle Оказывается есть, я это понимаю, смотря твои стримы и туториалы 😊👍

[@babamurad-ch]

Спасибо за уроки!!! Пробую, учусь, все классно!

[@FreelancerLifeStyle]

Пожалуйста!

[@uk-lych_sveta]

Жека Привет!!! Как обычно все круто и полезно. Спасибо за твой труд. Будь здоров.

[@nazet742]

Вы ОЧЕНЬ крутой!!! Все пояснения понятны, интересно и слушать и смотреть. Спасибо большое за такую лёгкую подачу. Учусь с нуля, но даже для такого полного чайника как я все понятно. Круто.

[@ssssheva]

Крутой стрим, огромное спасибо, Женя!!! Понемногу подбирaемся к js)))))) Напоминалка на вторую часть стрима уже стоит!

[@FreelancerLifeStyle]

Суперкрутяк!

[@user-jg8sf6ky5y]

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

[@user-wz8jd9ud9f]

Спасибо большое за такие марафоны)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-qq6hl8cd7v]

Классный стрим, очень позитивный)

[@davidmikiashvili322]

Большое спасибо, смотрится на одном дыхании. Узнал кучу полезного для себя. Талант в мешке не утаишь :)

[@FreelancerLifeStyle]

Спасибо!

[@romanhassazhyrov5558]

Спасибо большущее за работу! Отдельное спасибо за то, что не спешил :D

[@user-lt6ej3tb5k]

Круто! Сподобалось!Так тримати.

[@elenkarnaeva2458]

Очень жду урок по относительным единицам! Благодарю за стрим!! Вы лучший на Ютюбе!

[@Natalia-ph]

Крутецкий контент, огромное спасибо! А динамический адаптив - это что-то из разряда фокусов

[@user-nb8ex1tq6r]

Посмотрела пока первый час стрима. Жека, столько новых фишек заметила и зафиксировала. Крутяк! Спасибо! С каждым новым видосом полезности и новинки не уменьшаются! Смотреть обязательно всем 👍👍👍😉

[@FreelancerLifeStyle]

Я рад!

[@user-nb8ex1tq6r]

Женя, твой "динамический адаптив" просто пушка! Очень крутая вещь, благодарю!

[@FreelancerLifeStyle]

Рад что полезно!

[@user-tr8xi3ik3c]

@@FreelancerLifeStyle , а вы поделитесь с подписчиками реализацией адаптива?

[@NickBardier]

как всегда СУПЕР спасибо!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-uo8jd7ys2x]

Только увидел твою улыбку, сразу лайк поставил )))

[@user-vk1kb3xj6b]

Спасибо! Узнал много нового для себя

[@FreelancerLifeStyle]

Супер!

[@user-ch4gd5sb7z]

Всё супер 😍👍 Делай, пожалуйста, побольше таких стримов)))

[@igarok881]

Жека, спс за новые фишки!

[@FreelancerLifeStyle]

Пожалуйста!

[@zmeygorynych5684]

Жека, твои марафоны нереально прокачивают) Как всегда начал с тобой в унисон верстать, посмотрел вспомогательно видос про Swiper, разобрался в нем) Просто пушка) Рубрика с мастер-классами крутая!

[@user-siergy]

Огромное спасибо. Доходчиво и ясно.👍👍👍

[@FreelancerLifeStyle]

Пожалуйста!

[@user-th4gy4sz8j]

Женя ты очень хороший учитель, можешь правильно преподнести материал, не каждому это дано, спасибо тебе за уроки👍💯

[@user-th4gy4sz8j]

1:50:40 интересно а эту кнопку просто бордерами можно ли сделать, и отдельно стили задать, бордер-топ, ботом итд???

[@user-wf4np1ne2c]

наконец-то добрался к твоим видосам, мне понравилось и сборка галпа крутая, хотя еще не всё увидел)

[@FreelancerLifeStyle]

Уже готовлю урок

[@matsumbra4984]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@zalexstudios]

Dynamic Adapt !!! Супер!

[@artem_ka3863]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@user-te8sp8li3d]

Ты такой позитивный и объективный. Будь моим батей))

[@nika_lletka]

Аааа, это офигенно🤩🤩

[@FreelancerLifeStyle]

Спасибо!

[@adiks09]

Многое нового узнал огромное спасибо

[@FreelancerLifeStyle]

Пожалуйста!

[@glebkabayjanov5646]

Лайк хорошему человеку ))

[@FreelancerLifeStyle]

Спасибо!

[@glebkabayjanov5646]

Фрилансер по жизни - IT и фриланс Это вам спасибо Евгений

[@FreelancerLifeStyle]

🤟 Полезно? 🔴 Получить доступ к плюшкам + поддержать канал: 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

[@user-bb2dl4vp7f]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@HA_CTPIME]

Цікаво та корисно. Дінамічний адаптив - кльово👍.

[@katerinak5997]

Добрый день, очень жду уроков по JS и JSON =) Надеюсь скоро появятся

[@user-ur7vc7er3b]

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

[@AndriiKostyra]

1:19:07 And the crowd goes wild Просто Браво! Жду шаблон :)

[@FreelancerLifeStyle]

спасибо!

[@taraskostiuk456]

Никогда не смотрел стримы, тк считал, что это тупая болтовня... Но стримы этого Человека заслуживают просмотра и лайка! Привет из СПб)))

[@Grifanos]

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

[@user-jn8pd6mo1e]

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

[@user-zo2kg7ou5z]

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

[@FreelancerLifeStyle]

Да, будет урок по gulp

[@uxuidesigner6952]

@@FreelancerLifeStyle у меня установлен node. пишу gulp выдает bash: gulp: command not found Что делать?

[@kalobyte]

@@uxuidesigner6952 нужно установить gulp npm i gulp

[@stasalexandronets9394]

Динамический адаптив - палец вверх!

[@FreelancerLifeStyle]

Спасибо!

[@strannik5178]

Круто! Магия исчезновения

[@FreelancerLifeStyle]

Спасибо!

[@Code.bless_you]

Сижу, пишу код. На фоне верстает наш Женя, с подробными комментариями. " Не будем лохматить бабушку; Раз уж такая пьянка" ))). Пират -Верстальщик, каналья.))

[@user-tr8xi3ik3c]

Конечно же очень интересно как реализован у вас динамический адаптив. Я тут на скорую руку свой вариант написал, интересно будет сравнить.

[@user-tr8xi3ik3c]

Придуманный тобой динамический адаптив вещь интересная и вполне полезная. Но вот на счет дублирования кода, тут бы я поспорил. По сути пришлось не слабо так продублировать код в css + поработать с JS + это само собой более ресурсозатратный процесс. В программировании есть такой принцип KISS (пиши проще), подразумевает, что не стоит усложнять код. Если, что-то может быть написано более читабельно и кратко, то лучше именно так. Стоит избегать ненужной сложности. К тому же стоит отметить, что 90% специалистов по фронте скажут, что если, что-то можно сделать на чистом CSS и HTML без использование JS, то именно так и стоит делать.

[@PalyufishkuRuSite]

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

[@FreelancerLifeStyle]

Это да)

[@sardorshamayev8257]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@azishtar]

привет) спасибо за гайды, это очень полезный материал по обучению. а блок про тестирование сайтов на баги будет?

[@Phoenixdav]

Да нормально слышно

[@user-js6gr7ji8f]

Ну всё, меня этот вечер не трогать)

[@FreelancerLifeStyle]

Хех)

[@ivanpresent8522]

Аха-ха.. Женя так обрадовался, когда регион в бургер переместился.. Прям, как я..))

[@dimapavlov4350]

Все просто "фоссо" !!!

[@FreelancerLifeStyle]

Хех, спасибо!

[@russellwest8775]

40:49 - 41:02 - спасибо за юмор)

[@FreelancerLifeStyle]

Пожалуйста!))

[@user-ey2sw8wx7e]

Перенос блоков HTML из одного места в другое от изменения размера это круто. Мы когда такое в макетах встречали сильно ругались, что дизайнер "надизайнил".

[@FreelancerLifeStyle]

Такое очень часто встречается, по этому и возникла потребность в таком решении

[@user-cz3ut4tm4q]

Очень интересно было бы посмотреть мне да и не только мне, я уверен но и другим про файл dynamic_adapt.js (динамический адаптив) :)

[@dronundeadglhf3186]

Спс Евгений.

[@FreelancerLifeStyle]

Пожалуйста!

[@NeGovoriNet]

1:43:31 еще рамку можно задать при помощи border-image и border image slice. Даже на эксплороре работает)

[@h3ckphy246]

Евгений, в data-move лучше передавать номер элемента не от нуля, а от 1, чтобы было аналогично CSS-овскому nth-child. Также можно добавить поддержку слов first и last.

[@yurakirichenko9770]

Спасибо большое за время проведенное за компом для просветления наших умов. Жду с нетерпением продолжение. Вопрос: шаблон случайный или это был заказ?

[@FreelancerLifeStyle]

Пожалуйста! Конкретно этот не был заказом.

[@Alexus1504]

Анимация кнопки "Присоединится" ( 1:53:30) прекрасно подошла бы для какого нибудь сайта про сантехнику))))) При наведении как бы вода сливается! Только фон можно сделать светло-синим))))))

[@jackdoe1312]

45:15 заповеди верстальщика))

[@-shakirov]

Очень качественная

[@FreelancerLifeStyle]

Спасибо!

[@-shakirov]

Фрилансер по жизни - IT и фриланс сам только gulp начал юзать. Стараюсь краткий и логически внятный код писать. Оптимайз ахха

[@eternal_Ukr]

Плюс за стрім. Було повчально

[@FreelancerLifeStyle]

Дякую!

[@tawroof9353]

ТЫ ГЕНИЙ. Расскажи про свои стартовые шаблоны, мне будет очень интересно.

[@FreelancerLifeStyle]

Рассказываю)

[@user-nb8ex1tq6r]

Стартовый шаблон можно получить, подписавшись на патреон, плюс инструкции к нему.

[@alexmalyshev7247]

@@user-nb8ex1tq6r Если вы имеете в распоряжении стартовые шаблоны,в т.ч. те, которые созданы при использовании prepros,то готов обсудить их стоимость,поскольку с вводом данным в patreon есть проблема

[@user-nb8ex1tq6r]

@@alexmalyshev7247 сливать инфу я не буду, а вот подсказать как оформить подписку на патреоне могу. Что не получилось?

[@alexmalyshev7247]

@@user-nb8ex1tq6r Под полем ввода номера карты пишет Please enter a valid credit card number

[@alexv8021]

1:41:51 Нашел интересное решение для создания градиентной границы: border: 10px solid skyblue; - задать стандартно границу border-image: linear-gradient(to right top, blue, skyblue, blue); - указать тип градиента с направлениями и цветами border-image-slice: 1; - загадочная строчка распространяет градиент только на границу

[@FreelancerLifeStyle]

Да, тоже вариант, но стремный какой-то)

[@alex-troshin]

@@FreelancerLifeStyle Намного короче код выходит, без псевдоэлементов. Только для градиента внутри самой кнопки один after и все) border: 3px solid #a6834d; border-image: linear-gradient(to bottom,#c2a674,#8e662f); border-image-slice: 1;

[@strel9]

все круто, только по спецификации советуют писать классы первыми, мне кажется на перспективу это полезная привычка

[@MaraZzzMShow]

Жека, все круто, но я так и не понял на счет кучи спанов, чтобы сделать градиентную обводку. Там же все просто - самому элементу даешь border-top и border-bottom разного цвета, а уже его же after и before делаешь градиентами. Ну а так спасибо за труды. жестко ты там все оптимизировал у себя)

[@guru_eg361]

Отличный стрим, много полезного. Один вопрос - некжели подгрузка скипта по ресурсам дешевле и проще чем дублирование кода?( Это про перепрыгивание пункта с регионом, он кстати у них в макете в двух местах - еще и user-menu )

[@user-tr8xi3ik3c]

Кнопка в шаблоне с названием "Присоединится" написана с ошибкой. Пропущен мягкий знак, должно быть "ПрисоединитЬся" отвечает на вопрос: Что сделать? Что сделать мне? Присоединиться. А вот если бы отвечало на вопрос: Что сделает? К примеру, что сделает Вася? Вася Присоединится.

[@user-nw5br5jg9k]

Подскажите, для вставления стилей по БЕМу есть специальное расширение? А то cssTrsctor так не вставляет.

[@user-uc9od3ns1m]

Первее всего: это просто бомба, я вроде свойства знаю, что, как и что они делают, но ты ими с такой скоростью жанглируеш... Очень нравится, очень професионально, очень круто. Хотел обратить внимание и спросить совета, нашёл баг в вёрстке(я так думаю, если нет, тогда сори уже)) ): Когда разширение екрана перевалило за брейкпоинт, бургер рендерится в развёрнутом виде, и сразу же сворачивается, у меня был проект, где была подобная бага, заказчикам не понравилось(( Подскажи пж, как это можна пофиксить, и фиксится ли это вообше?(возможная бага наблюдается на 1:21:58).

[@user-bv4dh6jh6l]

Евгений благодарю за годный контент! Есть еще такой интересный HTML шаблонизатор, "gulp-panini". Сам пользуюсь, очень нравится)

[@FreelancerLifeStyle]

include мне нравится тем что собирает и html и js. так же есть возможность передачи переменных в файлы,Ю условия и прочее. Хотя panini, насколько помню умеет все то же)

[@PalyufishkuRuSite]

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

[@FreelancerLifeStyle]

Да я как бы ничего не продаю)) Все бесплатно) Есть менторство\консультации 2 звонка в месяц

[@nocturne4240]

Дякую за старання. Dynamic_adapt - цікава штукенція про яку хотілось би дізнатись більше.

[@FreelancerLifeStyle]

Будь ласка. Добре)

[@gio2156]

Жека учусь по твоим видео потому что твоя подача лучшая) ВОПРОС а в реальных неучебных макетах часто ли встречаются png иконки вместо svg? И если встретились то можно ли их конвертировать в svg? Спасибо!!!

[@FreelancerLifeStyle]

Конвертировать не выйдет, да часто

[@Tester-tp8lg]

Здравствуйте! В каком уроке можно увидеть как применять линейку в шаблоне Avocod? В создаваемом документе BODY нужно делать отступы от краев точно так же как показано на линейке в Avokode? Я правильно понял?

[@denyssamsonov9369]

Крутой стрим! Спасибо ! В кнопке "ПРИСОЕДИНИТЬСЯ" не хватает "Ь"

[@FreelancerLifeStyle]

Хм, спасибо!

[@user-rq1yp9ix8s]

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

[@FreelancerLifeStyle]

на патреоне публикую макеты, так тут можно что-то поискать psd-html-css.ru/shablony/psd-shablony-saytov

[@user-rq1yp9ix8s]

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

[@FreelancerLifeStyle]

@@user-rq1yp9ix8s в фильре поиска google можно выбрать права на использование

[@user-rq1yp9ix8s]

@@FreelancerLifeStyle спасибо, ты самый лучший мотиватор😃

[@glebkabayjanov5646]

Как хотя бы немножко научиться такому же мастерству как и вы :)

[@FreelancerLifeStyle]

Смотреть и делать) вперед!

[@l.mu.433]

Классная наработка с перестановкой элемента! Скажи, пожалуйста: А делаешь ли ты вёрстку в Гриде (сетке, grid). И если да, то прошу сделать обзорный урок по верстке в нём.

[@FreelancerLifeStyle]

уроки по grid будут позже

[@raccoonkiller5953]

Про swiper бы подробнее. Возникли сложности, когда сам пытался сделать. контент не двигал высоту слайдера, по этому, когда сужал экран, блоки друг на друга накладывались:С Спасибо

[@TitovAndrei]

50:08 - меню из 3-х полосок превращается в перекрестие - в каком месте кода реализована данная функциональность?