В этом видео мы начнём верстать сайт по макету Figma.
Видео для начинающих, поэтому в нём не будет таск-менеджера(GULP) или сборщика(Webpack), только HTML и CSS!
Мы разберём интересные авторские фишки по работе с svg, шрифтами, фокусом и другие best practices.
--------------------------------------
Ссылки:
Плейлист со всеми частями - https://www.youtube.com/playlist?list=PLAGds4sWs6rGcXLQO7cqSBgivofVRE06E
Макет - https://www.figma.com/file/zAASWcZBpUyFVnPFAYX8HH/YouMeal-(youtube)?node-id=0%3A1&t=iLSeqnNgcpa4eDBJ-1
Генератор фавиконок - https://realfavicongenerator.net/
Normalize.css - https://necolas.github.io/normalize.css/
Шрифты - https://gwfh.mranftl.com/fonts
SVG to CSS - https://yoksel.github.io/url-encoder/
--------------------------------------
Тайм-коды 🕒
00:00 Приветствие и обзор исходников
01:42 Рассмотрим макет
06:56 Начинаем
08:29 favicon - фавиконка
16:30 header html - начинаем разметку
18:04 logo sprite svg - логотип
27:06 header html - завершаем разметку header
29:57 css normalize - нормализуем
32:11 css fonts - шрифты
40:38 css default - базовые стили
53:19 svg circle
01:04:07 header css - пишем стили для header
01:13:00 адаптив header
01:04:07 header css
01:43:12 Завершаем 1 часть
--------------------------------------
Изучи как верстать сайты на профессиональном уровне — https://web.methed.ru/
Автор — Максим Лескин
👀 Подписаться на канал: https://bit.ly/3CoaLCL
🌍 Наш сайт: https://methed.ru/
🤖 Бот telegram - https://t.me/methed_bot
😃 ВКонтакте: https://vk.me/methed
#methed #html #css