Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков!
Полезные ссылки:
👉 Макет (открытый доступ): / 61368263
👉 Результат верстки: / rezultat-verstki-61798286
👉 Бесплатный курс по верстке: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно учиться: • Как правильно учиться ...
👉 План развития фронтенд разработчика (+КАРТА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
За тайм коды спасибо Сергей Кудаев!
00:00:00 - Задорное вступление
00:02:54 - А вот и наш макет! Знакомство с макетом
00:05:54 - Файлы проекта
00:09:21 - Плагины проекта
00:11:42 - С чего начинается верстка? Цена работы
00:17:11 - Анализ макета. Плагин для Figma Font Fascia
00:21:15 - Поиск и подключение шрифтов. Плагин для Visual Studio Google Fonts
00:29:03 - Построение сетки. Ограничивающий контейнер
00:36:48 - Применение селектора-атрибута
00:39:43 - Анализ блока шапки
00:44:00 - Разметка макета и начало верстки шапки
00:52:34 - Верстка логотипа, меню, кнопки "Download"
01:11:52 - Настройка адаптивности для шапки
01:23:52 - Верстка бургера
01:30:30 - Настройка адаптивности для логотипа
01:37:14 - Открытие-закрытие меню средствами CSS3
01:38:30 - Применение псевдокласса Target, доработка бургера
01:51:00 - Верстка блока Main
02:10:54 - Использование конструкции :not(:last-child)
02:15:28 - Работа с декором блока Main
02:26:46 - Верстка блока Stay-safe
02:32:37 - Магия БЭМ в действии. Повторное использование кода
02:42:10 - Работа с декором блока Stay-safe
02:47:00 - Настройка адаптивности для блока Stay-safe
02:53:58 - Верстка блока Expert
03:01:06 - Альтернативный прием размещения декора в блоке
03:10:38 - Верста нижней части блока Expert
03:11:20 - И снова БЭМ в работе. Копирование текстового блока
03:14:45 - Вставка видео. Тег Iframe. Адаптивное видео
03:18:45 - Настройка адаптивности для блока Expert
03:24:16 - Верстка блока Healthcare
03:40:32 - Верстка декора с использованием псевдоэлементов :after и :before
03:48:00 - Верстка футера
03:50:20 - Текст в карточках футера
03:51:00 - Настройка адаптивности для блока Footer
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@user-lj6ru5qb9e]

Больше спасибо ВСЁ понравилось, обязательно пересмотрю все ваши стримы. Это супер мастер класс по верстке, с вами верстать интереснее. За скорость еще один лайк.👍

[@hladyshevaanastasiia6214]

Сколько полезной информации да ещё и в свободном доступе! Спасибо вам большое!!!❤️

[@rozelia_777]

Я только только начала погружаться в сферу IT, до этого была маркетологом, изучаю сейчас HTML, до CSS еще не дошла, но мне таааааак интересно смотреть верстку сайта в прямом эфире, вы даже не представляете) Стараюсь учиться каждый день по 6 часов, пока мозг не начнет взрываться :D Но я прямо кайфую от процесса изучения верстки сайта) Спасибо большое за такие познавательные видео! Особенно с подробными разборами, это прям очень радует и таких видео не особо много на ютубе, БЛАГОДАРЮ ВАС!))

[@nick.naista]

Половину стрима лахматили бабушку с бургер меню... Стрим реально крутой был!

[@user-zz3ox6nf9y]

Благодарю вас за этот мастер-класс и за то что оставили его на канале. Вы мега-супер учитель. Столько нужной информации поняла и узнала. Пожалуйста не удаляйте свой канал и ваши видео из ютуб. Дайте нам шанс учится. Спасибо вам огромное, вы просто человек будущего (делаете такую просветительскую работу, что бы люди становились свободнее и образованнее)! Это самый лучший канал на ютуб! Большой вам поклон!

[@user-et8ol7fz5l]

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

[@denyspugachov2771]

49:20 => для Windows удобно переносить тест из Figma: "ctrl + С" все что нужно, а в VSCode: " Win + V" и выбираешь в обратном порядке (из буфера обмена)

[@grand6511]

Євген рівень Твоїх уроків - це вищий пілотаж ! Дякую за працю і приділений час !

[@user-wh1tt7cd1b]

Вёрстка бургера и вся это логика с открытием/закрытием пукнтов меню в хедере просто взорвала мозг. Спасибо за мастер-класс. Очень полезно!

[@Ayt0_on]

Спасибо тебе Женя за такие мастер классы, я просто поражаюсь тем как ты мастерски находишь выход из любой ситуайии, респект. Твоё умение так ловко и быстро разбиратсяв коде при этом не теряться в сотнях строк кода, восхищает,.Когда я смотрю твои стримы у меня аж глаза разбегается, а мозг отказывается воспринимать такую быстроменящую информацию. Лично я к сожелению пока не могу всё делать быстро и ловко как ты, но я буду старатся, Удачи тебе, и делай побольше таких стримов, но старайся объяснять больше, объясняй каждый сделанный твой шаг, так нам новичкам будет легче понять ход твоих мыслей, и будем легче воспринмиать информацию. Ещё раз большое спасибо

[@mzx6531]

Программирование и верстка похожа на конструктор, чем больше занимаешься - тем эффективнее результат, щас ты боишься теряться в сотнях строк кода, а потом попадаешь на проэкт где таких строк десятки/сотни тысяч и там уже не до страха, глаза бояться руки делают(:

[@Ayt0_on]

@@mzx6531 Золотые слова, буду им следовать) А ты уже получал проекты?

[@mzx6531]

@@Ayt0_on Получал, правда делал их со своим учителем грубо говоря, ибо проэкт был своеобразный, неофициальный, на своем опыте убедился, что заказчики это такие особы которые сейчас хотят одно а после десятка присланных правок получаеться вообще не то, что хотели изначально

[@Ayt0_on]

@@mzx6531 спасибо, буду иметь в виду

[@mzx6531]

@@Ayt0_on 99% придирок были к фронтенду, а учитывая что Евгений воспитывает тут будущих фронтедеров, то да, надо иметь в виду(:

[@user-sw6pm9or2s]

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

[@martinyis6453]

00:29:00 Building the construction of the website 00:49:00 Making header 00:57:00 Making manu and button 01:11:06 Positioning of header 2:04:00 Aligning content 2:07:00 Working with button link 2:16:00 Doing decor in the container 2:20:00 Responsive decor 2:24:00 Responsive’ 2:36:00 Start of layout of block with many decors 2:40:00 Structure a block with decor 2:42:00 Layout of actuals decor 2:50:00 Responsive second block // Third block with 2 floors 2:56:00 Structure of block 3:00:00 How to make width for block with decor 3:05:00 Structure of block with numbers 3:14:00 How to add video to website 3:19:00 Responsive block with video 3:21:30 Responsive bar with text elements // Last block layout 3:39:00 If we don't want to use gap 3:40:00 Doing decor as pseudoelements 3:50:00 How to fix when we have a lot of text in items

[@vikghjbj3137]

второй прием по размещению квадратиков просто офигенннный! спасибо, мастер!

[@user-tj4hk9xt3c]

Было очень интересно, столько нюансов, столько классных пояснений, очень довольна стримом 👍

[@Ruslan-ni9mh]

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

[@Chefjeanpierreinhindi]

Огроменнейшее спасибо за то что ты оставил это видел 🙏❤️

[@user-vm9lf9gi5h]

Ваши видео просто НЕОЦЕНИМАЯ помощь для изучающих верстку. Спасибо огромное!!!!!

[@user-bn9pc5ot8c]

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

[@MrKfnmpa]

Как всегда невероятно полезно и познавательно. Спасибо, Жека!

[@lxlwut]

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

[@big_aim2006]

Как всегда быстро, четко и по делу!!! Лайк!!!

[@sergunvictor]

Евгеній, ДЯКУЮ ВАМ!!! Ви просто СУПЕР!!! Ви, Ваш контент та Ваша єнергетика просто ФАНТАСТИЧНІ!!!

[@gogo-jr3im]

Огромное спасибо за уроки! с тобой этот мир лучше!

[@Alekseev_Oleg]

Всё достаточно чётко, бери и делай, как говорится! Однозначно, очень полезно! 👍Но моя проблема в том, что я никак не могу себя заставить! 🤦‍♂️Благодарю за информацию и труд!

[@kostyafrompiter]

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

[@Alekseev_Oleg]

@@kostyafrompiter каждому своё!)

[@panda-str]

Чудовий контент, дуже вдячний за Вашу роботу ! Бажаю Вам гарного розвитку каналу!

[@Symphony_MMA]

Cпасибо Жека!!! Тебя очень приятно смотреть! Позитивный, жизнерадостный и креативный человек! Успехов тебе в твоём деле ;)

[@svetlanaandreeva8762]

Пересмотрелa в you tube много видео nо вёрстке и только на этом канале объясняется просто и ГЛАВНОЕ подробно по каждому тегу и свойству, когда и куда применять. Женя, спасибо, ты лучший👍👍👍

[@BassHunterX1]

Для новичков самое то! А что если сделать серию обучающих версток по нарастающей? К примеру несколько видео (5-10), в которых сложность макета и применяемые технологии в верстке, будут по не многу увеличиваться. "От мала до велика " так сказать. Структурировать видео создав отдельный плейлист и показывать новичкам от чего к чему нужно двигаться. Будет видна четкая "лестница" прогресса. Как идея?

[@Ayt0_on]

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

[@PaulGabow]

не совсем для новичка. без знания шорткатов\еммета и вообще быстрого набивания кода повторить нереально.

[@user-wm6lx6xc6p]

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

[@alexmarch]

идея Великолепна , но чел итак делает столько контента , преклоняюсь. 10 конечно много (не для нас, для нашего сенсея) но даже 5 это было бы круто!

[@kamranlatipov999]

супер идея

[@oleksandrpavlov6290]

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

[@IvannaIv-cy6sj]

Дякую. Дуже корисно. Проходжу курс, здала завдання, дали посилання на Ваш майстер-класс, йду переробляти свого "динозавра".

[@ilya78950]

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

[@nyusha-hryusha]

Большое спасибо за проделанную работу. Это моя первая верстка, все доходчиво и понятно! 👍

[@NoakSV]

Смотрел в записи, очень понравилось, спасибо за знания и позитив!

[@andreyzatsepin_ua]

Подивився з великим задоволенням!! Жека, дуже дякую! Після 2-х конспектів по Вашим js почав вмирати, але це відео повертає до життя :) Особливо, коли ти розумієш, що рік тому ти пройшов ці ж уроки на цьому ж каналі і все розумієш, що пише Жека! Окрема подяка за рішення по декору!! Тепер буду знати, як це робиться. Та й Бургер на чистом CSS - дуже класно! Дякую!! Пішов практикувати)))

[@romav3398]

Жека, БОЛЬШОЕ тебе спасибо за то что ты делаешь !!! Стрим очень полезный в том что пройденный материал применяется на практике конкретно что где и почему применять а так же хорошо закрепляется пройденное. Объясняешь ты классно и понятно очень рад что нашел твой канал. 👍👍👍

[@user-th2hj8jn2u]

[@lizgarcia7455]

Мне нравится легкий и простой способ, который все объясняет, идеально подходит для новичков.

[@user-en1ob2dz8l]

Доброго дня вам❗️ Шикарні уроки 👌👍❗Самостійно навчаюсь на вашому сайті❗Круто❗

[@mattewdared1632]

Майстер-клас дуже сподобався, є чого повчитись. Мені як новачку, точно є чого. Цікаві рішення застосовувались, можна передивитись не один раз. Що і робив. Дуже дякую за такий якісний безкоштовний контент.

[@user-oe1kr2tq6x]

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

[@daryaemelyanova1785]

Круто! На этапе верстки "бургера" пришлось даже взять листочек и написать все на бумаге, чтоб понять до конца что к чему)

[@elif.3258]

Тоже уже все записала, но хоть тресни не могу так нарисовать бургер🙈

[@user-ih1lm8lg4g]

Спасибо за твой вклад в нас! Очень атмосферно и приятно на старте зарядил!) Крепкий лайк!

[@korvet348]

Отлично. Уже 5 раз стартую в IT. Я надеюсь, что ты совсем не такой)

[@user-oz6rg1lq6z]

Усе чітко й зрозуміло, дякую за запис!)

[@user-cw7yo6zl9e]

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

[@alexvetrov8029]

Жека, стрим ТОП, хотим еще)))

[@margaretdevereaux8254]

Спасибо огромное, Женек, за твой труд и неоценимый вклад в будущих верстальщиков!!! 🤜🤛 🤝👍

[@user-mykyta_vyshniakov]

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

[@user-td9rr1ln6n]

Спасибо огромное!!! После начала войны у меня пришло время "вернуться в семью". Решила с этого видео. Все понятно, все доступно.

[@user-ir6xu6gb1l]

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

[@antontoha35]

Большой и толстый палец вверх, все очень круто, спасибо большое тебе Женя)))

[@anton1775]

Спасибо. Очень поучительно. Есть что для себя выделить и применять на практике)

[@user-th4gy4sz8j]

Весёлый ты человек Женя 😂, молодец😂

[@olexsandrapavlenko1166]

дякую!)) девилась декілька днів, але цього було варте.

[@user-gv3gc5qt3i]

Спасибо за стрим! Очень круто и поучительно!

[@user-gy1ke6tq5f]

я только только послушала вступление и у меня так настроение поднялось что захотелось написать коммент в поддержку аххах вы меня вдохновляете!!!!

[@user-br4fn9ls5i]

Спасибо Женя, Благодаря тебе я ушла с завода и сейчас сижу дома и работаю удалено!🥰

[@olenayevtushok2014]

Женя, дуже дякую за стрім! Я тільки почала вчитися по Вашим урокам, пройшла ще тільки половину. Звісно, багато чого не вловлюю "на льоту", але весь стрім паралельно з Вами повторювала і в мене вийшло! ВЕЛИЧЕЗНЕ ДЯКУЮ

[@user-uk7vq2ou9g]

я вот учусь, а что то новое узнаю у тебя)) спасибо выручаешь всегда, настанет время и я заданачу за все твои труды!

[@PaulGabow]

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

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье

[@user-yn5xq1iu2y]

Спасибо за урок! Как всегда 🔥🔥🔥🔥

[@silenciomar7325]

Евгений, большое спасибо вам за этот урок! Многому научилась!

[@tarasrachuk8097]

Ження, вкрай вдячний за черговий топовий майстер-класс! Надзвичайно корисний контент,не зупиняйся!

[@user-ks4zk1pt7g]

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

[@user-wg1rk2zb3u]

это фантастическое видео, продолжайте в том же духе

[@user-dz2qu8ug5s]

Как всегда супер! Один из лучших каналов по данной тематике

[@asmrbutterfly9984]

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

[@AlexSkaeg]

Охрененное видео, все наглядно понятно. Спасибо очень полезно.

[@kuz9476]

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

[@yevhenfodorov121]

можно узнать, что значит осилил за 3 подхода? вы просто повторяли по видео? или сами верстали? просто сам учусь и не подглядывая в видео не могу начать верстать..

[@kuz9476]

@@yevhenfodorov121 повторял по видео. Пока ещё сам тоже не готов верстать.

[@PaulGabow]

Уххх) сверстал "буквель в буквель") нетривиальная задача для начинающего даже со знанием шоркатов\еССтрактора\оборачивания кусков кода и прочего. Даже пару сниппетов пришлось накатать для вывода пустых линеек маржинов\паддингов) Сам так маржины\паддинги развернуто не фигачу, потому не нужны были.. И очень помогло, что два монитора. На одном смотрю ролик, на втором шпарю как угорелый по кнопкам... Из полезного точно: 1. Повторюсь, но с классами CSS прям отличная штука; 2. Не додумался бы сам рисовать напрямую декор, уже даже все вырезал из макета; 3. Создание готовых шаблонов кода для использования в другом месте с модификаторами (те же функции по сути). 4. Снес нафиг VS Code. Слишком много было накидано всякой фигни в плагинах по незнанию и это мешало нормально работать (что-то с чем-то конфликтовало\неправильно было настроено и тд...). Поставил с чистого листа, настроил по инструкции Евгения. Спасибо за урок Евгений)

[@romanrrv]

Как всегда очень полезно, спасибо!

[@katykartasova7889]

Супер!!! Кажется всё просто, пока сама не начинаю верстать. =)

[@elenadymona1473]

Спасибо за видео! Очень классные приемы показаны

[@omgpewpew]

Спасибо огромное за этот труд. Очень приятно видеть Ваш позитив во время работы, это мотивирует.

[@user-em3yi6zr7b]

Евгений, ты крут! Спасибо!

[@MetalDazer666]

Сенсей как всегда бесподобен! Огромное спасибо за мастер-класс!

[@sergmalin210]

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

[@container4395]

Огромное спасибо за качественный подход к обучению🙏🏿

[@user-em4lz3ex6m]

Мне понравилась идея с велозарядкой.очень актуально.

[@sweetknitt4259]

Спасибо огромное. Узнала очень много нового 🔥🔥🔥

[@user-tt3bk7dw2z]

Дякую за гарний контент)

[@user-nh9tw3ei9t]

Жека, приветствую! СПАСИБО за стрим и запись от новичка!! Очень полезный и качественный контент! Превосходный уровень! С наилучшими пожеланиями всех-всех благ!

[@kir0998]

спасибо вам за этот прекрасный урок!!

[@jamesmay5088]

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

[@user-kx9fq1hq8r]

Спасибо огромное) супер полезные фишки!! Ты крут👍

[@scaramouche6331]

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

[@alexanderbashkatov5981]

класс класс супер класс. от начала до конца!

[@pavelsedoplatov]

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

[@mihaeldyachenko9221]

Жека это первый ролик из всех где у меня получилось так же как у тебя )). Всё красиво и ясно получилось. Для новичков то что надо.

[@user-oo9ly4hj3u]

Евгений спасибо за верстку! Желаю чтобы в твоей жизни кофе всегда был горячим !!! )))

[@timuralekperov6959]

Благодарю вас ваш труд!!!

[@sanekpro2751]

Интересное видео и полезная информация. Спасибо

[@user-ru8rp4jq2l]

Дякую за класний майстер клас, тепер знаю як робити правильно декоративні елементи, Жека красава, чекатиму ще майстер класів від тебе👍

[@RohanSan-nh1ig]

Боженька науки , Евгений , Вы лучший )

[@user-tz9ed5qu3g]

спасибо за работу! здоровья тебе)

[@user-oq9de4fw8u]

Очень круто! Спасибо!

[@David_Liu93]

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

[@user-gi3tr6xx4q]

Вдячний за майстер-клас! Дізнався дуже багато нового і корисного. Однозначно лайк!

[@viva121d]

Благодарю вас за такой материал, супер верстка!

[@user-xh3hs4jk1l]

Женя, ты лучший! Мирного тебе и твоему народу неба над головой’