Адаптивна верстка сайту для початківців. Пояснення дій. HTML CSS JS FIGMA. Майстер-клас з верстки

Адаптивна верстка сайту для початківців. Пояснення дій. HTML CSS JS FIGMA. Майстер-клас з верстки.
👉 Макет (відкритий доступ): / 75568778
👉 Архів з готовою версткою: / rezultat-verstki-75819211
👉 Інші безкоштовні майстер-класи з верстки сайтів: • Адаптивная вёрстка лен...
🌲 Будиночкі для ретриту Hytte
☝️ Пам'ятайте про промокод FREELANCER
👉 bit.ly/hyttefreelancer
‼️ Канал з практикою ‪@codeonly‬
‼️ Безліч корисних майстер-класів HTML CSS/SCSS JS FIGMA
Курси:
🟢 Курс з верстці: edu.fls.guru/
🟢 Курс з JavaScript: edu.fls.guru/js.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
🤟 Живи, а працюй у вільний час! ©

[@polby69]

Люди не жлобтесь, бачите наших ютуберів, тицніть вподобайку, і напишіть хоч пару слів в коментарях. Це займе менше хвилини часу! Дякую за контент!)

[@userTarasK]

Дуже дякую, за вашу працю. Натхнення в роботі

[@irinasname]

Величезне дякую. П'ять годин - це величезна праця, стільки знань, скільки часу, дякую, що хочете нас навчити ❤️

[@yurizhdanov]

Дякую за український контент і вкрай корисну і інформацію!

[@andreiognev1426]

Женя низкий поклон тебе как преподавателю и дальнейших успехов!

[@user-le7rw6gf9b]

Ого 5 годин! Величезне дякую за таку роботу :)

[@ilchyshyn]

Дякую, за вашу працю) Уроки та майстер-класи на вищому рівні)

[@user-uv3ew8zq7m]

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

[@dovuret2191]

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

[@vasylst4241]

Нажаль не можу бути на стрімі, але в записі передивлюсь. Дякую за допомогу та навчання! Все супер!

[@user-ns6ds7cg1e]

Нещодавно закінчив верстати макет «GoCorona” зараз розпочинаю дивитися і пробувати цей! З кожним разом все більше і більше починаю розуміти, а від того стає все цікавіше і цікавіше вчитися! Дуже дякую тобі за твій труд! Саме завдяки твоєму каналу вирішив почати займатися саме розробкою сайтів! Слава України🇺🇦❤️ привіт із Ізраїлю🇮🇱❤️🇺🇦

[@oleksii_smirnov]

Дякую за таку титанічну працю. Приємно дивитись за роботою дійсно професіонала в своїй сфері - це зворожує! Я не зовсім новачок, але хочу на платний курс, мабуть вже у вересні)). Чекати довго, але поки є час попрацювати самостійно)

[@liubomyryatskiv5773]

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

[@Mshark42]

Дяка за контент і за українську мову! суперово і цікаво!

[@Maximus.S]

Женя, дуже дякую тобі за твої уроки, ти мастер свого діла, за що дуже тебе поважаю! Дякую, разом переможемо!

[@yuriiandriiets]

Дякую Євген за чергове корисне відео. Ще один урок, і ще ряд моментів, які потрібно буде розібрати/зрозуміти. На деякі питання, які вже назбиралися під час самостійної практики, отримав з нього відповіді, тепер буду використовувати. Також побачив певні рішення, до яких дійшов власним розумом, що не може не радувати.

[@user-cw6ks1qp9d]

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

[@SuperEragon007]

Майстер-класс топ. Витратив 2 дні часу на розуміння та повторення. Але воно того варте. Дякую)

[@jarikkoshik3392]

Слава Україні! Дякую за українську

[@user-xs8ty9dg5s]

Классный стрим и для среднего уровня. Помогает еще лучше структурировать информацию. Отдельное спасибо за новый плагин для отзывчивой верстки и за крутой контент). Лайк))

[@user-lm3qi2vn1h]

Дякую за безцінні знання)!

[@mikeoushen8503]

Дякую за якісний контент і детальну інформацію, Євгене !!!

[@hubschmannn]

комент для підтримки контенту, дякую за вашу працю!

[@user-tt3bk7dw2z]

Дякую за чудовий український контент!

[@nataliiakovtun4680]

Супер! Женя,величезне дякую за контент та безцінні знання🙏 Все буде Україна❤

[@mikhaildolgov]

Евгений, спасибо за Ваш труд! Полезное видео.

[@ilyapitukh9362]

Словами не передати дяку, за вашу роботу❤

[@ua5144]

Знову дивитимусь після роботи.)) Але вподобайку необхідно бахнути негайно!) мм

[@DenysKladko-vs3et]

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

[@antonkurinnyi1688]

Женя, дякую за навчання. Ти супер викладач!

[@sashavarava7933]

Дуже дякую!!! Було дуже цікаво та кориснов в моєму навчанні.

[@user-wo6fr4mc7v]

Дуже вдячний за вашу діяльність!!!

[@creatoroftheworld]

Дякую за старання. Ти - молодець

[@redheadco.4257]

Дякую за відео! Я просто насолоджуюся навчанням!

[@Timyr48]

дякую, Жека! Твої відоси тут це якийсь еволюційний ланцюг розробника! Я повзу по твоїм відео і відчуваю свій ріст. Це перший макет який я зверстав сам. Роблю секцію. Дивлюся, як це робиш ти. Роблю наступну і так далі.. Дякую!

[@andrewmr8239]

супер тренування дякуем Женя чудовий урок .

[@al_pav8521]

Классный формат. Очень нравится. Жду следующих мастер-классов.

[@user-qm1lv7dg1r]

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

[@user-hw8cm2kn3k]

Спасибо вам огромно!

[@oksanakukhotska7190]

Дякую!!!

[@bi_an_ser7349]

Жека ти змінив моє життя, сьогодні я дізнався про магічну штуку з Win + V. Як я жив без цього раніше, серйозно, завжди мріяв про таку шнягу)

[@viva121d]

Величезне дякую за контент!

[@quercus4181]

Дякую, за вашу працю

[@sergeybezumanuy8690]

щиро дякую за майтер класс та макет ! Відео як завжди топ

[@user-tt8mp5ir2o]

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

[@erikgorin3347]

Жека дякую, прiвит з Молдовы, твой патрон)

[@user-ki1bd7fc5p]

Ти фантастичний, дякую за працю💙

[@user-tk3cu9mn6w]

дякую за контент ) сьогодні зранку шукав 1:21:45

[@martix3090]

5 годин... Як все встигнути?! ) 👍

[@alataupeka4770]

Looks great! Thank you

[@andrewmr8239]

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

[@yuriykhmelevski]

Дякую 👍👍👍

[@marytsb4571]

дякую за відео

[@user-hv7jb3bx3c]

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

[@_Sunfall]

😯🤯 Гадав переходити після 3 місяців самостійного навчання до вивчення JS, але глянувши Ваше відео зрозумів що потрібно ще закрити прогалини в знаннях із HTML і CSS. Шкода що лише нещодавно знайшов Ваш безкоштовний курс, але надіюсь що після вивчення і детального розгляду вашого курсу з'явиться хоча б якась систематизація в знаннях, чого не було в самостійну навчанні.

[@roman-_-novikov]

Відразу лайк бо впевнений, що зроблено все на вищому рівні.

[@alkobess]

Спасибо! Спасибо! Спасибо!

[@max8mad]

Дуже круто, Дякую😊😊😊😊😊

[@user-xs8ty9dg5s]

Женя, а будет отдельный урок по кроссбраузерной верстке? Не так давно делала поддержку для очень старых браузеров и поняла что не так много каких-то статей (в том числе и на английском), где толково описаны какие-то базовые случаи. Например: что не везде работает краткая запись свойств flex: 0 0 auto или background: url('img/background/avatar.jpg') top left no-repeat;. Или про особенность работы с min-height и т.д. Было бы круто увидеть подход профессионала к таким задачам. И, возможно, у тебя есть какие-то статьи в заметках). В любом случае заранее спасибо))

[@sanyaanya9475]

Молодець!

[@user-xv7sh6lp7o]

👍

[@hdrhighdigitalrap5474]

дякую

[@tatyana885]

спасибо !

[@olhaivanova7002]

кращий контент для фронт-енду

[@sviiatoslav-khorobryi]

Ахахаха байка про десант мега угар XDXDXD

[@occamsr]

Просто коммент. Для продвижения просветительской деятельности.

[@aleksandrn1302]

Було би гарно озвучивати усi шорткати. Наприклад 42:15 - як перенести класи, або iнтелiсенс коли в html швидко класс __container. Чи може я щось пропустив?

[@user-oj1wm2ri1j]

1:06:01 Вичитав що для флекс елементiв не обов'язково вказувати position, таке невеличке скорочення коду 👌

[@tatyanayamkova7242]

Женя, дякую за контент! Підкажіть, чи є макет в Figma? я переходжу за посиланням, мени відкриває Avocode

[@FreelancerLifeStyle]

цей макет figma

[@BRILLIANTIC1]

Евген, сторінка з будиночком не доступна 😢 вони кудись переїхали? Чи працюють ще?

[@dimondimonov6417]

Евгений а вы на всех сайтах верстки прижимаете футер?

[@choleg22]

За комент про російську мову🔥

[@denzeroneYT]

5 годин 😳 круто, зараз застряг на питання, робили на практиці сайт wordpress+elementor, навчився новому, і там коли мені потрібно було якийсь блок відобразити на мобільному, а якийсь прибрати на комп. версії, я натискав всього кнопку, і все працювало. Тобто, мені потрібно, щоб в бургер меню header, на комп. версії була форма (поле для вводу + кнопка), а на мобільні версії, ця вся тема (форма) йшла після шапки, а в бургерії її не було, як краще це оформити? (Відео ще не дивився)

[@dENI-fe3ci]

кюсі!

[@andriititar3129]

не могу достучаться к ссылке с макетом , она вообще не грузиться ((

[@maxlangrise]

у мене бургер вийшов тільки після того як я вказав background-color для icon menu, і вийшло так само як в тебе, хоча ти не вказував там колір фону. у мене не вперше складності с саме з цим бургером

[@idina5462]

Дякую за чудовий сайт! Є питання, overflow: clip VSCode пише warning не підтримуєтся Safari. Підкажи пліз що треба прописати в reset.css щоб все правильно працювало

[@FreelancerLifeStyle]

Кажете неправду skr.sh/sHNXyetXUob

[@idina5462]

Я це балича , тому напевно це проблема мого VSCode. Дякую за відповідь

[@Faradenza-sb3mj]

Здравствуйте, я из города Алматы, я бы хотел у вас спросить, с вашей точки зрения, могут ли в будущем примерно лет 5-10 заменить фронт ендеров искусственный интелект?

[@coracoal8268]

Можете быть спокойны, я думаю в ближайшие лет 100 не заменит.Пока не научатся высовывать мозг человека и засовывать в процессор. На сегодняшний день ИИ, это не более чем маркетинг и набор алгоритмов. ФронтЕнд это создающая профессия, имея всего лишь карандаш в виде HTML, CSS, JS и библиотек. Далее все от тебя зависит что ты сделаеш, с этим карандашем, практически всегда что-то новое, а не просто по шаблонам работать.

[@user-xr4vl2rd4w]

​@@coracoal8268 але багато професій витіснить найближчим часом - все більше бачу самообслуговування на касах замість касирів, все менше потрібно лікарів для проведення операцій і т.д.

[@coracoal8268]

@@user-xr4vl2rd4w До супермаркетів був один продавець , а не десяток кассирів.З приводу лікарів, я тільки за, робот не залишить тампони або інструмент в тілі людини після операціі ,як це зі мною було. Якщо дивитись на заміну копірайтерів - то я не вважаю це за профессію. Бага хто каже що дизайнерів і художників вже замінив. Навіщо таких слухати якщо можна просто апворк чекнути і вуалля ,ніхто нікого не замінив там вони потрібні не менше як і раніше. Да і спробуйте продати картинку створену ІІ , їх не один сайт не купить. А відповідь проста - плагіатом пахне. Це означае більше що ІІ це маркетингова назва більше, а не інтелект. Все що вона робить це велика і гарна робота лінгвістів зібрана в одну программу, але ця программа не думае, як кажуть інші.

[@mishavakula2399]

Добрий день, Євген. Скажіть ,будь ласка, скільки би на вашу думку коштував такий лендінг?

[@FreelancerLifeStyle]

Від 30 до 100$

[@user-vb1vj9mo5b]

Подскажите почему стили для экрана 321 применяются для всех экранов? Т. Е к примеру я хочу сделать чтоб при экране 321 был синий фон на картинке,, но когда я увеличиваю размер экрана это фон применяться и на 480 и на 768. Как можно это исправить?

[@LenaFelica_songwriter]

Спасибище!! а как кнопку Get started убрать в бургер, чтобы она вместе с меню выпадала при нажатии на бургер, прямо под ним?🙂

[@user-et1xj4kd6o]

у блоці testimonials зробив справжій рейтинг, щоб можно було виставляти кількість зірочок, але коли всьому блоку item ставлю flex-direction-column рейтинг ломається. Ніяк не можу це виправити(

[@valentynbilan]

Як завжди на висоті! :)

[@denveriogrizzly4722]

Привіт, дякую за відео! Є питання... Коли ти створюєш меню бургер, чому ти малюєш 3 лінії а не просто вставляєш як png картинку? Це пов'язано з бистро дією сайту? І ще хотів просто поділитись, я вже пробую верстати якісь прості макети для початку, і я зрозумів, що саме складне у верстці це мабуть адаптив.

[@FreelancerLifeStyle]

Це пов'язано з анімаціями

[@unknown-jd6xo]

+

[@maxlangrise]

архів з версткою тільки для патронів?

[@dovuret2191]

(1:37:05) Я навіть на них уваги не звертаю, ви навпаки радуйтесь!!! Любі коментарі погані, чи хороші продвигають ваш стрім в рекомендації ютубу

[@user-uv7jm9hl1i]

блин нифига себе у тебя задний фон какой, ты прям как канадский дровосек получается

[@AlexKozack]

Зробив би хто хороше навчальне відео про фігму. Як працювати, що дизайнеру, що верстальнику

[@madFox_by]

Никакого русского языка)) Женя, ты молодец! Улыбнуло

[@user-tz2gx7ow7p]

2:00:02 метка где остановился, в 5 утра.

[@prost_3657]

в чому сенс в першому блоці замісь слова intro всюди в класах фігурує main. Десь я чув що назви класів повинні бути логічними) на цьому я завис....

[@prost_3657]

навіщо по 2 css властивості записуєте? наприклад header__card card-header. Ніяк не можу в дюжинні цих селекторів розібратись. навіщо їх так багато аааа поясніть. після години уроку я вже повністю загубився в css файлі хоча то вже 3 макет і в минулому таких проблем не було

[@MrSstar12345]

методологія БЕМ

[@dovuret2191]

Звісно на UPWORK не 1200грн на день за такий лендос)

[@user-nn9qy1yh3s]

не могу загрузить макет

[@walterwhite4407]

Андриканич набирає код як "демон_верстки"

[@MrSstar12345]

хто хоче на казахському, включайте субтитри ))

[@SuperRAilya]

(* 2 columns 50% g32 *.images-main { display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column;) не подходит тк сетка не нужна прямая * column item_1 item_2 f01 50% / column item_3 item_4 f01 50% * column df fdc g32 * &_1 { border-radius: 50% / 29%; &_2 { border-radius: 50% 50% 0 50%; 2:43:45 why (комментарий для себя)

[@96Lackb]

Дивився.. дивився ... і зрозумів який цей чоловік зазнавшийся в собі , після того як він начав обсирати людей ( тупі , барани ) ті кто в ІТ компаніях отримують копійкі - а він бог верстки заробляє мілліони ... трохи людина зазанался в собі ... якщо ви майстер свого діла то не потрібно людей які вас дивляться , вчаться у вас - опускати нижче плінтуса - тим паче які працюють у ІТ компаніях .... КОНТЕНТ СУПЕР!! ЗА МАТЕРІЛ ДЯКУЮ!!!... але дуже не гарно ви розмовляєте .. може зірочку спіймали ... не знаю

[@Gulom11]

Привет, я из Ташкента и всегда любил смотреть ваши видеоуроки, но после того как вы прекратили вести на русском, я тоже, к сожалению, прекратил смотреть, так как украинского я не понимаю(((

[@erikgorin3347]

хороший повод выучить новый язык)

[@MrForgottename]

@@erikgorin3347 лучше английский выучи и выбора в ютубе станет больше 😉

[@FreelancerLifeStyle]

По іншому не буде, успіхів

[@Gulom11]

@@FreelancerLifeStyle ок

[@MrSstar12345]

включайте субтитри