3. Вёрстка HTML макета из Figma | ВЁРСТКА РЕАЛЬНОГО ПРОЕКТА НА HTML!
Vložit
- čas přidán 28. 07. 2021
- Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
🎨 Макет Figma (жми Duplicate и работай с макетом): clck.ru/WVUCV
✅ Результат серии уроков: github.com/avis-academy/house...
Друзья, в этом видео мы сверстаем десктопную версию всего за 2,5 часа: шапку, хедер, 6 "экранов" и подвал. Во всём этом - иконочные шрифты, Яндекс.Карта, CSS анимации и формы (поля ввода и кнопки).
Также я прошу прощения за оговорки (я про "всё осталось как в следующем видео", "некоторые думаю про ширину (а в реале про высоту)" и возможно другие незамеченные моменты). Все мы люди😊
Задавай вопросы в комментариях. Я всё читаю и на всё отвечаю.
========================================
Эпизоды:
00:32:58 - верстаем хедер
00:43:19 - верстаем меню
01:01:00 - верстаем экран фактов
01:18:32 - верстаем экран "наши квартиры"
01:48:51 - верстаем экран "хотите посмотреть?"
01:58:58 - верстаем экран с видео
01:58:58 - верстаем экран с картой
02:04:58 - верстаем экран с FAQ
02:12:06 - верстаем экран подвал (footer)
02:28:35 - завершающая часть
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети
Эмиль, привет! Впервые на твоем канале, тебя интересно слушать. Однозначно подписка и лайки. Продолжай в том же духе 👏
Спасибо за видос, давай какую-нибудь жесть типа интернет магазина с кучей js кода и фильтрами, регистрацией, корзиной, слайдерами и вот этим вот всем) На ютюбе мало кто показывает как верстаются сложные проекты, думаю по просмотрам хорошо зайдет и полезно многим будет
Спасибо за видос ждем продолжение))
Отличное видео! Показано много интересных приёмов. Взял на заметку, идём дальше к мобильной верстке)
Спасибо большое за урок!
Не понял, почему иконка у нас в :before подскажите пожалуйста!
Спасибо тебе)
В макете в навбар меню нету отступов справа и слева, а padding его добавляет, можно в .navbar__menu прописать {gap: 40px;
display: flex;}
класний пацик!)
а можеш щось новачку розказати?
які у тебе були початкові етапи в твому навчанні
і як ти починав вчитися на що покладався?
у меня сразу появилась проблема - почему то по применению БУТСТРАП у меня сменились шрифты - но текст не выравнился как вас на видео...! что я сделал не так ? я повторял шаг за шагом...каждый символ
спасибочки за урок!
не все посмотрела пока что, но вопросы все равно возниклии, и мне кажется по ходу все еще будут появляться
14:15 content: ' ';
почему он пустой? и почему без него тогда ничего не работает? хд
спасибо за видео смотрела все пошагово и iconmoon подгрузила и все равно иконки не работают(((
Все очень круто! Но не могу понять зачем мы иконкам-шрифта прописываем :before???? Можно пояснительную бригаду....
Потому что стили иконок прописаны в ::before , а не на основном элементе. Возможно, поэтому.
Видео супер!👍 всем советую!!! автор, миленький - подскажи пожалуйста расширение который комментирует класс в HTML 🙏🙏🙏
Здравствуйте. Урок превосходный, но вот не пойму где вы взяли градиент, я скопировала все параметры у вас, но хотелось бы знать каким вы образом переделали цвета с фигмы в градиент css
Figma больше не предоставляет Dev режим бесплатно (разве что ученикам)
На субатомном....😂
Спасибо. Можешь подсказать, если html страниц > 1, в components создаются папки для каждый страницы и в них складываются их блоки? Вопрос - как с футером, например, делается ссылка с каждой страницы на блок компонента основной страницы index.html?
@@AVISTV Спасибо, еще раз.
Это готовый проект или будут ещё видео?
когда выйдет следующее видео, верстка мобильной версии?
это хорошо, а эффект плавного появления секций при скроле страницы делать будем?
@@AVISTV круто
Можно ссылку на Макет?
Мой 50 лайк жду видео)
вам нужна какая-то реклама, раскрутка, а то добро пропадает зря :(
@@AVISTV надеюсь что так и работает :)
Не стал смотреть и подписываться .
Для новичков тяжело смотреть это. Плохая подача