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

Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 3. Пояснення дій. HTML CSS JS FIGMA
Усі частини: • Адаптивна верстка Farm...
👉 Макет та результат верстки (патреон): / 68944676
👉 Стартовий шаблон з напрацюваннями "Чертоги Фрілансера" 3 (патреон): / startovyi-v3-59380989
🟢 Курс по верстці: edu.fls.guru/
🟢 Інші майстер-класи: master.fls.guru/
💪 гетьтривогичелендж: t.me/freelance...
❤️ Отримати доступ к екстра-контенту + підтримати канал: / freelancerlifestyle
❤️ Спонсорувати канал: / @freelancerlifestyle
Корисні посилання:
👉 Безкоштовний курс по верстці: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно навчатись: • Как правильно учиться ...
👉 План розвитку фронтенд розробника (+МАПА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Мапа каналу: miro.com/app/b...
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👋 Мене звати Женя Андріканич, я IT - спеціалист, займаюсь розробкою сайтів.
Посилання на канал: / freelancerlifestyle
🤟 Живи, а працюй у вільний час! ©

[@sychevskyi863]

Я пишаюся, що живу в країні з такою людиною як ви, дякую за вашу працю! Зверстав разом з вами, дуже сподобався процес та дізнався багато нового, маю ще більше сил та прагнення вчитися далі. Ще раз дякую!

[@ReyLax1]

Я був приємно здивований, коли дізнався що ви українець) Дуже круто, що перейшли на українську мову. Дивився ваш контент давно, а тут зайшов глянути, що новенького. Красно дякую вам за вашу неймовірну роботу. Інформація, котра вами подається, залітає з легкістю навіть в мій "маленький" та "загальмований" мозок)))

[@casinator1x]

Это плохо, многие моменты не понятны, лучше бы дальше на международном снимал

[@user-sn5nu8mz7f]

@@casinator1x а он на английском до этого записывал или что? наверно ты что-то перепутал

[@user-sn5nu8mz7f]

Я взагалі думав, що він білорус :)

[@ReyLax1]

@@casinator1x Ви там великороських грибів переїли? Самому не смішно? "Международный") Забагато честі буде. Вчить українську мову!

[@casinator1x]

@@ReyLax1 Да я ж не говорю, что русские самые крутые и тд, все одинаковые.. Я просто сказал что русский это международный язык, его поймут и русские, и украинцы, и узбеки, да много кто, хотелось бы тоже понять смысл видео, какв старые добрые

[@user-gh5dz4ue8n]

Жека, я сколько уже смотрю твой канал И постоянно удивляюсь какой же ты гений в вёрстке Респект тебе и уважение

[@user-nt4xo1vz4o]

ЕвГЕНИЙ, очень хочется, когда закончится война, собраться всеми кто может и пообщаться, послушать свои истории и просто пожать тебе руку! Моя история очень печальная и если б не твои уроки, то наверно или спился б, или упал, как Вася, в глубокую депрессию. Но под шум ракет, взрывов и многого прочего дерьма, я сижу и учу верстку в своем родном городе Харьков! Так что от меня большой поклон до земли. Пока только закончил разбираться с позиционированием, но я обязательно доведу дело до конца и тебя отблагодарю или лично, или дистанционно. Это твое - занимайся!!!

[@user-bc1ln6up7x]

Хорошо что ты Серёжа, а не Вася

[@user-nt4xo1vz4o]

@@user-bc1ln6up7x , хорошо что ты Андрюша, а не Ванька.

[@jamesmay5088]

Супер, класний макет та верстка на профі рівні👍👏

[@user-kx2un8sl2j]

Чувак, у мене бере гордість за тебе, бо зробити такий крок, це круто!!!

[@elenasini825]

Очень переживаю за Вас с начала войны, рада, что с Вами, с Вашей семьёй и Вашим домом все в порядке. Спасибо, что продолжаете снимать видео. Я начинаю понимать украинский язык, и очень рада этому. И рада, что сегодня видео не прервалось, как в прошлый раз (хотя я пока не досмотрела до конца, но длительность видео позволяет так думать).

[@gorizont444]

Дякую за такі Чудові майстер класи. Після твоїх Самих Найкращих навчальних курсів це саме те що потрібно для практики! 💪🤘

[@alyonak3013]

Так триєдиного слухати тепер українською мовою. Рада, що якось випадково наткнулася на канал🤗

[@pavelmalorodnov2078]

Жека, прывiтанне з Беларусi!!! ты лепшы настаунiк!!! дзякуючы табе я iду да сваёй мары !!! Украiна, мы з вамi усiм сэрцам!!!

[@BannedVasya]

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

[@mrs.masniuk]

Женя, Ви супер, дякую велике за Вашу працю, після перегляду відео з’являються неймовірне бажання творити, з нетерпінням чекаю осіннього курсу♥️

[@Andrey_Mendel]

Дивлюсь. Анімація - цікаво! Це треба десь сторінку "Вечора на хуторі близ Диканьки" стилізувати полумісяцем з зірочками))

[@userTarasK]

Дякую за контент💪

[@Shcherbaken]

Майже рік пройшов з того моменту як ракета влучила у Вінниці. І ось нещодавно наші спецслужби вкоротили віку командувачу того підводного човна з якого саме ця ракета вилетіла. Перемога буде за нами! Слава Україні та Слава ЗСУ! А ми поки продовжимо вчитися.

[@sergeykorol5037]

Рік працюю на фронті. Багатенько цікавого для себе знайшов. adaptiveValue - крута штука. Дякую! Маленький лайф-хак від мене (не зустрічав, щоб ти в відео використовував). Якщо пишемо width і height, можна це зробити швидше - w100+h100 - enter. Отримаємо - width: 100px; height: 100px Дякую за відео та позицію по мові)

[@user-oo5nx6jh5e]

Что за деревенское наречие? Лучше закрыл бы канал, такое смотреть никто не будет

[@gsmnexus7610]

В Украине с недавнего времени производится полный отказ от русского языка во всех сферах деятельности)

[@gsmnexus7610]

Мозги потекли у блогера.

[@annaivanova7193]

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

[@user-jj7lj5ib7i]

Дуже дякую за ваші уроки!

[@irinasname]

Ви дійсно чудовий вчитель, та ще й надихає те на розвиток, це дуже важливо))

[@dmitrijdavidov8783]

Лойк за українську мову 👍☺️

[@user-xs8ty9dg5s]

Сейчас смотрю периодически уроки других блогеров и вижу насколько крутой и продуманный контент ты делаешь!!! Спасибо тебе!!! Всегда с нетерпением жду твои ролики!!! Ты крут!!!

[@UkraineAb0veAll]

@Дмитрий Самарин і шо ти тут Zабул0? йди на інші канали, якщо тут не подобається

[@user-xs8ty9dg5s]

​@Дмитрий Самарин да, спасибо. Этот канал тоже смотрю. А Жека все равно крут. У него подача классная. Прям заряжает и мотивирует. Давно его смотрю. Он мне уже как близкий родственник=))

[@niko.militarist]

Підписалося 315 тис. користувачів - бажаю подальшого розвитку каналу, створення більшої кількості мега-крутого контенту і вже осінню 2023 - 500к підписників ;)

[@serhii7438]

Коментар на підтримку виробництва українського контенту. Все буде Україна!

[@rostyslavkinash5232]

Дякую за урок

[@webdeveler]

Україна обов'язково переможе з такою армією як в нас. Бережіть себе та своїх близьких. Дякую автору, давно вже тебе дивлюсь і ви дійсно робите гарний контент. За бан Росіянам +++

[@yatsenko_psy]

У мене аж камінь з душі, ви українець))Боже дякую. Ваша праця на ютуб допомагає мені реально розібратися))

[@fakhri.Q]

Привет друг мой. Я очень благодарен вам за ваш труд благодаря чему я кое-что научился типа HTML & CSS . Почти часто смотрю и слежу за вашими роликами. Слава богу что я таджик а не русский, и к сожалению я понимаю русский язык и не знаю украинский язык. Да, прекрасно понимаю вас и вашу боль, который принес вам русский мир и неуважаемый Пугин. У вас было весело научиться, но благодаря не цивилизованного мира, страдаем и мы..... Respect Вам. Слава Украине. Слава героям.

[@astkh4381]

А в чем проблема быть русским?

[@fakhri.Q]

@@astkh4381 Оооооо неговори. Лучше спроси вашего Пугина

[@astkh4381]

@@fakhri.Q почему моего?

[@fakhri.Q]

@@astkh4381 вы русский (русская)?

[@astkh4381]

@@fakhri.Q я человек.

[@volodymyrvolkiz2434]

Дякую! Чудовий контент! Повага за позицію!

[@AntonioBenderas]

А яка ще може бути позиція українця.

[@user-ks6ls6hr6k]

гарна робота !

[@user-lv6od2jf1i]

Після цього мені потрібний ще окремий МК по кругам 🙈))

[@user-lz3je9pr9o]

Спасибо, Жека! Много нового узнаю из твоих видео.

[@user-is7uj9my4k]

Классный новый саундтрек)) Спасибо за видео!

[@mountandride]

Жека привiт )) Периодически смотрю работы у других верстальщиков, с их подходом и построением сайта, но не могу долго смотреть, потому что уже автоматически идёт отвержение на уровне подсознания что ли такого подхода к построению сайта, потому что отличается от твоего и уже кажется каким-то чуждым )) огромная благодарность тебе за твои уроки, за твои мастер-классы, здоровье тебе, семье, друзьям и близким и всем жителям Украины, поскорее дождаться победы в войне над эрэфией, чтобы наконец наступил мир и процветание в Украине 🇺🇦

[@manifaces8862]

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

[@SuperRAilya]

1:54:16 картинка задает высоту блока 1:16:50 шапка, затемнение 3. How FW Works 1:39:13 1:48:25 css 1:53:40 image 1 1:55:00 * cnt grid-template-columns: 1fr percent(750,1620); * чтобы не растягивало подложку когда текста больше .how__image align-self: start; 2:19:28 block spollers 2:31:28 spollers 3:04:14 блок reviews 2 колонки (комментарий для себя)

[@Elena_Petrenko]

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

[@sadivnytsia]

Дякую!

[@vitalii5145]

Красунчик, радий що на українській почав робити !!!!

[@user-ik5me1le9w]

Женя в фігмі плагін font Scanner аналізує розмір шрифтів в макеті🤟😋

[@ge_ka_bu]

Хоч я не зовсім цікавлюся цією цариною,але фрилансом цікавлюся,тому буду слідкувати за вами

[@yuriisabodakh6182]

Дякую за уроки!

[@avalex82]

З жовтня у турборежимі погнав вивчати верстку, але найоби від "влади" зі світлом вибили геть зовсім, але дуже по троху дивився-вчив-робив, потім повніша апатія на декілька місяців.. врешті решт зібрав себе до купи, продовжив і ось рівень мідл цього майстер-класу показав, що час раніше був витрачений не просто так, тут декілька "тугих" моментів просто на лайті вирішилися, взагалі все дуже зрозуміло, ну звісно js поки на стадії десь щось підрихтувати, тому це попереду, але головне, що концепцію та багато нюансів від Женьки забути неможливо. Дякую, Євген, мовою таке враження, ще "глибше" та доступніше залітає. Одне питання, що зверстати такий макет хай мініму за 50 баксів, та хай за 2 дні реально, але проблема знайти та вихватити те замовлення, бо зараз вже потенційних виконавців навіть з України дуже багато (всі вчаться), я вже на кажу про мостадонтів цієї сфери...

[@avalex82]

Доречі, з тим спартаном, що треба, та з потрібною шириною форми (бачу не став заморачуватися, хоча вона по факту менше вийшла) концепція медіазапитів трохи змінюється, але то вже дз для верстальників))

[@burlakanazarii]

Ну так класно

[@olexsandrapavlenko1166]

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

[@user-ub5kn4wf8q]

Контент классный, даже и на украинском, спасибо вам большое за ваш труд, ваши видео уроки мне во многом помогли)

[@user-xs8ty9dg5s]

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

[@astkh4381]

На какой площадке был заказ?

[@user-pw2do9ri6m]

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

[@user-xs8ty9dg5s]

@@user-pw2do9ri6m сложно подсчитать так как училась и параллельно работала. За счет этого дольше получилось, чем могло бы быть. Чуть меньше года примерно

[@user-pw2do9ri6m]

@@user-xs8ty9dg5s ну неплохо) А первый заказ был сложен, и велика ли там была конкуренция?

[@igormajrov8444]

Може у якомусь вiдосi оновити налаштування VSCode згiдно з тенденцiями 2022?)))

[@AntonioBenderas]

А що там в 2022?)

[@vikaorganic]

Ще не дивилась, поки часу немає, але лайк за українську! 🤩🤩🤩🤩🇺🇦❤️

[@katekurak5133]

Ти молодець

[@gaboo6797]

Круто як завжди !

[@user-xw8kv4hl3q]

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

[@kadabra8]

Наступне відео на каналі,по порядку буде 200- тим

[@flock4241]

Супер, дякую

[@scarboro3689]

Чекаю складного рівня, більше JS, більше хардкора!

[@SerhiiNesterov]

дякую

[@nazarmuravel1065]

клас, дякую

[@user-bb2ee7ds9u]

Класс дякую за укр контент !

[@Midnight-Kiss]

Женя! Дякую тобі, що продовжуєш випускати ролики на українській! Завдяки тобі постійно дізнаюся багато корисної та нової інформації. Окремо - респект за позицію!! З нетерпінням чекатиму на інші відео) а також на новий контент на патреоні😉 Ще раз дякую і Слава Україні! Вчимося і розвиваємося заради майбутнього нашої країни)))

[@user-lk3rw2kv7j]

Повеселили з кидаловом росіян)) справжній патріот своєї країни🤣👍 Гарний маркетинговий хід🤗

[@sanyaanya9475]

👍👍👍

[@user-np9mq5xc7j]

Файний та корисний контент!

[@dilbarhaliknazarova5778]

Бро вроде у тебя был русский канал а не украинский

[@user-ov7sg4vk6x]

учи украинский

[@StarkElessar]

Вчи українську соколику ;)

[@user-gc2ez7zb1f]

Надо учить украинский 🫡

[@user-ex5vy8kt4o]

@@StarkElessar нет, надо учить английский =) это мировой язык, а не укр =)

[@zobrig]

Дуже дякую тобі, що перейшов на українську :)

[@user-zn8oc6bl4l]

Дякую за крутий україномовний контент!

[@doctype2508]

Є в когось так як у мене проблеми з картинками в page__partners, я їх скачую а воне не коректно відображаються?

[@ua5144]

👍👍👍👍👍👍👍👍👍👍👍👍👍 (просто не маю слів 😁)

[@ukrainian9773]

Переглядаю декілька відео підряд і ЗАРЯДЖАЮСЬ! від подачі.)) Файно же ж)))😁

[@user-jq5zu8br5u]

Дуже дякую за те що ти робиш.Я дивлюсь и навчаюсь у тебе.

[@oskrworkout83]

Фрилансер по жизни я уважаю тебя твоими стремлениями твоими уроками я сам учусь frontend я знаю css html я поступил в академию It step и скоро буду изучать js я желаю тебе самого наилучшего во всём твой подписчик Tnt fox

[@innaklymovych3554]

Супер матеріал. Ти молодець.

[@user-zt2lp4nk7z]

Мелодия в начале очень нравится

[@eugenevandar7952]

Женя, как убрать формирование WebP? После деплоя на хостинг, у картинок добавляется picture с картинками WebP, а для дальнейшей натяжки на WordPress это не нужно. В документации не нашел инструкции

[@FreelancerLifeStyle]

в документації все описано

[@dishaforex]

Що за чудова музична композиція грає на початку? Дай ресурс або хоча б скинь посилання

[@FreelancerLifeStyle]

Написана для каналу

[@herubim877]

Женя молодець!! што так поступив з руським гімном і не повернув ім гроші)))

[@gsmnexus7610]

Язык тут причём и весь СНГ? Казахстан тоже Враг Украины?

[@natalyabortsova3016]

Дякую за якісний контент!

[@user-wx8bj3df5k]

у мене теж фігма поміняла колір сьогодні))

[@w1nchester551]

Есть ли туториал по созданию такого параллакс эффекта? Чтобы при движении мышью объекты меняли своё положение.

[@FreelancerLifeStyle]

так, є

[@maximka2246]

Доброго дня! У мене не робить @include adaptiveValue. Робив як по майстер класу, не реагує на адаптив. Що можна зробити або налаштувати. Заздалегідь дякую!

[@FreelancerLifeStyle]

Дивіться документацію шаблону на патреоні

[@maximka2246]

@@FreelancerLifeStyle Не можу зрозуміти чому не працює ця властивість, чи потрібно щось змінити у налаштуваннях?

[@user-mh7lu6gv6f]

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

[@rostyk_vorotniak]

Привіт, чи можна після закінчення дану роботу залити собі на gh pages, і якщо так то як це зробити?

[@user-lv6od2jf1i]

Чи може хтось допомогти? Я зробила все як в МК, а далі що? що робити в gulp щоб отримати готову верстку?

[@user-yc2bu9hm2j]

Женя якщо не важко можеш зробити відео на тему як перекладати сайт з одної мови на іншу)

[@Chernyavskiy]

Дякую за урок, ти крут)

[@user-zt2lp4nk7z]

почему не используется Lazy Loading?

[@FreelancerLifeStyle]

Так, можна, функціонал є в шаблоні

[@user-uo8jd7ys2x]

Жека, обязательно везде писать 2 контейнера? container-big и просто container и почему?

[@user-uo8jd7ys2x]

@@ThePro_0001 так я тоже нацик, аватарку видел

[@worldchanger104]

@@ThePro_0001 +

[@Ekaterina_nes]

Побежала смотреть первую часть)

[@user-ik4xd8fs8f]

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

[@gsmnexus7610]

В Украине с недавнего времени производится полный отказ от русского языка во всех сферах деятельности)))

[@Rasty_Boss]

Дякую за позицію, розумію що ти втрачаєш кошти через це , але це викликає повагу

[@user-uf8ru5hg3l]

Неможливо робити за тобою макет

[@v.menshov]

Привіт Жека, чи буде анонс якийсь щодо залишку останніх місць на курс восени? Щоб встигнути записатися якщо що

[@FreelancerLifeStyle]

Можна забронювати

[@v.menshov]

@@FreelancerLifeStyle дякую

[@artemsydorenko477]

Як записатися на курс ?

[@StarkElessar]

Жень, якщо буде час, будь ласка дай посилання на своїй відос де ти пояснюешь, що таке: width: rem(765); Сам що таке rem(*число*)

[@elenasini825]

rem это единица измерения, которая сопоставляет пиксели в нашей вёрстке с размером по умолчанию в браузере (16px), на этом канале есть видео про единицы измерения, посмотрите

[@StarkElessar]

@@elenasini825 Вiдео на каналi про вiдноснi одиницi вимiрювання дивився, а саме про такий запис, як rem(...) не знайшов :(

[@elenasini825]

@@StarkElessar rem(18) - это размер по умолчанию в нашем макете но в браузерах по умолчанию - 16px соответственно, в браузерах это будет отображаться как font-size: 1.125rem; то есть 16px (по умолчанию в браузерах) * 1,125 = 18зч (-тот размер, который мы указываем в верстке в единице rem)

[@elenasini825]

зч=px)

[@TurchynykOleksii]

Де такий стартер взяти галпу?

[@user-uo8jd7ys2x]

купить на Патреоне

[@wickedtorpedo75]

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

[@user-gj9op2hn2o]

Бред

[@Haha-ip2ke]

Очень вас жаль (нет)

[@boryskatowsky5190]

Видно, что автору сложновато думать на русском, и переводить на украинский. Иногда русские словечки проскакивают))

[@milash7059]

Нравится не нравится , терпи моя красавица …

[@doctype2508]

@@milash7059 🤣🤣🤣🤣

[@jojo-eo3sp]

Жека,привіт,коли буде майстер клас макету вищого рівня?

[@ruslangaiderbeck9235]

Привет фрилансер по жизни. Можно уточнить где я могу это видео посмотреть (естественно платно и в поддержку Украины). Мир вам и твоему каналу

[@FreelancerLifeStyle]

Це відео у відкритому доступі в двох частинах

[@ruslangaiderbeck9235]

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

[@pavelsologubov4988]

Давай Майстер клас

[@dmygraveme]

А де Ти живешь, фрiлансер по життю?

[@user-uo8jd7ys2x]

Расскажите кто-то, как Жека копирует в HTML, а в scss вставляются классы с коментариями,за ранее спасибо

[@Midnight-Kiss]

Це плагін eCSStractor for VSCode і передивись відео налаштування VSCode. Саме там Женя встановлює всі необхідні плагіни з якими працює, а також показує їх налаштування.

[@user-uo8jd7ys2x]

@@Midnight-Kiss дуже дякую! Я дивився це відео, але щось такого не пригадую) зараз встановлю плагін)

[@Midnight-Kiss]

@@user-uo8jd7ys2x я просто так само передивлялася нещодавно) успіхів )))

[@plaginnn3886]

Что вообще сейчас с фрилансом в России? Сильно ли пострадал?

[@Gogsan]

Почему ты так всегда верстаешь таким сложным подходом ?