Верстка сайта с нуля из Figma для начинающих #5
![[DELETED]](http://yt3.ggpht.com/ytc/AIdro_lPzwNJIwW1k0s0Pq5m5acZMdMZ1WQ2bze8T2FvmSmc-8rjJdg=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 10 фев 2025
- Скачать материалы урока - bit.ly/3YIaWVM
Пятое видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma для начинающих. В нём мы продолжим вёрстку десктопной версии сайта с использование css grid layout и разберёмся с некоторым особенностями устройства макетов и отступов в figma.
Спонсоры канала имеют доступ к готовому коду и многим другим бонусам! Подробнее:
/ @steptoweb503
Ссылка на макет - www.figma.com/...
Паблик ВК - steptooweb
Паблик телеграм - t.me/step_to_web
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
Поддержать проект финансово:
ЯД - 410019809390277
Bitcoin - 1GgYeUxciUhsnorN1rYWXBuBa6L9fjzXCK
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой.
Пожалуйста, перейдите к списку всех просмотренных макетов в фигме (drafts), выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
Скрин не открывается
@@АнтонГоряйнов-ю3д вроде открылся у меня. Ну там просто показано, где кнопка duplicate живёт
Поддержал проект финансово, надеюсь, что кто то увидит сообщение и последует примеру. Очень грамотные уроки. Такие порой и на платных курсах не встретишь.
Подтверждаю, смотрю по второму кругу пока верстаю второй одностраничник. Грамотно, без воды, без тягомотины, нет необходимости проигрывать на ускорении (как часто бывает), сразу приучают к БЭМ.
Наткнулся случайно на данный курс. Автору респект!!! Смотрится не отрываясь от экрана. Подробно все объясняешь, аккуратный код, без всяких препроцессоров, разные технологии css (grid, flexbox). Для начинающих идеальный курс! Ещё и макет открыт. Моё почтение!
Большое спасибо. Когда-то давно, будучи программистом, получил моральную травму, сверстав пару страниц по макету в фотошопе за 5 дней. К счастью тимлид понял, что "я не люблю верстать" и больше мне таких задач не давал, а нанял верстальщика на проект. Сейчас, глядя как это классно делается с нормальными инструментами, решил таки доточить себе этот скилл.
Отличный видеокурс! Спасибо!
Наглядно демонстрируется, что из себя процесс верстки вообще представляет.
Пожалуйста)
как хорошо смотреть, когда все выпуски вышли, особенно когда слышу, что выпуски долго не выходили :-D
15:35 нужно включить решетку Shift+R, слева "оторвать" вертикальную красную линию и подвести к краю картинки верхнего блока (info), затем выделить нижний блок (info), подвести курсор к вертикальной красной линии и нажать alt. Появится искомый размер в пикселях
Спасибо за доступный урок продолжайте в том же духе!!!!
Почему нету 100500 лайков? Вы супер контент делайте!)
Ура, наконец-то я понял, зачем восклицательный знак после решётки! Да, я лентяй, гуглить было лень, спасибо инструктору.
Спасибо Вам большое, такой приятный голос, так хорошо объясняете, у Вас просто талант! Вся информационная каша в голове раскладывается по полочкам. Делаю всё вместе с вами, чтобы отложилось в голове. Благодарю!!!
Спасибо!
Спасибо! Только не пропадай) Ждём новых видео!!!
Зима близко - ролики будут выходить чаще :)
@@steptoweb503 Супер! Спасибо!
@@steptoweb503 это хорошо!
P.S. "Зима близко" - классный мем. 😃👍
спасибо папаша за качественные бесплатные уроки, а также за качественный микрофон, твой голос приятен
Пожалуйста, но почему папаша то?)
О, долгожданное продолжение. Спасибо! 👍
Всегда пожалуйста!
Прошло 2 года как дела? Как стал верстальщиком сотого уровня?)
@@johnyxmelev5475 прошел год, а у вас как дела?)
Огромное-преогромное спасибо! Целый день мучила первые пять видео, разбирая их на молекулы. Отличный контент. А теперь, пожалуй, пора спать...
Пожалуйста! :)
В следующих выпусках интересно было бы увидеть добавление js скриптов для верхней менюшки. А ещё хотелось бы посмотреть, как делается плавное проявление блоков при прокрутке страницы.
Хедер точно будет :)
Что вам было бы интересно видеть в следующих выпусках?
что то оч сложное) пока все просто =)
@nikkyy177 Пожалуйста, приятно читать)
адаптивность
Такой-же выпуск, только сайт что-бы был раз в 10 тяжелее. А вообще выпуски какие-то по верстке уже есть? Может на другом канале.
Очень интересно и доходчиво! Очень большое спасибо за материал!
Пожалуйста!
одно из лучших конструктивных видео!
Бро ,спасибо тебе огромное. Несколько раз начина на старом лап топе но ничего не получалось. Но как видишь уже на пятом уроке.
Здорово!
Большое спасибо за видео! Отличный видеокурс по верстке!
Пожалуйста!)
13:58 нужно нажать контрол и мышью наводить на второе фото.
15:31 выбрать весь блок с туром )
Автор большой молодец!
хороший урок, но когда задаем блоку tours__info padding-left: 47px то тогда и у выше блока образуется padding-left, надо не забывать убрать его через .tour_info:last-child{
padding-left: 0;
} это совет для тех кто сейчас проходит курс
Артем спасибо! Очень хорошо учится по твоим урокам.
Рад, что полезно :)
13:23 просто надо щёлкнуть по маске на панели слоёв (под image находится mask), и от него измерять отступ до верхнего изображения, либо просто скрыть изображение нажав на глаз возле него, тогда останется только маска и от неё можно спокойно посмотреть отступ, в данном случае это 77px, и вообще совет верстальщикам, изучите фигму, я сам вёрстку начал изучать только для того что бы понимать как лучше делать дизайн в фигме, что бы делать хорошие макеты, которые верстальщик сможет верстать её без проблем
15:37 щёлкаем на Prefecture & Neighborhood Section на панели слоёв и с зажатой ctrl наводимся на заголовок текста, отступ 47px
Спасибо огромное!!! Все понятно и интересно!!!
Пожалуйста)
Дуже круто. Дякую
Отлично! Спасибо большое!
Как всегда отличное видео!
Мне кажется, безопаснее будет, если не прибивать вниз кнопки "SEE MORE", а вместо этого, например, стандартным образом жестко задать карточкам высоту и скрывать избыточный текст через overflow: hidden, а на ховере, фокусе, эктиве показывать его. Иначе неразумные контентмейкеры могут напихать столько текста, что займут им половину экрана и вообще утопят кнопки вниз.
Наверняка вы сталкивались с таким чудом :)
Спасибо огромное 😊
Отличный видос. Мне нравится.
Спасибо) отличный курс)
ништяк, полезные штуки)
15:20.
Лайфхак: нажми на текст "Featured Neighborhood: Kyoto’s Arashiyama", зажми левый ctrl и наведи курсор мыши на картинку сверху. Вот тебе и расстояние получится.
По поводу расчетов...Что бы не считать, рисуй простую линию сам и смотри сколько она px.Потом через ctrl+x возвращай как было.Удачи)
Супер, большое спасибо))
45:54 - вообще круто было бы реализовать скрытие текста, превышающего заданное количество символов, не пришлось бы так мучиться)
лайфхаки на 12:30 и 15:30 измеряются с зажатием Ctrl. Правда я не понял с какой последовательностью надо нажимать Ctrl и кнопкой мыши. Играл и размеры вылезли как то.
А ещё, в правом верхнем углу где масштабирование, там есть outlines и показаны все слои.
В конце кнопки подгонялись под текст. Если он увеличивается, то кнопки хором отъежают в ряд. Хотел увидеть по другому. Если текст увеличивается, то после какой то строчки, остальная часть пряталась, и на границе скрытия можно сделать эффект полупрозрачности. И еще чтоб там в центре стрелочки были, когда нажимаешь на них, выезжает остальная часть текста. Но на это css наверное не способен.
очень круто, спасибо!
Кстати благодаря твоим курсам, понял где верстальщики ошибаются и как отклоняются от макета. Заметил, что на значительные, но неприметные детали, не обращают внимания. Если есть вопросы по Figma, как узнавать/проверять размеры, правильно вытаскивать картинки и облегчить работу, могу рассказать.
Ну, не всегда детали упускаются. Зависит от задачи.
@@steptoweb503 Я написал не от того, что верстальщики плохие, и не правильно делают, я глянул оригинал верстки, и ту, что разъясняете Вы. Верстка очень сильно отличается от оригинала, в отличии от Вашей. Понял проблемы Figma и масок, понял, где ошибается дизайнер и где ошибается верстальщик, что должен требовать верстальщик от дизайнера, чтобы ошибок было меньше, чем могло бы.
Проблема еще в том, что верстальщики не знают, как правильно использовать функционал программы, чтобы проверить размеры. По идее, если макет создан правильно, Вам даже не нужно думать, сколько контейнеров делать, все по умолчанию можно глянуть в Figma. В ней можно увидеть все контейнеры, которые также показывает код элемента в браузере.
А так просто решил предложить поделиться опытом и, если были бы какие-нибудь вопросы, постараться ответить на них
@@steptoweb503 Кстати говоря, нашел пост верстальщика, в котором он осуждал Figma и рассказывал о ее проблемах. В некоторых случаях я согласен, но в некоторых не совсем. В большей части, оказалось, что проблема шрифтов стоит достаточно остро. Было бы хорошо, если бы можно было экспортировать шрифты прямо из Figma. И правильно задавать контейнер текста в Figma для отступов в верстке. Проблема в margin-bottom по большей части. На протяжении всех роликов Вы часто неправильно задавали отступ, от чего были значительные расхождения. Но и дизайнер косячил не мало) Макет перенесен в принципе верно, каких- то значительных проблем я не обнаружил вовсе.
@@Filimok Что ж, пиксель перфект сделать можно, но в данном случае это не было нужно) Я показывал основы верстки макетов и взаимодействия с Figma, поэтому расхождения допускаются
@@Filimok спасибо)
Лайк не глядя спасибо большое)))
Спасибо!
Спасибо!
44:30 флекс дикрейшн коламн + марджин авто 0 0 0 для прибития кнопок к низу
Спасибо за ваш труд!
На какой микрофон вы записываете голос?
Искал золото, нашел алмазы.
Молодец, жалко только что канал забросил ! Удачи )
Грид очень интересное свойство. На своей ошибке разобрался как оно работает, в видео очень мало отведено времени для обьяснения этого свойства. Так и не понял что делает 1fr
А так, спасибо, много нового научился за пару дней просмотра твоих видео.
На канале есть целый курс по гридам :) Только видео про gap устарело
Спасибо.
10 из 10,спасибо !
Добро пожаловать ;)
Всё очень доступно рассказываешь! Спасибо!
Вот у меня только вопрос пока один - у меня иконки в Benefits of Odigo срезало. Это может быть из-за того, что на ноутбуке разрешение не такое, как у тебя на мониторе? )
Спасибо за отзыв! Да, там нужно см высотой поколдовать и задать min-height
Подскажите, дошел до этой части и заметил сейчас, что у меня блок Benefits наехал выше и прижался к низу кнопки Search, перекрыв поля ввода, что может быть, как исправить лучше? Все стили повторял в каждом видео
даже не так, уточнение: при масштабе 80% в Хроме, в котором работал обычно показывает все корректно и поля ввода видны и отступ есть от них до блока Benefits, но стоит сделать масштаб 100% и блок Benefits поднимается выше под самую кнопку
А можете объяснит точнее как открыть макет у себя отдельно
Чувак ти крутий)))
Большое спасибо вам за уроки! Вы на многое мне пролили свет и весьма понятно все объяснили, буду смотреть и другие ваши курсы!
P.S. Интересно, а кто-нибудь переводил текст под карточками на русский )))
Да, там уже много писало людей про это)
28:21 у меня почему то тень виходит за картинку на уровень пространства между гридами в чем проблема?
та же фигня, разобрался?
@@miyamura_izumi_yuji нет
если кто ещё столкнулся: в моём случае помогло bottom у card_stats стиля сделать не 0, а 3px
но это, конечно, костыль
я так понял, нужно вообще всю структуру блоков этих карточек переделать, чтобы данную проблему решить
Блок tours сделал на флексах решил себя так сказать проверить на самостоятельность))))
Здорово)
Где кривое выделение в фигме, нужно навести на картинку, затем нажать CTRL, далее нажать на вторую картинку, в итоге видим точное расстояние между картинками.
Круто, спасибо!
45:10 align-self: start;
Очень долго пытался понять, что у меня за отступ посторонний между первой картинкой и текстом в блоке Tours. Так и не понял. Скачал урок, запустил, а с урока у меня тоже этот отступ показывает. В разных браузерах. Что-то видимо за два года в них изменилось.
у меня проблема, поменял местами описание и картинки в блоке tours, но почему-то картинка стала под описанием, а не справа от неё, почему так?
нужно перепроверить в html в какие div'ы помещаешь, пикчу нужно вытащить выше
чет я задолбался все это выучивать но как по мне легче просто написать в тетради пример кода и изобразить как будет выглядеть
26:29 создаем грид сетку топ мест
Здравствуйте. Не применился стиль .tours_tour. Текст остался внизу, под картинкой с храмом. Может, в Edge не работает? Подскажите, кто знает.
Рекомендую разрабатывать в хроме
Спасибо за вашу работу) Есть вопрос, я правильно понимаю, что когда вы вырезаете картинку из блока Today top places to visit, то она уже с полосой внизу, это ведь не чистая картинка, к уже применены маски, тогда зачем её создавать? Это моя или ваша ошибка? Спасибо за ответ)
Не очень понял, что создавать.
для заголовков внутри секций ты не используешь тег header сразу после открывающегося тега section, можешь пожалуйста вкратце объяснить нужны ли они вообще по семантике или нет. Я обычно делал так:
а ниже уже картинки, контент, ссылки и так далее.
Я думаю в данном контексте лучше использовать заголовки
Привет. Столкнулся с интересной проблемой - не работают ссылки. Ссылки работают только в Header start. Остальные мертвые. При наведении на них мышью, курсор не меняетс. В Header start при наведении курсор с стрелочки меняется на руку. Остальные дохлые. Псевдоклассы также не работают. В чем может быть причина? Голова уже понемногу закипает.
Видимо вы не указали атрибут href :)
@@steptoweb503 :( Увы, указал - href"#!". Такое ощущене, что для main ссылки не работают. Спасибо за ответ. Буду рыть.
Проблема в header. Понял, когда подключил js. У меня background менял цвет на всем лендинге. После того, ка закомплементировал header, ссылки стали работать. Рою дальше.
кстати а есть ссылка на данный редактор кода?
я кстати так и не особо понял почему тайтл прибился влево если там написано право авто и 0 0 0 а кнопку к низу слева и при этом написано вверх авто а потом 0 0 0( если левый ноль и нижний 0 я могу понять но как быть с правым нулём?)
Это особенность работы флексов. Из того, что вы описали, видно, что никакая логика работы не нарушается)
первый 0 - это топ
второй, то есть справа, auto - означает, что будет прибиваться в противоположную сторону
третий 0 - это боттом
четвертый 0 - это лефт, который может быть и 10 пикселй, и 20, или тоже авто) Поэкспериментируйте и поймете
@@steptoweb503 о как
Не понятно в конце. Кнопкам дается margin:auto 0 0 0. Получается сверху авто, справа 0, снизу 0, слева 0. Но почему кнопка не прижимается к правой стороне, там ведь 0?
По умолчанию все располагается слева направо :) Чтобы она прижалась вправо нужно сделать слева auto
Делаю по Вашим видео макет, у меня он не совпадает с pixel perfect. У вас то же не совпадает с Pixel Perfect, по крайней мере, на моем мониторе. Вообще, это для меня большой геморрой, сделать так, чтобы совпадало. Насколько актуальна вообще вёрстка по pixel perfect в реальных задачах, или в большинстве случаев он не обязателен? Я до этого учился на онлайн курсах, там итоговая работа должна быть сделана по pixel perfect, я провалился, т.к. не смог подогнать пиксель в пиксель под макет.
У Вас топовый контент, реально очень понятно и просто объясняете. В тёмном царстве лучик света, так сказать )) спасибо!
Привет! Ни в одном из мест, где я работал, не требовался pixel-perfect :) На мой взгляд это практически не актуально и никому не нужно
Здравствуйте, не знаю ответят или нет. Вот там при увеличении контента в одной из колонок, другая колонка тоже увеличила свой размер, хотя контент там не изменялся. Ты сказал, что это стандартное поведение GRIDa, но как сделать чтоб такое не происходило? Чтоб при увеличении контента в одном из контейнеров он не растягивал за собой и другие?
Зависит от ситуации. Но в целом это всё связано с align-items и align-content, если мы говорим про вертикальные выравнивания
@@steptoweb503 сталкивался с проблемой во флексах, когда я добавлял текст, соседний блок тоже увеличивался в высоту, и это было заметно, потому что, бэкграунд был другой. В общем я не смог решить эту проблему.
@@АлиР-з1к во флексах просто нужно прописать флекс контейнеру align-items: flex-start
Добрый день. Всё делаю по инструкции и html и css код совпадают. Но при многократном обновлении страницы изображения прыгают вверх-вниз. Как это исправить? Это ошибка в коде?
Не понимаю проблему, но прыгать ничего не должно. Скачайте готовый код и сравните)
14:30
Что то все пошло совсем не по размерам, мне пришлось для изображений конкретно указать размеры и сразу в 1 строке появился тот отступ в 42px
но для второго блока решил сделать отдельный класс info и уже конкретно для него делать паддинг. Думаю в следующих уроках это сильно помешает...
Вы можете скачать материалы урока и свериться
у меня такая проблема что 3 кнопки see more с верхних карточек слипаются с нижними фото карточками, да и в целом у меня всё кажется большим, объясните новичку в чём дело
Чтобы что-то объяснять, нужно увидеть код. И вы всегда можете скачать готовый код из описания и свериться :)
Возникла неожиданная проблема, текст тайтл по "top card stats" выходит вверх и стоит рядом с тайтл "benefits", но если убрать position: absolute; то тогда она возвращается вниз, под картинкой top cards
такая же проблема , решил как-то?
Я новичок и серия роликов мне очень нравится) Только не лучше ли немного по-другому маргины делать? Вместо того что бы для каждого элемента блока прописывать mgb, прописать :not(:last-of-type) и туда уже прописать mgb. А для всего блока указать тот mgb, который в Фигме, без вычитания? Я новичок и мб глупый вопрос но всё же. (21 минута)
Не вижу на 21 минуте ничего, связанного с марджинами, поэтому не совсем понял вопрос
41:45 удивился что вы сказали сайтама
почему не работает grid template columns
Много причин может быть
18 минута 2 блок с местами (6 картинок)
Здравствуйте. Я хотел бы спросить. Как в нескольких строках одновременно писать или в нескольких строках одновременно удалять?
Нужно зажать alt и проставить курсор (если вы работаете в vscode). Работает и на винде и на маке
@@steptoweb503 У Вас есть список всех этих комбинаций? Emmet это не совсем то, мне так кажется.
@@marklevine5721 Я видимо не совсем понимаю о чем речь - каких комбинаций?
@@steptoweb503 Я не знаю как это правильно назвать, чтобы Вас не запутать. Горячие клавиши или не совсем. Но суть в том что как называются комбинации, горячие клавиши или как там ещё есть, например, то что делает групповые табы в нескольких строках, вот как Вы отвечали одновременно писать или удалять. Я нигде не встречал этого. Emmet я видел, но мне кажется, что это не совсем про него. Смотрел видео какое то, и видел какие клавиши нужны для той или иной ситуации сразу не записал, а потом позже уже не смог найти. Возможно у Вас больше опыта и Вам знакома эта ситуация?
@@marklevine5721 может быть prettier?
Обратите внимание на перевод описания туров. Пасхалочка подъехала.
Спасибо за урок. Я не очень знаком с grid, поэтому параллельно смотрел всякую документацию. Вот здесь developer.mozilla.org/ru/docs/Web/CSS/grid-gap нашёл, что свойство grid-gap устарело и его лучше не использовать. Насколько это правда?
Спасибо за инфу - действительно отменили в стандарте это свойство. Исправлю в следующих видео
@@steptoweb503 вместо display:grid можно использовать display: flex? и все делать флексами?, просто мы в одном блоке использовали флекс в другом грид. или может флекс не подходит под все? Я просто еще не понимаю что когда использовать)
@@mykolasamchuk8513 Можно и флекс)
Курс отличный, но почему гриды, а не флексбокс? Или флексбокс уже устарел?
Не устарел вовсе, просто по гридам меньше информации в сети, вот и решил использовать их
Снова здравствуйте, пишу, так как уже пытался сам исправить и нагуглить но не получается карточки в "топ", которых у нас 6, не выстраиваются в ряд, а идут все в колонку вниз, в сетке при просмотре кода в браузере показывает, что должны встать в ряд, а пада.т все равно вниз, вот ссылка на проект на гугл диск, там вся папка. Заранее благодарен))
drive.google.com/open?id=19fkiy9qbJGD7inJsCf9pgh-nvirlhjp5
У вас два разных контейнера для карточек - нужно их складывать в один. А так получается, что это два разных блока и само собой, что карточки будут лежать каждый в своём :) prnt.sc/ry9rrn
@@steptoweb503 Да, мой турник, спасибо большое!!
@@maxzhukov5525 получилось не плохо
У меня с 33:52 до 34:45 текст и ссылка поехали вправо и по grid'ам расплылось как на картинке. Как исправить? Делал всё точно как на видео.
d.radikal.ru/d01/2005/f0/0299bd6ab81f.png
Там где ссылка, мышка реагирует как будто там ссылка размером с картинку как первая колонка с картинкой.
Вот как бы кнопка
b.radikal.ru/b40/2005/57/61fc4b30ec9a.png
Вы можете скачать материалы по ссылке в описании и сравнить свой код с исходным
такая же проблема была, просто перемести top card desc и top card more в 242 строку и все ок
Предидущие картинки и карточки сделала с трудом, а эти как по щелчку
почитайте пeревод всех подписей. Вот кому лень - "Прыгни с балкона на голову незнакомца. Гоняйся за клубком ниток, прячься, когда придут гости. Будучи великолепной с поднятым животом, я могла бы пописать на это, если бы у меня были силы, но под кроватью, чтобы напасть на ребенка, откройте дверь,"
Да уж, я даже не задумывался переводить это
Автор видео, не пора ли вам, наконец, просто выключить Punto Switcher? :)
У меня его нет
В карточках лайки и комменты не кликабельны, они бэкграундом. Эх (
Почему в начале видео две длинных рекламы? Я понимаю, что автору видео, человеку очень талантливому, надо зарабатывать на своем труде. Это правильно.
Но как же это грустно осознавать, что и интернет порабощен рекламой! Я бы лучше автору денег заплатил, чтобы ему не пришлось унижать себя и нас назойливой платной рекламой. Но понимаю, что людей, готовых за это платить - немного.
Два года канал существовал без рекламы - я только три дня как включил. Странно, что их две. Сейчас покопаюсь в настройках - я хотел не больше одной, которую можно скипнуть
@@СергейКудаев-в6ц Ух ты, спасибо за отзыв! Рекламу я перенастроил - теперь роликов, которые нельзя пропустить, не будет. Это, оказывается, было включено по умолчанию. А что вы преподаете? С вами можно связаться?
@@steptoweb503 Можно. Мыло: ksi55@rambler.ru Это моя мусорная почта, но все входящие письма я там внимательно проверяю :) Я немало чего преподавал, но подробности тут не хотелось бы светить, надеюсь вы меня понимаете.
Я не спец по верстке но мне страшно смотреть на эту верстку. Я понимаю что макет и все такое но зачем указывать столько фиксированных значений падингов, марджинов и ширин? Человек который рисовал макет накосячил в миллионе мест и это все было благополучно перенесено в верстку
Если бы я начал объяснять все ошибки дизайна, почему они существуют и как и фиксить, то тайминги видео растянулись бы надолго.
И, я вас удивлю, но практически ни один дизайнер не может сделать дизайн настолько корректным, чтобы вы без боли могли использовать относительные величины для отступов и прочего