Адаптивная верстка сайта с нуля по макету из Figma #3 Pixel Perfect

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS.

В этом уроке вы узнаете что такое pixel perfect и я покажу как сделать pixel perfect. Пиксель перфект это техника верстки сайта где мы делаем полное соответствие макету который разработал дизайнер. Вы узнаете как делать pixel perfect очень просто с помощью расширения для браузера pixelperfect. Мы оформим шапку сайта в соответствии с Pixel Perfect и изучим много нового из языка CSS.

▶▶ Видео, которые будут вам полезны ◀◀

Поддержать автора ₽ублем:
1. Сбер: 4274 3200 3233 1582

#html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

[jhemios]

Еле-еле нашел нормального верстальщика, который умеет верстать правильно. Благодарю за наилучшие видео-уроки, да и еще бесплатные. Я чуть на курсы не записался платные.

[egiqidr]

Много тонких моментов узнал, таких, где нигде не встречал. Спасибо за видео!

[SnezanaG]

Спасибо за урок. Много нового и интересного, чего ни у кого раньше не видела.

[Alexus]

Вот это уровень! За направляющие, которыми можно посмотреть выравнивание элементов макета, впервые узнал! Класс!!!

[tvktckw]

Спасибо тебе за очень хорошие обучающие ролики с подробным разбором.

[fzxlljj]

Шикарные уроки. Большое спасибо. Все понятно и четко.

[kahramonov]

офигенно обьясняете я думал что пипец много воды потому что я все это уже знаю, потом уже дошло что не все как я умнички у своей мамы) круто обьяснили лайк и подписка!!!!

[kopibara_rulit]

Большое спасибо за полезную информацию!!!

[diman_daron]

вот это я понимаю топчик, надеюсь в этой серии уроков еще будут медиа запросы

[VVV_Ulsk]

отличное расширение для хрома.очень удобно.по макету из фотошопа намного сложнее искать отступы, а уж подогнать верстку под макет из-за тонкостей отрисовки шрифтов это вообще отдельная тема.однозначно плюс.интересно👍

[ElenaYavorskaya]

Спасибо огромное за такое качественное и понятное объяснение!

[seoonlyRU]

спасибо, тема хорошая) лайк с ходу от СЕООНЛИ - топового вебмастера и сео-спеца

[dilqioe]

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

[React_master]

Больше нигде не нашель такой видео адаптации сайта спс

[cmomoop]

Это магия! Самое настоящее волшебство! И вспомните какая вёрстка была ещё в 2014 году.

Один вопрос и без сарказма: почему у нас дефицит программистов, когда всё есть в интернете и так подробно рассказывают???

И маленькая поправка: если пользоваться Edge, то все внесённые изменения в режиме разработчика прописываются сразу в документ. Это если синхронизировать VS Code и браузер. Microsoft действительно делает всё, чтобы облегчить жизнь пользователям.

[vladimirdenisenko]

от души, братуха. братва рвётся в айти))

[bislmit]

Спасибо, верстка теперь не раздражает

[TheAlexChannelClub]

Очень понравилась концепция переменных в css. Удобно. Я сталкивался с переменными в препроцессорах, но как-то упустил информацию о том что переменные можно использовать и в чистом css

[cwvwcci]

Перепроверил код но вылезли все равно ошибки
Текст немного сьезжает

[kgqbeoi]

Большое спасибо за курс. Всё очень понятно и наглядно
Столкнулся с такой проблемой: у меня в Figma не отображается вкладка Inspect. Как я понял, эту вкладку убрали для бесплатной версии, но всё равно оставили возможность копирования CSS: правой кнопкой мыши по интересующему элементу -> Copy/Paste as -> Copy as code -> CSS