Верстка сайта с нуля из Figma для начинающих #3
![[DELETED]](http://yt3.ggpht.com/ytc/AIdro_lPzwNJIwW1k0s0Pq5m5acZMdMZ1WQ2bze8T2FvmSmc-8rjJdg=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 10 фев 2025
- Скачать материалы урока - bit.ly/3YIaWVM
Это третье видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma для начинающих. В нём мы продолжим верстать макет, глубже погрузимся в работу с интерфейсом figma и подробно разберём создание форм на странице.
Ссылка на макет - www.figma.com/...
Паблик телеграм - t.me/step_to_web
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой.
Пожалуйста, перейдите к списку всех просмотренных макетов в фигме (drafts), выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
а я думал у меня только эта проблема)
Скриншот был удален. Подскажи еще как можно склонировать проект он у меня только во вкладке recents
Спасибо! Не понимаю, кто там за что минусит: уроки просто нереально крутые уроки!
Благодарю)
просто с 1 раза от 50 до 80 процентов понятно но остаются вопросы но стоит посмотреть 3 раза как уже минимум 80 процентов понимаешь а то и 90-100 но вот мне понадобилось пересмотреть 4 раза)
Все подробно объясняется, а главное понятно для тех кто видит Figma в первый раз!!☝️😎
Давай так, с меня лайки, с тебя выход нового урока.
P.S. не хочется искать другие уроки, иду по этим , все понятно.
За лайк спасибо, но со временем сейчас беда - миллион проектов на работке. Я делаю выпуски как только появляется свободное время
Шикарные уроки! Не могу от них оторваться. А главное что все понятно до невозможности, полезно особенно для тех, кто только начинает свои первые шаги в верстке.
Сенкс!
Да ты крут, я не версталищик я делаю дизайн на фигме и я задался вопросом как верстают дизайн с фигмы который я делаю и теперь узнал
;)
На нормальных проектах, дизайнер и верстальщик работают плотно в тандеме. Волей не волей выучишь основы работы друг друга.
Очень здорово! Снова так много полезных мелочей помимо прочих важных вещей.
Спасибо!
Божечки, это самый лучший курс, настолько все стало понятно, первую зп 33% задоначу каналу!
Ничего себе :) Буду безумно рад, если этот курс поможет вам найти работу ;)
как успехи, получилось найти работу?
Отличная подача! Спасибо! ) Пытаюсь максимально всякие уроки учить, дабы в голове откладывалось, помаленьку откладывается)) правда когда сам пытаешься сделать сразу куча всего вылазит.. по урокам конечно повторять легко) но в любом случае узнаются и запоминаются вещи.. чем больше практики тем лучше - что-то да вспоминается потом уже и моменты всякие рассмотренные. подписался.
Большое спасибо за подробные и пошаговые уроки))
Пожалуйста
Спасибо, отличный материал. Автора приятно слушать!
Отлично, жду следующего урока. Вы мой семпай в вёрстке)
:)
Лучшиииииииииииииииииииииииий! То что нужно новичкам, пасиба:)))
Интересный контент, мне помогает заполнить некоторые пробелы в моих знаниях.
Это здорово!
Огромный респект за такую работу. Очень круто. Объясняете подробно и доступно. С меня лайк.
С каждым уроком все интереснее спасибо ждем новых выпусков)
Я посмтрю с начала с первого урока. На первый взгляд все круто.
C каждым уроком меньше просмотров и лайков. Но очень интересно! Надо дойти до конца! ;)
Вы справитесь!
Сложно заставить себя чем то заниматься. Люди начинают, но потом лень побеждает тебя. Я этот урок долго прохожу, постоянно отвлекаюсь.
@@besquait2882 Почитайте про клиповое мышление. В современном мире это самая частая проблема, мешающая продуктивному обучению.
@@steptoweb503 Спасибо, буду бороться с этим. Нашел несколько способов которые подходят мне.
Занимающихся - как шерсти на корове, достигших - как рогов у единорога. Китайская пословица.
На самом макете, мне кажется, подразумевалось слева от указать checkbox или radio, дабы для пользователя была возможность выбрать один из вариантов поиска, что больше ему походит.
Интересует ваше мнение.
Да, я тоже об этом подумал, но уже после того, как сверстал. Обычно, если в дизайне есть радио, то хотя бы один рисуется заполненным. А здесь этого нет, поэтому ввело в заблуждение
@@steptoweb503 Понял, принял)
Спасибо!
Спасибо за урок!
Пожалуйста!
Тег button по дефолту центрирует текст внутри себя, и для отступа текста в инпуте логично было задать text-indent: 42px;
А в остальном мне понравилось видео, лайк )
Верно, только иногда на проектах кнопки могут превращаться в ссылки, которые застилены под кнопки - поэтому на всякий случай не помешает :)
Спасибо, отличный материал.
Класні уроки! Дякую!
Хороший урок.
Пересмотрел ещё раз.
Ты именно лютый тип. Так четко объяснять это уметь надо ещё. Огромная благодарность
Спасибо за уроки!
Все супер!
Жду продолжения)))
Оно уже на канале :)
7:37 - создание формы при помощи тега
Все очень понравилось ) спасибо)
о я посмотрел первые 3 урока сначала 3 раза а теперь уже пересматриваю их 4 раз и теперь узнал всё что нужно из данных уроков ,все таки если внимательно пересматривать минимум 3 раза каждый урок то начинаешь многое замечать чего не заметил при 1 и 2 смотре) теперь я понял что верхняя форма хедера реально меньше вместе с интро на 200 пикселей просто этого сразу не видно было из-за бэкграунда) на 2 или 3 уроке понял тему на счет фикседа и интро секции например почему падинг 200 пикселей) а снизу уже марджин) правильно значит говорил виталий скрыпник что стоит посмотреть 1 и тот же интересующий тебя материал 7 раз и уже на 100 процентов можешь понять все что там есть
по больше бы такого контента
Ещё для input желательно указать outline: 0; т.к. некоторые браузеры могут отображать небольшую линию вокруг поля, когда input активный.
Аутлайны убирать не всегда хорошая идея ;)
прекрасно! талант преподавателя.
Если я не понял значит нету таланта у него. Был один блогер которого я понимал но я его нигде не могу найти.
Спасибо за верстку!
Спасибо большое за урок
Ты прям абьюзишь этот бедный сайт))) Остановись, а то он обидится)
Можно свойства сокращенно набирать, например: вместо margin-bottom: 59px; набрать mb59px + Enter
спасибо большое очень познавательно и понятно))) Лайк))))
Пажалста)
Очень круто, спасибо!
И еще вопрос, разве не было бы более семантически правильно сгруппировать формы div-ом, а не тегом p?
Спасибо за уроки! Лучший контент по верстке, на мой взгляд. Возник вопрос: почему кнопка SEARCH не унаследовала шрифт от body? Пришлось добавить Лато в ее стили.
Спасибо, приятно слышать! Это стандартное поведение кнопок
Кто нибудь читал что вообще написано в ? Что-то ору :В За уроки спасибо)
Пасхалочка - я сам заметил спустя пол года)
Посмотрел 7 минут, делая то же самое у себя. Естессно, особо не вчитывался в мелкий шрифт, но глаз выхватил фразу 'attack the child'. Прочитал все.. ору вместе с вами))
Мені здається на 4:50 можна було використати тег і тоди слово перемістилось вниз
Идеально,спс.
Пажалста :)
круто!
Спасибо
Спассссиииибооо!!!!
Пажалста!
Здравствуйте. Я бы добавил блоку wrapper (секции intro) ещё один класс. Сделал бы его flex-элементом. И вложенные элементы (title, subtitle и form) выровнял бы строго по вертикали. Тогда padding-top понадобился, возможно, только для визуальной компенсации отступа от header.
Да без проблем, делайте :)
@@steptoweb503 просто хотел сказать, что есть и такой варик
@@mr.vorchun это вёрстка - здесь всегда есть тысячи вариантов ;)
@@steptoweb503 Полностью согласен )
Здравствуйте. Подскажите пожалуйста. В чем может быть причина того что у меня справа на панели
нет стилей css? чтоб копировать их одним разом
спасибо!
Чомусь завис на кнопці, вона в мене не змінює розмір, взагалі. Передивився, все заново, так і не зміг збагнути в чому справа.
Спасибо большое
Пажалста
Все очень круто! Но никого не смущает текст subtitle?
кнопка
прописали стилі
та стани (ховер і т )
але ніде не прописували курсор, але при наведенні стрілочка змінювалась на ручку,
чого так?
Пожалуйста, подскажите, в каком видео вы сделали подвижную шапку сайта или как ее сделать
Здравствуйте.
Объясните, пожалуйста, в фигме у текстов есть font-weight, font-size и line-height. Почему для текста "Discover Amazing..." Вы взяли все три (font-weight, font-size и line-height), для текста "Jump off balcony..." только два из них (font-size и line-height) без font-weight, а для текстов "What would you..." и "Where would you..." тоже два, но уже другие (font-weight и font-size) уже без line-height?
Надеюсь, это не супер-тупой вопрос, бат я в этой теме всего несколько дней и меня это озадачило... ту мач 😅
Интересно, а зачем input + button обернуты в ?
Спасибо тебе, очень полезная практика. Вопрос, стоит ли использовать grid для всего проекта или все же лучше использовать местами?
Используйте там, где это уместно :)
@@steptoweb503 Понял, спасибо)
Приветствую. Столкнулся с проблемой при конечном тесте формы. Данные передаются лишь по первому input. порядка часа искал какие то опечатки или ошибки. Всю голову сломал. Слово в слово с видео сверял написанное. второй input всё ещё не отображается в с троке браузера при тесте.
Підкажіть будьласка чому в мене не виходить роблю все як у тебе , прописую точно так само html... і стилі вроді гаразд... але чогось картинки не вставляються у сторінку..... підкажи як це виправити .. дякк...
11:00 бэкграунд инсперет(прозрачный)
Артём, добрый день. Подскажите, почему Вы оборачиваете контент в каждом новом логическом блоке(хедер, мейн и тд) если можно изначально обернуть всё в wrapper? Если это не правильный подход то пожалуйста расскажите почему :)
Я не совсем понял вопрос, но отвечу на то, как понял. Дополнительная обертка нужна для разных ситуаций, например, когда вам необходимо указать отступы только для одного блока. Если у вас всё будет обернуто во wrapper, и вы для него напишете значение отступов, то данное значение применится ко всем блокам wrapper. Но изначально задача стояла изменить отступы только для одного блока. Соответственно, нужна доп обертка. Вообще, хорошо использовать связку wrapper > row, но об этом попозже :)
@@steptoweb503 про отступы понял. Я имел ввиду, почему просто не обернуть весь контент в обёртку изначально? Он ограничит размер, задаст отступы и не нужно будет повторять его постоянно.
@@СергейЕрёмин-у9я А, понял вопрос - потому, что дальше по макету у нас контент будет фиксироватсья по другой ширине.
@@steptoweb503 Понял.
а чого для h1 треба
max-widht, а не просто widht ( чому різниця?)
або br ?
Почему не высвечивается сказаны логотип и кругляшки. Не понимаю, вроде делала всё по видео..
А так всё супер, доступно как для новичка
У меня не получается,шрифты не те,кнопки и значок сайта е там стоит,что делать не пойму,а у меня все правильно стоит в коде не единой ошибки
Здравствуйте, не получается подключить шрифты к бади, объясните в чем дело пожалуйста ( только шрифты не получается подключить)
А списком инпуты не делаются? Они однотипные. Огромное спасибо за вашу работу!
можете сделать
Лайк Подписка
почему падинги инпута применяются к кнопке
Интересный перевод у подзаголовка...
У какого ?
@@steptoweb503 под "Discover Amazing places in Japan" )
@@Dianochka86 Так, и что с ним?)
я правда в английском не сильна, но переводчик вот что выдал: "Спрыгните с балкона на голову незнакомца. Погоня за клубком прячется, когда гости приходят. Будучи великолепным с животом стороной вверх, я мог бы мочиться на это, если бы у меня была энергия, но под кроватью, чтобы напасть на ребенка, откройте дверь,"
Мне это показалось забавным)
@@Dianochka86 Я не знаю какой переводчик вы используете, но Google перевел это как "
Откройте для себя удивительные места в Японии", что и является верным переводом)
если хедеру как блоку задать прозрачный бэкграунд то перейдет ли бэкграунд нижнего сеседа на хедер,если да то он просто растянется или повторится?
а как адаптировать для планшетов и смартфонов?
если уменьшить размер окна, то все элементы будут занимать целый экран
надо было использовать единицы em?
em - это всего лишь единицы измерения
и с ними очень сложно создавать крутые интерфейсы потому, что большинство дизайнеров не умеет создавать дизайны опираясь на относительные величины
напилить поддержку планшетов можно используя медиазапросы - об этом будет какой-то из роликов
там будет адаптация под мобайл
8:36 почему здесь создается тег p? Ведь мы не используем просто текст внутри. Или это связано с общей семантикой, так как предыдущие блоки были текстовыми p и h1?
Хороший вопрос - советую прочитать вот эту статью developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
Спасибо за лэндинг, вопрос такой почему мы не можем применить к .intro-title {
margin-top: 263px; , а применяем padding-top: 263px; ?
Ты пробовал с margin?
привет, дико извиняюсь!
как выровнить элементы .intro?
у меня в шаблоне аналогично, кроме инпутов-текст. то есть:
Н1
р
кнопка
и вот туплю, не получается по центру враппера их расположить
Сделай родительский контейнер display: flex
И укажи для него justify-content: center
Привет, когда кликаю по форме, появляется синий цвет вокруг, как это исправить?
и кстати если сделать хедеру(в случае блока без фикседа) бэкграунд прозрачный то картинка бэкграунда следующего блока займет ту прозрачную область?
Нет конечно
@@steptoweb503 а как тогда она будет выглядеть?
Здравствуйте,я уже опытный разработчик,смотрю чисто ради интереса,кстати замечательные уроки.Просто появился вопрос,а почему вы не сделали фиксированный хедер и весь контент(с фоном) в один цельный блок?Так намного проще,не нужны никакие марджины и контролировать верстку проще.Или это просто дело вкуса и привычки?
А как я сделал?
Подскажи, как сделать так, чтобы значения в css коде на фигме показывались процентами, а не пикселями?
Спасибо за урок,Артём. А как правильно сделать фолбэк background-color для всего белого текста, если вдруг фоновая картинка не загрузится? Или эта тема разберётся в дальнейших уроках?
Почитайте про mix-blend-mode
У меня плейсхолдары не становятся белыми, а остаются серыми, но в инструментах разработчика говорит что все четка. Если что браузер firefox
Ребят, hover не работает для placeholder?
какой пассаж !
Хотел бы спросить если ты все делаешь понимаешь но если сам пробуешь написать ничего не получается
первый проект
Всё очень круто, спасибо. Только я не понял прикола, почему при нажатии на odigo открывается доступ ко всем моим папкам?
Вероятно потому, что в путь установили слэш, что значит ссылка на корень. А проект, вероятно, запущен без серверной среды и поэтому открывается корневая папка компьютера
почему header с верхней навигацией сползает вниз при скроле это из за файла reset?
уберите position fixed в css с блока header
так подождите я до конца не понял,а если не делать фиксед хедера то падинг для секции делать не нужно или нужно? и нужно ли делать секцию в таком случае?
Паддинг не нужен, секцию по желанию)
@@steptoweb503 если у верхнего блока не являющимся фикседом сделать бэкграунд прозрачным,бэкграунд нижнего блока будет в верхнем или нет?или в таком случае лучше оба блока в 1 секцию внедрить?
@@андрейдраконов-я3к я ничего не понял))
Когда следующий выпуск?
Завтра или в субботу
Почему Вы для радиобатонов использовали не ?
А что я использовал?
еще не досмотрел плейлист до конца но странно что вы все делаете абсолютными величинами те px. Жду когда будете делать адаптив. Мне кажется чтобы это исправить нужно будет очень много медиа запросов. Поправьте меня если я не прав. Возможно будет какой то трюк. почему не использовать rem em?
Ну могу привести простой пример.
Допустим, вы используете rem и у вас все зависит от базового шрифта, который пусть будет равен 16 пикселям.
Предположим, на десктопе есть заголовок первого и второго уровня. По дизайну заголовок первого уровня равен пусть 48 пикселей, а второго уровня - 36 пикселей.
Вы такие думает... Хм? Напишу ка я для h1 font-size: 3rem, а для h2 font-size: 2rem. Идеально! Делаем так.
Затем вы идёте в макеты для мобильных устройств. А там заголовок h1 по размеру равен, например, 36 пикселям, а h2 30 пикселям. И вы такие окей. А как мне сейчас поменять величину базового шрифта так, чтобы не писать дополнительные медиа запросы для изменения rem заголовков? Ответ - а никак (потому что изменения размера шрифта h1 больше, чем h2).
Дизайнеры крайне редко продумывают такие аскпеты разработки, а зачастую не продумывают вовсе.
И поэтому вопрос - если вам нужно будет в мобилках пойти и написать дополнительный медиа запрос для того, чтобы изменить font-size h2 с 2rem на 1.5rem или любой другой, то чем это отличается от того, что вы будете использовать пиксели? :)
Если интересна тема ДЕЙСТВИТЕЛЬНО гибких шрифтов, то гуглите CSS шлюзы. Статья на хабре есть хорошая.
@@steptoweb503 Ок. О шлюзах почитаю никогда не сталкивался. А ту ситуацию о который вы говорили выше, действительно придется решать через медиа запросы. НО. По-моему гораздо проще контролировать все шрифты только через медиа запросы в root. Чем искать нужный тэг и каждый раз писать новый медиа запрос только для него. Это как минимум менее читабельно. Ну вообщем почитаю о шлюзах возможно что то не так понял. А за видео спасибо.
@@JohnDoe-p1y Так вам придётся писать два медиа, один для изменения базового шрифта и второй для элемента :) Можно, конечно, положить всё в переменные css, но это уже другая история.
мне одному кажется, что там в инпутах не плейсхолдеры? Судя по макету текст в инпуте вводится ниже "плейсхолдера". возможно это лейбл
Такой вопрос
Мне не очень нравится что при нажатии на поле поиска не пропадает плейсхолдер, я думаю для пользователя это выглядит пугающе, так вот. Как сделать так чтобы при нажатии в строку поиска плейсхолдер исчезал сразу?
Почему вы думаете, что для пользователя это выглядит пугающе? Если хотите, можете через label имитировать плейсхолдер
@@steptoweb503 спасибо вам, у меня всё получилось
Такой вопрос, может показаться глупым, но все же) Почему просто не копировать css свойства по расположению и виду элементов прямо с фигмы ? Например, position:absolute, left:... и тп?
Встречный вопрос: а как вы с таким подходом будете делать адаптивные сайты?
Привет, классные уроки но у меня возникла проблемка. Когда я делаю падинги для кнопки то почему то они не работают. html - search , CSS - .search-form__submit {
padding: 15px 39px;
text-transform: uppercase;
}
Скачайте готовый код в описании и сверьтесь
@@steptoweb503 Та же проблема, но кода уже нет я так понимаю?
почему вы где-то пишете в именах классов с дефис-ом, а где-то с нижним_подчеркиванием?
Прочитайте про методолгию БЭМ ;)
Имя типа contact-form - это название блока
Имя типа contact__form - это название элемента
И, наконец, имя типа contact__form_disabled - это название модификатора.
Это по русской документации от самих разработчиков, т.е. яндекса.
На западе немного другие символы используют, но суть та же
Как у вас хватает терпения на все это? Я бросил всю эту кашу с веб разработкой и живу счастливо
А чем теперь занимаетесь?
@@steptoweb503 занимаюсь прежней работой, государственные заказы по ремонту и строительству, зарабатываю не меньше чем сеньор программист
А я не понимаю, как у вас хватает терпения заниматься государственными заказами по ремонту и строительству? У меня бы терпения не хватило бы на всю эту кашу.
Занимаюсь программированием и вэб-разработкой, и живу счастливо!
@@justspartak Программирование "чистая" сфера, чем и привлекает!
Привет. Очень нравятся твои уроки. Всё делаю как ты, но у меня почему то не работает баттон сабмит. Ничего не отправляет. Подскажи пожалуйста с чем это может быть связано
Оно и не должно отправлять - в этих уроках только верстка.
Чтобы отправлялись данные, нужно написать обработчик на js и затем на php, например
я понимаю, но по ваших словах запрос якобы отправлен, это видно по изменению строки в браузере, у меня же ничего не меняется при нажатии
@@max_zhuravel я же не ясновидящий) миллион причин может быть
нашёл причину - постыдная невнимательность. извини за беспокойство, уроки очень классные
у меня все стоит на месте с момента ввода текста "discover amazing place in Japan"
можете дать подсказку что делать ?
Как понять всё стоит на месте?
@@steptoweb503 делала шаг за шагом по примеру
надо все с начала делать чтобы увидеть ошибку, да ? о боже, i want to cry
@@Mia_cc нет. Я не могу понять в чем у вас проблема
Я уже строчила длинный текст,
Но вот прикол,
Заметила что
Вместо «px» - «xp» ставила,
Два дня непонимания и два дня попыток понять что не так 😂
Спасибо за поддержу, продолжаю далее
👌👌
@@steptoweb503 и простите за излишества
Подскажите пожалуйста, почему .intro_title{
max-width: 619px; не работает у меня всё в одну стоку хоть 300 делаю, проверял 2 браузерах
Код скиньте
Добрый день, у меня проблема:
Когда я ввел команды *input* , то вокруг набора текста появился БЕЛЫЙ ПРЯМОУГОЛЬНИК, незнаю что делать
Что значит ввели команды инпут?
Step to Web , ну, мы когда вставляли 2 блока для набора текста и кнопку SEARCH, и вокруг них появился белый прямоугольник
@@НикитаПохомов Скачайте готовый код и сравните :)
привет, подскажи вот эти так называемые "кругляши" это разве не радиокнопки?
Какие кругляши?
@@steptoweb503 в интро 2 белых круга в формах
@@vadim4ikplay4free В данном случае это не радио кнопки, иначе у них в дизайне было бы состояние, когда они выделены. И я не могу придумать функцию, которую они бы выполняли внутри инпутов