Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
HTML-код
- Опубликовано: 2 май 2024
- Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную 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
🤟 Живи, а работай в свободное время! ©
Больше спасибо ВСЁ понравилось, обязательно пересмотрю все ваши стримы. Это супер мастер класс по верстке, с вами верстать интереснее. За скорость еще один лайк.👍
Благодарю вас за этот мастер-класс и за то что оставили его на канале. Вы мега-супер учитель. Столько нужной информации поняла и узнала.
Пожалуйста не удаляйте свой канал и ваши видео из ютуб. Дайте нам шанс учится. Спасибо вам огромное, вы просто человек будущего (делаете такую просветительскую работу, что бы люди становились свободнее и образованнее)! Это самый лучший канал на ютуб! Большой вам поклон!
Сколько полезной информации да ещё и в свободном доступе! Спасибо вам большое!!!❤️
Евгений, благодарю тебя! Очень полезно и интересно! Как всегда заряжаешь своей мощным настроем и энергетикой! Смотреть за твоим ходом мысли бесценно! Обожаю тебя)
Огромное спасибо за уроки! с тобой этот мир лучше!
чтобы работать с такими скоростью и качеством выполнения естественно нужно иметь опыт (например, скорость коддинга да и в принципе "интуицую верстальщика"), но для меня тут отлично показаны принципы работы, логика, подходы, фишечки. Появляется чувство, что можно этому спокойно научиться. Спасибо, что зарядил, Жень. каждое видео-немного мотивейт
Женя привет! спасибо тебе огромное за твои стримы и обучающие видео! стрим очень классный, как и все то что делаешь! ещё раз огромнейшее спасибо за твои труды!!!!
Я только только начала погружаться в сферу IT, до этого была маркетологом, изучаю сейчас HTML, до CSS еще не дошла, но мне таааааак интересно смотреть верстку сайта в прямом эфире, вы даже не представляете)
Стараюсь учиться каждый день по 6 часов, пока мозг не начнет взрываться :D
Но я прямо кайфую от процесса изучения верстки сайта)
Спасибо большое за такие познавательные видео! Особенно с подробными разборами, это прям очень радует и таких видео не особо много на ютубе, БЛАГОДАРЮ ВАС!))
Огроменнейшее спасибо за то что ты оставил это видел 🙏❤️
Половину стрима лахматили бабушку с бургер меню... Стрим реально крутой был!
Как всегда невероятно полезно и познавательно. Спасибо, Жека!
Спасибо Вам большое за проделанную работу. Вы прекрасный учитель!
Спасибо тебе Женя за такие мастер классы, я просто поражаюсь тем как ты мастерски находишь выход из любой ситуайии, респект. Твоё умение так ловко и быстро разбиратсяв коде при этом не теряться в сотнях строк кода, восхищает,.Когда я смотрю твои стримы у меня аж глаза разбегается, а мозг отказывается воспринимать такую быстроменящую информацию. Лично я к сожелению пока не могу всё делать быстро и ловко как ты, но я буду старатся, Удачи тебе, и делай побольше таких стримов, но старайся объяснять больше, объясняй каждый сделанный твой шаг, так нам новичкам будет легче понять ход твоих мыслей, и будем легче воспринмиать информацию. Ещё раз большое спасибо
Программирование и верстка похожа на конструктор, чем больше занимаешься - тем эффективнее результат, щас ты боишься теряться в сотнях строк кода, а потом попадаешь на проэкт где таких строк десятки/сотни тысяч и там уже не до страха, глаза бояться руки делают(:
@@mzx6531 Золотые слова, буду им следовать)
А ты уже получал проекты?
@@Ayt0_on Получал, правда делал их со своим учителем грубо говоря, ибо проэкт был своеобразный, неофициальный, на своем опыте убедился, что заказчики это такие особы которые сейчас хотят одно а после десятка присланных правок получаеться вообще не то, что хотели изначально
@@mzx6531 спасибо, буду иметь в виду
@@Ayt0_on 99% придирок были к фронтенду, а учитывая что Евгений воспитывает тут будущих фронтедеров, то да, надо иметь в виду(:
Было очень интересно, столько нюансов, столько классных пояснений, очень довольна стримом 👍
Смотрел в записи, очень понравилось, спасибо за знания и позитив!
Ваши видео просто НЕОЦЕНИМАЯ помощь для изучающих верстку. Спасибо огромное!!!!!
Спасибо за стрим! Очень круто и поучительно!
Жека, БОЛЬШОЕ тебе спасибо за то что ты делаешь !!! Стрим очень полезный в том что пройденный материал применяется на практике конкретно что где и почему применять а так же хорошо закрепляется пройденное. Объясняешь ты классно и понятно очень рад что нашел твой канал. 👍👍👍
я даже не знаю что тут комментировать.... отличный мастер класс....замечательный канал...замечательный учитель......каждое новое видео просто праздник...спасибо от души!!!желаю успехов и процветания!!!
Для новичков самое то! А что если сделать серию обучающих версток по нарастающей? К примеру несколько видео (5-10), в которых сложность макета и применяемые технологии в верстке, будут по не многу увеличиваться. "От мала до велика " так сказать. Структурировать видео создав отдельный плейлист и показывать новичкам от чего к чему нужно двигаться. Будет видна четкая "лестница" прогресса. Как идея?
супер идея, главное что бы это увидел Жека
не совсем для новичка. без знания шорткатов\еммета и вообще быстрого набивания кода повторить нереально.
Поддерживаю. Видео отличное, мне как начинающему очень зашло! Небольшие усложнения тоже отлично зайдут! Евгению большой респект за работу!
идея Великолепна , но чел итак делает столько контента , преклоняюсь. 10 конечно много (не для нас, для нашего сенсея) но даже 5 это было бы круто!
супер идея
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
Євген рівень Твоїх уроків - це вищий пілотаж !
Дякую за працю і приділений час !
Cпасибо Жека!!! Тебя очень приятно смотреть! Позитивный, жизнерадостный и креативный человек! Успехов тебе в твоём деле ;)
Как всегда быстро, четко и по делу!!! Лайк!!!
Пересмотрелa в you tube много видео nо вёрстке и только на этом канале объясняется просто и ГЛАВНОЕ подробно по каждому тегу и свойству, когда и куда применять. Женя, спасибо, ты лучший👍👍👍
49:20 => для Windows удобно переносить тест из Figma: "ctrl + С" все что нужно, а в VSCode: " Win + V" и выбираешь в обратном порядке (из буфера обмена)
Большое спасибо за проделанную работу. Это моя первая верстка, все доходчиво и понятно! 👍
Вёрстка бургера и вся это логика с открытием/закрытием пукнтов меню в хедере просто взорвала мозг. Спасибо за мастер-класс. Очень полезно!
Спасибо. Очень поучительно. Есть что для себя выделить и применять на практике)
Жека, привіт! Дякую за супер майстер-клас! Вчусь на курсах менше місяця і, по ходу пошуку контенту для додаткового розвитку, потрапив на твій канал. Дуже вдячний за твою титанічну працю! Багато відосів вже передивився і багато - попереду)
Круто! На этапе верстки "бургера" пришлось даже взять листочек и написать все на бумаге, чтоб понять до конца что к чему)
Тоже уже все записала, но хоть тресни не могу так нарисовать бургер🙈
второй прием по размещению квадратиков просто офигенннный! спасибо, мастер!
Как всегда очень полезно, спасибо!
Чудовий контент, дуже вдячний за Вашу роботу !
Бажаю Вам гарного розвитку каналу!
Спасибо за урок! Как всегда 🔥🔥🔥🔥
Невероятно крутой стрим!!! Вы сходу решаете интересные задачи к которым не готовились ))) спасибо за мега полезную инфу.
Мне нравится легкий и простой способ, который все объясняет, идеально подходит для новичков.
большое спасибо,ведь для начинающих особенно важно разбираться в таких моментах,вы всё объясняете по существу
Подивився з великим задоволенням!! Жека, дуже дякую! Після 2-х конспектів по Вашим js почав вмирати, але це відео повертає до життя :) Особливо, коли ти розумієш, що рік тому ти пройшов ці ж уроки на цьому ж каналі і все розумієш, що пише Жека! Окрема подяка за рішення по декору!! Тепер буду знати, як це робиться. Та й Бургер на чистом CSS - дуже класно! Дякую!! Пішов практикувати)))
Спасибо огромное!!! После начала войны у меня пришло время "вернуться в семью". Решила с этого видео. Все понятно, все доступно.
я вот учусь, а что то новое узнаю у тебя)) спасибо выручаешь всегда, настанет время и я заданачу за все твои труды!
Всё достаточно чётко, бери и делай, как говорится! Однозначно, очень полезно! 👍Но моя проблема в том, что я никак не могу себя заставить! 🤦♂️Благодарю за информацию и труд!
не проблема, миллион других людей заставят себя и станут успешными разрабами.
@@kostyafrompiter каждому своё!)
Спасибо за твой вклад в нас! Очень атмосферно и приятно на старте зарядил!) Крепкий лайк!
Дякую. Дуже корисно. Проходжу курс, здала завдання, дали посилання на Ваш майстер-класс, йду переробляти свого "динозавра".
Жека, стрим ТОП, хотим еще)))
Жека, велике вам дякую за ваші уроки, багато нового дізналася з них, і з цього стріму включно) За приємну атмосферу та ваш позитивний настрій поставила би окремий лайк, якби була змога)
Спасибо огромное, Женек, за твой труд и неоценимый вклад в будущих верстальщиков!!! 🤜🤛 🤝👍
Евгеній, ДЯКУЮ ВАМ!!! Ви просто СУПЕР!!! Ви, Ваш контент та Ваша єнергетика просто ФАНТАСТИЧНІ!!!
Усе чітко й зрозуміло, дякую за запис!)
Спасибо за видео! Очень классные приемы показаны
Майстер-клас дуже сподобався, є чого повчитись. Мені як новачку, точно є чого. Цікаві рішення застосовувались, можна передивитись не один раз. Що і робив. Дуже дякую за такий якісний безкоштовний контент.
дякую!)) девилась декілька днів, але цього було варте.
Благодарю вас ваш труд!!!
Очень круто! Спасибо!
Охрененное видео, все наглядно понятно. Спасибо очень полезно.
Спасибо огромное за этот труд. Очень приятно видеть Ваш позитив во время работы, это мотивирует.
Евгений, ты крут! Спасибо!
спасибо вам за этот прекрасный урок!!
Отлично. Уже 5 раз стартую в IT. Я надеюсь, что ты совсем не такой)
Спасибо большое за твои труды. Осилил за 3 подхода) Мега полезный контент без воды! Видно, что делаешь с душой, а не ради наживы. Очень рад, что тебя нашел)
можно узнать, что значит осилил за 3 подхода? вы просто повторяли по видео? или сами верстали? просто сам учусь и не подглядывая в видео не могу начать верстать..
@@yevhenfodorov121 повторял по видео. Пока ещё сам тоже не готов верстать.
Евгений, большое спасибо вам за этот урок! Многому научилась!
класс класс супер класс. от начала до конца!
Женя, дуже дякую за стрім! Я тільки почала вчитися по Вашим урокам, пройшла ще тільки половину. Звісно, багато чого не вловлюю "на льоту", але весь стрім паралельно з Вами повторювала і в мене вийшло! ВЕЛИЧЕЗНЕ ДЯКУЮ
спасибо тебе огромное за твои стримы и обучающие видео! стрим очень классный, как и все то что делаешь!
Така он-лайн верстка потрібна як практика до теоретичних курсів. Дуже допомогає слідкувати за ходом і порядком мислення розробника. Плюс дуже корисні фічіі при розробці. Дякую!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Огромное спасибо за это видио , очень хорошая пркатика для меня , особенно тот момент где ты верстал декор по типу этих красных квадратиков. Реально лучший опыт. По больше бв такиз стримов , я буду пересматривать с удовольствием
Огромное спасибо за качественный подход к обучению🙏🏿
Большой и толстый палец вверх, все очень круто, спасибо большое тебе Женя)))
Мастер-класс отличный) особенно про классы спасибо. очень удобно.
и это, даже интересно, кому-то удалось повторить верстку?)
Доброго дня вам❗️ Шикарні уроки 👌👍❗Самостійно навчаюсь на вашому сайті❗Круто❗
Жека, приветствую! СПАСИБО за стрим и запись от новичка!! Очень полезный и качественный контент! Превосходный уровень! С наилучшими пожеланиями всех-всех благ!
Привет!! Очень крутой стрим, хочется побольше) постепенно усложняя
я только только послушала вступление и у меня так настроение поднялось что захотелось написать коммент в поддержку аххах
вы меня вдохновляете!!!!
На курсах сейчас как раз делаю проект по вёрстке макета, сначала начал сам, вроде что-то вышло, но коряво, пришёл сюда и прям кайфую от стройности кода, все как симфония.
Иду в свой VS, а мой код - обнять и плакать😅
Но я очень благодарен за возможность учиться и настоящего мастера своего дела, получается весело и нескучно. Заряжает мотивацией.
Пусть это у меня займёт больше времени, но терпение и труд, все должно получиться.
Огромное спасибо!
Видео пушка!
Спасибо огромное) супер полезные фишки!! Ты крут👍
Для меня очень познавательно, я смотрел на секции и думал сделаю так, но ты мне показал совсем другой подход. 🦾
спасибо за работу! здоровья тебе)
Дякую за відео, дуже класно все поясненюєте, допомогли стратувати в верстці
Была проблема с бургером он просто не высвечивался пока я не указал в icon-menu ширину. Но и на этом проблемы не закончились, помните Женя добавлял , так вот я этот момент упустил у меня этот бургер не высвечивался если в meta указать значение ниже 980px. Так вот прикол в том по умолчанию ширина страницы на мобильных устройствах равняется 980px. Чтобы ширина страницы равнялась ширине экрана нужно добавить этот тег и все заработает. Это для тех у кого будут такие же проблемы как у меня, если еще что-то будет, отредачу коммент. Пока только с эти м столкнулся. Жене отдельное спасибо за такой качественный контент, помогает разобраться что да как делается. Респект!
Вот тоже меню-бургер не появляется вообще. Сейчас попробую выполнить то, о чем вы говорите.
ничего не помогло. Мета-тег был на месте. Добавила ширину в icon-menu, но бургера как не было, так и нет.... не знаю, в чем дело. Проверила и код и сcss, все, как у Жени
При этом само место под бургер - зарезервировано. При адаптиве появляется блок, кнопка download сдвигается влево
Благодарю вас за такой материал, супер верстка!
Спасибо за контент.
Есть разница как зарабатывать деньги и да они пахнут, но большинство готовы делать что угодно за деньги, не задумываясь пользу или вред они принесут своими действиями. Благодаря таким людям как Женя, нас будет намного больше )))
Спасибо огромное. Узнала очень много нового 🔥🔥🔥
Ження, вкрай вдячний за черговий топовий майстер-класс! Надзвичайно корисний контент,не зупиняйся!
Спасибо, Женя. Обучалка мега суперская
Как всегда супер! Один из лучших каналов по данной тематике
Привет, хотел бы поблагодарить за отличный урок по верстке и за дополнительную мотивацию заниматься ВебДевом, посмотрел несколько твоих видео по ошибкам при обучение ВебДевом и нашел кучу ошибок моего первого преподавателя по фронтенду, поставил себе цель стать высококлассным специалистом и набрался больше терпения при обучении, всех благ тебе и твоей семье! )
Спасибо за видео! узнал что то новое)
Спасибо за урок, пробовал верстать параллельно стриму, но хоть и простой макет, а за тобой не успеваю.
Мега круто и мега полезно. Спасибо.
Женя, ты лучший! Мирного тебе и твоему народу неба над головой’
Спасибо большое за великодушие и щедрость. Смотрю вас уже давно, вырос на ваших уроках. Жаль, что из-за событий в мире контент теперь только на недоступном мне языке. Желаю вам добра!
Афигеть
Очень круто
Посмотрел все видео залпом
спасибо за мастеркласс!
Уххх) сверстал "буквель в буквель") нетривиальная задача для начинающего даже со знанием шоркатов\еССтрактора\оборачивания кусков кода и прочего. Даже пару сниппетов пришлось накатать для вывода пустых линеек маржинов\паддингов) Сам так маржины\паддинги развернуто не фигачу, потому не нужны были.. И очень помогло, что два монитора. На одном смотрю ролик, на втором шпарю как угорелый по кнопкам...
Из полезного точно:
1. Повторюсь, но с классами CSS прям отличная штука;
2. Не додумался бы сам рисовать напрямую декор, уже даже все вырезал из макета;
3. Создание готовых шаблонов кода для использования в другом месте с модификаторами (те же функции по сути).
4. Снес нафиг VS Code. Слишком много было накидано всякой фигни в плагинах по незнанию и это мешало нормально работать (что-то с чем-то конфликтовало\неправильно было настроено и тд...). Поставил с чистого листа, настроил по инструкции Евгения.
Спасибо за урок Евгений)
Сенсей как всегда бесподобен! Огромное спасибо за мастер-класс!
Боженька науки , Евгений , Вы лучший )