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