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

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

Рік тому

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

КОМЕНТАРІ: 35

@evgeniikiryshkin6949 2 місяці тому

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

@userkakashkoed Місяць тому

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

@topfel1x Рік тому

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

@weeellbeing Рік тому

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

@kornejYarij 10 місяців тому

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

@user-uz2qs3hr2u 4 місяці тому

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

@irinakurbanova5918 8 місяців тому

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

@user-bo5ky9we8n 6 місяців тому

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

@akinchitb2 3 місяці тому

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

@-redmait4882 6 місяців тому

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

@user-ti4ni3gt7h 4 місяці тому

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

@-redmait4882 6 місяців тому

я люблю вас

@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 2 місяці тому

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

@duoduoo6732 Рік тому

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

@tutproweb Рік тому

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

@duoduoo6732 Рік тому

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

@tutproweb Рік тому

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

@james66243 Рік тому

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

@tutproweb Рік тому

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

@user-gs7ys7gs9m Рік тому

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

@tutproweb Рік тому

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

@deanwichester6412 2 місяці тому

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

@LLuKKen 6 місяців тому

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

@tutproweb 6 місяців тому

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

@alizhilov1391 Рік тому

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

@tutproweb Рік тому

Здравствуйте. В этом примере показываю только разметку тегами, без стилей. Поэтому и классы нет надобности писать.

@bikadorov Місяць тому

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