Верстка страницы на примере реального макета. ЧАСТЬ 1 | Верстка макета FIGMA с объяснением

Подписаться 1,3 тыс.

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

50% 1

В этом видео вы узнаете как делать разметку страницы. Какие теги должны быть в разметке обязательно. И мы создадим разметку реального макета страницы мобильного приложения.
Макет взят на просторах интернета и находится в свободном доступе.
Ссылка на макет:
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

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

27 июл 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Как долго я искал такое толковое, поэтапное объяснение. 10 из 10!!!

@topfel1x Год назад

Очень понравился материал, именно семантика, грамотное объяснение. Большое спасибо автору!)

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

самый приятный гайд который я видел, смотрел не моргая

@weeellbeing Год назад

спасибо!! очень полезное и ёмкое видео, всё очень понятно~

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

Теперь я поняла что такое семантика. Очень хорошо объясняет

@irinakurbanova5918 9 месяцев назад

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

@user-bo5ky9we8n 7 месяцев назад

огромное спасибо

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

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

@kornejYarij 11 месяцев назад

Урок огонь! Смотрел на скорости 1.25 =))

@-redmait4882 7 месяцев назад

спасибо за лайфхак

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

Боже как же понятно все объяснил

@-redmait4882 7 месяцев назад

я люблю вас

@user-bn2fy6zz1s 4 месяца назад

Есть несколько вопросов касаемо семантики: 1) Нужно ли всё-таки в этом макете оборачивать список ссылок в footer'е в тег ? 2) По mdn тег должен быть идентифицирован, обычно добавлением заголовка h1-h6 в качестве дочернего. В вашей вёрстке в нет дочернего заголовка, тогда как он должен быть идентифицирован? И на самом деле хотелось бы больше поговорить про семантику в современной вёрстке, обсудить использование конкретных тегов на множестве примеров. Может планируете провести стрим?

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

Приветствую. 1) Там идут ссылки на дополнительные страницы сайта: Как использовать, Партнерам, Отзывы. Это можно считать навигацией по сайту. Поэтому можно обернуть. 2) В тег рекомендуется добавлять заголовки. Но если оставить так, валидация покажет всего лишь предупреждение. Так же есть способы добавить "скрытые" для пользователя заголовки, но я не стал сильно углубляться в этом примере. Что касается стрима - он планируется. Как минимум на проверку проектов зрителей. Можно там же обсудить и семантику. Пока собираем проекты и ждем реакцию зрителей)

@user-bn2fy6zz1s 4 месяца назад

@@tutproweb Понял, спасибо

@iliyabylich Год назад

Можно использовать тег в этом шаблоне?

@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) указывают, что этот тег можно применять когда семантические теги не подходят.

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

в последнем section в обеих кнопках будет правильнее вместо "" прописать < и >

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

Голос похож на ведущего канала про еду

@LLuKKen 7 месяцев назад

Получается тег полностью заменяет ?

@tutproweb 7 месяцев назад

Много чего заменяет полностью DIV. DIV следует использовать только тогда, когда варианты семантических тегов для конкретной задачи закончились.

@duoduoo6732 Год назад

можно ли использовать только один тег? чтоб минимизировать разнообразие используемых тегов, тем самым проблем

@tutproweb Год назад

Использование одного тега для разметки как раз и есть проблема. Для пользователей в будущем, не для разработчика. Ее и нужно решать, используя весь потенциал семантических тегов.

@duoduoo6732 Год назад

@@tutproweb значит если потенциала нет, то можно все дивами сделать например?

@tutproweb Год назад

Если вы только учитесь, то делайте сразу правильно. Делать все DIVами - неправильно. Научиться делать лучше или не научиться и продолжать делать как раньше, зависит от желания.

@user-ve1ur3db3n День назад

14:00 как он так сделал?)

@user-gs7ys7gs9m Год назад

Здравствуйте! Я правильно понимаю, что данная разметка не по методологии Бэм?

@tutproweb Год назад

Здравствуйте. В данном примере показано лишь как использовать семантику при разметке страницы. БЭМ тут использовать негде. Его используют для именования классов, иногда для построения структуры файлов проекта.

@james66243 Год назад

Подскажите а где смотреть расстояние между блоками, какой шрифт стоит на странице и т.д

@tutproweb Год назад

Нажимая на каждый элемент в макете в правой части вы можете видеть все стили элемента. Про отступы.....отступы нужно смотреть в макете выделяя и наводя на элементы.

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

Автор, пожалуйста увеличивай шрифт в редакторе когда записываешь свои видео! Мы ведь не на весь экран разворачиваем, нам ведь еще и в редактор все надо записывать!