#8 Верстка сайта с нуля для начинающих | Адаптивная верстка

В этом видео мы продолжаем верстать сайт используя HTML и CSS и сегодня мы начинаем делать нашу верстку адаптивной. Сделаем несколько блоков адаптивными, поговорим о медиа запросах и разберемся, как же все-таки адаптировать сайт под разные устройства.
------------------------------------------------
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Верстка сайта транспортной компании: brainscloud.ru/landing/logist...
Файлы урока: files.brainscloud.ru/file/mog...
Главы видео:
00:00 - Мета тег
01:47 - Про медиа запросы
02:45 - Пишем первый медиа запрос
05:10 - Адаптируем intro
11:45 - Адаптируем шапку секций
14:30 - Адаптируем карточки
19:18 - Адаптируем блок статистики
24:45 - Адаптируем блок сервисов
31:33 - Адаптируем блок с девайсами
------------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
------------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #версткасайта #html #css #css3

[@BrainsCloud]

"00:22" - Мета тег "01:47" - Про медиа запросы "02:45" - Пишем первый медиа запрос "05:10" - Адаптируем intro "11:45" - Адаптируем шапку секций "14:30" - Адаптируем карточки "19:18" - Адаптируем блок статистики "24:45" - Адаптируем блок сервисов "31:33" - Адаптируем блок с девайсами

[@evgeniynikolaev2165]

Если браузере в режиме разработчика не масштабирует сайт под ваши установленные размеры окна - обрезает, а не адаптирует, то попробуйте это:

[@user-eu4zu7wf5i]

Огромное спасибо, час возился не нашел причины)

[@uproot3745]

Спасибо брачо, ты спас мне жизнь.

[@Storos]

Спасибо за помощь!)

[@nataliatarasik9576]

огромное спасибо! это мучило меня очень долго)

[@vadimkiryanov4933]

Огромное спасибо)

[@user-cf8rd2rh6r]

Золотая середина между "кашкой" для новичков и кучей сложного и нудного материала. Кому нужно, тот гуглит, спасибо за уроки, ты молодец.

[@alexfleur]

Я верстаю с вами, если что...Ребят, пишите комменты, чтобы автор видел отклик)))

[@BrainsCloud]

Спасибо за призыв, это действительно важно )

[@user-uh1ln4hu4m]

Не могу подобрать нужных слов, чтобы сказать Вам ОГРОМЕЗНЕЙШЕЕ СПАСИБО!!!!!!!!!!!!! Вы - супер ментор, супер-специалист!!!!!!!! Было безумно интересно и познавательно!!!!!!

[@muhanjan4437]

Спасибо за уроки , ЗДОРОВЬЯ тебе !!!

[@BrainsCloud]

спасибо!

[@user-kw7tw2yo4x]

каждый день с вами и вашими уроками! Спасибо вам!

[@sergsergey4251]

Как всегда - отличное видео, спасибо!

[@endlesslysorrow]

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

[@KuKu_RuKu88]

Спасибо за урок! Непростые эти медиа запросы )))

[@jahzoviy260]

Самые понятные уроки по этой теме! Сердечная благодарность.

[@juliatutaeva9832]

Огромное спасибо! Отличный опыт в вёрстке, когда изучил теорию и перешёл к практике. Спасибо, Дмитрий!

[@user-fu7xp7eo6s]

Огромное спасибо! просто нет слов, на сколько вы классно все обьясняйте и четко все делайте!

[@innml7751]

Наконец-то!!! Две недели верстки и я дошла до адаптива. Несколько раз хотела бросить))) Спасибо за такие замечательные уроки. Очень доходчиво все показано. Приятно слушать. Один из лучших учителей в русском KZbin.

[@user-vw1bp9xk9v]

Какие успехи спустя два года?

[@innml7751]

@@user-vw1bp9xk9v отправила сына учиться программированию 😆 решила, что у него лучше получится, а в 45 это слишком сложно и долго, ушла в старую сферу

[@Burovasofia]

Дмитрий, спасибо вам за вашу работу!

[@utkirkurbanov8241]

Thanks to the BrainsCloud team for these videos. I take huge experiences...🙂

[@anastasian3023]

Жалею в этой жизни только об одном - как я не увидела этот канал раньше! 😂 Но время пришло! Спасибо тебе огромное за канал и такой информативный мини-курс ❤

[@user-zp8xz5fu2j]

Спасибо! Содержательно, коротко, и ясно!

[@DK-pk5ri]

Просмотрел все уроки. Хочу выразить свои признание и благодарность. Спасибо большое, по-больше бы таких полезных каналов, а не всякого детского мусора

[@user-em2zl1lp3z]

Дмитрий спасибо вам за вашу работу,очень классные уроки.Желаю процветания вашему каналу и продолжайте в том же духе.

[@user-mp2ev2fi1t]

Спасибо Дмитрий , обучаюсь на ваших видео!

[@yomzfka]

Каждый урок смотрю с удовольствием ))

[@alex_smith3875]

Чертовски быстрая вёрстка. Спасибо за хорошие уроки

[@tanyamarushka7251]

Как всегда спасибо за урок!

[@madalinamanole5124]

Спасибо за урок!

[@user-xs2dx2mh3f]

Автору огромное спасибо за годный контент и старания!!!!!! Ставлю жирный лайк!!!!

[@Sun2rw]

Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

[@amalkadirov4703]

спасибо большое за ваши видео, делал все по вашим урокам и теперь есть примерное понимание как разрабатывать сайт))))

[@Skilling27]

Дошел все-таки)), спасибо тебе, очень круто объясняешь, без воды и прочей ненужной инфы)

[@lugaang]

Делаю и получаю удовольствие)) Спасибо

[@mik_404]

Спасибо за уроки! Научился верстать у вас)

[@nikita.moskovskiy]

учусь по твоим урока. много нового узнал, спасибо. продолжай)

[@skvor83]

залип на видео, спасибо за труды!

[@timofey2672]

34:26, так я объясняю свои действия заказчикам на фрилансе :D, пересматриваю плейлист, попутно реализовываю весь функционал на реакт, редакс, тайпскрипт, помню, как десять +- месяцев назад смотрел этот плейлист и верстал на чистом html, css) Спасибо, Дима, благодаря твоим видео довольно быстро вырос в вебе.

[@raccoon1399]

скажите пожалуйста, как вы учили JS? может есть какие-то курсы, не могли бы вы посоветовать совсем новичку в этом деле?

[@timofey2672]

@@raccoon1399, привет, есть канал Владилен Минин, там есть курс по JavaScript за 6 часов, его можешь посмотреть, основы поймешь, на том же канале и про другие технологии JavaScript много вещей.

[@raccoon1399]

@@timofey2672 спасибо большое!) надеюсь пойму

[@user-ly9pl3yt5o]

В очередной раз благодарю за видео! Кто пишет только сейчас: У меня были проблемы с первым запросом. Удалось решить так: @media (max-device-width: 1200px). Добавил слово device, видимо поменялась документация

[@Тини]

Спасибо большое!

[@NeedForHeavyMetal]

Всё круто!!! спасибо большое!))

[@MrZorg23]

Спасибо, оч. много полезной информации! Особенно понравилась фишка с отрицательными margin у родительского элемента и положительными padding у дочерних элементов. Раньше делал просто margin-left и приходилось убирать последний margin-left с помощью last-childe.

[@romanro8630]

Спасибо! Всё круто!

[@PiterProduction]

Большое спасибо)))

[@user-ez5ro5qf9r]

это лучший человек !!!

[@yevheniidodiak3644]

Спасибо Вам за урок . Верстаю с Вами =)

[@clickabelno]

ставлю царский лайк!!)

[@turzvuk]

Спасибо!

[@azizazizov9339]

padding sleft :) спасибо за урок

[@user-bl5qv3jy1l]

спасибо большое!

[@NoName-io4lx]

15:34 - а почему мы просто не использовали совместно со space-between ширину .card__item {width: 32%;} ? Дима, спасибо за уроки! Ты лучший практикующий учитель данному ремеслу на русском KZbin!!

[@VoLaND0303]

лучшие уроки

[@27tamerlan]

Будь здоров!

[@asadbekkenjabaev]

Super 👍👍👍

[@roman_babenko]

Оч полезное видео!

[@user-zo7nc9on7j]

Спасибо - уроки информативные, но размеры для шрифтов лучше ставить в относительных единицах в em или rem об этом много статей в интернете написано, так легче будет менять стили сайта, если заказчик к примеру захочет уменьшить или увеличить весь шрифт на сайте. Тогда достаточно будет изменить размер базового шрифта в body или html а не подбирать потом его для каждого элемента на сайте. Это для новичков. Я и сам новичок, но как показывает практика, если хочешь хорошо разобраться в чем-то, обучи этому другого)))

[@marynakosiv3750]

лучшие уроки!!! а можно видео разбор с разными вариантами адаптивности? хотя бы принципы или теорию))

[@BrainsCloud]

посмотрите верстку сайта activebox, там я немного подробней рассказывал

[@lawdriver88]

Спасибо

[@DerAleksey]

Эх, не оторваться...

[@Eduard02834]

spasibo !

[@user-sf5nf1sc9k]

Спасибо за курс. Все доступно и хорошо воспринимается с нуля. Но у меня возникло затруднение с тегом в области . Сработало только при таком условии:

[@BrainsCloud]

отменять возможность зума для пользователя не очень хорошая идея

[@user-sf5nf1sc9k]

@@BrainsCloud Спасибо, поменяла.

[@aliyagaliakhmetova19]

@@stasalsakhanov435 как решили проблему? у меня так же(

[@aliyagaliakhmetova19]

Как в итоге прописали в коде? такая же проблема(

[@user-ce9pe8hj7w]

Здравствуйте. Как решили вашу проблему с тем, что без "user-scalable=no" не получается адекватно изменять размеры "устройства"?

[@sabatonbaton6105]

Cпасибки

[@user-es3rc8uf2q]

Дякую за урок

[@user-vn4jw3zo1t]

Капец геморой) Думал что как то само всё адаптируется. Я не программист ни разу, но с интересом просмотрел все уроки и ещё дальше досмотрю. Раз столько уроков отсмотрел, может попробую сайт собрать. Просто интересно.

[@prokrastinator6648]

заебись, четко.

[@milos1053]

Верстку вместе с тобой повторяю, надеюсь будет толк, все что не понял гуглю, но иногда оочень много времени уходит на то что бы понять что ты сделал)

[@PIRAKAS666]

Тогда для начала разберись с основами по CSS и HTML.

[@milos1053]

@@PIRAKAS666 В принципе уже разобрался но иногда не все понятно до конца, долго не мог понять как Дмитрий делает структуру HTML и почему столько вложений, пришлось остановиться и пойти читать БЭМ методологию. Вообще как по мне, данные видео учат само образовываться и это круто. Посмотрим что дальше будет)

[@kishmish7346]

Живи вечно

[@Anahitacode]

Я - фанат этого канала. Один из лучших контентов на ютубе. Люди, кто дожил до этого видоса, поделитесь, нет ли проблем с ссылкой на fontawesome. У меня гугл ошибку выдает. Что-то про SAMESITE атрибут, говорит, что сайт его не имеет.

[@Anahitacode]

Andrey Abramchuk спасибо

[@daeriofrixell199]

шел 107 день вёрстки мого. Медленно, но верно :DDD

[@kolosrodoskyi]

лайкнул

[@myprogs]

Emmet код для font-size для, к примеру, 20 пикселей = fz20px

[@user-qs8el8lg2d]

Спасибо!!

[@ivan.storojenko]

можно еще короче - fz20

[@dominic9040]

6 дней и я дошел до адаптации, надеюсь прогресс не будет стоять на месте, спасибо за ваши уроки!!!

[@user-qh1pk1vd1c]

Как твои успехи сейчас?, очень интересно)

[@dominic9040]

@@user-qh1pk1vd1c после этих видео поверстал еще пару сайтов, после этого из-за войны приостановился прогресс на пол года где-то, потом сверстал один лендинг, чтобы возобновить знания+-, начал учить js, react, redux toolkit, ts, сейчас дописываю свой пет проект, и буду искать первую работу в it

[@dominic9040]

@@user-qh1pk1vd1c все что я подчеркнул для себя за этот год - никогда не сдаваться, да, иногда нужны перерывы, может даже большие, но дисциплина>>>, надо её выстраивать и тогда ты добъешься любой цели

[@user-qh1pk1vd1c]

@@dominic9040 ты меня смотивировал🔥

[@romaroman8204]

я в блоке wedo просто поставил картинку сверху так вроде тоже норм .wedo__img{ position: static; width: 100%; padding-bottom: 10px; }

[@kayaosato9289]

Если у кого-то не получается убрать белую полоску справа, попробуйте вот это html,body{ overflow-x: hidden } почитайте про это свойство

[@stacyxq]

спасибо, помог

[@BiGSplush]

Почему в section, header является div'ом а не собственно , ведь семантически не запрещено использовать несколько header тегов в одном документе??

[@vitalii4287]

Дмитрий, здесь в видео ты говоришь, что медиа-запрос нужно писать под блоком, для которого я делаю медиа-запрос и называешь это самым главным правилом. В курсе для новичков ты говорил, что такой способ неудобный, и писать медиа-запросы лучше в конце css файла. Хоть я и понимаю, что не особо важно где их писать, но все таки что выбрать "главное правило" или удобство?

[@BrainsCloud]

Вы наверно не правильно поняли, речь шла о том, что медиа-запросы надо писать под, а не в коем случае над основными стилями. И в данном видео я пишу все медиа в самом низу, посмотрите.

[@yaroslavbulavin3613]

Всем добра и счастья)

[@BrainsCloud]

Ярослав Вадимович плохая фича. Нужно найти какой элемент вылезает и создаёт полосу, а не отменять у документа горизонтальную прокрутку. Человек не сможет скролить при зуме на телефоне. Да и стили надо писать в цсс файле, а не в атрибуте.

[@yaroslavbulavin3613]

@@BrainsCloud спасибо, Дима. Не знаю, что пошло не так, код идентичный

[@forceward]

Здравствуйте, я только начинаю верстать. Смотрю ваши видео, и они реально мне помогают, спасибо большое. У меня есть вопрос: До этого я не открывал сайт в другом устройстве. Сегодня попробовал, но в смартфонах не открывается, хотя в другом компе открылся. Не открывается в смысле - браузер только показывает то что написано в html, но в коде привязал и css. Не знаете, из-за чего может быть это?

[@thedikov175]

Привет, очень нравится твои уроки) Дошёл пока что только до 8го урока Надеюсь ты прочитаешь и поможешь мне) При адаптации текст не съезжает как у тебя 11:54 , а просто а просто уменьшается, не переводя текст на новую строку. Помоги пожалуйста)

[@revinfedor2329]

Для services__item width не роботает, но работает max-width

[@user-eu4zu7wf5i]

29:33 xD

[@AyratMuxametov]

а теперь всё удаляем и делаем сами все сначала)))

[@maingroon]

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

[@BrainsCloud]

Alex Kron досмотреть все уроки по адаптации

[@user-ce9pe8hj7w]

У меня такая же проблема. Вы разобрались в чём дело?

[@anticheater5049]

27:50 . При разрешении 973х729 у меня не влезает весь текст от Creativity и Digital в экран справа. А слева не влезают значки. А у вас влезают. Скачал ваш код, тоже самое. Что я делаю не так, не понимаю? Адаптивная вёрстка сложная штука.

[@itssimple9217]

Тоже самое случилось и у меня мой друг. Было это на виндовс, никак ни мог настроить экран адаптивной. Снес Винду, установил линукс elementary к статье очень хороший дистр, на нем настроил очень легко, рекомендую. Дай мне свой вк, продвинимся!

[@vatasi7312]

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

[@user-by4sz6is2h]

Подскажите пожалуйста, я пишу медиазапрос например на 1230 px, ничего не происходит, если уменьшу экран до 1220 то сработает, выше не работает ; приходится писать в медиазапрос не 1230 а 1240, чтоб все было норм. В чем проблема, никто не знает?

[@den4icle417]

Видос как всегда информативный! Но возникла проблема сразу при начале адаптации. Дело в том что когда пишу (max-width: 990px) то ширина сайта становиться белой, Дмитрий помогите!

[@user-xo8pr1hf8p]

Столкнулся с проблемой: текст в теге services__item идёт по одному слову в строку по вертикали . Всего 2 строки с разделяющей линией, и вот в каждой из них 1-ый пункт нормально отображается, а 2-ой и 3-ий как я уже написал выше

[@user-xo8pr1hf8p]

Всё, разобрался, утонул в дивах немного))) но выплыл

[@KuKu_RuKu88]

подскажите еще, как боретесь с Live preview, у меня страница как шальная в браузере скачет, а Вас все ровненько стоит ???!!!!

[@BrainsCloud]

Никак, все работает как работает

[@user-xs2dx2mh3f]

Всем привет!!! Ребята, а для винды есть подобные фишки в браузере чтоб примерять к телефону сайт прямо в браузере ?

[@user-bx3jm5ce9f]

перепроверил несколько раз, но так и не понял, почему карточки не уменьшаются пропорционально ширине экрана с чем это мб связано?

[@user-sn8gv5vk7h]

нахимичила чето вначале, и у меня постоянно съезжает наверх интро, у меня тут уже margin-top 8000px.. адаптивная верстка вообще нереально, всё разъезжается(( хотя на обычном масштабе всё красиво. Кажется нужно начинать новый сайт и ничего не путать больше, а то не понимаю как исправить(

[@user-iu3qr8ge2x]

Подскажите, пожалуйста, как убрать горизонтальную прокрутку при уменьшении размера экрана

[@sonyboy4413]

Скорее всего, у тебя неверно задан box-sizing, в обнуляющих стилях. Передвинься в самый верх CSS-кода и скопируй код для *, *:after и *:before. Сам сталкивался с такой проблемой, решал 40 минут :)

[@awenn2015]

@@sonyboy4413 мне казалось его нужно всегда по умолчанию указывать box-sizing border-box

[@kirillvolkov2666]

почему не работает @media (max-width: 770px){ .intro__suptitle{ font-size:20px; } .intro__title{ font-size: 40px; } } все остальные медиа запросы видет кроме последних

[@alexs8579]

спустя неделю вёрстки, дошел сюда :-)

[@xtravels_kz]

Я через две :))

[@bulletsFly]

нельзя текст на всем сайте при каждом медиазапросе прибавлять/отнимать в %?

[@indev_js]

шапка секций, а именно красная полоска под тайтлом при разрешении 575px уезжает в левый край, а у Дмитрия она всегда в центре. Подскажите у кого такое было? как фиксили? голову ломаю, понять не могу. UPD: ПОФИКСИЛ

[@user-qz8pj5pg8t]

Если уметь верстать так же, как в данном плейлисте, если ещё знать и практиковать препроцессоры, то с такими знаниями можно ли устроиться верстальщиком?

[@BrainsCloud]

Куда-нибудь да можно, пробовать надо

[@wildtube108]

Здравствуйте. Подскажите пожалуйста, делаю изменения по адаптивности вместе с вами и когда вы уменьшаете и увеличиваете свой экран - элементы подстраиваются под ваши действия, а у меня не реагируют. Если я уменьшаю то части секций скрываются по бокам.

[@kol1ada827]

+++

[@user-yb9uf8uz8k]

В блоке services значение width 33.33333% не корректно работает, из-за того что к ширине плюсуются значения padding. Services_item идут в две колонки. Делаю вёрстку под свой браузер со своими размерами.

[@BrainsCloud]

не плюсуются если есть box-sizing: border-box; который прописывали еще в первом уроке, проверьте корректность написания этого правила всем элементам и псевдоэлементам

[@user-yb9uf8uz8k]

@@BrainsCloud Верно сенсей, псевдоэлемент before не так написал )))

[@viktorkhekalo6154]

Здравствуй. При установленном @media (max-width: 1230px) в хроме при проверке он (breakpoint) срабатывает только на отметке 1107px, в мозиле и brackets live preview работает корректно (срабатывает на 1230). В чем может быть причина?

[@viktorkhekalo6154]

Разобрался, причина определена, можно не отвечать.

[@YotaGelione]

@@viktorkhekalo6154 Здравствуй, у меня плохожая проблема, медиазапрос на 770px не устанавливается только на 1230 и на 990, в чём может быть проблема?

[@aidontis7649]

Дмитрий, добрый день! в начале урока .container{ width: 100%; max-width: 1200 px; margin: 0 auto;} я же ведь тоже написала 1200px, но почему у меня на полный экран показывает, проблема в чем? спасибо!

[@BrainsCloud]

может у вас экран меньше чем 1200 ?

[@mr.predator8208]

Извините, но у меня такая проблема При медиа запросе на 770px у меня не пропадает навигация, несмотря на то, что все сделано как в видео Можете подсказать в чем проблема?? Заранее спасибо! Лайк поставил)

[@user-uw9is8gw2k]

ты бы хоть код скинул , только в онлайн редакторе ссылкой

[@dmytroguzhva8381]

Посмотри верно ли ты прописал этот код : у меня была тут ошибка в знаках "- и ="

[@Yakyzzza93]

10Q=) Пишу отзыв после каждого просмотра) Теперь вот у меня вопрос к Дмитрию... в чем разница, если сделать для картинки класс, или обратиться к ней селектором? .wedo-img {обращение как к классу} или так... .wedo-item img {обращение к самой картинке} проверял и никакой разницы не увидел. Если она есть, то в чем? заранее спасибо!

[@fffffristaylo]

с БЭМ связано. А так можно