#3 Делаем адаптивный Header медиа-запросы, Верстка из PSD на Flexbox и Less

Рет қаралды 6,875

6 жыл бұрын

В этом уроке: оформляем шапку стилями по макету PSD и делаем адаптивный Header. Адаптивность мы достигнем используя медиа-запросы. Верстка flexbox это Адаптивная верстка сайта, для всех типов устройств. Верстка сайта адаптивно и уроки flexbox практика в цикле видео уроков по Flexbox и Less.
В этом видео курсе мы изучаем Flexbox и Less, а также по плану верстка адаптивного сайта из макета PSD. В этом курсе вы найдете уроки по Flexbox и Less верстка адаптивного сайта из макета PSD. Верстка адаптивного сайта и flexbox практика позволят вам создавать современные сайты. Что такое flexbox, flexbox верстка и как создать сайт на flexbox вы узнаете в курсе Flexbox верстка сайта из макета PSD.
✔Советую посмотреть:
Плейлист Верстка из PSD на Flexbox и Less: • Верстка из PSD на Flex...
Подготовка к верстке на Flexbox: • #1 Верстка адаптивного...
Оформляем шапку на Flexbox и Less: • #2 Оформляем шапку сти...
Учим html за 30 минут: • Урок по HTML для начин...
Изучаем препроцессор Less: • #4 Подключение препроц...
Что такое Flexbox: • Flexbox CSS3 в одном у...
Эксклюзив на Boosty - boosty.to/itdoctor
Telegram канал - t.me/itdoctor_official
Курсы на Stepik - stepik.org/users/387773773/teach
Донаты:
1. ЮMoney - sobe.ru/na/itdoctor
2. VISA - 4274 3200 3233 1582
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#flexbox #less #itdoctor

Пікірлер: 19

@ITDoctor 2 жыл бұрын

Курс Frontend разработчик на HTML, CSS и JavaScript: www.udemy.com/course/draft/4402699/?referralCode=897A9E65D809AD2359AA

@sdbk100 6 жыл бұрын

Коротко и ясно. Спасибо.

@user-qh5fr3yo1w 4 жыл бұрын

Ну просто супер. Такой ясной и изящной подачи материала я уже давно не встречал.

@Mykhailo_Vdovychenko 4 жыл бұрын

Впервые вижу схожий прием и весьма умно сделанно, что Медиа-запросы подключили отдельным файлом, так как когда они все в главном файле стилей, то не всегда удобно искать. Спасибо за хороший лайф-хак!

@dmitrylubyanov7277 3 жыл бұрын

Хорошие уроки! Давно хотел узнать все тонкости флекс-верстки + медиазапросы. Лайк!

@user-rj3od6hw9s 6 жыл бұрын

Спасибо! Всё очень круто. Продолжай в том-же духе)

@llwebstylell242 3 жыл бұрын

Нормально, поставлю лайк - заслужил. Объяснил всё четко и по делу + добавил инфу о приоритете стилей и добавил инфу о масштабировании браузера , новички часто не знают что масштабирование браузера - это не какой не адаптив , так что с этим наверное ты их просветил)

@ITDoctor 3 жыл бұрын

спасибо

@user-qt8sk6xq6f 3 жыл бұрын

Спасибо, отлично зашло!!!

@appleipad9226 6 жыл бұрын

А продолжение следует?) Спасибо за видео уроки, все отлично и ясно!)

@ITDoctor 6 жыл бұрын

да обязательно будет продолжение в ближайшее время и мы будем доделывать весь этот макет вместе с адаптивностью так как сделали это для хэдера

@appleipad9226 6 жыл бұрын

ITDoctor молодец наконец то нашёл нормального преподавателя 👍🏿 Спасибо большое и желаю удачи в развитии канала!)

@ITDoctor 6 жыл бұрын

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

@imbydlo1552 3 жыл бұрын

А почему стиль не применяется к элементу если писать просто так: header .mainText h1??? Работает если только добавить перед ним body: body header .mainText h1

@user-qh5fr3yo1w 4 жыл бұрын

Здравствуйте Исмаил, уроки у вас просто замечательные. Гораздо лучше многих платных. Вот сейчас сделал полностью адаптивный хедер по вашему курсу. Нельзя ли при помощи медиа запросов запретить ему сжиматься до 270 пикселей, а то при меньшей ширине картинка становится не читабельной. i.imgur.com/BqKwDED.png С уважением и благодарностью Сергей Кондулуков. P.S. - Я вступил в вашу группу :-)

@ITDoctor 4 жыл бұрын

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

@user-do3or8jr7v 4 ай бұрын

Интересно, в 24году эти технологии актуальны?

@ITDoctor 3 ай бұрын

актуальны, но немного могло что то поменяться по интерфейсу программ или синтаксису в некоторых местах. но суть осталась неизменной. вот самое актуальное, но на очень простом примере для новичков kzfaq.info/get/bejne/kK2VdrGcvJ2qe6s.html