#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

Подписаться 21 тыс.

Просмотров 25 тыс.

50% 1

✏️ Начинаем с нуля верстать несложный одностраничный сайт по фитнес тематике. Этот мастер-класс предназначен для новичков, однако для комфортной разработки вам необходимо знать теорию по HTML и CSS. Плейлисты с курсами по этим технологиям вы можете найти на канале, советую с ними ознакомиться, если ещё этого не сделали.
🔴 Timeline:
▶ 00:00 | Вступление
▶ 00:26 | Разбор макета Figma
▶ 01:21 | Анализ шрифтов макета, ч. 1
▶ 01:53 | Dev-режим в Figma
▶ 02:25 | Анализ шрифтов макета, ч. 2
▶ 03:21 | Поиск файлов шрифтов на Google Fonts
▶ 04:19 | Преобразование файлов шрифтов в woff2 через transfonter
▶ 04:49 | Подготовка файловой структуры
▶ 05:53 | Подключение стилей
▶ 06:06 | Подключение шрифтов
▶ 07:28 | Нормализация стилей
▶ 08:08 | Подготовка глобальных CSS-переменных
▶ 11:22 | Глобальные стили
▶ 12:02 | Стили утилитарного класса container
▶ 12:36 | Стили заголовков
▶ 13:07 | Разметка шапки
▶ 13:22 | Разметка логотипа
▶ 14:36 | Разметка меню
▶ 15:36 | Разметка блока с кнопками
▶ 17:49 | Стили шапки
▶ 18:10 | Стили меню
▶ 20:10 | Эффект наведения на ссылки
▶ 21:13 | Стили текущей ссылки меню
▶ 22:29 | Стили основной кнопки
▶ 24:46 | Стили блока с кнопками
▶ 25:05 | Исправление бага со сжатием логотипа по ширине
▶ 25:27 | Исправление баг с переносом строк в кнопках
▶ 26:02 | Стили бургер-кнопки
▶ 30:44 | Адаптив шапки
📚 Ссылки:
➖ Макет Kropp Fitness в Figma: www.figma.com/file/m3lT3GF4mU...
➖ Репозиторий с кодом проекта: github.com/aleksanderlamkov/k...
➖ Сервис для поиска шрифтов Google Fonts: fonts.google.com/
➖ Сервис для преобразования файлов шрифтов в нужный формат: transfonter.org/
➖ Файл для нормализации стилей (css-normalize): raw.githubusercontent.com/ale...
➖ NPM-пакет css-normalize: www.npmjs.com/package/@a1rth/...
💬 Чат в телеграмме (помощь новичкам):
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 #фронтенд #верстка #версткасайтов

Опубликовано:

14 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 141

@AleksanderLamkov 4 месяца назад

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@denisd3218 6 месяцев назад

Спасибо. Очень хорошая подача инфы без воды.

@Whynot-lx8nl 6 месяцев назад

Гений.... очень сильно жду 2 част, сильно удивлен почему у такого контента так мало сабов... Удачи!!!

@itobold 6 месяцев назад

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

@steiden1 6 месяцев назад

Спасибо за видео. Получил ответы на многие вопросы🔥

@Dreamer_78 2 месяца назад

Очень понравилось! чувствуется профессионализм, спасибо большое

@user-yd6nc3zn3f 3 месяца назад

Видео не для совсем новичков, но все равно ТОП! Автор отвечает на вопросы в комментариях, что дает дополнительную пользу. Лайк и подписка)

@errxrcxde8265 6 месяцев назад

Очень полезный видос!!! Спасибо!

@dimasnytin 6 месяцев назад

Ждём 2 часть🎉

@dimasnytin 6 месяцев назад

Спасибо большое за труд

@PavelChupryna 15 дней назад

Спасибо за курс. Ты крутой.)

@svitboomer8840 6 месяцев назад

Еееееее, Крутяк

@unlimitedgames8357 6 месяцев назад

все шикарно, спасибо за сжатый и полезный контент. Хотелось бы увидеть на практике адаптив с применением min, max, clamp

@AleksanderLamkov 6 месяцев назад

Привет! В следующих секциях как раз применим min и clamp :)

@user-lt8yj8qk8l Месяц назад

Отличный канал, отлично объясняешь. У меня куплен курс в SkillFactory, но понимания по их "текстовому обучению" никакого. Спасибо тебе большое за работу!

@user-qt3lg3st8f 2 месяца назад

Спасибо большое проделанную работу! Объясняется очень грамотно, хоть и очень быстро. Для совсем нуба как я, приходится несколько раз пересматривать. Очень хочется видеть подобные мастер классы где подробно разжованно и по скорости не быстро))) Спасибо!

@AleksanderLamkov 2 месяца назад

Привет! Спасибо за обратную связь :) Про скорость - учту в будущих видео.

@Bit_Maximum 6 месяцев назад

Спасибо!

@egorrublev5529 6 месяцев назад

Канал подача огонь, Большая тебе благадарность

@sartjhon3300 4 месяца назад

Ну чтож, слушать и смотреть приятно. Формат, конечно, ни разу не для новичков, скорее для уверенных середнячков, как раз стадия вылизывания кода

@alenache1 6 месяцев назад

огонь

@progover24 6 месяцев назад

жду след урок

@aLeKseU852 2 месяца назад

Спасибо за контент! Посмотрел на твоем канале html курс, частично css. Пробую верстать аналогичный макет. В фигме только как я понял режим разработчика сейчас могут включить только платные подписчики

@AleksanderLamkov 2 месяца назад

Привет! Угу, дев-мод стал платным, но я советую приноровиться к режиму дизайнера, там не так сложно, мне он даже больше нравится. Ну а для конкретных CSS-свойств теней и градиентов есть различные плагины. Если нужно - напиши в телеграмм чате (ссылка под видео), тебе скинут ссылки.

@user-nn9qy1yh3s Месяц назад

ну мне зашел видео, все по делу, без воды, подача материала очень доходчива, голос конечно решает много, чуток не удобно что на иностранном языке, но это такое - терпимо. подписан - отслеживаю. Кстати что за тема редактора и шрифт? довольно удобно глазу. Еще вопрос от noob - у тебя тег img раскрылся очень удобно - это твой личный snippet или как ?

@AleksanderLamkov Месяц назад

Привет! Спасибо за обратную связь :) Тема - Oceanic Dark Theme Шрифт - JetBrains Mono

@K0mariki 2 месяца назад

В Figma есть плагин "Inspect Styles", который является заменой режима разработчика, а также он показывает какие шрифты используются в макете. В элемент можно провалиться через все слои зажав левый ctrl.

@user-xw4sp6lk7k 6 месяцев назад

Александр, спасибо за шикарные видео👍 На ближайшее время ваш контент-план примерно понятен. Если не секрет, какие планы далее? Js, React, Vue или все сразу?

@AleksanderLamkov 6 месяцев назад

Привет! Спасибо за обратную связь! По плану будет JavaScript, средства автоматизации, потом React.

@mushroom2267 6 месяцев назад

@@AleksanderLamkov ура ура ура!

@orman4021 3 месяца назад

Почему у такого канала так мало подписчиков? :) Спасибо за годный контент для начинающих. Сам пользуюсь WebStorm по студенческой подписке, не расскажешь, что за оформление ты используешь? В плане Color Scheme

@AleksanderLamkov 3 месяца назад

Привет! Спасибо за фидбек:) Тема - Oceanic Dark Theme: plugins.jetbrains.com/plugin/16506-oceanic-dark-theme

@orman4021 3 месяца назад

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

@idknope111 6 месяцев назад

(20:23) Привет, при добавлении селектора hover к a, и при наведении на ссылку, у меня перекрашивается вся область нажатия (весь квадрат, с помощью которого мы увеличили область нажатия на эту же ссылку) UPD. Не понял, как это работает, но я написал код ещё раз, и всё заработало, но всё равно спасибо)

@frodo5190 2 месяца назад

Я ЛЮБЛЮ ТЕБЯ...

@kiralatysheva6794 6 месяцев назад

Да, очень четко-структурированный материал. Большое спасибо. Если не секрет, где вы сами учились вёрстке, по каким материалам?

@AleksanderLamkov 6 месяцев назад

Привет! В 2020-м смотрел “Фрилансер по жизни», делал практические задания на htmlbook.ru/practical, верстал рандомные макеты из фигмы, делал задачки в тренажерах htmlacademy по базовой подписке, ещё прочитал от корки до корки книги «Head First HTML» и «Большая книга CSS».

@user-bj8oe1gt3r 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

Да, есть такой плагин, спасибо за комментарий! Но должен предупредить, что самый оптимальный способ шрифтов с точки зрения производительности - через font-face и обращение к локальным файлам. Как подключение через плагин работает - не помню.

@user-do3or8jr7v 2 месяца назад

Нормализация / обнуление делается под каждый проект отдельно в зависимости от особенностей проекта или в каждый проект вставляется стандартный набор селекторов\свойств? Я понял, это отдельная большая тема. Есть ли у Вас видео на эту тему?

@AleksanderLamkov 2 месяца назад

Можно смело использовать в каждом проекте. Видео на канале по этой теме вот: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-A4Y5VwXGG9g.htmlsi=KEUl2ozTW8bRhBoj

@smotritelyoutube 6 месяцев назад

Только у меня вопрос касательно БЭМ, это просто так надо, что например селектор header-logo-icon пишется просто через дефис? Я думал что надо писать через 2 нижних подчеркивания типа header__logo, было бы круто услышать об этом (БЭМ) от Вас) А так все супер, пушка, ждем следующий урок!!!

@AleksanderLamkov 6 месяцев назад

Привет! Этот проект делаем без БЭМ. Про эту методологию я сделаю отдельное видео и затем выпущу дополнительный мастер-класс.

@user-xw4sp6lk7k 6 месяцев назад

Я думаю, что для лендинга на 5 блоков вообще нет смысла заморачиваться над неймингом и использовать БЭМ (разве что по привычке). Если многостраничник, тогда да

@user-nb5ko6cu6o Месяц назад

Спасибо вам за интересный практический урок. Можно спросить - почему вы полностью копируете и вставляете код из файла normalize, а не подключаете его в папке CSS, вместе с файлом style.css? Копировать и вставлять код этого файла чем-то лучше?

@AleksanderLamkov Месяц назад

Привет! Спасибо за обратную связь :) На самом деле особой разницы в способах подключения нормалайза нет, но если подключать отдельным файлом, в конечном приложении на сервер будет выполняться +1 запрос, из-за чего загрузка сайта в целом будет чуть медленнее. Но там такие крохи, что ими можно пренебречь. На этапе обучения тем более. Так что делай так, как тебе удобно.

@user-bj8oe1gt3r 5 месяцев назад

привет, вот интересует вопрос: можно ли создать переменную в которой будет 3 правила? мне нужно создать border цвет которого будет в градиенте, а создать его можно только с помощью свойств: border, border-image-source, border-image-slice. можно ли уместить эти 3 правила в одну переменную?

@AleksanderLamkov 5 месяцев назад

Привет! Не получится. То, что ты описываешь, похоже на миксины из препроцессоров (SCSS, PostCSS, Less). В обычном же CSS я бы предложил просто создать утилитарный класс gradient-border и добавлять его тем элементам в разметке, где он нужен.

@user-bj8oe1gt3r 5 месяцев назад

@@AleksanderLamkov Спасибо, я слышал когда то про миксины, но вылетело из головы. у тебя качественные уроки, продолжай в том же духе)

@liza_beg 3 месяца назад

Спасибо! Очень полезно и понятно для новичка. Осталось несколько вопросов, подскажите, пожалуйста: 1. Почему padding-top для класса header задается только в медиазапросе? 2. Зачем свойство line-height кнопкам? 3. Почему max-width именно 1024px? Это какая-то общепринятая величина или "на глаз"?

@AleksanderLamkov 3 месяца назад

Привет! 1. Потому что на десктопной версии высота шапки (и соответственно отступ сверху) идёт за счёт фиксированной высоты у элементов header-menu-link. На max-width: 1024px ссылки из меню уходят на вторую строку, поэтому ориентироваться на их высоту мы уже не можем и чтобы header не слипался сверху с краями страницы, мы и задаем этот padding-top в медиазапросе. 2. Оно лишнее, согласен. Если мы задаем кнопкам height, то line-height фактически перестает действовать. 3. Общепринятых величин для медиазапросов нет, я опытным путем для себя определил некие диапазоны, что вот на 1023-1024 примерно начинается ширина для планшетов, на 767-768 уже мобилка. Можно также ориентироваться на getbootstrap.com/docs/5.0/layout/breakpoints/, но в целом это не принципиально, стандартов нет.

@liza_beg 3 месяца назад

@@AleksanderLamkov Все поняла. Спасибо большое!

@user-yj4gp4eg4i 20 дней назад

Кто ты, Воин?))))

@kiralatysheva6794 6 месяцев назад

Что думаешь насчёт подключения шрифтов с помощью плагина google fonts (для vs code есть такой) ?

@AleksanderLamkov 6 месяцев назад

Не работал с таким, пользуюсь IDE WebStorm. Если плагин генерирует font-face подключение, то способ будет неплохим :)

@kiralatysheva6794 6 месяцев назад

@@AleksanderLamkov по завершении курса css, планируешь начать обучение джаваскрипту? если да, то до какого уровня? вообще какие планы по развитию канала? спасибо за ответы =)

@AleksanderLamkov 6 месяцев назад

Курс по CSS уже закончен, а после этого мастер-класса будет БЭМ, препроцессоры стилей, возможно ещё один мастер-класс по верстке с применением этих знаний, а затем, собственно, курс по JS. Планирую в нём рассказать всё то, что пригодилось мне за последние годы работы, но без специфичных ситуативных API, которых в браузере буквально сотни.

@kiralatysheva6794 6 месяцев назад

@@AleksanderLamkov очень круто! ваш канал для меня настоящее открытие! спасибо большое

@fj-ru8pp 4 месяца назад

Привет, ранее посмотрел видео по БЭМ методологии, хочу уточнить почему не используется в этом курсе? Она вовсе необязательна получается?

@AleksanderLamkov 4 месяца назад

Привет! В этом мастер-классе специально не делал по методологии, чтобы новичкам было попроще. БЭМ для верстки нужен, без него получается грязновато. В следующем мастер-классе будет и БЭМ и препроцессор стилей.

@fj-ru8pp 4 месяца назад

@@AleksanderLamkov Спасибо большое за ответ! Жду с нетерпением следующего! С наступающим!

@veterok54 3 месяца назад

А что это за прога скриншотер у тебя такая, не подскажешь?) Спасибо)

@AleksanderLamkov 3 месяца назад

Привет! TeamPaper Snap.

@DSW- Месяц назад

Просмотрел ваши видео с курсами по css html. Возможно так плохо смотрел и конспектировал, но вообще не понял про max-width: calc(var(--container-width) + var(container-padding-x) * 2). Почему --container-width не дает реальных 1300px ограничения контентной области? По функции calc понял, почитал, но почему именно 1300 + 15 * 2 = 1300 я не понимаю. Буду рад, если объхясните или прикрепите ссылки на статьи, где можно почитать почему так

@AleksanderLamkov Месяц назад

Привет! Всё дело в box-sizing. По умолчанию в браузере при задании ширины и внутренних горизонтальных отступов финальная ширина элемента будет равна сумме этих двух величин. То есть если задали width 1300px и padding-inline 15px, то финальная ширина элемента будет равна 1330px. Если же мы установим box-sizing как border-box (а это делают в 99.99% проектов), то при задании тех же самых значений (width 1300px и padding-inline 15px) финальная ширина элемента будет равна 1300px. А внутренние горизонтальные отступы будут «толкать» контент слева и справа на 15px с каждой стороны и по итогу сам контент будет ограничен шириной в 1270px. Чтобы при box-sizing border-box ширина, заданная в max-width, соответствовала значению ширины контента по макету, необходимо плюсовать в calc к container-width внутренние горизонтальные отступы с каждой стороны (container-padding-x * 2). Тут подробнее о box-sizing: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oQDNPNZ72Ig.htmlsi=_XBV85Ab36VVfzYy

@DSW- Месяц назад

@@AleksanderLamkov Спасибо за подробный ответ, все понял)❤

@hyperpocket. 4 месяца назад

23:51 почему у кнопки задана высота, если можно было padding по всем сторонам?

@AleksanderLamkov 4 месяца назад

Если задавать высоту кнопкам через вертикальные внутренние отступы, то чтобы высота соответствовала макету, нужно учитывать размер шрифта и указывать отступы по формуле ((height - font-size) / 2). Это - сложно. Гораздо удобнее и надежнее написать высоту через фиксированное значение для свойство height.

@aswarriorr 3 месяца назад

Как то все иначе верстается , не как у всех)) . Это как один из вариантов верстки ? Урок интересный!

@AleksanderLamkov 3 месяца назад

А в чем именно иначе? Я сам еще 4 года назад смотрел много видео по верстке. Уже не особо помню, что там было в деталях, но моя нынешняя техника разработки не кардинально ведь отличается от того, что люди делали раньше. Просто больше думаю наперед, использую переменные, calc, современные единицы измерения.

@aswarriorr 3 месяца назад

@@AleksanderLamkov вот я об этом и говорю ,что все в основном используют другие методы ,без переменных и root. Начиная со шрифтов ,в основном через HTML ссылку вставляют ,сброс стилей через reset или narmolize. Я новичок и многое для меня еще не понятно ). Вас смотрю ,так как вы реально работаете ,а не просто впариваете курсы . Респект вам.

@user-do3or8jr7v 2 месяца назад

Вы ширину и высоту логотипа прописали прям в html а не в css, интересно, чем это обусловленно. Нет ли риска в последствии забыть где записаны параметры величины?

@AleksanderLamkov 2 месяца назад

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

@evgenmarfel 2 месяца назад

Есть плагин для фигма, который умеет показывать все шрифты и их начертания из макета. Ускоряет определение шрифтов . называется Font Fascia

@AleksanderLamkov 2 месяца назад

Привет! Как показывает практика, он схватывает все шрифты, в том числе шрифты из скрытых дизайнером слоев и те, которыми, к примеру, подписываются страницы макета. Чаще всего дизайнеры оставляют много мусора в макетах и плагин соберет всё что нужно и не нужно. Но если макет сделан аккуратно и подчищен от лишнего, то да, плагин крут. В любом случае, спасибо за комментарий!)

@evgenmarfel 2 месяца назад

@@AleksanderLamkov вот и идея для нового плагина, который показывает шрифты из открытых слоев

@27FeetUnder 6 месяцев назад

Добавлять cursor: pointer для конопки добавлять не нужно, это некорректный ux Весь остальной интернет, обозначивающий поинтером кликабельные элементы: а чё всмысле?

@AleksanderLamkov 6 месяцев назад

Да, на большинстве сайтов до сих пор делают такой курсор, но это не значит, что так нужно :)

@27FeetUnder 6 месяцев назад

Включив душнилу интереса ради полез в гугл и обнаружил, что такая дискуссия действительно имеет место быть. Принимаю позицию автора, в спецификации w3c действительно указано, что поинтер используется для указания ссылок. Но если посмотреть любой крупный онлайн-ресурс, например тот же ютуб, там будет использоваться поинтер для обозначения любых интерактивных элементов. На мой взгляд, ломать привычную пользователю логику только потому, что в старой спецификации так указано -- не самое правильное решение, да и наверняка такой гигант как гугл проводил тестирование такой мелочи)

@NeoCoding 3 месяца назад

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

@profesor2009 20 дней назад

Везде слышу что надо использовать препроцессоры а у вас css с переменными. Как понять когда что использовать? Говорят что просто css уже не используется

@AleksanderLamkov 20 дней назад

Привет! Этот мастер-класс для новичков, в следующем уже используется препроцессор стилей Sass: ru-vid.com/group/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU

@HungerGames911 5 месяцев назад

Подскажите , актуально ли верстать блоки используя position в наше время?

@AleksanderLamkov 5 месяцев назад

Привет! Свойство position (и свойства top / right / bottom/ left) всегда предназначались для конкретных ситуаций: расположить элемент относительно одного из родительских элементов или же относительно всей страницы. Применять эти свойства нужно максимально осознанно, так как они выбивают элементы из потока документа. Я могу предположить, что такой вопрос возникает из-за свойств position, top, left, right, bottom, которые показывает Figma в правой колонке при анализе любого блока. Если так, то нет, на эти свойства мы никогда не обращаем внимания, в реальной верстке на уровне кода такое не используется.

@HungerGames911 5 месяцев назад

@@AleksanderLamkov просто с помощью position легче как то размещать эл-ты зная сколько отступ от левого края от верха, например. С помощью флексов так же нельзя задать вроде-бы, что бы допустим логотип расположить с определенно заданными отступами

@AleksanderLamkov 5 месяцев назад

Не стоит такое через position делать, лучше при необходимости задавать внутренние отступы padding родительской обертке.

@HungerGames911 5 месяцев назад

@@AleksanderLamkov смотрите такой пример: у нас есть блок шириной 1000px , в нем есть допустим 1 логотип сверху блока, но он не по центру, что бы использовать justify-content, а допустим от левого края 400px располагается, вот как такой вопрос решить с помощь флекса, что бы не использовать position, потому что флекс поможет допустим по центру расположить, а паддинг 400пх тоже врядли сделаешь. Подскажите пожалуйста, если не сложно

@AleksanderLamkov 5 месяцев назад

Любая верстка должна быть прежде всего адаптивной и если на макете мы видим элемент шириной 1000px и внутри него в 400px от левой границы располагается другой элемент, то я бы задал для этого внутреннего элемента margin-left: 40%, что будет равняться как раз 400px. Но такая ситуация в принципе очень редко может возникнуть. Если на уровне кода вместо костылей с фиксированными значениями в ущерб нескольким пикселям смещения можно использовать изящное решение в пару строк, то стоит этим воспользоваться. Макет нередко бывает кривым и неидеальным, где начинающий дизайнер "на глаз" делал центрирование элементов, но это ведь не значит, что на уровне кода нам нужно повторять все его ошибки.

@user-do3or8jr7v 2 месяца назад

Теперь, как известно, функция под кнопкой dev в figma стала платной. Есть ли альтернативные средства измерения растояния между элементами?

@AleksanderLamkov 2 месяца назад

Расстояния можно и в режиме дизайнера увидеть. А для конкретных CSS-свойств - плагин Inspect Styles.

@user-gq4si5jp2d 6 месяцев назад

а почему нельзя экспортировать не код svg, а саму картинку в формате svg и потом использовать не код, а саму картинку

@AleksanderLamkov 6 месяцев назад

Потому что нам нужно иметь возможность влиять на цвет иконки через CSS. А это со статичным файлом-картинкой сделать без выкрутасов не получится.

@asifabbasov3801 4 месяца назад

container-padding-x это что означает?

@AleksanderLamkov 4 месяца назад

Привет! CSS-переменная со значением внутреннего отступа по оси Х, то есть по горизонтали, слева и справа, для утилитарного класса container. Этот класс используется для ограничения ширины контентной части и чтобы контент при сужении экрана не слипался с краями, нужно добавлять внутренние отступы слева и справа (padding-inline).

@asifabbasov3801 4 месяца назад

@@AleksanderLamkov спасибо

@user-do3or8jr7v 3 месяца назад

Вы начинаете с css а не с html -разметки, как большинство в видео. В чём преимущество?

@AleksanderLamkov 3 месяца назад

В любом проекте требуется нормализация свойств, глобальные свойства, переменные. Удобнее подготовить всё это заранее, в самом начале разработки на этапе анализа макета, чтобы позже к этому не возвращаться.

@user-do3or8jr7v 3 месяца назад

@@AleksanderLamkov Спасибо. Много того, что не дают на других видео-уроках . Интересно.

@flowcsgo804 11 дней назад

Александр, почему в начале почти каждого видео у вас красные глаза?( Берегите себя🥺

@AleksanderLamkov 11 дней назад

Многочасовые съемки под ярким холодным светом так влияют 🥲 В последнее время решил записывать основную часть видеоуроков (сами скринкасты) без вебкамеры, теперь моим глазам гораздо комфортнее 🙂

@alexander_stark 6 месяцев назад

Совершенно отлиичащийся подход в CSS.. мало кто использует рут в вертке для новичков...

@AleksanderLamkov 6 месяцев назад

Возможно. Но на канале есть материалы по этим темам, поэтому новички не должны запутаться :)

@aswarriorr 3 месяца назад

Видео урок все же для середнячков ) . Не пойму ,почему добавляю svg (полосочки бургер) они у меня не отображаются . Все делаю как на видео ( .

@AleksanderLamkov 3 месяца назад

Скорее всего не так выгрузил иконку из макета. Убедись, что перед импортом выбран нужный слой, как на видео.

@AleksanderLamkov 3 месяца назад

Или скинь текущее состояние проекта архивом в телеграмме t.me/friendlyFrontendChat, я тебе помогу.

@AleksanderLamkov 3 месяца назад

Ну а про уровень необходимой подготовки перед этим мастер-классом - он соответствует моему контент-плану на канале, а именно - всем предыдущим видео, включая курсы HTML и CSS. Если смотреть всё последовательно, то особых сложностей возникнуть не должно.

@aswarriorr 3 месяца назад

@@AleksanderLamkov у меня отдельно ни как не выбираются эти полоски ,только целиком с кругом и квадратным серым фоном 🥴. Выбирать если что отдельные элементы в фигме,умею .

@aswarriorr 3 месяца назад

@@AleksanderLamkov сейчас кину. Благодарю

@user-do3or8jr7v 3 месяца назад

Какая польза скачивать шрифт а не подключать ссылку с гугл? исключить риск, что гугл рухнет?

@AleksanderLamkov 3 месяца назад

Привет! Чтобы не грузить ничего лишнего, чтобы грузился лишь нужный woff2 формат файла.

@user-nn9qy1yh3s 2 месяца назад

я сразу в ступоре - я нашел 5 шрифтов , почему без плагина на поиск шрифтов ?

@AleksanderLamkov 2 месяца назад

Потому что плагин находит все шрифты макета, в т. ч. из скрытых мусорных слоев, который оставил дизайнер пока творил. К тому же в этом макете аж 9 лендингов в одном месте, так что неудивительно, что найдено 5 разных шрифтов.

@user-nn9qy1yh3s 2 месяца назад

@@AleksanderLamkov этот макет открывал в отдельном файле без других макетов, и если внимательно потыкаешь по тексту то увидишь 5 разных шрифтов

@AleksanderLamkov 2 месяца назад

Можешь подсказать какие именно? У меня сейчас нет возможности посмотреть макет детально с телефона. Я находил только два семейства - Heebo и Yantramanav. Heebo в двух начертаниях - light (300) и bold (700), а Yantramanav только bold (700). Может там новые появились? Автор макета мог что-то обновить.

@user-nn9qy1yh3s 2 месяца назад

@@AleksanderLamkov (div.gmnoprint , div.gm-style-cc - два элемента , div.gmnoprint ) Roboto Regular и Medium. Это на карте внизу мелким шрифтом - совсем незаметно, и вверху два слова Map + Satelite. Есть еще иконочные шрифты - но то другая история. Мне очень понравилась подача материала, сделал скорость воспроизведения чуток медленнее и все стало хорошо )))

@AleksanderLamkov 2 месяца назад

Шрифты с карты не нужно учитывать точно. Слой карты все равно выгружается как картинка. А иконочный шрифт - архаизм, нужно иконки делать как .

@ManOzbilis Месяц назад

Жизнь выглядит прекрасно до момента когда начинаешь изучать @media 😢 Когда уже не понимаешь что лучше использовать vw px или %. Если есть совет какой нибудь, буду очень благодарен. Не могу понять где что лучше использовать

@AleksanderLamkov Месяц назад

Привет! В большинстве случаев можно оперировать связкой из width: 100% + max-width: 1000px, где 1000px - ширина элемента в десктопной версии макета. А при сужении экрана следишь за тем, чтобы всё смотрелось органично, и, если начинает выглядеть не очень, начинаешь либо ограничивать в % ширину текущего и/или соседних в ряде элементов, либо банально перестраиваешь элементы из одного ряда в колонку (либо уменьшаешь количество колонок, если речь изначально идет о многоколоночной грид/флекс-сетке).

@ManOzbilis Месяц назад

@@AleksanderLamkov Спасибо за ответ

@alexander_stark 6 месяцев назад

Эммм.. 2:10 фонт фасция ? так же проще .. не?

@AleksanderLamkov 6 месяцев назад

В данном случае этот плагин не поможет, только запутает, так как покажет десятки других семейств, используемых в макете. И зачастую в макетах дизайнеры не подчищают «экспериментальные» слои, а скрывают, но FontFacia покажет данные без разбора, в т. ч. и по этим скрытым слоям.

@laff1th 3 месяца назад

24:38 почему cursor: pointer на кнопке это некорректный UX, когда почти все кнопки в вебе имеют это свойство?

@AleksanderLamkov 3 месяца назад

Вот тут можно почитать про это: medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b

@luckytima2315 2 месяца назад

Ох не знаю братик сходи на канал от 0 до 100 и посмотри что такое уроки для новичков, а не спидран "делаем так и вот так"

@AleksanderLamkov 2 месяца назад

Понимаю, может быть сложнее, чем у большинства. Делал скорее для новичков моего канала. Я ведь до этого мастер-класса на канале выпустил кучу контента, где я о каждой детали говорил, которая есть в МК. Но я учту критику, благодарю! Планирую сделать очередной мастер-класс, но без усложнений, которые были здесь.

@luckytima2315 2 месяца назад

@@AleksanderLamkovне обижайся братик, в целом мне зашло, у тебя показаны вещи которые другие не показыают в видосиках для новичков

@morismustanger6095 5 месяцев назад

а вот для чего это

@AleksanderLamkov 5 месяцев назад

Что именно?)

@Mr.Bellamy 6 месяцев назад

Если честно, то непонятно зачем качать шрифты с гугла и тянуть в бандл. Если шрифт популярный, то он с высокой вероятностью уже есть закэшированный в браузере. Гугл фонт кэшируется на год вроде. Здесь конечно не самые популярные шрифты, но все же. Выгода такого подхода очевидна. Это и применимо к куче библиотек, типа бутстрапов, jquery и т.д. Чем больше сайтов будет пользоваться загрузкой с гугла, тем выгодее это будет для всех) Если еще немного упороться в оптимизацию выгоднее всего подключить шрифт не через css,а через линк в html, ближе к началу файла, чтобы браузер при загрузке html и парсинга его уже поставил шрифт на прелоад. (если его все же не будет в кэше). Первый пакет данных 14кб, хватает на весь с лихвой. В итоге когда загрузится весь остальной контент для отрисовки страницы, то шрифт уже подгрузится скорее всего))

@AleksanderLamkov 6 месяцев назад

Спасибо за развернутый комментарий! Да, тема подключения ресурсов через CDN жива, но работая последние годы в продуктовых командах, слышал множество мнений против публичных CDN по множеству причин: - публичный CDN сервер нам (компании, для которой мы разрабатываем веб-приложение) не принадлежит, для некоторых бизнесов это бывает важно; - мы не можем повлиять на параметры кеширования, только согласиться с существующими; - приходится надеятся на то, что загружаемый с CDN ресурс достаточно популярен и у ЦА с бОльшей вероятностью уже закеширован, а иначе первоначальная загрузка ресурса будет зачастую дольше, чем могла бы, будь ресурс загружен с оригинального домена нашего веб-приложения. Но о поводу подключения шрифта через link preload - да, шикарный метод, но для многих приложений будет через чур... Редко ведь бывает, когда шрифт настолько важен, что без него всё развалится. Разве что вспоминается иконочный шрифт font-awesome, но это что-то совсем нерелевантное в современной фронтенд-разработке :)

@user-zw7tc6lv9z 6 месяцев назад

если видео для новичков то объяснять нужно подробней

@AleksanderLamkov 6 месяцев назад

Привет! А что конкретно показалось непонятным? Вообще, верно, видео рассчитаны для новичков, но для тех, кто прошел мои два вышедших ранее на канале курса по HTML и CSS, где я подробно объяснял многие моменты.

@user-zw7tc6lv9z 6 месяцев назад

@@AleksanderLamkov для человека который сверстал несколько макетов то всё достаточно ясно, но если кто то только начинает верстать то можно было бы немнрого остановится на функции calc, на использовании svg, на вычислении line-height, показать как на макете изменяется расположение элементов при использовании каждого свойств display: flex, а также немного остановится на работе с псевдоэлементом aftert, даже если об этом есть уже видео то можно хотя бы в пару словах напоминать о том как работает то или иное свойство

@AleksanderLamkov 6 месяцев назад

Понял, учту подобное в дальнейшем, спасибо!

@smotritelyoutube 6 месяцев назад

@@user-zw7tc6lv9zэммм.... Автор же сказал, что макет хоть и для новичков, но предполагает самые элементарные знания html и css. А перед этим, автор выпускал видео и по html, и по css, и он сказал, что перед просмотром, ты можешь ознакомиться с ними и тогда не будешь задавать вопросы что такое calc, clamp, flex и другое, так как автор обо всем этом говорил и рассказывал в своих предыдущих видео . Поэтому, если вы посмотрели обо плейлиста (css, html), то вопросов возникнуть не должно, даже если верстаете 1 раз)

@egorrublev5529 6 месяцев назад

@@user-zw7tc6lv9z это же вроде всё есть в двух курсах на данном канале.