Адаптивная верстка сайтов легко. Bootstrap в прошлом!
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 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 - верстка макета](http://i.ytimg.com/vi/357_BAchn4w/mqdefault.jpg)
Вставки с маминым праграммёром волшебно освежают мозг, что позволяет продуктивно трудится мозгу дальше, это реально действует) спасибо!
Очень нравится подача твоего материала, продолжай в том же духе!
Не, ну репчик в начале просто топ 😂🔥
Благодарствую за оценку)
Напомни мне, когда слово "топ" стало означать "дикий кринж"?
@@montykay6003 можешь сама попробовать?
Кал
в коменты зашел чтобы тоже написать ))
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 Условия нового розыгрыша!
Пожалуй, лучшие видео подобного формата из тех, что я находил. Спасибо.
Спасибо еще за один урок! Жду продолжения!)
Очень нравится новый формат, чилово, никакой воды, все чики-пи-барум
Ура, наконец-то! С нетерпением жду каждый ваш ролик)
Смотрю три года. Спасибо что привил интерес к верстке
наверное лучшая подача материала, очень хорошо. подписался ради контента, а не ради часов )
Теперь идем к 1млн) (Поздравляю со 100к)
Ты уникальный учитель, который и объясняет отлично и уроки делает веселыми и интересными. Филипп топ.
В видео совершил ошибку: во время рассказа о диапазонах в медиа-запросе "@media screen and (max-width: 1200px)" нужно было написать "@media screen and (MIN-width: 1200px)". Каюсь, просто тупанул 😀
Ничего, бывает)
где ссылка на архив с этой версткой?
@@iamduman зайди в его профиль фриланса
а я написал и не могу понять почему не работает
Андрей это во всех диапазонах вместо max писать min, как написано на сайте bootstrap?
Отличный учитель и программист, отличный актер и отличный певец. Сын маминой подруги чистой воды!
Не программист, а верстальщик
Андрей, благодарю!
Все очень доходчиво и
предельно понятно ✌️
Я ранее с этими задачами не сталкивался. Встала задача контролировать подрядчика по верстке - втянулся, нашел WAYUP и как раз таки за 1$ сейчас на 4 уроке. Ну что могу сказать.... Очень понятно объясняют, обратная связь есть, и терпение тоже;)
В целом между занятиями сверстал лэндинг небольшой, b24.b24assistant.ru/ (сам набросал по проще) - для меня это мега прыжок в эти навыки, просто реально затянуло интересными занятиями)
Андрей, респект за живые занятия! Очень радует что ввод в профессию простой и понятный, а главное применим к практике, в чем я лично убедился!
Спасибо за твой труд, мы ценим!
Отличный урок, продолжай радовать нас своими отличными уроками....
Будем ждать следующее видео с нетерпением😁
У вас самый лучший урок по адаптивной вёрстке, сразу всё поняла, хотя пересмотрела много видео. Спасибо!!
Привет я что ты угменя з😅целую пока пока до завтра пока спокойной тебе Сладких тебе снов целую тебя пока люблю целую люблю уже завтра буду ложиться дома спать спокойной вам дня целую обнимаю люблю хз😊хз😂ыщ🎉у😂Да ну я тебя Да ну О я тебя ну нсосед сосед у тебя там 🎉😮 1:32 а ты что делаешь я тебе говорю
Спасибо бро. Ты не знаеш как ты мне помог. Я верстал сайты но они были не адаптивними. Но теперь я могу сделать сайт как и надо. Спасибо ещё раз
годнота нереальная место в раю обеспечено продолжай пожалуйста дальше снимать подобные видосы моё уважение
Поздравляю с 100к.заслуженно)
Крутяк! Спасибо за интересное хорошее объяснение! )
Здравствуйте Андрей, спасибо вам огромное за такой прекрасный урок, уже почти знаю как сделать гамбургер
Лучшая рубрика всех времён!)
Очень круто, всё довольно понятно рассказано. Спасибо, буду повторять.
Спасибо! В этом уроке все просто - топ!
Спасибо тебе большое за то, что ты делаешь =) и за твой позитив =)
Как всегда, все на высшем уровне!
Замечательный урок, большое спасибо 🙏
Андрей, спасибо за классные уроки!:)
Спасибо за видео! Доступно и интересно объясняешь! :)
Спасибо за урок, Андрей!
Невероятно , классный выпуск
Продолжай
Спасибо за урок! Очень интересно!
Я один заметил на 1:12 АНДРЕЙ ГАВИЛОВ)) спасибо за урок!
Не один!
Спасибо, Андрей за качественный контент
Отличный урок, благодарю!
Блин, твой контент так вырос за последнее время 🔥
Спасибо за урок, было очень интересно, и понятно.
Я сейчас решил сверстать сайт для диплома и ты как мне здоров в этом помогаешь ,огромное спасибо !!!!!!!!!
Как там диплом, все получилось?
@@bgprostak1020 защита диплома 16 июня,но уже сайт подымаю
все просто и понятно, с гамбургером буду разбираться
Жду с нетерпением следующий выпуск...
Поздравляю с серебряной кнопкой мужик, заслужил!)
Филипп Полторак-Подъяблонский рекомендует этот выпуск к просмотру! 👾 А также, сообщает, что в розыгрыше стоит поучаствовать!
Андрей очень доходчиво объясняет!
Недавно смотрю,очень полезно!)
Спасибо за полезные и бесплатные видеоуроки
Просто супер, интересно))) спасибо тебе!!!)))))))))))))))
Ну как всегда топчик ))
Адаптивность это полезно) Спасибо Андрей)
доступное обучение это супер
Объяснение прросто по кайфу)
Верстку еще не постигал, но смотреть интересно 🧐 жду каждое видео по дизайну)
Удачи и успехов 🙌
За урок бооольшое спасибо!
То чувство, когда отучился на верстальщика но всёравно смотришь, чтобы еще раз поглазеть на Андрея)
Спасибо за видео !
Крутое преобразование внешнего вида) Так и не скажешь, что один и тот же человек) Я бы так не смог прикалываться над девушками разными образами. Вот он, тип "Шут" соблазнителя)
Спасибо за урок))
Очень информативное видео👍
Круто! Топчик!!
Вечер удался когда посмотрел видео Андрей)
Ае 😙
Отличное объяснение! Большое спасибо!
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Так вот оно че)) сам дизайну обучаюсь на реальных проектах и наступил момент делать адаптив.
Я делал под каждый диапазон дизайн, а тут оказывается можно и проще, если сайт не захламлен контентом)
Во-во 🙂
Спасибо за классные видео
Жду следующий выпуск
Все отлично понял, то что нужно.
Хорошое видео
Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07
Видео просто топчик 👍
от вас столько полезного узнаешь
Я фанат твоего репа, можешь полноценную песню про веб-разработку записать?))
Подумываю)
Благодарю 🙌🐷
Интересный и познавательный выпуск
а ведь бургеру можно добавить z-index и тогда он будет нажиматься и появляющиеся меню будет красиво на весь экран)
Еху! новый выпуск!
Крутые часики, хорошо, будут моими)
Крутое видео 👍
Филипп Полторак-Подъяблонский четкий пацан 😁
Лучший 🙏
Круто!!!)
Даешь ещё больше роликов о верстке!!! Контент просто пууущка!!! Только можно пожалуйста по меньше фрагментов с укорённой версткой!)))
Так держать👍👍👍
Нужно практиковать адаптивность)
Дуже красива подача матеріалу, вона дає велику мотивацію.
Вечерняя школа, это просто бомба !!!
💣 💥
все круто!! надеюсь сам читаешь рэп
Легко и понятно, спасяб)
На Здоровье 😉
Андрей как всегда топ 😎
Класс!
Рэпчик зачетный 😎
43:50
Никогда не убирайте outline для активных элементов, к которым есть доступ с клавиатуры. Если не нравится обводка, используйте правило *:not(:focus-visible){ outline: none; }
Почему
@@residenttwitch1234 присоединяюсь к вопросу - почему??
Все понятно!
Хочу себе ещё одни часы, чтобы успевать следить за новым проектом.
А за первым как следить??
@@wayupua для первого проекта часы подарила мама, а нет, дядя прислал
Привет! Слушай, а сколько весит твоя шапка в векторе и на чем ее делал? У меня такая шапка в svg весит пару десятков мегабайт, что адово много :(
Андрей, что думаешь об обновленных шрифтах на TH-cam?
Спасибо за урок! Буду участвовать в конкурсе
Супер, то что и хотел) Андрей, лови классную идею : Стрим со входящими звонками в скайпе. Живое общение, мне кажется было бы супер.
Хорошая идея) обязательно устрою)
Мне попалась реклама Андрея Гаврилова в начале ролика Андрея Гаврилова)) хахах
Мне тоже😅
Здравствуйте но на 29:52 в файле main.cssa в строке 231 вместо класса gallery написали класс galley может из-за этого наверное и не подключалось свойство ширины.
Чекаю наступну частину випусків
Всё было круто
Спасибо за бонус "гамбургер")