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

  Переглядів 1,298

Pro Web

Pro Web

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

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

КОМЕНТАРІ: 12
@user-et6pj2ed1k
@user-et6pj2ed1k 4 місяці тому
На просмотре єтого видео и закончилась последовательная логическая цепочка в моей голове( А так все хорошо начиналось)(
@user-dt2mf2hq5t
@user-dt2mf2hq5t 6 місяців тому
Привет! Делаешь крутой контент)). Когда выйдет последняя часть?
@tutproweb
@tutproweb 6 місяців тому
Уже записано и монтируется. Завтра утром будет на канале!)
@user-kg4tf9ng4w
@user-kg4tf9ng4w 5 місяців тому
Приветствую!!Начинаю с нуля! 1е 2 части понятные, а вот с 3й частью уже не понятно как и где и что ты подключал???? где ссылки на сайты, как подключать те или иные ссылки, также шрифты и т.д.
@tutproweb
@tutproweb 5 місяців тому
Приветствую, Олег. Ознакомиться с файлами проекта можно по ссылке в описании. Как подключены шрифты показано. Если нужно детальнее - на канале есть отдельное видео. Как подключать те или иные ссылки куда? На картинки? на файлы стилей? На другие сайты? Непонятно. Ответить на вопрос про ссылки сайты не могу - не пойму о каких сайтах идет речь. Видео имеет целью показать один из вариантов процесса верстки страниц. Я проговаривал многие моменты, но все если нужно детально изучить что-то конкретное, например как подключать шрифты, - нужно смотреть видео именно на эту тему.
@user-kg4tf9ng4w
@user-kg4tf9ng4w 5 місяців тому
Я про fonts.css где и как ты это все взял что там написано, просто скачать у тебя скачать это понятно что можно, но я б хотел понять как это пишется и все в этом роде! просто на этом я остановился и не стал дальше ничего смотреть не понятно от куда все это было взято. Ну да ладно, в общем спасибо тебе труды и развивай канал дальше все ок!!! @@tutproweb
@tutproweb
@tutproweb 5 місяців тому
Так подключаются локальные шрифты. Подробнее можно найти в видео ukposts.info/have/v-deo/gqppe6NuaK-mpH0.html Там во второй части видео рассказываю как подключаются файлы шрифтов локально в проект. Не стал дублировать всю информацию, так как она уже есть на канале.
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
Спасибо за видео, осталось несколько вопросов: 1. Использование селекторов по тегам в БЭМ не рекомендуется, но в этом видео используется. Почему? 2. Почему вы задали названия классов блоков, описывая их внешний вид: btn-blue, btn-transparent. По БЭМу это же моветон, разве нет? 3. Почему в .section-title line-height: 125%, если по макету для заголовка "Хватит тратить своё время в очередях" line-height: 115% ??
@tutproweb
@tutproweb 4 місяці тому
Приветствую. 1. Так как я не подключал ни reret.css, ни normalize.css записал стили сброса(нормализации) некоторым тегам, чтобы не дублировать в каждом элементе. 2. btn-blue, btn-transparent - это визуальные компоненты и повторяются несколько раз, так что решил вынести в отдельные блоки. В принципе это не запрещено. 3. В остальных заголовках 125%, это скорее всего просто невнимательность дизайнера. Этот параметр сильно никак не влияет на визуал и поэтому решил сделать все заголовки одинаковые.
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
@@tutproweb 2. С блоками всë ясно. Просто немного не понятно почему в названиях классов вы описали их внешний вид (blue, transparent). В таких случаях данные названия допустимы?
@tutproweb
@tutproweb 4 місяці тому
Да. Подписал так, чтобы по названию было понятно что за компонент.
@user-bn2fy6zz1s
@user-bn2fy6zz1s 4 місяці тому
@@tutproweb Хорошо, спасибо!
[NEW] 🔥 новый Auto Layout в Figma 4.0 (уроки Фигмы 2022) на реальных примерах! Урок 23
55:32
Alexey Bychkov: веб-дизайн и фриланс
Переглядів 122 тис.
didn't want to let me in #tiktok
00:20
Анастасия Тарасова
Переглядів 3,6 млн
Основы верстки. Как верстать контейнер
18:30
Антон Рихновец | Разработка сайтов
Переглядів 16 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
Объяснение Вёрстки Простого Сайта HTML+CSS
53:56
Сергей Дмитриевский про IT
Переглядів 150 тис.
A-4 Skyhawk - секрет простоты
19:11
SkyShips
Переглядів 12 тис.