Адаптивна верстка сайту на базі шаблону ЧФ3. Пояснення дій. HTML CSS JS FIGMA. Частина №1

Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 3. Пояснення дій. HTML CSS JS FIGMA. Планую зробити поекранний скрол.
👉 Друга частина МК: • Адаптивна верстка сайт...
👉 Що такє стартовий шаблон "Чертоги Фрілансера": template.fls.guru/template-do...
👉 Посилання на стартовий шаблон з напрацюваннями "Чертоги Фрілансера" 3 (патреон): / startovyi-v3-59380989
👉 Макет (відкритий доступ): / 73327024
👉 Результат верстки (Patreon - Junior): / 73751757
👉 Інші безкоштовні майстер-класи з верстки сайтів: • Адаптивная вёрстка лен...
Курси:
🟢 Курс по верстці: edu.fls.guru/
🟢 Курс по IT-English: edu.fls.guru/eng.html
🟢 Курс по тестуванню (QA): edu.fls.guru/qa.html
🟢 Платні майстер-класи: master.fls.guru/
💪 ГетьТривогаЧелендж: t.me/freelancer_lifestyle/496
❤️ Отримати доступ к екстра-контенту + підтримати канал: / freelancerlifestyle
❤️ Спонсорувати канал: / @freelancerlifestyle
Корисні посилання:
👉 Безкоштовний курс по верстці: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно навчатись: • Как правильно учиться ...
👉 План розвитку фронтенд розробника (+МАПА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Мапа каналу: miro.com/app/board/o9J_lZB3YKI=/
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👋 Мене звати Женя Андріканич, я IT - спеціалист, займаюсь розробкою сайтів.
Посилання на канал: / freelancerlifestyle
🤟 Живи, а працюй у вільний час! ©

[@user-yu5qf6wb4h]

Колись потрапляла на ваші відео старі, коли лише починала цікавитись версткою, але думала, що ви з росії, і в якому я приємному шоці, що ви мій співвітчизник і ще й перейшли на українську ❤❤❤ у вас дуже класний якісний контент, тому тепер не обдумуючи підписка і повага, дякую за відео і позицію ❤

[@user-vi9uc8rt6h]

Вітаю! Хочу висловити подяку , саме за підтримку українскього контенту. І за те що самі такі люди надихають інших робити те саме - користатися рідною мовою, це просто чудово!

[@nazarlevchuk7773]

Не завжди є час переглянути відео але поставити лайк і комент це обовязково, респект за україномовний контент, завжди бере гордість за людей які стараються подавати контент на рідній мові!

[@user-xp3ph9ev8d]

дзякую за чудову трансляцiю. Всем мира!

[@InvisibleBunny]

Крутезне відео, навіть для початківця😉

[@ninachumak7785]

Респект за ведення українською мовою. Нарешті я дочекалась цього моменту, що можна навчатись і слухати контент рідною мовою. Українська, як музика. Слухаю і плачу від тих позитивних емоцій, які переповнюють мене. Так тримати👏

[@andreiognev1426]

Женя, сердечное спасибо тебе! Твои уроки всегда на высоте.

[@user-db2gp6oc4o]

Спасибо Вам, за вашу работу и за вашу честность❤

[@Yoda12-_-]

Дуже приемно дивитися відео рідною мовою, за це окреме дякую.

[@ivanpav]

Доброго дня) Звернув увагу, що Ви копіюєте повертаючись декілька разів на потрібну сторінку. Спробуйте поєднання клавіш win + v. На віндовс 10 це дає доступ до буфера обміну і там Ви зможете обрати, що вставляти.

[@FreelancerLifeStyle]

Дякую

[@user-diana_koliada]

Дуже дякую за цікаві та корисні відео! Також за український контент, дивитись стало ще приємніше!😊

[@ArsenDanylenko]

Дякую за таку роботу!

[@olexsandrapavlenko1166]

величезне дякую!)) ваші відео, це щось неймовірне, без води й конкретика!)))

[@ilchyshyn]

Дякую за майстер клас, дуже якісний контент 💪🇺🇦

[@xXx-oc5du]

круто)))👍👍👍👍

[@KOTOVSKUA]

Давненько не був на вашому каналі. Вже 299 тис. підписників! Круто! Успіхів каналу! Україномовний контент вже б'є не тільки кількістю, а ще й якістю! В нас талоновиті люди!

[@racing_garazh_zona]

Дякую тобі за допомогу!!

[@user-eb5zg9qp4l]

Велике Дякую за першу частину майстер класу !) Було дуже цікаво та корисно)

[@vadimoleynik5590]

Дякую за український контент🎉🎉🎉

[@Dmytro_Galak]

Дякую вам за роботу. Дуже цікавий і якісний контент!!!

[@Snegurjan]

Ой як приємно тебе чути бро солов'їною. 🤜🤛🤟

[@IvanKoshykar_]

вподобайка за відео

[@user-hg7gf6fh9m]

Привіт. Ти просто красавчик, я дуже пишаюсь, що в нашій країні інсують такі люди!!! :) Чесно кажучи, саме із-за тебе я почав вчитися FD розробці сайтів, у тебе дуже велика харизма!! Надіюсь, все буде ок / Щасти всім!!! І рухатись тільки вперед!

[@mr.matvieiev3653]

))це просто пушка,))))

[@BannedVasya]

Неймовірна вдячність за твою працю. Коментар та лайк від мене перманентні.

[@user-tj4ly7je7w]

Спасибо за контект, смотрю из Казахстана 🇰🇿❤️

[@alesmazur7640]

Дзякуй за кантэнт без расейскай мовы!)

[@BRILLIANTIC1]

Так, лайкос, комент за велику роботу Євгена. Тож не проходьте повз, беріть приклад з мене.

[@sergeant_verteletskyi2357]

дякую

[@TheGraffityman]

Шукав інфу, зайшов на твій відос 19 року. Говориш російською, думаю гляну як зараз, перейшов на укаїнську, бл* ах*єнно))) PS: бачу я не такий один це зацінив))))

[@webriter_tech]

Почав верстати з Жекою, але у мене щось не вийшло повторити все крок за кроком. В підсумку все видалив та зверстав блок, але використовуючи одиниці виміру vw. Вийшло один в один як в відео - і з точки зору центровки, і з точки зору responsive. Дуже круте відчуття, коли можеш зверстати все сам без підказок. Євген, дякую тобі за знання. Без твого курсу з верстки та цих майстер класів, я б мабуть роками збирав інформацію по частинках в інтернеті. А тепер можу верстати відносно складні елементи самостійно) З мене підписка на патреон

[@oleg5588]

Не перший, хто це скаже, але не можу промовчати: величезна подяка Вам, Євгенію, за контент солов’їною! 🤗

[@27viktoria12]

Класний стрім!

[@user-id6wd1bx3n]

Привіт, Женя. Цікавить повний, новий відео курс по натяжці верстки на Woocomerce, чи можеш порадити де б то придбати?

[@user-ij8sn3sr6z]

гарна українська))

[@Robi_Bobi]

супер, дякую! Як включити коментарі коли етрактором переношу в scss стилі?

[@Ivan60179]

так гарна мова

[@sanyok185]

Слава Україні!

[@evgen3723]

Вітаю! Евген Патріон працює? я не можу на сайт перейти.

[@FreelancerLifeStyle]

Так, але іноді потрібен VPN для деяких провайдерів

[@Dumzday777]

Скажіть, будь ласка, а є хоч якась об`єктивна причина використовувати scss, а не sass, чи це просто кому як подобається?

[@Artem_Lira]

Привіт. Дякую за чудовий стрім. З нетерпінням чекаю кожне нове відео. Дуже цікавить коли вийде навчання по Вордпресу та Реакту?

[@user-fw4fv8ss1m]

Женя, дякую дуже. Але одне питання, що це за функція adaptiveValue? А то робив робив і тут примінив якусь супер, кілер фічу і такий ось, працює

[@HA_CTPIME]

Як цей плагін встановити що Font Fascia в Figma? Знайшов його в плагінах, а кнопки "install" немає.

[@user-vh4ly2pf4o]

Завжди хотів запитати чи використовував ти якусь бібліотеку анімацій для сайту дерев'яних мап, але з відповіді про GSAP виходить що писав власний код, чи правильно я зрозумів? Хочеться зрозуміти чи обов'язково вивчати якусь бібліотеку анімацій для розробки інтерактивних сайтів або краще писати код самому?

[@FreelancerLifeStyle]

Так, лише чистий JS. Залежить від об'єму, якщо дійсно проєкт вимагає майже весь функціонал бібліотеки то її використання оправдано

[@user-vh4ly2pf4o]

@@FreelancerLifeStyle дякую за відповідь і за якісний контент!

[@user-raptoryatko11]

Дуже дякую за цікаві і корисні відео)

[@Romulus585]

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

[@LimoBeats69]

підкажіть, чому коли ставиш в шаблоні при настройці розмірів $maxWidthContainer: 0; $containerPadding: 0; в цих параметрах щось крім 0, адаптив працює по брейкпоінтах, тобто плавно не звужується при зменшенні сторінки, а різко перескакує. ============================= $minWidth: 320; $maxWidth: 1920; $maxWidthContainer: 0; $containerPadding: 0; тільки з такими настройками все плавно працює ($responsiveType: 1)

[@mag1c72]

Дуже крутий стрім продовжуй в тому ж дусі сподіваюсь запис залишиться

[@dubanzai]

обожнюю цей канал!!!!

[@ruslan_lwow79]

Дякую Євген. Згадуючи те як ви колись розмовляли мовою дикунів, і бачу як вам важко зараз переключитися на технічно професійну Українською, розумію що це не легко!!! Але ви це зробили, а тим що "неудобно" це питання інтелекту і бажання ...ви живий приклад! Я не знаю що ще має статися щоб нарешті все рашистське пішло з нашого життя...Розвивайте Українське ! Україна буде топ у світі! А російська то вже мова відсталих деградованих...

[@andreiognev1426]

....А російська то вже мова відсталих деградованих... Это одна языковая группа с украинским языком. Так что Руслан извини, ничего личного.. А Женя и правда лучший из лучших. Я давно на него подписан. Руслан от всей души тебе желаю стать одним из самых востребованных фронтенд - разработчиков!!! И удачи нам всем в этом деле.. Живи, Обучайся, Развивайся и стань свободным от всех предрассудков !

[@ruslan_lwow79]

@@andreiognev1426 Это одна языковая группа с украинским языком.?? Язік і мова ? ти нічого не попутав ?

[@ruslan_lwow79]

рускоговорящих ніхто чути і бачити не хоче ...а ти розказуєш про одну групу)) вчи Українську або Англійську, а то скоро тобі дорога буде тільки в одну сторону ...там де деградація і варвари....

[@dmitry7518]

слухай, ти не вважаешь, що це вже націоналізм? Наприклад, я з Харкова, і говорю російською, і я так розумію, якщо ми зустрінемося ти будеш мене зневажати лише тому що я говорю російською? як і будь який українець чи адекватна людина я не підтримую все це, але плюватися абсолютно на всіх, хто говорить російською, навіть на своїх співвітчизників це є дуже інфантильно

[@ruslan_lwow79]

@@dmitry7518 товариш з Харкова після нападу дикунів рускоговорящих перейшов на Українську і визнав що це мова варварів...моя прабабця із Слобожанщини, вчителька Української, говори далі рашистською твоє життя твій вибір, я знаю ту фашистську мову але ніколи більше вжитті нею розмовляти не буду... розмовляю польською англійською і рідною, а російська вона до речі простіша і легша за Українську тому можливо вам і важко її освоїти ? якщо ні тоді не розумію цієї принциповості...Живу в Укрїна іразгавариваю на руськом я Украинец!! Гімн України ти на якій мові співаєш ?

[@peterdunaevski7202]

Чесно кажучи українською якось воно й краще заходить. Гідний контент!

[@O.Kosty.]

Дуже дякую! Як завжди КРУТО! Вчу украiнску мову потрошкi. Слава Украiне!

[@yuriykaminskiy2442]

Проблема іконочних шрифтів в тому, що це часто кнопки, без яких сайт втрачає функціональність. А самі ці шрифти люблять блокувати деякі дивні користувачі, блокувальники реклами...Я сам колись довго думав, чому в мене пропадає пошук на сайті, на openServer є, а на хостингу нема. Шрифт блокувався. Та й про пусті теги, які не дуже добра штука десь читав...А іконочний шрифт це суцільні пусті теги, які заповнюються before і after. А, доречі, плагіни кешування WP також щось робили в мене з шрифтами, що іконочні пропадати. WP Rocket, наприклад. Такі плагіни часто можна налаштувати і виключити шрифти, та замовник в цьому може нічого не розуміти і ставити притензії, чого у нього на сайті не працюють кніпки. В цілому виникає питання, а чому юзати саме їх, а не svg, якщо проблеми є, а переваги які?

[@justkrem7764]

На макет норм лінку не має? Не з патріона. Хотів за уроком повторити

[@user-zu5gk8ng2p]

Дякую за відео. Хотів сказати на рахунок іконочного шрифту і svg іконок. Я читав, що з іконочним шрифтом можуть бути проблеми в деяких браузерах, так як він рахує, що це шрифт і іконки можуть виглядати ''замиленими''. Я робив іконки з відео, за допомогою svg-sprite, що вбудований в ЧФ і робив ховер, так само легко, як і з іконочними шрифтами, тільки замість color, ставив fill

[@ihorprybula9856]

приємно спостерігати за роботою профі

[@KOTOVSKUA]

Народ, скиньте посилання на парочку крутих шаблонів для WordPress для сайту ОСББ/ЖКГ

[@adolfbebrovich2215]

Наскільки потрібна вища освіта для освоєння професії веб розробника?

[@AntonioBenderas]

Взагалі не потрібна

[@adolfbebrovich2215]

@@AntonioBenderas а якщо влаштовуватися в якусь компанію?

[@AntonioBenderas]

@@adolfbebrovich2215 головне вміти вирішувати поставлені завдання. Хтось і з освітою цього не зможе, а хтось і без освіти впорається

[@adolfbebrovich2215]

@@AntonioBenderas ну я маю на увазі не навички вищої освіти а сам факт наявності

[@AntonioBenderas]

@@adolfbebrovich2215 аа, ну це вже залежить від компанії. Напевно перевагу віддадуть тому, в кого є вишка, а може бути навпаки, бо є компанії, які самі навчають і їм складніше буде перенавчати свого майбутнього працівника

[@ruslan_lwow79]

"Людина, котра не володіє мовою народу, на землі якого живе, є або гість, або окупант, або раб цього окупанта!" Карл Маркс

[@andreiognev1426]

👍

[@kiri_ll9799]

+

[@akkauntforit5661]

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

[@glaciron]

Не дуже зрозумів із за чого прив'язка к сессіям по скролу , це такі фішкі настроєні в Grid?

[@Dumzday777]

Дякую за українську! Ваш голос українською мені нагадує футбольних коментаторів 😅, а регулярні лайки в сторону росіян додають вашим відео особливого українського шарму.

[@notIdeal78]

1

[@user-et1xj4kd6o]

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

[@FreelancerLifeStyle]

Звичайно

[@user-ob5kc5jw4x]

мда

[@max_f96]

1:38

[@alexmarch]

Женя навіщо ти видаляєш коментарі від російськомовних? Людина ввічливо поставила питання чи є можливість робити контент мовою окупанта , ти начебто відповів по суті що ні. Але навіщо видаляти коменти?

[@ihorprybula9856]

Женя разів сто відповідав про мову, можливо просто дістало

[@FreelancerLifeStyle]

Я не видаляю

[@user_of_democracy]

Ютубчик сам видаляє. Алгоритми йпт

[@alexmarch]

@@FreelancerLifeStyle вибачай, мабуть сам власник комента його і видалив.

[@MrDreNAL]

Жаль Вы перешли на Украинский. Это конечно понятно почему) Сложнее стало у Вас учиться(

[@FreelancerLifeStyle]

Ну, не вчись 🤷‍♂️

[@user_of_democracy]

Ничего, тяжело в учєнії, лєхко в бою..умєрєть.рускій.

[@Amfip]

@@user_of_democracy Согласен полностью! Если невзлюбить людей за язык на на котором они говорят , то можно понять по просмотрам с перехода на мову

[@elenasmirnova3549]

не жаль ) пппффф так пофиг! полно других каналов на русском )

[@Amfip]

@@elenasmirnova3549 сарказм... Елена...сарказм...

[@TheGramaboi]

Привет! Спс за видео! Я из Казахстана и мне сложно на украинском :( Думал что рус и укр языки оч похожи, как же я ошибался

[@zibreasonbeats8803]

Здравствуйте, у меня вопрос, у вас в дальнейшем не будет видео на русском языке?

[@FreelancerLifeStyle]

Ні

[@kagyhe4053]

@@FreelancerLifeStyle интересно почему

[@MrBenedig]

Нет

[@user-zi1wd1wu8t]

@@kagyhe4053 Я так понимаю что вопрос с нотками сарказма? Но сарказм в данной ситуации войны не уместен

[@kagyhe4053]

@@user-zi1wd1wu8t почему?

[@andrewbaker3052]

Может сабы на Русском языке добавить к урокам? На Украинском понимаю 50% и думаю многие кто сейчас не живет в РФ, но говорить на Русском тоже бы хотели видеть хотя бы сабы

[@gregoryvak7556]

В принципе и на украинском понятно. Дело в том, что русский язык- международный. На нем коммуницируют люди разных национальностей: казахи, грузины, армяне, белорусы, украинцы, узбеки, таджики и др не факт что им будет понятно. Не только русские. Ну в любом случае - ваше право. Мирного неба, скорейшей победы.

[@user-ij8sn3sr6z]

впервые слышу о "международном" русском языке. Скорее английский международный.

[@row2072]

Ти просто перерахував постсовок. Кому яке діло, що їм незрозуміло

[@however1456]

апхаххахах мєждународний

[@soprano6806]

навіщо використовувати міксин adaptiveValue, якщо значення властивостей (gap, padding і таке інше) можна писати через min()/max() ?