#3 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma | Секция motivation

✏️ Разрабатываем лендинг фитнесс-клуба дальше, в этот раз - верстаем секцию `motivation`.
🔴 Timeline:
▶ 00:00​ | Вступление
▶ 00:08​ | Разметка секции motivation
▶ 07:00​ | Стилизация секции motivation, ч. 1
▶ 11:50​ | Стилизация фонового текста для заголовка (backdrop-title)
▶ 17:20​ | Стилизация секции motivation, ч. 2
▶ 24:00​ | Адаптация секции motivation
📚 Ссылки:
➖ Макет Kropp Fitness в Figma: www.figma.com/file/m3lT3GF4mU...
➖ Репозиторий с кодом проекта: github.com/aleksanderlamkov/k...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #верстка #версткасайтов

[@27FeetUnder]

Топовый контент, как бэкендер, которому иногда приходится верстать что-то самому, кучу полезного для себя вынес. Отдельный лайк за подачу - очень кайфовый стиль и "плотность" информации на единицу времени)

[@DS8nmk]

Самый современный подход к верстке, все актуально на сегодняшний день. Быстро и понятно.

[@dimasnytin]

Прям нашел ответы на мои вопросы, в данном видео. Спасибо. Мне раньше тяжело давалось понимать сленг Александра, теперь вообще то что надо, видимо росту😂

[@gonorgo8054]

Александр, спасибо. Продолжайте свое дело)

[@user-no5jg7ku6l]

Саша, привет! Как всегда, просто огненное огнище!!! На каждом видео узнаю что-то новенькое (кому я вру? много нового узнаю!). 🔥🔥🔥🔥 В заголовках делать текст пвседоэлемента через дата атрибут - вообще не знал, что такое можно =)) Теперь знаю благодря тебе! А структура html и css получается - как произведение искусства (для тех, кто понимает в этом типе искусства). Вот еще идея для плейлиста мастер-классов - видео по верстке определнных сложных секций (не привязанных к конкретным макетам) и их адаптив. Один из примеров - когда есть изображение а от него хаотично отходят линии (стрелки) к текстовым блокам-описаниям (например, картинка авто, а от его определнных узлов отходят линии - это двигатель, это колеса и т.д.). Часто на лэндингах такое встречаю. Еще пример из реальной практки - хаотичная линия с этапами или шагами, когда на этой линии есть чекпоинты с текстовым описанием, но сами блоки на разной высоте, т.к. линия нарисована произвольно. надеюсь, я более-менее понятно объяснил ход своих мыслей, не таких структурированных, как твой код😇

[@AleksanderLamkov]

Здравствуй! Спасибо за развернутую обратную связь, приятно читать 🙂 Твои идеи для МК я понял, звучит здорово. Попробую что-нибудь подобное реализовать. Спасибо за мысли!

[@-getmen6001]

Спасибо за твои уроки! Много полезного в понятной форме)

[@mushroom2267]

Привет! В описании к видео есть ссылка на репозиторий с исходным кодом, но там код на состояние предыдущего урока, обновить бы) И да, спасибо за топ-контент!

[@AleksanderLamkov]

Привет! Обновил, спасибо, что заметил :)

[@egorbebr1002]

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

[@AleksanderLamkov]

Привет! Спасибо за фидбек и за идею для ролика, обязательно сниму :)

[@egorbebr1002]

@@AleksanderLamkov буду очень ждать)

[@AleksanderLamkov]

Сделал видео по этой теме: kzbin.info/www/bejne/e4e6hWebrdtnoKM :)

[@egorrublev5529]

Вт день познания .... Спасибо за видео Александр

[@Ragnnna]

25:18 img moment;). Спасибо за качественный контент.

[@idknope111]

супер видео, продолжаю потихоньку верстать сайт) однако в конце всплывающее видео закрыло часть кода, неприятно вышло =)

[@AleksanderLamkov]

Привет! Спасибо за замечание, исправил, через некоторое время обновится, не будет перекрывать :)

[@user-bj8oe1gt3r]

ролик топ!

[@mdayzz]

А какая имеется обоснованная причина для использования ul li в качестве тега для карточек? Первая мысль которая мне пришла в голову, это банально обёрточный div и div card :/ Я просто впервые сталкиваюсь с использованием ul li НЕ для какой-нибудь менюшки. Если мы представим, например, простенькую тудушку, в которой имеется элемент task_list, который хранит в себе task_card'ы, там тоже есть смысл использовать ul li? Ещё мне не очень понятна логика использования container конкретно внутри -- Было бы плохой идеей использовать container внутри ul motivation-list? Вообще мою психику очень сильно расшатали "фрилансные" тяп-ляп видосы, на которых я давным давно изучал html/css, и для меня конкретно этот мастер-класс буквально сюрприз за сюрпризом -- куча неочевидных решений, которые, ну очень хочется более подробно разжёвывать. Спасибо за контент ❤

[@AleksanderLamkov]

Привет! Маркированные списки стоит использовать везде, где есть повторяющийся контент с однотипной разметкой. Как минимум пользователям скринридера будет проще ориентироваться в интерфейсе. На счёт container. Он нужен строго для карточек motivation-card, ибо фон (черный или серый), цепляемый к каждому motivation-item, должен растягиваться на весь экран, а с помощью container мы ограничиваем контент внутри motivation-card по ширине контентной сетки.

[@smotritelyoutube]

Супер, просто супер видосы, реально. Только хотел спросить почему вы сказали, что в таких изображениях лучше использовать jpg? Я обычно перевожу все в webp, а то jpg тяжелые всегда почему-то, и в googlePageSpeed всегда показывает маленькую скорость у меня, ну и вопрос про то, почему желательно задавать нижние и правые отступы, тоже хотелось бы узнать подробнее, вот например у меня есть 3 блочных элемента, каждый стоит друг под другом, разве не лучше задать отступ вверх и вниз среднему, чем писать и верхнему элементу нижний отступ и среднему элементу нижний отступ, хотелось бы узнать эту информацию?

[@AleksanderLamkov]

Привет! 1. Про изображения в jpg - это относительно тех форматов, которые предлагает фигма. Да, в webp будет оптимальнее, но нужен конвертер. 2. Про отступы. По возможности, если они одинаковые, то лучше задавать с помощью column-gap и row-gap у родительского элемента, который является флекс или грид-контейнером. В иных случаях - лучше задать через margin слева направо и сверху вниз, при том через :not(:last-child), чтобы применялись к «не последнему среди своих соседей элементу». Если задавать отступы так, как ты сказал, то, во-первых, отступы элемента будут жестко зависеть от его положения в разметке (переиспользуешь в другом месте и будет хаос), во-вторых, при схлопывании отступов у двух соседствующих подобных элементов, будет порой неочевидный промежуток между элементами.

[@smotritelyoutube]

Большое спасибо за развернутый ответ, все понял)@@AleksanderLamkov

[@colodatwin3102]

Здраствуйте, Александр, спасибо за видео, возникли следующие вопросы: - Зачем вы ставите в src ./ , если можно не ставить а сразу обратиться к папке images/ ? - И почему width и height картинке задаем в инлайн стилях, а не в самом CSS?

[@AleksanderLamkov]

Привет! 1. Путь с точкой и слешом в начале - это привычка, дело вкуса, мне так путь кажется более читабельным и понятным. 2. Размеры изображениям задаются не в инлайн-стилях (не в атрибуте style), а в атрибутах width и height, у них разные цели. В HTML-разметке элементам img и всегда нужно всегда задавать начальные размеры, как по макету, чтобы браузер при парсинге разметки до фактической прогрузки изображений зарезервировал под эти элементы необходимое пространство. Если не указать эти атрибуты, то при загрузке сайта с картинками или -виджетами будут происходить вертикальные скачки интерфейса, что будет весьма неприятно для пользователя.

[@user-bj8oe1gt3r]

@@AleksanderLamkov знание таких мелочей показывает профессионализм

[@user-ne5fq1td6h]

Спасибо за вашу работу, Александр! Пока повторяю за вами, но почему-то не сработал row-reverse и не перекрасились блоки в альтернативный цвет. Подскажите, в чем может быть причина? (код сравнила, все идентично)

[@AleksanderLamkov]

Привет! Спасибо за комментарий :) По поводу проблемы - трудно сказать, причин может быть много. Напишите в чат: t.me/friendlyFrontendChat Там помогут. Я или другие ребята.

[@kalts_daniil]

Офигенные уроки 🔥 Я так понимаю в этих сериях ты не верстаешь по БЕМ, верно?

[@AleksanderLamkov]

Привет! Спасибо за такую обратную связь :) Да, в этом мастер-классе целенаправленно верстаю не по БЭМ, но в следующем следую БЭМ и применяб препроцессор стилей Sass.

[@kalts_daniil]

@@AleksanderLamkov супер!) Я и до него доберусь! 😁 Интересно, по окончанию этого мастер класса лучше попробовать самому сверстать данный макет от и перейти к следующему мастер классу? Когда стоит приступить к вёрстке макетов самостоятельно?

[@AleksanderLamkov]

Я считаю, что после текущего мастер-класса стоит попробовать сверстать что-то аналогичное по сложности или попроще. Ну а вообще, самый действенный метод: смотришь мастер-класс кусочками, ставишь паузу и пробуешь реализовать, допустим, секцию или часть секции самостоятельно, затем продолжаешь смотреть видео и смотришь, что можно было сделать лучше.

[@user-bn7fl9ny1t]

Привет. Слушай! Хотел бы узнать твоё мнение Смотри, когда ты перекрашивал секцию в темно-серый цвет, ты использовал обращение через nth-child(even). Считается ли нормой если я использую другой метод, например добавить ко второму списку альтернативный дополнительный класс и обратившись к нему перекрасить бэкграунд ? Мне просто интересно узнать, важно ли всё точь-в-точь как ты делать, либо же в вёрстке есть разные варианты решений ? Заранее спасибо за ответ!

[@AleksanderLamkov]

Привет! Решений множество, нет единственного верного, можно и через дополнительный класс-модификатор. Просто мне больше нравится автоматизация подобных паттернов, чтобы один раз задать правило nth-child и больше разметку не трогать.

[@giorgiagdgomelashvili423]

Огромное спасибо за урок

[@zylex78]

Здравствуйте, спасибо большое за видео, скажите пожалуйста, нормально ли то, что мы пишем все в одном css файле? просто чем дальше идем, тем больше строк, тем сложнее ориентироваться по файлу, не нужно ли как это все разбивать на разные файлы?

[@AleksanderLamkov]

Привет! Спасибо за фидбек! :) В этом мастер-классе специально нет декомпозиции на несколько файлов, так как эта серия видео предназначена совсем для новичков. В следующем мастер-классе как раз делим стили на отдельные файлы: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU

[@SmoggyRus]

Я думаю, что лучше к backdrop-title::before применить серый цвет(dark-gray), т.к белый сливается

[@user-mr9fm9ou8c]

18:00 для параграфов строки 185-190 свойства были описаны в обнуляющих стилях строки примерно 70-90 ?

[@AleksanderLamkov]

Привет! Ориентируясь на финальный файл стилей: github.com/aleksanderlamkov/kropp-fitness/blob/main/styles.css На строках 55-68 сбрасывались вертикальные внешние отступы для параграфов без классов (без атрибута class). На строках 192-198 сбрасывались вертикальные внешние отступы для всех параграфов и дополнительно добавлялся внешний отступ вниз для без классов (без атрибута class) и не идущих последними среди своих соседних (not last child).

[@PHOENIX-oe7rw]

Александр, подскажите если не сложно 1. почему вы решили весь блок верстать через список, а не через два отдельных блока. Вот смотрю на блоки и вроде как понимаю что их можно реализовать через ul, но почему вы выбрали это как вариант - не могу понять. 2. В реальной практике вот весь такой макет (всей одной страницы) сколько должен занимать дедлайн на выполнение? С учетом что - первая работа (и новичек). Я понимаю что вы за час все сверстаете. Вот мне к примеру)

[@AleksanderLamkov]

Привет! 1. Если есть повторяющиеся одинаковые элементы, пусть и с разным содержимым (текст, картинки), то стоит обернуть их все в список. 2. Такой лендинг новичок мог бы сделать часов за 20. Ну или 3 неполных рабочих дня.

[@maximtitov6129]

26:42 Расскажи пожалуйста, почему использовали column-reverse, не до конца понял, заранее спасибо!

[@AleksanderLamkov]

Привет! Чтобы содержимое карточки (основная часть и картинка) встали в колонку в обратном порядке. В разметке ведь идет сначала motivation-card-body, а затем уже motivation-card-image. Ну а если в целом вопрос «почему так, а не по стандарту «основная часть, затем картинка», то потому что с картинкой наверху будет смотреться органичнее, на мой взгляд :)

[@maximtitov6129]

@@AleksanderLamkov Спасибо большое, дошло😂

[@nn1413]

Здравствуйте, Александр, почему для стрелки (~ 23 минута) не надо писать display block, в отличие от знака плюс (13:09)?

[@AleksanderLamkov]

Привет! Кнопкам (к которым цепляется стрелка в псевдоэлементе) ранее выставлялся display как inline-flex, что неявно делает все прямые дочерние элементы и псевдоэлементы флекс-элементами. Поэтому для after выставлять display вручную уже не требуется.

[@PavelChupryna]

Подскажите пж. для motivation-card свойство column-gap добавляет отступ не только между дочерними элементами, но и после(если фоекс старт, а если центр то со всех сторон). Даже после того как скопировал ваш код, всеравно работает не так как у вас.

[@PavelChupryna]

лучшее что я смог сделать, заменить значение column-gap на 20%. работает как надо. (В первом случае, еще и текст-псевдоэлемент выходил за границы контейнера, а при сужении за экран..)

[@AleksanderLamkov]

> свойство column-gap добавляет отступ не только между дочерними элементами, но и после(если фоекс старт, а если центр то со всех сторон) Этого не может быть. Ты как-то не так понял девтулз. > Даже после того как скопировал ваш код, всеравно работает не так как у вас. Скинь в наш тг-чат архивом код, поможем разобраться: t.me/friendlyFrontendChat

[@PavelChupryna]

@@AleksanderLamkov Да)

[@tortik_0162]

20:10 не понял зачем было писать отдельно margin-bottom для тега "p" с пcевдоэлементом :not(:last-child) и для класса motivation-card-description с таким же элементом, если это по сути одно и то же. Подскажите пожалуйста

[@AleksanderLamkov]

Привет! Во-первых, нам нужен отступ вниз для , когда элемент не является последним среди своих соседних (когда ему есть что "толкать"). Во-вторых, когда у него внутри находится несколько (а такое вполне может быть, мы должны предусмотреть этот сценарий), то этим также нужны отступы снизу, но не всем, а только тем, которые «не последние среди своих соседей».

[@m4estrooo_official]

19:30 margin-left*

[@skro1ik410]

2:57 Как разбираться в том, когда какие типы картинок нужно скачивать?(svg, png или jpg)

[@AleksanderLamkov]

Привет! Всё придёт с опытом... SVG, то есть векторная графика - это зачастую примитивные фигуры, которые в Figma в панели слоев зачастую подписаны как 'Vector'. Это иконки и декоративные украшательства, которые при масштабировании не будут терять в качестве. PNG - это формат в первую очередь для картинок, где требуется прозрачный фон (например, фото товара), ну а ранее PNG использовали и для иконок, но сейчас в 99% случаев для иконок используется именно SVG. Понять SVG перед тобой или PNG в макете Figma можно, опять же, по панели слоев при выделении соответствующих элементов. А JPG - это все остальные фотографии, в которых нет необходимости в прозрачном фоне. На самом деле есть ещё куча форматов, avif, webp, к примеру, но это уже углубленные знания, начинающему достаточно уметь работать с SVG, PNG и JPG.

[@skro1ik410]

@@AleksanderLamkov спасибо большое

[@user-ub8ng4nn9f]

13:55 можно вот так width:26 + 8 = left:-34px написать? 2 вопрос 7:58 justify-content: start, а все это видео выглядит как center, почему не справа расположение?

[@AleksanderLamkov]

Привет! 1. Можно, но это костыли. Лучше через right и calc. 2. Свойство justify-content отвечает за горизонтальную ось в данном случае. Прижимает контент влево. Без него нечетные карточки с flex-direction row-reverse чуток поломаются.

[@motivation9823]

Здравствуйте, у меня есть проблема. Когда я прописал разметку в html у меня текст был поверх картинок, и из-за этого затем не правильно работает весь css. Сравнил код, всё одинаково. Подскажите в чём причина?

[@AleksanderLamkov]

Привет! Сложно сказать, не видя код. Напиши подробнее о проблеме к нам в телеграмм-чат, пожалуйста: t.me/friendlyFrontendChat Там тебе помогут.

[@skro1ik410]

Как перевести line height из px в пропорции(1.3 и подобное)?

[@AleksanderLamkov]

Делим значение line-height в пикселях на значение font-size в пикселях. Допустим, в макете у элемента указано: font-size: 16px line-height: 24px Значит значение line-height в формате коэффициента будет вычисляться по формуле: 24 / 16 = 1.5 И итого указываем: line-height: 1.5

[@skro1ik410]

@@AleksanderLamkov все понял,спасибо

[@MsDlovar]

Не понял как сработал flex-direction: column-reverse у блока motivation-card на ширине меньше 767px. Изначально у этого блока было свойство display: flex то-есть дети идут в строку седом друг за другом, главная ось горизонтальная. И тут flex-direction: column-reverse меняет главную ось на вертикальную. Почему так получилось?

[@AleksanderLamkov]

Привет! Всё верно. Изначально дочерние элементы (блок motivation-card-body с заголовком, описанием и кнопкой и изображение motivation-card-image) идут слева направо в ряд по горизонтали. Для четных (even) карточек дополнтельно меняем направление флекс-оси с дефолтного row на row-reverse, чтобы сначала шло изображение, затем блок с контентом (заголовок, описание, кнопка). На медиазапросе max-width 767px мы у всех (!) карточек motivation-card меняем направление оси на column-reverse, чтобы дочерние элементы шли сверху вниз, сначала изображение, а ниже него - всё остальное.

[@SOSODESIGN1]

привет. почему когда фотку вставляешь такой отступ от края потом ?

[@AleksanderLamkov]

Скорее всего изображение шире, чем окно бразуера. Попробуй прописать в стилях это: img { max-width: 100% }

[@SQ1FU]

У меня не получается перестроить сетку в одну колонку, как быть? Я прописываю все тоже самое, что и в видео(буквально копирую с гитхаба), а оно не работает( .motivation-card, .motivation-item:nth-child(even) .motivation-card { flex-direction: column-reverse; }

[@AleksanderLamkov]

Надо посмотреть по DevTools. Выдели нужный тебе элемент и посмотри вкладку Styles. Если не разберешься, напиши в чат: t.me/friendlyFrontendChat