Адаптация сайта под мобильные устройства за 10 минут | Адаптивная верстка | Медиа запросы css3
Вставка
- Опубліковано 27 вер 2024
- 🔥 Оформить премиум подписку - htmllessons.ru...
❤️ Отзывы тут - t.me/htmllesso...
🦋 Наш ТГ канал - t.me/redgroupc...
Поддержи видео лайком, 1500 лайков 👍 и я делаю новое видео!
Скачать 🖥 папку проекта - htmllessons.ru...
💎 Бонусный урок + ДЗ + Исходник уже доступны по нашей общей подписке в разделе "Видео" на платформе htmllessons.ru...
Сегодня мы полностью адаптируем сайт под мобильные устройства. На самом деле это очень просто. Приятного просмотра!
В этом ролике подробно рассказывается, что такое адаптивная верстка или адаптация сайта. Все это помогут нам сделать медиа запросы css3 (css media queries).
⚡️ Список интенсивов по подписке - htmllessons.ru...
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist...
VK - redgrou...
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
⚡️Закрытый клуб "5 утра" - htmllessons.ru...
💡 Личный ТГ канал - t.me/hardmaxch...
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - htmllessons.io...
#АдаптивнаяВерстка #Верстка #html #css #RedGroup
🔥 Более полное видео про адаптацию - ua-cam.com/video/tfIwl9uJ8hY/v-deo.html
Всегда думал что адаптивная вёрстка это очень сложно, и непонятно, но посмотрев это видео, всё оказалось намного проще. Спасибо за видео.
За мотивацию джуниоров огромное спасибо!🫶🔥
Вроде использую те же самые стили что и в Figma макете сайта, но в браузере все какое-то большое🤷♂️
Было бы интересно посмотреть урок про git и github,спасибо тебе за труды
Их куча на просторе интернета
@@kenn2kiкак и по верстке
Я думаю это методом тыка можно понять
Очень полезное и интересное видео. Тема раскрыта довольно понятно.
Хотелось бы больше таких видео! Спасибо большое!
Просто супер, очень полезно
Скажи пожалуйста название темы в VSCode 🙏
Если узнаешь напиши
@@tryhardsohard11 tokio night, кажется
Спасибо за видео
Спасибо за ролик, ах*енное объяснение!
После окончание курса по фронтэнду я не занимался программированием 2 года, и сейчас многое по забыл, мне очень стыдно перед своими менторами, я считаю себя каким то слабаком и никак не могу начать программировать итустроится на работу, скажите пж я один такой или все же есть и другие?
да не, нужно просто влиться в работу.
я все изучаю сам дома под моцарта(очень помогает сконцентрироваться :) ) и главное просто втянуться в процесс не отвлекаясь и тогда пойдет результат
поэтому начинай заново и пробуй кайфануть
peace✌
Таких много
Да все в порядке. Главное не сдавать и идти к цели
Красава!!!
Какой терминал у тебя стоит?
круто, давай про адаптив на sass теперь
Макс, это круто! но пора людей отучать от media в таком количестве, так как есть: clamp, max, min + относительные единицы измерений.
у clamp есть свои значительные недостатки
@@saiyajinmodedx4226 приведите пожалуйста примеры
нет, не пора, это разные инструменты для разных целей.
@@dowellkin не могу согласится, так как инструмент это всё таки единый, и решает 1 цель.
Это точно так же, когда пытаемся определить какой ES лучше, старый или новый.
Просто я пока не вижу доводов в пользу большого количества query и повторение кода.
Очевидный плюс что, медиа запросы остаются исключительно для описания логики изменений при адаптивных, структурных изменениях и не засоряются техническими строками изменения размеров шрифтов, отступов, полей и т.д.
Пожалуйста приведите пример в пользу медиа запросов, чтоб понять минусы новых подходов.
@@autodidactit4492ты имеешь ввиду использовать относительные ЕИ чтобы сайт вам адаптировался? Если так, то согласен, но мне кажется без медиа вообще не обойтись.
привет, можешь сделать обучающий ролик как реализовать сайт с верификацией авторизации по номеру телефона?(что бы на телефон отправлялась смс с кодом)
Привет, пока что слабая идея, надо ее докручивать. Потому что это слишком просто через сторонний сервис делается
Привет!
Я такую технику через панель разработчика недавно у одного индуса подхватил. Очень удобно стало алаптировать.
Еще когда то попадался ролик в sass через mixinы адаптировать. Но у меня не вышло 🥺
Если будет желание, сними плз подробный ролик про эту технику. Там по идее совсем интересно 👍
Что за техника и что за видео, как его найти? Скинь ссылку или название видео или техники, спасибо заранее.
Аа можете делать с анимациям чысы с стрелкой если можете покажите пожалуста
что делать если едет верстка и приходится через пару пикселей менять значения?
Пересмотреть верстку, значит плохо сделано.
Как анимацию сделать как в видео?
Даа, адаптив та еще гадость. Вёрстка летит к чертям и не понимаешь , что происходит со стилями =((
пожалуйста, обновите, проверьте файлы в гугл облаке(ссылки которые в проектах для прем), часто косяки при скачивании, в вип чате зачастую не получается решить вопрос, а это ж просто ссылки на скачивание)) неделю назад пробовал
Все работает, напишите в чат по поводу конкретных файлов
Как адаптировать сайт под сафари?. Я новичок в этой теме но уже работаю. Заказчик сказал что он не так отображается
@@WERWOLION Да но как и где проверить сайт для сафари. Специальные сервисы либо слишком дорогие либо с ними проблемы. Я исправил проблему с помощью автопрефиксера(prepros)
Почему у меня не работает? Все делаю как показано на видео 🥺
Покажи что написал
мужик, ты крут!!
а что по бэму?
В модульных стилях он больше не требуется
Всмысле планшеты 768+? Мой старенький телефон разрешения 2312 на 1080
Это не так работает.
афтар красавчик .чётко
Сделал браузерную игру вроде адаптировал под мобилку. Когда вертикальная ориеетация все нормально . Переворачиваешь экран в горизонтальную часть экрана не попадает в зону просмотра и верстка ползет. Как с этим бороться?
Есть медиа запрос на лэндскейпный режим
Привет Макс какое расширение используешь для chrome
Привет, minim
@@REDGroup спасибо
Добрый вечер! Подскажи как осуществить покупку интенсивов? Инструкция для КЗ не открывает.
Добрый, напишите в наш бот t.me/red_support_bot, мы отправим прямую ссылку
Поддержи видео лайком, 1500 лайков 👍 и я делаю следующее видео!
*Видео было отснято раньше нововведений о которых писал в телеге.
Скачать 🖥 папку проекта - htmllessons.ru/repositories#storage_file_84
💎 Бонусный урок + ДЗ + Исходник уже доступны по нашей общей подписке в разделе "Видео" на платформе htmllessons.ru/premium
Вроде и 100 раз адаптивил, все, что адаптивится, а новое или обновляющее подчерпнул, легенда, продолжай в том же духе
Стримы по обновленной версии вашего ресурса на Next.js жду с нетерпением
Да, завтра продолжаем. Скоро вас ждут более масштабные ролики, старый Макс возвращается
Видео как сделать верификацию пользователя с помощью номера телефона.
есть куча сервисов, которые это делают и это гипер просто
Я пару раз занимался адаптивом. Стараюсь скрыть display none все ненужные секции и занимаюсь одной. Там с помощью с clamp min max делаю адапив на все варианты, потом скрываю секцию и дноаю следующую. Но это нифига не просто, особенно, когда многе перестраивать нужно. Кайфа не испытал😊