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

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

Просмотров 1,4 тыс.

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

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

15 окт 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

На просмотре єтого видео и закончилась последовательная логическая цепочка в моей голове( А так все хорошо начиналось)(

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

Привет! Делаешь крутой контент)). Когда выйдет последняя часть?

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

Уже записано и монтируется. Завтра утром будет на канале!)

@user-kg4tf9ng4w 6 месяцев назад

Приветствую!!Начинаю с нуля! 1е 2 части понятные, а вот с 3й частью уже не понятно как и где и что ты подключал???? где ссылки на сайты, как подключать те или иные ссылки, также шрифты и т.д.

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

Приветствую, Олег. Ознакомиться с файлами проекта можно по ссылке в описании. Как подключены шрифты показано. Если нужно детальнее - на канале есть отдельное видео. Как подключать те или иные ссылки куда? На картинки? на файлы стилей? На другие сайты? Непонятно. Ответить на вопрос про ссылки сайты не могу - не пойму о каких сайтах идет речь. Видео имеет целью показать один из вариантов процесса верстки страниц. Я проговаривал многие моменты, но все если нужно детально изучить что-то конкретное, например как подключать шрифты, - нужно смотреть видео именно на эту тему.

@user-kg4tf9ng4w 6 месяцев назад

Я про fonts.css где и как ты это все взял что там написано, просто скачать у тебя скачать это понятно что можно, но я б хотел понять как это пишется и все в этом роде! просто на этом я остановился и не стал дальше ничего смотреть не понятно от куда все это было взято. Ну да ладно, в общем спасибо тебе труды и развивай канал дальше все ок!!! @@tutproweb

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

Так подключаются локальные шрифты. Подробнее можно найти в видео ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Jz8Gm71yuCI.html Там во второй части видео рассказываю как подключаются файлы шрифтов локально в проект. Не стал дублировать всю информацию, так как она уже есть на канале.

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

Спасибо за видео, осталось несколько вопросов: 1. Использование селекторов по тегам в БЭМ не рекомендуется, но в этом видео используется. Почему? 2. Почему вы задали названия классов блоков, описывая их внешний вид: btn-blue, btn-transparent. По БЭМу это же моветон, разве нет? 3. Почему в .section-title line-height: 125%, если по макету для заголовка "Хватит тратить своё время в очередях" line-height: 115% ??

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

Приветствую. 1. Так как я не подключал ни reret.css, ни normalize.css записал стили сброса(нормализации) некоторым тегам, чтобы не дублировать в каждом элементе. 2. btn-blue, btn-transparent - это визуальные компоненты и повторяются несколько раз, так что решил вынести в отдельные блоки. В принципе это не запрещено. 3. В остальных заголовках 125%, это скорее всего просто невнимательность дизайнера. Этот параметр сильно никак не влияет на визуал и поэтому решил сделать все заголовки одинаковые.

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

@@tutproweb 2. С блоками всë ясно. Просто немного не понятно почему в названиях классов вы описали их внешний вид (blue, transparent). В таких случаях данные названия допустимы?

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

Да. Подписал так, чтобы по названию было понятно что за компонент.

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

@@tutproweb Хорошо, спасибо!