Адаптивная верстка сайтов легко. Bootstrap в прошлом!
Вставка
- Опубліковано 14 чер 2024
- Еху! Сегодня мы займемся адаптивной версткой на 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
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](/img/n.gif)
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)". Каюсь, просто тупанул 😀
Ничего, бывает)
где ссылка на архив с этой версткой?
@@iamduman зайди в его профиль фриланса
а я написал и не могу понять почему не работает
Андрей это во всех диапазонах вместо max писать min, как написано на сайте bootstrap?
Ура, наконец-то! С нетерпением жду каждый ваш ролик)
Не, ну репчик в начале просто топ 😂🔥
Благодарствую за оценку)
Напомни мне, когда слово "топ" стало означать "дикий кринж"?
@@montykay6003 можешь сама попробовать?
Кал
в коменты зашел чтобы тоже написать ))
Спасибо еще за один урок! Жду продолжения!)
Очень нравится новый формат, чилово, никакой воды, все чики-пи-барум
Будем ждать следующее видео с нетерпением😁
Теперь идем к 1млн) (Поздравляю со 100к)
Смотрю три года. Спасибо что привил интерес к верстке
Спасибо за твой труд, мы ценим!
наверное лучшая подача материала, очень хорошо. подписался ради контента, а не ради часов )
У вас самый лучший урок по адаптивной вёрстке, сразу всё поняла, хотя пересмотрела много видео. Спасибо!!
Привет я что ты угменя з😅целую пока пока до завтра пока спокойной тебе Сладких тебе снов целую тебя пока люблю целую люблю уже завтра буду ложиться дома спать спокойной вам дня целую обнимаю люблю хз😊хз😂ыщ🎉у😂Да ну я тебя Да ну О я тебя ну нсосед сосед у тебя там 🎉😮 1:32 а ты что делаешь я тебе говорю
Лучшая рубрика всех времён!)
Крутяк! Спасибо за интересное хорошее объяснение! )
Как всегда, все на высшем уровне!
Андрей, благодарю!
Все очень доходчиво и
предельно понятно ✌️
Спасибо! В этом уроке все просто - топ!
Отличный урок, продолжай радовать нас своими отличными уроками....
Поздравляю с 100к.заслуженно)
Спасибо тебе большое за то, что ты делаешь =) и за твой позитив =)
годнота нереальная место в раю обеспечено продолжай пожалуйста дальше снимать подобные видосы моё уважение
Невероятно , классный выпуск
Продолжай
Спасибо за видео! Доступно и интересно объясняешь! :)
Спасибо за урок, Андрей!
Спасибо за урок! Очень интересно!
Очень круто, всё довольно понятно рассказано. Спасибо, буду повторять.
Замечательный урок, большое спасибо 🙏
Андрей, спасибо за классные уроки!:)
Филипп Полторак-Подъяблонский рекомендует этот выпуск к просмотру! 👾 А также, сообщает, что в розыгрыше стоит поучаствовать!
Спасибо, Андрей за качественный контент
Отличный урок, благодарю!
Блин, твой контент так вырос за последнее время 🔥
Спасибо за урок, было очень интересно, и понятно.
Здравствуйте Андрей, спасибо вам огромное за такой прекрасный урок, уже почти знаю как сделать гамбургер
Ты уникальный учитель, который и объясняет отлично и уроки делает веселыми и интересными. Филипп топ.
Ну как всегда топчик ))
Спасибо бро. Ты не знаеш как ты мне помог. Я верстал сайты но они были не адаптивними. Но теперь я могу сделать сайт как и надо. Спасибо ещё раз
Поздравляю с серебряной кнопкой мужик, заслужил!)
Андрей очень доходчиво объясняет!
Жду с нетерпением следующий выпуск...
Отличный учитель и программист, отличный актер и отличный певец. Сын маминой подруги чистой воды!
Не программист, а верстальщик
Я один заметил на 1:12 АНДРЕЙ ГАВИЛОВ)) спасибо за урок!
Не один!
все просто и понятно, с гамбургером буду разбираться
Недавно смотрю,очень полезно!)
Вечер удался когда посмотрел видео Андрей)
Ае 😙
доступное обучение это супер
Спасибо за полезные и бесплатные видеоуроки
Объяснение прросто по кайфу)
Просто супер, интересно))) спасибо тебе!!!)))))))))))))))
Верстку еще не постигал, но смотреть интересно 🧐 жду каждое видео по дизайну)
Удачи и успехов 🙌
Адаптивность это полезно) Спасибо Андрей)
За урок бооольшое спасибо!
Круто! Топчик!!
Отличное объяснение! Большое спасибо!
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Очень информативное видео👍
Спасибо за урок))
Все отлично понял, то что нужно.
Хорошое видео
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Вечерняя школа, это просто бомба !!!
💣 💥
Я сейчас решил сверстать сайт для диплома и ты как мне здоров в этом помогаешь ,огромное спасибо !!!!!!!!!
Как там диплом, все получилось?
@@bgprostak1020 защита диплома 16 июня,но уже сайт подымаю
Дуже красива подача матеріалу, вона дає велику мотивацію.
Спасибо за видео !
Еху! новый выпуск!
от вас столько полезного узнаешь
Жду следующий выпуск
Спасибо за классные видео
Видео просто топчик 👍
Я фанат твоего репа, можешь полноценную песню про веб-разработку записать?))
Подумываю)
Благодарю 🙌🐷
Круто!!!)
Интересный и познавательный выпуск
Привет! Слушай, а сколько весит твоя шапка в векторе и на чем ее делал? У меня такая шапка в svg весит пару десятков мегабайт, что адово много :(
Крутые часики, хорошо, будут моими)
Я ранее с этими задачами не сталкивался. Встала задача контролировать подрядчика по верстке - втянулся, нашел WAYUP и как раз таки за 1$ сейчас на 4 уроке. Ну что могу сказать.... Очень понятно объясняют, обратная связь есть, и терпение тоже;)
В целом между занятиями сверстал лэндинг небольшой, b24.b24assistant.ru/ (сам набросал по проще) - для меня это мега прыжок в эти навыки, просто реально затянуло интересными занятиями)
Андрей, респект за живые занятия! Очень радует что ввод в профессию простой и понятный, а главное применим к практике, в чем я лично убедился!
Так держать👍👍👍
Крутое видео 👍
Крутое преобразование внешнего вида) Так и не скажешь, что один и тот же человек) Я бы так не смог прикалываться над девушками разными образами. Вот он, тип "Шут" соблазнителя)
Чекаю наступну частину випусків
Рэпчик зачетный 😎
все круто!! надеюсь сам читаешь рэп
Филипп Полторак-Подъяблонский четкий пацан 😁
Лучший 🙏
Андрей как всегда топ 😎
Легко и понятно, спасяб)
На Здоровье 😉
Нужно практиковать адаптивность)
Андрей, что думаешь об обновленных шрифтах на UA-cam?
Хочу себе ещё одни часы, чтобы успевать следить за новым проектом.
А за первым как следить??
@@wayupua для первого проекта часы подарила мама, а нет, дядя прислал
Здравствуйте но на 29:52 в файле main.cssa в строке 231 вместо класса gallery написали класс galley может из-за этого наверное и не подключалось свойство ширины.
Класс!
Годно!
То чувство, когда отучился на верстальщика но всёравно смотришь, чтобы еще раз поглазеть на Андрея)
Хотелось бы узнать на следующем уроке как сделаются выпадающий меню
Так вот оно че)) сам дизайну обучаюсь на реальных проектах и наступил момент делать адаптив.
Я делал под каждый диапазон дизайн, а тут оказывается можно и проще, если сайт не захламлен контентом)
Во-во 🙂
Все понятно!
Даешь ещё больше роликов о верстке!!! Контент просто пууущка!!! Только можно пожалуйста по меньше фрагментов с укорённой версткой!)))
Урааа аааа💪💪
а ведь бургеру можно добавить z-index и тогда он будет нажиматься и появляющиеся меню будет красиво на весь экран)
Мне попалась реклама Андрея Гаврилова в начале ролика Андрея Гаврилова)) хахах
Мне тоже😅
К750..... аж олдскулы свело
Супер, то что и хотел) Андрей, лови классную идею : Стрим со входящими звонками в скайпе. Живое общение, мне кажется было бы супер.
Хорошая идея) обязательно устрою)