Адаптивная верстка сайтов легко. Bootstrap в прошлом!

Рет қаралды 115,553

Күн бұрын

Еху! Сегодня мы займемся адаптивной версткой на flexbox: реальный макет нам в помощь. Ты узнаешь, как работать с медиа-запросами в CSS, переходить от десктопной к мобильной версии быстро, а также научишься делать меню-гамбургер. И...
💻 «Веб-верстальщик: начало» - твой бесплатный (он снова бесплатный) онлайн-курс:
bit.ly/2C4WEsa
Скачать файлы верстки: wayup.in/lm/load/bma
0:00 Хайлайты выпуска
0:28 Новый рэп, мэн! 😎
2:03 Результаты розыгрыша из прошлого выпуска
4:02 Как работает адаптивность (отзывчивость)
12:57 Какую верстку будем адаптировать сегодня
16:47 Решаем проблему горизонтального скролла
21:58 Адаптация изображений
24:38 Как выбирать диапазоны
27:03 Важно помнить верстальщику
29:20 Изображения: из строки в колонку
31:45 Проверяем диапазоны снизу-вверх
33:55 Делаем меню-гамбургер
38:05 Подключаем jQuery
44:37 Анонс моего онлайн-курса по основам верстки
45:44 Условия нового розыгрыша!
🌃🎓🌙 «Вечерняя школа» - это регулярное шоу для тех, кто хочет освоить дизайн и разработку сайтов. Весело. Нескучно. Чтобы вот прямо захватывало. Идеально смотреть после работы или во время работы, если она надоела и ты хочешь выйти на фриланс.
😉 Андрей Гаврилов - мое имя. Делаю сайты 10 лет. А еще, создал образовательный онлайн-проект WAYUP и здесь же преподаю. Путешествую по всему миру и веду блог:
/ andrew.gavrilov
🎁 Используй промо-код NIGHTSCHOOL при оплате любого моего коучинга на WAYUP и получи скидку -30%:
bit.ly/2MZDwOJ
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!

Пікірлер: 345

@wayupua 4 жыл бұрын

0:00 Хайлайты выпуска 0:28 Новый рэп, мэн! 😎 2:03 Результаты розыгрыша из прошлого выпуска 4:02 Как работает адаптивность (отзывчивость) 12:57 Какую верстку будем адаптировать сегодня 16:47 Решаем проблему горизонтального скролла 21:58 Адаптация изображений 24:38 Как выбирать диапазоны 27:03 Важно помнить верстальщику 29:20 Изображения: из строки в колонку 31:45 Проверяем диапазоны снизу-вверх 33:55 Делаем меню-гамбургер 38:05 Подключаем jQuery 44:37 Анонс моего онлайн-курса по основам верстки 45:44 Условия нового розыгрыша!

@artyommarchenko6998 4 жыл бұрын

Очень нравится подача твоего материала, продолжай в том же духе!

@soez8815 3 жыл бұрын

Пожалуй, лучшие видео подобного формата из тех, что я находил. Спасибо.

@user-uk7vq2ou9g 2 жыл бұрын

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

@wayupua 4 жыл бұрын

В видео совершил ошибку: во время рассказа о диапазонах в медиа-запросе "@media screen and (max-width: 1200px)" нужно было написать "@media screen and (MIN-width: 1200px)". Каюсь, просто тупанул 😀

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

Ничего, бывает)

@kar1kam1 4 жыл бұрын

где ссылка на архив с этой версткой?

@johnproskurnin8214 3 жыл бұрын

@@iamduman зайди в его профиль фриланса

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

а я написал и не могу понять почему не работает

@zhaslan6943 3 жыл бұрын

Андрей это во всех диапазонах вместо max писать min, как написано на сайте bootstrap?

@cat.basilio 4 жыл бұрын

Ура, наконец-то! С нетерпением жду каждый ваш ролик)

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

Не, ну репчик в начале просто топ 😂🔥

@wayupua 4 жыл бұрын

Благодарствую за оценку)

@montykay6003 3 жыл бұрын

Напомни мне, когда слово "топ" стало означать "дикий кринж"?

@abdugafforodil4506 3 жыл бұрын

@@montykay6003 можешь сама попробовать?

@paranormal3261 2 жыл бұрын

Кал

@profeshen6357 2 жыл бұрын

в коменты зашел чтобы тоже написать ))

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

Спасибо еще за один урок! Жду продолжения!)

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

Очень нравится новый формат, чилово, никакой воды, все чики-пи-барум

@rikkisun4378 4 жыл бұрын

Будем ждать следующее видео с нетерпением😁

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

Теперь идем к 1млн) (Поздравляю со 100к)

@NewsCompass 4 жыл бұрын

Смотрю три года. Спасибо что привил интерес к верстке

@artyommarchenko6998 4 жыл бұрын

Спасибо за твой труд, мы ценим!

@bipolarcw 3 жыл бұрын

наверное лучшая подача материала, очень хорошо. подписался ради контента, а не ради часов )

@evgenica_grecian Жыл бұрын

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

@awesom356 Жыл бұрын

Привет я что ты угменя з😅целую пока пока до завтра пока спокойной тебе Сладких тебе снов целую тебя пока люблю целую люблю уже завтра буду ложиться дома спать спокойной вам дня целую обнимаю люблю хз😊хз😂ыщ🎉у😂Да ну я тебя Да ну О я тебя ну нсосед сосед у тебя там 🎉😮 1:32 а ты что делаешь я тебе говорю

@artyommarchenko6998 4 жыл бұрын

Лучшая рубрика всех времён!)

@valbv 3 жыл бұрын

Крутяк! Спасибо за интересное хорошее объяснение! )

@vanmihaylovich 4 жыл бұрын

Андрей, благодарю! Все очень доходчиво и предельно понятно ✌️

@dinarl8439 4 жыл бұрын

Как всегда, все на высшем уровне!

@user-cv4uh8co6p 2 жыл бұрын

Спасибо! В этом уроке все просто - топ!

@Kakhaize 3 жыл бұрын

Отличный урок, продолжай радовать нас своими отличными уроками....

@crawd9296 4 жыл бұрын

Поздравляю с 100к.заслуженно)

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

Спасибо тебе большое за то, что ты делаешь =) и за твой позитив =)

@DeadImperor 3 жыл бұрын

годнота нереальная место в раю обеспечено продолжай пожалуйста дальше снимать подобные видосы моё уважение

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

Невероятно , классный выпуск Продолжай

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

Спасибо за видео! Доступно и интересно объясняешь! :)

@user-fg8pq3kk5l 2 жыл бұрын

Спасибо за урок, Андрей!

@user-mk6cl8tv5p 2 жыл бұрын

Очень круто, всё довольно понятно рассказано. Спасибо, буду повторять.

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

Спасибо за урок! Очень интересно!

@camilla9744 Жыл бұрын

Замечательный урок, большое спасибо 🙏

@shazplay8878 4 жыл бұрын

Андрей, спасибо за классные уроки!:)

@wayupua 4 жыл бұрын

Филипп Полторак-Подъяблонский рекомендует этот выпуск к просмотру! 👾 А также, сообщает, что в розыгрыше стоит поучаствовать!

@const-shish 4 жыл бұрын

Спасибо, Андрей за качественный контент

@ivanphoto4968 4 жыл бұрын

Отличный урок, благодарю!

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

Блин, твой контент так вырос за последнее время 🔥

@anonymoususer4952 4 жыл бұрын

Спасибо за урок, было очень интересно, и понятно.

@muhammadjonpolvanov4915 4 жыл бұрын

Здравствуйте Андрей, спасибо вам огромное за такой прекрасный урок, уже почти знаю как сделать гамбургер

@sergeykulish433 4 жыл бұрын

Ну как всегда топчик ))

@baboon_hero 7 ай бұрын

Ты уникальный учитель, который и объясняет отлично и уроки делает веселыми и интересными. Филипп топ.

@miyirbek6821 3 жыл бұрын

Спасибо бро. Ты не знаеш как ты мне помог. Я верстал сайты но они были не адаптивними. Но теперь я могу сделать сайт как и надо. Спасибо ещё раз

@ruslanmoskvichev 4 жыл бұрын

Поздравляю с серебряной кнопкой мужик, заслужил!)

@rikkisun4378 4 жыл бұрын

Андрей очень доходчиво объясняет!

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

Жду с нетерпением следующий выпуск...

@blackmulthumor 3 жыл бұрын

Отличный учитель и программист, отличный актер и отличный певец. Сын маминой подруги чистой воды!

@vana__f7570 3 жыл бұрын

Не программист, а верстальщик

@viktorxol742 3 жыл бұрын

все просто и понятно, с гамбургером буду разбираться

@sanndroids8652 4 жыл бұрын

Я один заметил на 1:12 АНДРЕЙ ГАВИЛОВ)) спасибо за урок!

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

Не один!

@olenadomotska3611 4 жыл бұрын

Недавно смотрю,очень полезно!)

@aryatta3609 4 жыл бұрын

Вечер удался когда посмотрел видео Андрей)

@wayupua 4 жыл бұрын

Ае 😙

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

доступное обучение это супер

@azimabdullayev9832 4 жыл бұрын

Спасибо за полезные и бесплатные видеоуроки

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

Просто супер, интересно))) спасибо тебе!!!)))))))))))))))

@phd-oldremain 2 жыл бұрын

Объяснение прросто по кайфу)

@igornovozhilov9783 4 жыл бұрын

Верстку еще не постигал, но смотреть интересно 🧐 жду каждое видео по дизайну)

@wayupua 4 жыл бұрын

Удачи и успехов 🙌

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

За урок бооольшое спасибо!

@sanndroids8652 4 жыл бұрын

Адаптивность это полезно) Спасибо Андрей)

@vadik5636 3 жыл бұрын

Круто! Топчик!!

@jahongirmusayev658 3 жыл бұрын

Отличное объяснение! Большое спасибо!

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

Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07

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

Очень информативное видео👍

@krakhmalev_vlad 4 жыл бұрын

Спасибо за урок))

@vitaliypasiuta8636 3 жыл бұрын

Все отлично понял, то что нужно. Хорошое видео

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

Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07

@arthurmakhmudov8702 4 жыл бұрын

Вечерняя школа, это просто бомба !!!

@wayupua 4 жыл бұрын

💣 💥

@den4590 2 жыл бұрын

Я сейчас решил сверстать сайт для диплома и ты как мне здоров в этом помогаешь ,огромное спасибо !!!!!!!!!

@bgprostak1020 2 жыл бұрын

Как там диплом, все получилось?

@den4590 2 жыл бұрын

@@bgprostak1020 защита диплома 16 июня,но уже сайт подымаю

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

Дуже красива подача матеріалу, вона дає велику мотивацію.

@azimabdullayev9832 4 жыл бұрын

Спасибо за видео !

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

Еху! новый выпуск!

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

от вас столько полезного узнаешь

@rikkisun4378 4 жыл бұрын

Жду следующий выпуск

@rikkisun4378 4 жыл бұрын

Спасибо за классные видео

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

Видео просто топчик 👍

@krakhmalev_vlad 4 жыл бұрын

Я фанат твоего репа, можешь полноценную песню про веб-разработку записать?))

@wayupua 4 жыл бұрын

Подумываю)

@wayupua 4 жыл бұрын

Благодарю 🙌🐷

@Alex-qy9mc 3 жыл бұрын

Круто!!!)

@rikkisun4378 4 жыл бұрын

Интересный и познавательный выпуск

@UgolokEnota 4 жыл бұрын

Крутые часики, хорошо, будут моими)

@Shico_ 2 жыл бұрын

Привет! Слушай, а сколько весит твоя шапка в векторе и на чем ее делал? У меня такая шапка в svg весит пару десятков мегабайт, что адово много :(

@b24assistant45 3 жыл бұрын

Я ранее с этими задачами не сталкивался. Встала задача контролировать подрядчика по верстке - втянулся, нашел WAYUP и как раз таки за 1$ сейчас на 4 уроке. Ну что могу сказать.... Очень понятно объясняют, обратная связь есть, и терпение тоже;) В целом между занятиями сверстал лэндинг небольшой, b24.b24assistant.ru/ (сам набросал по проще) - для меня это мега прыжок в эти навыки, просто реально затянуло интересными занятиями) Андрей, респект за живые занятия! Очень радует что ввод в профессию простой и понятный, а главное применим к практике, в чем я лично убедился!

@Alex-qy9mc 3 жыл бұрын

Так держать👍👍👍

@slavtt777 4 жыл бұрын

Крутое видео 👍

@johnspireng1960 Жыл бұрын

Крутое преобразование внешнего вида) Так и не скажешь, что один и тот же человек) Я бы так не смог прикалываться над девушками разными образами. Вот он, тип "Шут" соблазнителя)

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

Чекаю наступну частину випусків

@user-io1vt2sx3w 2 жыл бұрын

все круто!! надеюсь сам читаешь рэп

@rikkisun4378 4 жыл бұрын

Филипп Полторак-Подъяблонский четкий пацан 😁

@wayupua 4 жыл бұрын

Лучший 🙏

@rikkisun4378 4 жыл бұрын

Рэпчик зачетный 😎

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

Андрей как всегда топ 😎

@aliestercrowley7910 4 жыл бұрын

Легко и понятно, спасяб)

@wayupua 4 жыл бұрын

На Здоровье 😉

@olexandrvol4998 4 жыл бұрын

Нужно практиковать адаптивность)

@const-shish 4 жыл бұрын

Андрей, что думаешь об обновленных шрифтах на KZfaq?

@s.angelina5926 4 жыл бұрын

Хочу себе ещё одни часы, чтобы успевать следить за новым проектом.

@wayupua 4 жыл бұрын

А за первым как следить??

@s.angelina5926 4 жыл бұрын

@@wayupua для первого проекта часы подарила мама, а нет, дядя прислал

@all_people_the_world 3 жыл бұрын

Здравствуйте но на 29:52 в файле main.cssa в строке 231 вместо класса gallery написали класс galley может из-за этого наверное и не подключалось свойство ширины.

@nuclearwar1701 4 жыл бұрын

Класс!

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

Годно!

@allagulov 4 жыл бұрын

То чувство, когда отучился на верстальщика но всёравно смотришь, чтобы еще раз поглазеть на Андрея)

@muhammadjonpolvanov4915 4 жыл бұрын

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

@sergkovalenko3455 4 жыл бұрын

Так вот оно че)) сам дизайну обучаюсь на реальных проектах и наступил момент делать адаптив. Я делал под каждый диапазон дизайн, а тут оказывается можно и проще, если сайт не захламлен контентом)

@wayupua 4 жыл бұрын

Во-во 🙂

@vadik5636 3 жыл бұрын

Все понятно!