Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
Vložit
- čas přidán 4. 05. 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
🤟 Живи, а работай в свободное время! ©
Больше спасибо ВСЁ понравилось, обязательно пересмотрю все ваши стримы. Это супер мастер класс по верстке, с вами верстать интереснее. За скорость еще один лайк.👍
Для новичков самое то! А что если сделать серию обучающих версток по нарастающей? К примеру несколько видео (5-10), в которых сложность макета и применяемые технологии в верстке, будут по не многу увеличиваться. "От мала до велика " так сказать. Структурировать видео создав отдельный плейлист и показывать новичкам от чего к чему нужно двигаться. Будет видна четкая "лестница" прогресса. Как идея?
супер идея, главное что бы это увидел Жека
не совсем для новичка. без знания шорткатов\еммета и вообще быстрого набивания кода повторить нереально.
Поддерживаю. Видео отличное, мне как начинающему очень зашло! Небольшие усложнения тоже отлично зайдут! Евгению большой респект за работу!
идея Великолепна , но чел итак делает столько контента , преклоняюсь. 10 конечно много (не для нас, для нашего сенсея) но даже 5 это было бы круто!
супер идея
Благодарю вас за этот мастер-класс и за то что оставили его на канале. Вы мега-супер учитель. Столько нужной информации поняла и узнала.
Пожалуйста не удаляйте свой канал и ваши видео из ютуб. Дайте нам шанс учится. Спасибо вам огромное, вы просто человек будущего (делаете такую просветительскую работу, что бы люди становились свободнее и образованнее)! Это самый лучший канал на ютуб! Большой вам поклон!
Евгений, благодарю тебя! Очень полезно и интересно! Как всегда заряжаешь своей мощным настроем и энергетикой! Смотреть за твоим ходом мысли бесценно! Обожаю тебя)
Сколько полезной информации да ещё и в свободном доступе! Спасибо вам большое!!!❤️
Я только только начала погружаться в сферу IT, до этого была маркетологом, изучаю сейчас HTML, до CSS еще не дошла, но мне таааааак интересно смотреть верстку сайта в прямом эфире, вы даже не представляете)
Стараюсь учиться каждый день по 6 часов, пока мозг не начнет взрываться :D
Но я прямо кайфую от процесса изучения верстки сайта)
Спасибо большое за такие познавательные видео! Особенно с подробными разборами, это прям очень радует и таких видео не особо много на ютубе, БЛАГОДАРЮ ВАС!))
Женя привет! спасибо тебе огромное за твои стримы и обучающие видео! стрим очень классный, как и все то что делаешь! ещё раз огромнейшее спасибо за твои труды!!!!
чтобы работать с такими скоростью и качеством выполнения естественно нужно иметь опыт (например, скорость коддинга да и в принципе "интуицую верстальщика"), но для меня тут отлично показаны принципы работы, логика, подходы, фишечки. Появляется чувство, что можно этому спокойно научиться. Спасибо, что зарядил, Жень. каждое видео-немного мотивейт
Спасибо Вам большое за проделанную работу. Вы прекрасный учитель!
Ваши видео просто НЕОЦЕНИМАЯ помощь для изучающих верстку. Спасибо огромное!!!!!
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
49:20 => для Windows удобно переносить тест из Figma: "ctrl + С" все что нужно, а в VSCode: " Win + V" и выбираешь в обратном порядке (из буфера обмена)
Огромное спасибо за уроки! с тобой этот мир лучше!
я даже не знаю что тут комментировать.... отличный мастер класс....замечательный канал...замечательный учитель......каждое новое видео просто праздник...спасибо от души!!!желаю успехов и процветания!!!
Огроменнейшее спасибо за то что ты оставил это видел 🙏❤️
Пересмотрелa в you tube много видео nо вёрстке и только на этом канале объясняется просто и ГЛАВНОЕ подробно по каждому тегу и свойству, когда и куда применять. Женя, спасибо, ты лучший👍👍👍
Как всегда невероятно полезно и познавательно. Спасибо, Жека!
Cпасибо Жека!!! Тебя очень приятно смотреть! Позитивный, жизнерадостный и креативный человек! Успехов тебе в твоём деле ;)
Смотрел в записи, очень понравилось, спасибо за знания и позитив!
Большое спасибо за проделанную работу. Это моя первая верстка, все доходчиво и понятно! 👍
Жека, БОЛЬШОЕ тебе спасибо за то что ты делаешь !!! Стрим очень полезный в том что пройденный материал применяется на практике конкретно что где и почему применять а так же хорошо закрепляется пройденное. Объясняешь ты классно и понятно очень рад что нашел твой канал. 👍👍👍
Спасибо за стрим! Очень круто и поучительно!
Половину стрима лахматили бабушку с бургер меню... Стрим реально крутой был!
Євген рівень Твоїх уроків - це вищий пілотаж !
Дякую за працю і приділений час !
Было очень интересно, столько нюансов, столько классных пояснений, очень довольна стримом 👍
Как всегда быстро, четко и по делу!!! Лайк!!!
Спасибо. Очень поучительно. Есть что для себя выделить и применять на практике)
большое спасибо,ведь для начинающих особенно важно разбираться в таких моментах,вы всё объясняете по существу
Женя, дуже дякую за стрім! Я тільки почала вчитися по Вашим урокам, пройшла ще тільки половину. Звісно, багато чого не вловлюю "на льоту", але весь стрім паралельно з Вами повторювала і в мене вийшло! ВЕЛИЧЕЗНЕ ДЯКУЮ
второй прием по размещению квадратиков просто офигенннный! спасибо, мастер!
Вёрстка бургера и вся это логика с открытием/закрытием пукнтов меню в хедере просто взорвала мозг. Спасибо за мастер-класс. Очень полезно!
Евгеній, ДЯКУЮ ВАМ!!! Ви просто СУПЕР!!! Ви, Ваш контент та Ваша єнергетика просто ФАНТАСТИЧНІ!!!
Мне нравится легкий и простой способ, который все объясняет, идеально подходит для новичков.
Спасибо за твой вклад в нас! Очень атмосферно и приятно на старте зарядил!) Крепкий лайк!
Спасибо огромное за этот труд. Очень приятно видеть Ваш позитив во время работы, это мотивирует.
я вот учусь, а что то новое узнаю у тебя)) спасибо выручаешь всегда, настанет время и я заданачу за все твои труды!
Спасибо тебе Женя за такие мастер классы, я просто поражаюсь тем как ты мастерски находишь выход из любой ситуайии, респект. Твоё умение так ловко и быстро разбиратсяв коде при этом не теряться в сотнях строк кода, восхищает,.Когда я смотрю твои стримы у меня аж глаза разбегается, а мозг отказывается воспринимать такую быстроменящую информацию. Лично я к сожелению пока не могу всё делать быстро и ловко как ты, но я буду старатся, Удачи тебе, и делай побольше таких стримов, но старайся объяснять больше, объясняй каждый сделанный твой шаг, так нам новичкам будет легче понять ход твоих мыслей, и будем легче воспринмиать информацию. Ещё раз большое спасибо
Программирование и верстка похожа на конструктор, чем больше занимаешься - тем эффективнее результат, щас ты боишься теряться в сотнях строк кода, а потом попадаешь на проэкт где таких строк десятки/сотни тысяч и там уже не до страха, глаза бояться руки делают(:
@@mzx6531 Золотые слова, буду им следовать)
А ты уже получал проекты?
@@Ayt0_on Получал, правда делал их со своим учителем грубо говоря, ибо проэкт был своеобразный, неофициальный, на своем опыте убедился, что заказчики это такие особы которые сейчас хотят одно а после десятка присланных правок получаеться вообще не то, что хотели изначально
@@mzx6531 спасибо, буду иметь в виду
@@Ayt0_on 99% придирок были к фронтенду, а учитывая что Евгений воспитывает тут будущих фронтедеров, то да, надо иметь в виду(:
Спасибо за урок! Как всегда 🔥🔥🔥🔥
Невероятно крутой стрим!!! Вы сходу решаете интересные задачи к которым не готовились ))) спасибо за мега полезную инфу.
Круто! На этапе верстки "бургера" пришлось даже взять листочек и написать все на бумаге, чтоб понять до конца что к чему)
Тоже уже все записала, но хоть тресни не могу так нарисовать бургер🙈
Как всегда очень полезно, спасибо!
Мастер-класс отличный) особенно про классы спасибо. очень удобно.
и это, даже интересно, кому-то удалось повторить верстку?)
На курсах сейчас как раз делаю проект по вёрстке макета, сначала начал сам, вроде что-то вышло, но коряво, пришёл сюда и прям кайфую от стройности кода, все как симфония.
Иду в свой VS, а мой код - обнять и плакать😅
Но я очень благодарен за возможность учиться и настоящего мастера своего дела, получается весело и нескучно. Заряжает мотивацией.
Пусть это у меня займёт больше времени, но терпение и труд, все должно получиться.
спасибо тебе огромное за твои стримы и обучающие видео! стрим очень классный, как и все то что делаешь!
Всё достаточно чётко, бери и делай, как говорится! Однозначно, очень полезно! 👍Но моя проблема в том, что я никак не могу себя заставить! 🤦♂️Благодарю за информацию и труд!
не проблема, миллион других людей заставят себя и станут успешными разрабами.
@@kostyafrompiter каждому своё!)
Майстер-клас дуже сподобався, є чого повчитись. Мені як новачку, точно є чого. Цікаві рішення застосовувались, можна передивитись не один раз. Що і робив. Дуже дякую за такий якісний безкоштовний контент.
Подивився з великим задоволенням!! Жека, дуже дякую! Після 2-х конспектів по Вашим js почав вмирати, але це відео повертає до життя :) Особливо, коли ти розумієш, що рік тому ти пройшов ці ж уроки на цьому ж каналі і все розумієш, що пише Жека! Окрема подяка за рішення по декору!! Тепер буду знати, як це робиться. Та й Бургер на чистом CSS - дуже класно! Дякую!! Пішов практикувати)))
Спасибо большое за твои труды. Осилил за 3 подхода) Мега полезный контент без воды! Видно, что делаешь с душой, а не ради наживы. Очень рад, что тебя нашел)
можно узнать, что значит осилил за 3 подхода? вы просто повторяли по видео? или сами верстали? просто сам учусь и не подглядывая в видео не могу начать верстать..
@@yevhenfodorov121 повторял по видео. Пока ещё сам тоже не готов верстать.
Жека, велике вам дякую за ваші уроки, багато нового дізналася з них, і з цього стріму включно) За приємну атмосферу та ваш позитивний настрій поставила би окремий лайк, якби була змога)
Жека, привіт! Дякую за супер майстер-клас! Вчусь на курсах менше місяця і, по ходу пошуку контенту для додаткового розвитку, потрапив на твій канал. Дуже вдячний за твою титанічну працю! Багато відосів вже передивився і багато - попереду)
Огромное спасибо за это видио , очень хорошая пркатика для меня , особенно тот момент где ты верстал декор по типу этих красных квадратиков. Реально лучший опыт. По больше бв такиз стримов , я буду пересматривать с удовольствием
Спасибо огромное, Женек, за твой труд и неоценимый вклад в будущих верстальщиков!!! 🤜🤛 🤝👍
Така он-лайн верстка потрібна як практика до теоретичних курсів. Дуже допомогає слідкувати за ходом і порядком мислення розробника. Плюс дуже корисні фічіі при розробці. Дякую!
Чудовий контент, дуже вдячний за Вашу роботу !
Бажаю Вам гарного розвитку каналу!
Евгений, большое спасибо вам за этот урок! Многому научилась!
Дякую. Дуже корисно. Проходжу курс, здала завдання, дали посилання на Ваш майстер-класс, йду переробляти свого "динозавра".
Спасибо за видео! Очень классные приемы показаны
я только только послушала вступление и у меня так настроение поднялось что захотелось написать коммент в поддержку аххах
вы меня вдохновляете!!!!
Большой и толстый палец вверх, все очень круто, спасибо большое тебе Женя)))
спасибо вам за этот прекрасный урок!!
Спасибо огромное!!! После начала войны у меня пришло время "вернуться в семью". Решила с этого видео. Все понятно, все доступно.
Огромное спасибо за качественный подход к обучению🙏🏿
Охрененное видео, все наглядно понятно. Спасибо очень полезно.
Благодарю вас ваш труд!!!
дякую!)) девилась декілька днів, але цього було варте.
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Привет, хотел бы поблагодарить за отличный урок по верстке и за дополнительную мотивацию заниматься ВебДевом, посмотрел несколько твоих видео по ошибкам при обучение ВебДевом и нашел кучу ошибок моего первого преподавателя по фронтенду, поставил себе цель стать высококлассным специалистом и набрался больше терпения при обучении, всех благ тебе и твоей семье! )
Евгений, ты крут! Спасибо!
Для меня очень познавательно, я смотрел на секции и думал сделаю так, но ты мне показал совсем другой подход. 🦾
класс класс супер класс. от начала до конца!
Очень круто! Спасибо!
Спасибо большое за великодушие и щедрость. Смотрю вас уже давно, вырос на ваших уроках. Жаль, что из-за событий в мире контент теперь только на недоступном мне языке. Желаю вам добра!
Огромное спасибо!
Привет!! Очень крутой стрим, хочется побольше) постепенно усложняя
Доброго дня вам❗️ Шикарні уроки 👌👍❗Самостійно навчаюсь на вашому сайті❗Круто❗
Спасибо огромное. Узнала очень много нового 🔥🔥🔥
Жека, приветствую! СПАСИБО за стрим и запись от новичка!! Очень полезный и качественный контент! Превосходный уровень! С наилучшими пожеланиями всех-всех благ!
Как всегда супер! Один из лучших каналов по данной тематике
Thanks a lot for this master-class) I was enjoing every minutes) You have given a lot of valuable information. My best wishes to you) ❤
Спасибо огромное) супер полезные фишки!! Ты крут👍
Усе чітко й зрозуміло, дякую за запис!)
подивився і взнав для себе багато нового, хоть і верстаю вже більше 6 міс. Дякую Жека
Ження, вкрай вдячний за черговий топовий майстер-класс! Надзвичайно корисний контент,не зупиняйся!
дуже сподобалося відео з зрозумілою інфою
дякую за контент
На стрим не попала, смотрела в записи. Спасибо, что сохранили запись. Было очень интересно и очень полезно)
Жека это первый ролик из всех где у меня получилось так же как у тебя )). Всё красиво и ясно получилось. Для новичков то что надо.
Спасибо за контент.
Дякую за відео, дуже класно все поясненюєте, допомогли стратувати в верстці
Благодарю вас за такой материал, супер верстка!
спасибо за работу! здоровья тебе)
Отлично. Уже 5 раз стартую в IT. Я надеюсь, что ты совсем не такой)
это фантастическое видео, продолжайте в том же духе
Женя, ты лучший! Мирного тебе и твоему народу неба над головой’
Есть разница как зарабатывать деньги и да они пахнут, но большинство готовы делать что угодно за деньги, не задумываясь пользу или вред они принесут своими действиями. Благодаря таким людям как Женя, нас будет намного больше )))
Интересное видео и полезная информация. Спасибо
Уххх) сверстал "буквель в буквель") нетривиальная задача для начинающего даже со знанием шоркатов\еССтрактора\оборачивания кусков кода и прочего. Даже пару сниппетов пришлось накатать для вывода пустых линеек маржинов\паддингов) Сам так маржины\паддинги развернуто не фигачу, потому не нужны были.. И очень помогло, что два монитора. На одном смотрю ролик, на втором шпарю как угорелый по кнопкам...
Из полезного точно:
1. Повторюсь, но с классами CSS прям отличная штука;
2. Не додумался бы сам рисовать напрямую декор, уже даже все вырезал из макета;
3. Создание готовых шаблонов кода для использования в другом месте с модификаторами (те же функции по сути).
4. Снес нафиг VS Code. Слишком много было накидано всякой фигни в плагинах по незнанию и это мешало нормально работать (что-то с чем-то конфликтовало\неправильно было настроено и тд...). Поставил с чистого листа, настроил по инструкции Евгения.
Спасибо за урок Евгений)
Дякую за класний майстер клас, тепер знаю як робити правильно декоративні елементи, Жека красава, чекатиму ще майстер класів від тебе👍
отличный урок. спасибо.
спасибо за мастеркласс!
Спасибо, Женя. Обучалка мега суперская