Верстка страницы на примере реального макета. ЧАСТЬ 1 | Верстка макета FIGMA с объяснением
Вставка
- Опубліковано 27 лип 2022
- В этом видео вы узнаете как делать разметку страницы. Какие теги должны быть в разметке обязательно. И мы создадим разметку реального макета страницы мобильного приложения.
Макет взят на просторах интернета и находится в свободном доступе.
Ссылка на макет:
www.figma.com/file/cD7fJrxsWN...
Ссылка на файлы проекта:
github.com/Kirkusik/pro-web/t...
t.me/tutproweb - Телеграмм-канал с "печеньками" и "плюшками"
----------------------------------------------------------------------------------------------------------------
Поддержи канал:
PayPal
www.paypal.com/donate/?hosted...
или по почте - inweb@ua.fm
Patreon
/ tutproweb
Donatello
donatello.to/proweb
Crypto
USDT: 0xb205047a3f2ceb5198d547e3de011d1a85412fac
Как долго я искал такое толковое, поэтапное объяснение. 10 из 10!!!
Очень понравился материал, именно семантика, грамотное объяснение. Большое спасибо автору!)
самый приятный гайд который я видел, смотрел не моргая
спасибо!! очень полезное и ёмкое видео, всё очень понятно~
Спасибо большое за видео, очень понятливо, много ошибок было у меня в плане семантики, сейчас разобрались, однозначно лайк!
Теперь я поняла что такое семантика. Очень хорошо объясняет
Огромное спасибо
огромное спасибо
Урок огонь! Смотрел на скорости 1.25 =))
спасибо за лайфхак
я люблю вас
Боже как же понятно все объяснил
Есть несколько вопросов касаемо семантики:
1) Нужно ли всё-таки в этом макете оборачивать список ссылок в footer'е в тег ?
2) По mdn тег должен быть идентифицирован, обычно добавлением заголовка h1-h6 в качестве дочернего. В вашей вёрстке в нет дочернего заголовка, тогда как он должен быть идентифицирован?
И на самом деле хотелось бы больше поговорить про семантику в современной вёрстке, обсудить использование конкретных тегов на множестве примеров. Может планируете провести стрим?
Приветствую.
1) Там идут ссылки на дополнительные страницы сайта: Как использовать, Партнерам, Отзывы. Это можно считать навигацией по сайту. Поэтому можно обернуть.
2) В тег рекомендуется добавлять заголовки. Но если оставить так, валидация покажет всего лишь предупреждение. Так же есть способы добавить "скрытые" для пользователя заголовки, но я не стал сильно углубляться в этом примере.
Что касается стрима - он планируется. Как минимум на проверку проектов зрителей. Можно там же обсудить и семантику. Пока собираем проекты и ждем реакцию зрителей)
@@tutproweb
Понял, спасибо
Можно использовать тег в этом шаблоне?
Вообще его можно использовать где угодно, но нужно четко понимать зачем. На странице документации в разделе примечания к этому элементу (developer.mozilla.org/ru/docs/Web/HTML/Element/div#%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%87%D0%B0%D0%BD%D0%B8%D0%B5) указывают, что этот тег можно применять когда семантические теги не подходят.
в последнем section в обеих кнопках будет правильнее вместо "" прописать < и >
Здравствуйте! Я правильно понимаю, что данная разметка не по методологии Бэм?
Здравствуйте. В данном примере показано лишь как использовать семантику при разметке страницы. БЭМ тут использовать негде. Его используют для именования классов, иногда для построения структуры файлов проекта.
Получается тег полностью заменяет ?
Много чего заменяет полностью DIV. DIV следует использовать только тогда, когда варианты семантических тегов для конкретной задачи закончились.
Подскажите а где смотреть расстояние между блоками, какой шрифт стоит на странице и т.д
Нажимая на каждый элемент в макете в правой части вы можете видеть все стили элемента. Про отступы.....отступы нужно смотреть в макете выделяя и наводя на элементы.
можно ли использовать только один тег? чтоб минимизировать разнообразие используемых тегов, тем самым проблем
Использование одного тега для разметки как раз и есть проблема. Для пользователей в будущем, не для разработчика. Ее и нужно решать, используя весь потенциал семантических тегов.
@@tutproweb значит если потенциала нет, то можно все дивами сделать например?
Если вы только учитесь, то делайте сразу правильно. Делать все DIVами - неправильно. Научиться делать лучше или не научиться и продолжать делать как раньше, зависит от желания.
Здравствуйте, а почему вы, в тегах атрибут class, не используете?
Здравствуйте. В этом примере показываю только разметку тегами, без стилей. Поэтому и классы нет надобности писать.
Голос похож на ведущего канала про еду
14:00 как он так сделал?)
Автор, пожалуйста увеличивай шрифт в редакторе когда записываешь свои видео! Мы ведь не на весь экран разворачиваем, нам ведь еще и в редактор все надо записывать!
Какая у вас прога для макета страницы.
В данном видео использую Figma
Спасибо