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