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

[@BrainsCloud]

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

[@СергейЗемлянин-э9д]

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

[@alexfleur]

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

[@BrainsCloud]

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

[@evgeniynikolaev2165]

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

[@ДмитрийКапущак-э4у]

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

[@uproot3745]

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

[@Storos]

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

[@nataliatarasik9576]

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

[@vadimkiryanov4933]

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

[@ЮлияЦыганенко-о3б]

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

[@innml7751]

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

[@АхмедЛобов]

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

[@innml7751]

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

[@muhanjan4437]

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

[@BrainsCloud]

спасибо!

[@endlesslysorrow]

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

[@DK-pk5ri]

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

[@АнастасияНечаева-к6ф]

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

[@jahzoviy260]

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

[@СветланаВербанова]

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

[@juliatutaeva9832]

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

[@utkirkurbanov8241]

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

[@Burovasofia]

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

[@timofey2672]

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

[@raccoon1399]

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

[@timofey2672]

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

[@raccoon1399]

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

[@KuKu_RuKu88]

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

[@sergsergey4251]

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

[@alex_smith3875]

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

[@anastas1kus]

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

[@ВикторКашин-е9р]

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

[@Sun2rw]

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

[@СергейГуляев-о3п]

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

[@КанатБолотбеков-ъ5я]

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

[@Сергей-э8о6м]

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

[@КириллИнтеров]

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

[@yomzfka]

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

[@ВикторЧеберячко]

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

[@tanyamarushka7251]

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

[@NoName-io4lx]

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

[@amalkadirov4703]

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

[@MrZorg23]

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

[@ИринаСимакова-д8е]

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

[@BrainsCloud]

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

[@ИринаСимакова-д8е]

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

[@aliyagaliakhmetova19]

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

[@aliyagaliakhmetova19]

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

[@МихаилШпатен]

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

[@madalinamanole5124]

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

[@Skilling27]

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

[@marynakosiv3750]

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

[@BrainsCloud]

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

[@lugaang]

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

[@nikita.moskovskiy]

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

[@димаострый-э5ъ]

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

[@Anahitacode]

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

[@Anahitacode]

Andrey Abramchuk спасибо

[@Николай-с2д5в]

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

[@mik_404]

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

[@Тини]

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

[@27tamerlan]

Будь здоров!

[@skvor83]

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

[@milos1053]

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

[@PIRAKAS666]

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

[@milos1053]

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

[@yevheniidodiak3644]

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

[@PiterProduction]

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

[@NeedForHeavyMetal]

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

[@asadbekkenjabaev]

Super 👍👍👍

[@VoLaND0303]

лучшие уроки

[@clickabelno]

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

[@romanro8630]

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

[@ЕвгенийДоровский-э5в]

Дякую за урок

[@roman_babenko]

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

[@kishmish7346]

Живи вечно

[@ПажилойМаслач-э8м]

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

[@turzvuk]

Спасибо!

[@azizazizov9339]

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

[@daeriofrixell199]

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

[@lawdriver88]

Спасибо

[@myprogs]

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

[@РоманПастухов-ф8в]

Спасибо!!

[@ivan.storojenko]

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

[@dominic9040]

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

[@ВалерійПострибайло]

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

[@dominic9040]

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

[@dominic9040]

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

[@ВалерійПострибайло]

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

[@vladimirsvodjanojs8158]

Спасибо!

[@thedikov175]

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

[@forceward]

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

[@vitalii4287]

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

[@BrainsCloud]

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

[@DerAleksey]

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

[@blackmulthumor]

Спасибо

[@mr.predator8208]

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

[@ВИКА-г3о9р]

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

[@dmytroguzhva8381]

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

[@maingroon]

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

[@BrainsCloud]

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

[@МихаилШпатен]

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

[@FunnyHoney-Dinara]

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

[@sonyboy4413]

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

[@awenn2015]

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

[@kayaosato9289]

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

[@stacyxq]

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

[@BiGSplush]

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

[@vatasi7312]

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

[@anticheater5049]

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

[@itssimple9217]

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

[@Eduard0213-x7p]

spasibo !

[@revinfedor2329]

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

[@ВикторБарсов-ц3ц]

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

[@BrainsCloud]

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

[@sabatonbaton6105]

Cпасибки

[@prokrastinator6648]

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

[@KuKu_RuKu88]

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

[@BrainsCloud]

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

[@АндрейШестаков-х6и]

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

[@АндрейШестаков-х6и]

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

[@indev_js]

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

[@den4icle417]

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

[@kirillvolkov2666]

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

[@Yakyzzza93]

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

[@fffffristaylo]

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

[@romaroman8204]

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

[@ДмитрийКапущак-э4у]

29:33 xD

[@yaroslavbulavin3613]

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

[@BrainsCloud]

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

[@yaroslavbulavin3613]

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

[@ЮлияКрышевич]

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

[@RobMel-u2n]

Не понимаю почему медиа запрос применяется ко всем элементам сайта а не к определенному блоку

[@viktorkhekalo6154]

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

[@viktorkhekalo6154]

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

[@YotaGelione]

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

[@bulletsFly]

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

[@AyratMuxametov]

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

[@mayllu]

почему после того как делаю card столбиками он вылезает из своего блока и залезает на нижние?

[@maristerial.4989]

Получилось так, что всё разъехалось, интро у меня не состоит из 1200px, там получается 964px, и эта цифра фиксирована, в итоге справа от интро появляется белая вертикальная полоса шириной как раз на недостающие 236px, перепробовал всё, не понимаю почему так происходит. Элементы ниже интро, иногда полностью по длине проходят на 1200px, а иногда меньше, какие то не сильно меньше, какие то сильно меньше, проблема вероятно из-за монитора, он явно больше чем у вас на маке, и это нужно было учитывать, но я пока не понимаю как это учитывать, по этому всё разъехалось.

[@nelyhartenyan3734]

.container{ paddin:0 15px; ..... } не работает, с левой есть, а с правой нету. Скажите пожалуйста почему и что делать.

[@gvadim2850]

padding напиши, у тебя paddin

[@maxduma]

В точности повторяю но почему то width: 33.33333%; flex-wrap: wrap; у меня не так работают(

[@КириллСорокин-к2в]

flex-wrap родителю, width потомку

[@alexs8579]

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

[@xtravels_kz]

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