Адаптивная верстка сайтов легко. Bootstrap в прошлом!
Еху! Сегодня мы займемся адаптивной версткой на 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
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 Условия нового розыгрыша!
Очень нравится подача твоего материала, продолжай в том же духе!
Пожалуй, лучшие видео подобного формата из тех, что я находил. Спасибо.
Вставки с маминым праграммёром волшебно освежают мозг, что позволяет продуктивно трудится мозгу дальше, это реально действует) спасибо!
В видео совершил ошибку: во время рассказа о диапазонах в медиа-запросе "@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?
Ура, наконец-то! С нетерпением жду каждый ваш ролик)
Не, ну репчик в начале просто топ 😂🔥
@wayupua
4 жыл бұрын
Благодарствую за оценку)
@montykay6003
3 жыл бұрын
Напомни мне, когда слово "топ" стало означать "дикий кринж"?
@abdugafforodil4506
3 жыл бұрын
@@montykay6003 можешь сама попробовать?
@paranormal3261
2 жыл бұрын
Кал
@profeshen6357
2 жыл бұрын
в коменты зашел чтобы тоже написать ))
Спасибо еще за один урок! Жду продолжения!)
Очень нравится новый формат, чилово, никакой воды, все чики-пи-барум
Будем ждать следующее видео с нетерпением😁
Теперь идем к 1млн) (Поздравляю со 100к)
Смотрю три года. Спасибо что привил интерес к верстке
Спасибо за твой труд, мы ценим!
наверное лучшая подача материала, очень хорошо. подписался ради контента, а не ради часов )
У вас самый лучший урок по адаптивной вёрстке, сразу всё поняла, хотя пересмотрела много видео. Спасибо!!
@awesom356
Жыл бұрын
Привет я что ты угменя з😅целую пока пока до завтра пока спокойной тебе Сладких тебе снов целую тебя пока люблю целую люблю уже завтра буду ложиться дома спать спокойной вам дня целую обнимаю люблю хз😊хз😂ыщ🎉у😂Да ну я тебя Да ну О я тебя ну нсосед сосед у тебя там 🎉😮 1:32 а ты что делаешь я тебе говорю
Лучшая рубрика всех времён!)
Крутяк! Спасибо за интересное хорошее объяснение! )
Андрей, благодарю! Все очень доходчиво и предельно понятно ✌️
Как всегда, все на высшем уровне!
Спасибо! В этом уроке все просто - топ!
Отличный урок, продолжай радовать нас своими отличными уроками....
Поздравляю с 100к.заслуженно)
Спасибо тебе большое за то, что ты делаешь =) и за твой позитив =)
годнота нереальная место в раю обеспечено продолжай пожалуйста дальше снимать подобные видосы моё уважение
Невероятно , классный выпуск Продолжай
Спасибо за видео! Доступно и интересно объясняешь! :)
Спасибо за урок, Андрей!
Очень круто, всё довольно понятно рассказано. Спасибо, буду повторять.
Спасибо за урок! Очень интересно!
Замечательный урок, большое спасибо 🙏
Андрей, спасибо за классные уроки!:)
Филипп Полторак-Подъяблонский рекомендует этот выпуск к просмотру! 👾 А также, сообщает, что в розыгрыше стоит поучаствовать!
Спасибо, Андрей за качественный контент
Отличный урок, благодарю!
Блин, твой контент так вырос за последнее время 🔥
Спасибо за урок, было очень интересно, и понятно.
Здравствуйте Андрей, спасибо вам огромное за такой прекрасный урок, уже почти знаю как сделать гамбургер
Ну как всегда топчик ))
Ты уникальный учитель, который и объясняет отлично и уроки делает веселыми и интересными. Филипп топ.
Спасибо бро. Ты не знаеш как ты мне помог. Я верстал сайты но они были не адаптивними. Но теперь я могу сделать сайт как и надо. Спасибо ещё раз
Поздравляю с серебряной кнопкой мужик, заслужил!)
Андрей очень доходчиво объясняет!
Жду с нетерпением следующий выпуск...
Отличный учитель и программист, отличный актер и отличный певец. Сын маминой подруги чистой воды!
@vana__f7570
3 жыл бұрын
Не программист, а верстальщик
все просто и понятно, с гамбургером буду разбираться
Я один заметил на 1:12 АНДРЕЙ ГАВИЛОВ)) спасибо за урок!
@user-ku9jd6ko2n
3 жыл бұрын
Не один!
Недавно смотрю,очень полезно!)
Вечер удался когда посмотрел видео Андрей)
@wayupua
4 жыл бұрын
Ае 😙
доступное обучение это супер
Спасибо за полезные и бесплатные видеоуроки
Просто супер, интересно))) спасибо тебе!!!)))))))))))))))
Объяснение прросто по кайфу)
Верстку еще не постигал, но смотреть интересно 🧐 жду каждое видео по дизайну)
@wayupua
4 жыл бұрын
Удачи и успехов 🙌
За урок бооольшое спасибо!
Адаптивность это полезно) Спасибо Андрей)
Круто! Топчик!!
Отличное объяснение! Большое спасибо!
@user-rinat007
3 жыл бұрын
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Очень информативное видео👍
Спасибо за урок))
Все отлично понял, то что нужно. Хорошое видео
@user-rinat007
3 жыл бұрын
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Вечерняя школа, это просто бомба !!!
@wayupua
4 жыл бұрын
💣 💥
Я сейчас решил сверстать сайт для диплома и ты как мне здоров в этом помогаешь ,огромное спасибо !!!!!!!!!
@bgprostak1020
2 жыл бұрын
Как там диплом, все получилось?
@den4590
2 жыл бұрын
@@bgprostak1020 защита диплома 16 июня,но уже сайт подымаю
Дуже красива подача матеріалу, вона дає велику мотивацію.
Спасибо за видео !
Еху! новый выпуск!
от вас столько полезного узнаешь
Жду следующий выпуск
Спасибо за классные видео
Видео просто топчик 👍
Я фанат твоего репа, можешь полноценную песню про веб-разработку записать?))
@wayupua
4 жыл бұрын
Подумываю)
@wayupua
4 жыл бұрын
Благодарю 🙌🐷
Круто!!!)
Интересный и познавательный выпуск
Крутые часики, хорошо, будут моими)
Привет! Слушай, а сколько весит твоя шапка в векторе и на чем ее делал? У меня такая шапка в svg весит пару десятков мегабайт, что адово много :(
Я ранее с этими задачами не сталкивался. Встала задача контролировать подрядчика по верстке - втянулся, нашел WAYUP и как раз таки за 1$ сейчас на 4 уроке. Ну что могу сказать.... Очень понятно объясняют, обратная связь есть, и терпение тоже;) В целом между занятиями сверстал лэндинг небольшой, b24.b24assistant.ru/ (сам набросал по проще) - для меня это мега прыжок в эти навыки, просто реально затянуло интересными занятиями) Андрей, респект за живые занятия! Очень радует что ввод в профессию простой и понятный, а главное применим к практике, в чем я лично убедился!
Так держать👍👍👍
Крутое видео 👍
Крутое преобразование внешнего вида) Так и не скажешь, что один и тот же человек) Я бы так не смог прикалываться над девушками разными образами. Вот он, тип "Шут" соблазнителя)
Чекаю наступну частину випусків
все круто!! надеюсь сам читаешь рэп
Филипп Полторак-Подъяблонский четкий пацан 😁
@wayupua
4 жыл бұрын
Лучший 🙏
Рэпчик зачетный 😎
Андрей как всегда топ 😎
Легко и понятно, спасяб)
@wayupua
4 жыл бұрын
На Здоровье 😉
Нужно практиковать адаптивность)
Андрей, что думаешь об обновленных шрифтах на KZread?
Хочу себе ещё одни часы, чтобы успевать следить за новым проектом.
@wayupua
4 жыл бұрын
А за первым как следить??
@s.angelina5926
4 жыл бұрын
@@wayupua для первого проекта часы подарила мама, а нет, дядя прислал
Здравствуйте но на 29:52 в файле main.cssa в строке 231 вместо класса gallery написали класс galley может из-за этого наверное и не подключалось свойство ширины.
Класс!
Годно!
То чувство, когда отучился на верстальщика но всёравно смотришь, чтобы еще раз поглазеть на Андрея)
Хотелось бы узнать на следующем уроке как сделаются выпадающий меню
Так вот оно че)) сам дизайну обучаюсь на реальных проектах и наступил момент делать адаптив. Я делал под каждый диапазон дизайн, а тут оказывается можно и проще, если сайт не захламлен контентом)
@wayupua
4 жыл бұрын
Во-во 🙂
Все понятно!
Даешь ещё больше роликов о верстке!!! Контент просто пууущка!!! Только можно пожалуйста по меньше фрагментов с укорённой версткой!)))
Урааа аааа💪💪
а ведь бургеру можно добавить z-index и тогда он будет нажиматься и появляющиеся меню будет красиво на весь экран)
Мне попалась реклама Андрея Гаврилова в начале ролика Андрея Гаврилова)) хахах
@pollyraide
3 жыл бұрын
Мне тоже😅
К750..... аж олдскулы свело
Супер, то что и хотел) Андрей, лови классную идею : Стрим со входящими звонками в скайпе. Живое общение, мне кажется было бы супер.
@wayupua
4 жыл бұрын
Хорошая идея) обязательно устрою)