Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]

Сейчас я познакомлю тебя с адаптивной версткой сайтов. Расскажу зачем она нужна и покажу на практике ряд основных подходов. Изучим медиа запросы и их конструкции. Поймем что тебе не нужен Bootstrap! Поговорим об mobile first, а так же о лучших практиках адаптива. Адаптивная вёрстка позволяет веб-страницам подстраиваться (адаптироваться) под различные размеры мониторов ПК, экранов планшетов и смартфонов. И чтобы эффективно потреблять трафик с мобильных устройств, нужно предлагать пользователям сайты с максимально удобным, адаптивным интерфейсом. Помимо этого, адаптивные сайты имеют приоритет при поисковой выдаче. Одним словом, адаптивная верстка сегодня крайне важна, и любому мастеру нужно уметь её делать и делать хорошо!

🔴 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:

Содержание:
00:00 - Вступление
01:05 - Подходы к верстке
01:30 - О контейнере
03:01 - Фиксированная верстка
06:46 - Отзывчивая верстка
11:52 - Адаптивная верстка (тебе не нужен Bootstrap)
17:29 - Отзывчиво адаптивная верстка
19:50 - Какой тип верстки использовать
20:34 - Медиа запросы
28:05 - Mobile First
29:00 - Хорошие практики адаптива
36:13 - Домашнее задание + макет

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[FreelancerLifeStyle]

Ценю твой ЛАЙК и КОММЕНТ!

Содержание:
00:00 - Вступление
01:05 - Подходы к верстке
01:30 - О контейнере
03:01 - Фиксированная верстка
06:46 - Отзывчивая верстка
11:52 - Адаптивная верстка (тебе не нужен Bootstrap)
17:29 - Отзывчиво адаптивная верстка
19:50 - Какой тип верстки использовать
20:34 - Медиа запросы
28:05 - Mobile First
29:00 - Хорошие практики адаптива
36:13 - Домашнее задание + макет

[andreylebedev]

Он еще и домашку дает. Боже храни этот канал! Куча годной инфы. Один из тех самых моментов, когда алгоритмы ютуба не подвели!

[TakuatChanel]

Ты хоть представляешь, насколько ты всем помог?! Уважение тебе за такие старания.

[wmirkzp]

Новичкам рекомендую по истечении времени пересматривать видео-уроки Евгения, подчерпнете много нового что упустили при первом просмотре. Евгений Вам спасибо за труд.

[dimalesnik]

хочу описать свою благодарность тебе как учителю, но честно говоря, не могу найти подходящих слов, одни эмоции:)) На столько всё КРУТО! Я считаю, все кто обучаются по твоим видео, обязаны тебе мат. поддержкой твоего канала, в том числе и я. Конечно же, после того как учёба даст свои плоды;) ОГРОМНЫЙ ЛАЙК Жека!:) Цены тебе нет!

[mariadawnwork]

И дело даже не в том, что информация прекрасно подана, а для меня пожалуй важнее человечный человек несущий знания, воплощающий на практике: "Счастья всем и за даром и пусть ни кто не уйдёт обиженным!" Стругацкие - "Пикник на обочине"
Такие люди возвращают во мне потерянную веру в человечество. Спасибо)))

[quylbvm]

Это совершилось!!...на конец то годный видос про адаптив!

[AntaresOneTwo]

Одно только выражение: "Живи, а работай в свободное время" меня мотивирует. Спасибо за уроки, очень информативно. За неделю уже научился неплохо так понимать что к чему и верстать небольшие простенькие сайты.

[ithinkitsatiger]

Как же хорошо что я попал сюда, для меня как человека который начал осваивать frontend не канал а драгоценность!

[AlexBurkun]

Просто "ВАУ!".. Спасибо огромное за отлично сделанную работу, проходил онлайн-курсы у одних товарищей, которые сейчас много где на слуху, сколько бы не морочился с их видео и вопросами к "наставникам" всё опять ссылалось на возвращение к пересмотру видео с практикой, а тут всё не просто кратко, а ЛАКОНИЧНО, что сейчас крайне большая редкость, попросту 0 воды, я даже удивился что прошло почти 40 минут, так как у конкурентов пришлось бы потратить часов 6 и то, не факт что помогло бы (ведь не просто так я попал сюда).В общем, ещё раз благодарю за сделанную работу, видео сохраняю к себе и подписываюсь, потому что только после Вас смог свои сразу 4 макета превратить в полностью отзывчивую верстку на разных устройствах, над которыми морочился неделями и задавал все значения отдельно каждому медиа запросу, пока не сдался и, к счастью, попал сюда. Удачи в развитии канала, добрейший человек!

[sterd]

Ну наконец то появился нормальный учитель и объяснил простым языком на примерах, адаптив. Все по делу и без всякой слизи. Так держать!!!

[andykud]

Лучшая годнота что я видел по верстке. Чувак тебе определенно некогда лить воду.

[Mifuragon]

Как круто, что ютуб мне порекомендовал этого человека! один из лучших учтилей по вёрстке, что я встречал! спасибо, что там понятно всё описываете

[rirysxp]

501й коммент)) Жека, у тебя просто дар преподавателя!. Даже слов нет, как тебя ещё назвать)

[xygkshq]

Господи, чтоб вы долго жили. Как же всё понятно🤯❤️

[abdullaevfarhad]

Начинал смотреть эти видео, когда пришел на первую работу. Прошло уже три года, я дорос до мидла, и все равно их пересматриваю по необходимости (на работе почти не верстаю и всякое забывается). Женя, Спасибо тебе за твой труд сквозь года.

[bwehdmt]

Вот это ты залепил!!! За неполных 40 мин. гора полезной инфы. Многие из нас, новичков, дни тратим, чтобы разобраться в таких нюансах... А здесь всё коротко и по теме! Спасибо!

[ukraine_son]

Никогда не встречал подобного упорядоченного руководства для создания адаптивности, на ютубе. Спасибо!

[tuoktsf]

Первое видео, которое посмотрел на канале.
Учился сам, мучался, искал годный контент, посоветовали разобраться с Бутстрапом. Скачал, посмотрел обучалку и подумал: "Что это за костыли такие, неужели нельзя такую фигню руками сделать?".
Залез на Ютуб с соответствующим запросом - БАМ Жекино видео "Вам не нужен Бутстрап!" И понеслось :)

[onebytesiteit-]

и теперь я понял почему это видео №1 в выдаче по запросу "адаптивная верстка" .
А я всем бутстрап советовал использовать а тут делов то . эх... не буду оправдываться просто сделаю ролик как делать адаптив без бутстрапа.
Жека. Респект тебе, ты просто перевернул игру в мире верстке на Ютубе!!!