Адаптация сайта под мобильные устройства за 10 минут | Адаптивная верстка | Медиа запросы css3

Подписаться 65 тыс.

Просмотров 44 тыс.

50% 1

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
❤️ Отзывы тут - t.me/htmllessons_reviews
🦋 Наш ТГ канал - t.me/redgroupchannel
Поддержи видео лайком, 1500 лайков 👍 и я делаю новое видео!
Скачать 🖥 папку проекта - htmllessons.ru/storage#storag...
💎 Бонусный урок + ДЗ + Исходник уже доступны по нашей общей подписке в разделе "Видео" на платформе htmllessons.ru/premium
Сегодня мы полностью адаптируем сайт под мобильные устройства. На самом деле это очень просто. Приятного просмотра!
В этом ролике подробно рассказывается, что такое адаптивная верстка или адаптация сайта. Все это помогут нам сделать медиа запросы css3 (css media queries).
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
🌿 Плейлист с полными курсами для новичков и не только - • Полные курсы
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
#АдаптивнаяВерстка #Верстка #html #css #RedGroup

Опубликовано:

28 окт 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@REDGroup 7 месяцев назад

Поддержи видео лайком, 1500 лайков 👍 и я делаю следующее видео! *Видео было отснято раньше нововведений о которых писал в телеге. Скачать 🖥 папку проекта - htmllessons.ru/repositories#storage_file_84 💎 Бонусный урок + ДЗ + Исходник уже доступны по нашей общей подписке в разделе "Видео" на платформе htmllessons.ru/premium

@qwerty-if6mb 2 месяца назад

Всегда думал что адаптивная вёрстка это очень сложно, и непонятно, но посмотрев это видео, всё оказалось намного проще. Спасибо за видео.

@Duh280 2 месяца назад

За мотивацию джуниоров огромное спасибо!🫶🔥

@romashubin2422 5 месяцев назад

Просто супер, очень полезно

@alexgyryanov627 6 месяцев назад

Я пару раз занимался адаптивом. Стараюсь скрыть display none все ненужные секции и занимаюсь одной. Там с помощью с clamp min max делаю адапив на все варианты, потом скрываю секцию и дноаю следующую. Но это нифига не просто, особенно, когда многе перестраивать нужно. Кайфа не испытал😊

@imqrffeyhd 21 день назад

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

@user-pj9mp5vd6n 7 месяцев назад

Спасибо за ролик, ах*енное объяснение!

@user-ks5bg9ni4p 7 месяцев назад

Было бы интересно посмотреть урок про git и github,спасибо тебе за труды

@kenn2ki 7 месяцев назад

Их куча на просторе интернета

@Evgeny.. 7 месяцев назад

@@kenn2kiкак и по верстке

@alexmiller7378 3 месяца назад

Я думаю это методом тыка можно понять

@milana4818 6 месяцев назад

Очень полезное и интересное видео. Тема раскрыта довольно понятно. Хотелось бы больше таких видео! Спасибо большое!

@st.bestich2422 7 месяцев назад

Какой терминал у тебя стоит?

@oraz_mah 6 месяцев назад

Красава!!!

@vsenikiperebral1751 6 месяцев назад

Привет! Я такую технику через панель разработчика недавно у одного индуса подхватил. Очень удобно стало алаптировать. Еще когда то попадался ролик в sass через mixinы адаптировать. Но у меня не вышло 🥺 Если будет желание, сними плз подробный ролик про эту технику. Там по идее совсем интересно 👍

@user-ru9tb7hg7u 4 месяца назад

Что за техника и что за видео, как его найти? Скинь ссылку или название видео или техники, спасибо заранее.

@vadim_romanov 7 месяцев назад

круто, давай про адаптив на sass теперь

@alfiyabebezova3551 4 месяца назад

Как анимацию сделать как в видео?

@user-rp7ws7on9 3 месяца назад

Аа можете делать с анимациям чысы с стрелкой если можете покажите пожалуста

@user-hf1ev8mw5k 22 дня назад

Почему у меня не работает? Все делаю как показано на видео 🥺

@user-hz3tr9bu1h 6 месяцев назад

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

@REDGroup 6 месяцев назад

Все работает, напишите в чат по поводу конкретных файлов

@user-pp1lv2hh5i 6 месяцев назад

Скажи пожалуйста название темы в VSCode 🙏

@tryhardsohard11 6 месяцев назад

Если узнаешь напиши

@bashkort_erete 2 месяца назад

@@tryhardsohard11 tokio night, кажется

@second-ch4yc 15 дней назад

что делать если едет верстка и приходится через пару пикселей менять значения?

@REDGroup 15 дней назад

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

@hackerscp1707 4 месяца назад

Как адаптировать сайт под сафари?. Я новичок в этой теме но уже работаю. Заказчик сказал что он не так отображается

@hackerscp1707 3 месяца назад

@@WERWOLION Да но как и где проверить сайт для сафари. Специальные сервисы либо слишком дорогие либо с ними проблемы. Я исправил проблему с помощью автопрефиксера(prepros)

@user-ip3cm8jn6k 6 месяцев назад

После окончание курса по фронтэнду я не занимался программированием 2 года, и сейчас многое по забыл, мне очень стыдно перед своими менторами, я считаю себя каким то слабаком и никак не могу начать программировать итустроится на работу, скажите пж я один такой или все же есть и другие?

@lonelybosh 3 месяца назад

да не, нужно просто влиться в работу. я все изучаю сам дома под моцарта(очень помогает сконцентрироваться :) ) и главное просто втянуться в процесс не отвлекаясь и тогда пойдет результат поэтому начинай заново и пробуй кайфануть peace✌

@andrewsam224 2 месяца назад

Таких много

@myxamedalzade74 7 месяцев назад

привет, можешь сделать обучающий ролик как реализовать сайт с верификацией авторизации по номеру телефона?(что бы на телефон отправлялась смс с кодом)

@REDGroup 7 месяцев назад

Привет, пока что слабая идея, надо ее докручивать. Потому что это слишком просто через сторонний сервис делается

@autodidactit4492 7 месяцев назад

Макс, это круто! но пора людей отучать от media в таком количестве, так как есть: clamp, max, min + относительные единицы измерений.

@saiyajinmodedx4226 7 месяцев назад

у clamp есть свои значительные недостатки

@autodidactit4492 7 месяцев назад

@@saiyajinmodedx4226 приведите пожалуйста примеры

@dowellkin 7 месяцев назад

нет, не пора, это разные инструменты для разных целей.

@autodidactit4492 6 месяцев назад

@@dowellkin не могу согласится, так как инструмент это всё таки единый, и решает 1 цель. Это точно так же, когда пытаемся определить какой ES лучше, старый или новый. Просто я пока не вижу доводов в пользу большого количества query и повторение кода. Очевидный плюс что, медиа запросы остаются исключительно для описания логики изменений при адаптивных, структурных изменениях и не засоряются техническими строками изменения размеров шрифтов, отступов, полей и т.д. Пожалуйста приведите пример в пользу медиа запросов, чтоб понять минусы новых подходов.

@Kartoshka721 6 месяцев назад

@@autodidactit4492ты имеешь ввиду использовать относительные ЕИ чтобы сайт вам адаптировался? Если так, то согласен, но мне кажется без медиа вообще не обойтись.

@sheetdownloads 7 месяцев назад

Макс, часто видел у тебя фичу которая дописывает или предлагает варианты типизации событий. Что за за расширение? Или что бы советовал для VSCode? Ничего найти не могу, а все эти виды FormEvent не могу запомнить

@REDGroup 7 месяцев назад

Настройка была на канале, к концу года планирую новое видео по настройке. Там связка настроек и расширений

@You.tube-User- 18 дней назад

Всмысле планшеты 768+? Мой старенький телефон разрешения 2312 на 1080

@REDGroup 18 дней назад

Это не так работает.

@keidi9089 7 месяцев назад

Добрый вечер! Подскажи как осуществить покупку интенсивов? Инструкция для КЗ не открывает.

@REDGroup 7 месяцев назад

Добрый, напишите в наш бот t.me/red_support_bot, мы отправим прямую ссылку

@zergzerg4844 4 месяца назад

Даа, адаптив та еще гадость. Вёрстка летит к чертям и не понимаешь , что происходит со стилями =((

@oldiBerezkoo 7 месяцев назад

Если не секрет то почему сайт htmllessons написан на php? Laravel?)

@REDGroup 7 месяцев назад

Потому что в те времена этим увлекался

@inomjonismanaliev5295 7 месяцев назад

Привет Макс какое расширение используешь для chrome

@REDGroup 7 месяцев назад

Привет, minim

@inomjonismanaliev5295 7 месяцев назад

@@REDGroup спасибо

@revengefallensaratov7546 6 месяцев назад

Сделал браузерную игру вроде адаптировал под мобилку. Когда вертикальная ориеетация все нормально . Переворачиваешь экран в горизонтальную часть экрана не попадает в зону просмотра и верстка ползет. Как с этим бороться?

@stormbraker637 5 месяцев назад

Есть медиа запрос на лэндскейпный режим

@Lloyd_579 7 месяцев назад

Видео как сделать верификацию пользователя с помощью номера телефона.

@dowellkin 7 месяцев назад

есть куча сервисов, которые это делают и это гипер просто

@maxblock5233 7 месяцев назад

Вроде и 100 раз адаптивил, все, что адаптивится, а новое или обновляющее подчерпнул, легенда, продолжай в том же духе Стримы по обновленной версии вашего ресурса на Next.js жду с нетерпением

@REDGroup 7 месяцев назад

Да, завтра продолжаем. Скоро вас ждут более масштабные ролики, старый Макс возвращается