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

Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео научимся работать с медиа запросами (media queries) и начнем делать адаптивную верстку сайта.
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru...
Материалы урока: files.brainscl...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #версткасайта #созданиесайта #html #css

[@Вячеслав-ш5т]

более интересных уроков и практики я не видел ни у кого.

[@kawaki4639]

время идет, а вы все равно остаетесь лучшим учителем, спасибо!

[@TheYukos70]

Дмитрий, большое человеческое спасибо!

[@Ahmed__123j]

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

[@sergheibecciu1171]

Мне как новичку очень помогли уроки в понимании верстке...очень благодарен.

[@РоманСмолюх-к1и]

Спасибо, очено помог)) Делай по больше таких видео) Хотелось б и JS для начинающих!)

[@chesterbennington7574]

Очень полезные уроки и понятные. Спасибо. Долго искал такой контент

[@nloo]

боже этот человек делает слишком полезные уроки! однозначно респект и подписка!!

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

Принцип зрозумілий, дякую за пояснення.

[@fantast2568]

Спасибо за труд ! Успехов в развитии канала !

[@BrainsCloud]

спасибо!

[@СергейГрибоводов]

БРО - ты лучший! Спасибо за контент ;)

[@followmagnus9775]

*Cпасибо большое за урок. Понятно, доступно, а главное полезно*

[@olegtsimfer455]

Класс,круто, как и всегда!) Просьба есть, выпустить видео по поводу display и position, чтобы было больше понимания. Спасибо за труд!)

[@dbuzeninka8005]

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

[@blackwalker_9446]

А вы правильно медиа прописали? Он начинает быть виден с брейкпоинта. Может в этом дело?

[@РоманВакуленко-л2ш]

Очень круто, спасибо большое!! от тебя узнаю то, что другие не рассказывают!

[@sergstrue362]

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

[@forceward]

Спасибо за детальные объяснения, очень нравится смотреть ваши видео 🔝

[@xxNeonix]

Братан, спасибо тебе за видосы.

[@mrhop4912]

Вы помогаете понять саму суть вёрстки,спасибо большое.

[@ВікторКозак-щ1л]

крутяк просто нет слов!! когда читаю материал даже близко так не понимал как щас! жилание учить от ваших уроков только растет! лайк + подписака 100%

[@yevheniidodiak3644]

Да, вы лучший преподаватель ❤️ лайкать одно удовольствие

[@vladimiregorov6875]

Очень круто, очень удобно)) С самого начала изучения css не покидала мысль, как делается сайт адаптивным для мобилок. Твои уроки это просто нечто. СенкЮ соу Мач ＼(￣▽￣)／

[@annapotri]

Отличный урок! Все предельно понятно! Спасибо огромное, вы - лучший! Успехов!

[@Валли-н6ы]

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

[@EUC_Novak]

🌟🌟🌟🌟🌟 *Спасибо за очень полезный и понятный урок!!!* 🌟🌟🌟🌟🌟

[@Burovasofia]

спасибо огромное за урок!!!!

[@ismailtulebay5018]

Сделай, пожалуйста, отдельное видео по JS, некое обучение, и в чем отличие между JS and JQ

[@Олег-з3с7г]

Да все понятно!! Спасибо за Видео!!!!

[@jackdoe1312]

Вместо background-size: cover так же работает object-fit: cover Немного муторно с размерами шрифтов в медиа запросах. Как вариант можно указать в body в px, а далее в rем (использовать калькулятор). Тогда не придется указывать размеры в медиа, т.е. писать меньше кода + сменив значение размера шрифта в body, мы меняем его везде, одним легким движением курсора)

[@dimadiv6583]

он же делает обучение не для профи

[@jackdoe1312]

@@dimadiv6583 Ты же лучше меня понимаешь, что кроме видосиков нужно читать мануалы. А rem понять можно буквально минут за 10, ничего сложного.

[@serene3d772]

спасибо за отличные уроки!

[@АлексейСтупников-д4у]

Здравствуйте! Благодарю за видео!

[@Kurikovich]

Захожу, сразу ставлю лайк, потом - смотрю.

[@ОлегКлючинский-б2ж]

BEST OF THE BEST!!!!

[@KuKu_RuKu88]

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

[@zv5585]

Спасибо. Лайк.

[@DizErgi]

Если я и буду выполнять заказы на вёрстку сайтов, то делать я это буду для людей, а не для пользователей Internet.Explorere , единственное для чего он нужен, это скачать нормальный браузер.

[@juliatutaeva9832]

И-де-аль-но! Спасибо! Просто магия какая-то!

[@ДмитрийКуренков-л3м]

Отличный урок! Большое спасибо!

[@HD-qp3fw]

В 4 уроке ещё так написал, background-size: cover, так как через слэш в хроме не работает

[@artem_ka3863]

Спасибо за годный контент!!!

[@NeedForHeavyMetal]

Очень доходчиво)

[@АлексейГундин-э9о]

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

[@BrainsCloud]

Алексей Гундин так это ж лендос, других страниц нет

[@АлексейГундин-э9о]

@@BrainsCloud тоже верно! Ещё раз спасибо за урок - этот особенно понравился :-)

[@YaroslavNechyporuk]

ООООООО сегодня сверстал этот сайт, теперь могу посмотреть как это делает профи)

[@satanist70]

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

[@Scrappycoco]

1:22 center no-repeat / cover - в хроме тоже самое. Но, как написал человек в комментах: "просто нужно писать, по правильному порядку "center / cover no-repeat" а не "center no-repeat / cover" Либо как в ролике: background: 44475e url(img/intro-bg.jpg) center no-repeat; background-size: cover;

[@mak_whisk]

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

[@ИльгизШарафутдинов-ю4ц]

Классный урок!

[@GunToys-f2z]

Очень крутые уроки)) Но Дмитрий а не проще заместь SVG logo делать через fontawasome???

[@zanosi_udachi]

Столкнулся с такой проблемой, что тег в css как .nav стили не работают, так же как и под адаптивную верстку( тоесть как у тебя делаю не работает: стили шрифта и в принципе не скрывается при дислей нон). Решил проблему таким образом- в css прописал не .nav , а просто nav и всё заработало( как для десктопной версии- все стили заработали, так и при адапнтивной скрывается при разширении экрана)

[@tanyamarushka7251]

Спасибо!

[@romanro8630]

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

[@Fenjkeee]

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

[@akaBeeRka1]

background: #31344e url(../img/intro.jpg) center no-repeat / cover; - данный стиль у меня не работал даже в хроме. Как мне подсказали, у меня была ошибка в синтаксисе, т.е. размер задается после позиции через слеш - background: #31344e url(../img/intro.jpg) no-repeat center / cover; Короче, говоря, no-repeat и center надо было поменять местами, после этого у меня заработало.

[@ВиталийРябенко-з1ь]

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

[@AkciaInterestingSite]

Отлично!

[@hotDelights_]

🔥🔥🔥🔥🔥🔥

[@SatUluBah]

[@elifas2012]

Благодарю!

[@turalperfectworld1065]

Лучший!

[@FotozTV]

Уже давно использую запись для background через / cover и все корректно работает во всех браузерах, в том числе и мозилле

[@Паша-ф2с]

отлично!

[@alexandr2869]

Firefox потдерживает " / cover " просто нужно писать, по правильному порядку "center / cover no-repeat" а не "center no-repeat / cover"

[@solerastora3734]

no-repeat center / cover; - уже и так пашет

[@yomzfka]

Крутой чел )

[@minatosensei3346]

крутые уроки, все понятно и ясно, лайк + подписка (нужна помощь: при уменьшении там для телефонов и тд в не парных блоках по нумерации справа появляется белое поле которое увеличивается по мере уменьшения самого сайта (для телов айпадов и тд), и у каждого парного блока(второй четвертый и тд) такое же поле только слева - как можно это убрать?)

[@minatosensei3346]

Возможно после полной адаптации оно пропадет?! этого я не знаю, подскажите пж

[@FogDog963]

Уроки реально крутые, очень интересно смотреть, плюс возникает некоторое понимание что и с чем едят. Вопрос автору и всем участникам: Кто-нибудь знает что-то за этот сервис Eternalhost? Просто данную рекламу я увидел непосредственно на этом канале, вот и подумал возможно сам автор в курсе что это за хостинг, и как там дела обстоят со стабильностью работы.

[@javoxrxomidov451]

Слишком долго делал бургер меню проста оставил б эту кмонду (&#776)между тегами без скобок ! И бургер появился б сам атак урок суппер

[@DubinArtur]

Можно для медиа подключать второй css? Если можно, то это будет удобно и быстрее писать

[@xtravels_kz]

Можно. Только подключать media.css надо ниже style.css.

[@sayedakbarali5650]

Thanks Boss

[@АбуЗаррФарадей]

Проверил в Мозиле, Хроме, Опере, ИЕ11 и Эдге. В Эдге фоновая картинка не появилась даже после исправления. Пришлось создавать по отдельности все правила: бгк, бгп, бгр, бгс, бги. Только тогда появилась. Даже в ИЕ11 лучше поддерживается. И еще заметил что Мс браузерах в самом низу стр. есть какая то полоска белая в 1пкс.

[@sultonbekovs9269]

спасибо

[@Ageronor]

еще на первом уроке заметил, что при "cover" в Бэкраунде, у меня в опере тоже ничего не отображалось, думал глюк именно моей системы, а оно воно-как.

[@Сергей-й9т7ъ]

В Internet Explorer title and subtitle 'у в блоке intro просто poxyu на контейнер, она вылазит за него и в одну сточку стоит, как это пофиксить, чтобы адаптивно было?

[@leonardrutto8381]

скорее всего стоит конкретная ширина у где то

[@leonardrutto8381]

либо высота

[@MrSantafe1100]

все интересно и понятно. автор спасибо. только почему у меня при повторении этих же действий, в адаптиве появляется нижний горизонтальный скролл?? то есть заголовок h1 выпирает из блока, закоментировал burger - и все норм!! где ошибка?

[@tortik_0162]

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

[@АнтонКошелев-д5ч]

Привет! Спасибо за твой контент, очень помогаешь) Ответь пожалуйста, есть ли какой-нибудь список, наподобие обнуления свойств в css, чтобы адаптировать все свойства сразу под все браузеры( я не про медиа)

[@BrainsCloud]

Посмотрите normalize.css, reset.css

[@АнтонКошелев-д5ч]

@@BrainsCloud уже смотрел, ввожу в css файл и не помогает, как не воспринимал эксплоер, так и сейчас тоже

[@АнтонКошелев-д5ч]

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

[@boreisha.artem13]

Здравствуйте, зачем вы используете элемент span для burger__item, потом же все равно задаёте ему display: block?

[@ЕвгенийБелоногов-ш8е]

Спасибо огромное за уроки. С такими учителями и курсы не нужны))) У меня вместо курсора виден кружок когда нахожусь в ipad например. Поэтому я не могу видеть где курсор поинтер, а где нет. Как это настроить??

[@valentinprokofev9177]

Menu Show device type Mobile < Mobile (no touch)

[@CobraTMs22]

Думал, что это последнее видео и Вы забросили канал, как это обычно бывает со многими уроками на ютубе. Но когда увидел вчерашнюю дату, обрадовался. Как скоро ждать новые уроки на эту тему?)

[@BrainsCloud]

приболел, поправлюсь - продолжу

[@CobraTMs22]

@@BrainsCloud выздоравливайте)

[@BrainsCloud]

@@CobraTMs22 спасибо!

[@CobraTMs22]

@@BrainsCloud есть ли принципиальные отличия от курса на сайте (11 видео уроков) и этой серии видео-уроков? Что лучше?

[@BrainsCloud]

CobraTMs22 в этой серии больше объяснений

[@zetuls.]

Как обучаться? Просто много верстать и учить теги? Хотелось бы видео по тегам и атрибутам

[@zetuls.]

Mrx на верстку этого то сайта у меня 12 часов ушло) пока теги все загуглить пока вдуплить, а там ещё вебкит какой оставит и пиши пропало

[@Валли-н6ы]

Кстати, у меня из-за cover в блоке intro фон пропадал даже в хроме. Поэтому я его вообще убрала и даже забыла о нем. Сейчас проверила все браузеры и у меня фон не пропадет, хотя cover по прежнему не прописан. Почему у меня в хроме пропадал фон из-за covera, а у тебя, Дмитрий, на маке нет??))

[@markantony8983]

Добрый день! Спасибо за полезный контент! Вопрос не по теме, но может быть подскажете как реализовать на сайте функцию подмены номера телефона и адреса в зависимости от выбранного посетителем города. Такая функция реализована на сайте банковского советника banksovetnik.ru и мне нужно сделать что-то подобное на своем сайте. Я понял, что используется выпадающий список с присвоенными через css data-city и data-phone, которые подменяют адрес и телефон. Однако, я плохо разбираюсь в javascript и воспроизвести подобное не получается. Можете что-нибудь посоветовать?

[@BrainsCloud]

Используйте готовые библиотеки, их много, например: unmanner.github.io/imaskjs/

[@Bigfootnorm]

У меня вопрос из прошлых уроков для тех кто еще тут. Когда svg иконки в Sprite делали для team у меня все отлично заработало. За одним моментом только. Внутри иконки рядом с логотипом фейсбука, твитера и ln появилась стрелка вправо с нижним подчеркиванием. При чем она отображается как консольная, независимая ни от чего кроме границ самой иконки. И html документ, и CSS пролистал от первой скобки до последней на несколько раз. Сравнил свой код с кодом коуча - один в один. Не могу понять че за фигня. Может сталкивался кто с таким?

[@pikhota]

Скажи, пожалуйста, какие есть сервисы для проверки своего сайта на разных браузерах. P.S.: Просто не очень хочется засорять комп разными и ненужными браузерами.

[@osintervalproject5636]

а ничего что некоторыми блоками work_content есть отступ, во всех браузерах кроме оперы?

[@dle669]

Я хотел бы поинтересоваться, так как я начинающий веб дев. Зачем для бургера был указан z-index: 1; ?

[@thirdeye4212]

Я тоже начинающий и, насколько я знаю, элемент с z-index больше чем у другого элемента, перекроет второй, например, у хедера страницы мы ставили индекс 1000, чтобы в будущем, если понадобится, он мог при скролле оставаться прижатым к верху с помощью fixed позиционирования и отображаться поверх всех других элементов

[@Дмитрий-в8н2з]

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

[@ikadill5921]

проверила через оперу, фокса, хром всё ок. Но эксплорер что-то с чем-то выдаёт. Всё в один ряд, фон съехал.. Пока не пробовала исправлять, этим раритетом наверное уже никто не пользуется)

[@ner0667]

Может кто сможет подсказать? Как изменить курсор при просмотре кода в хроме? (У меня вместо обычной стрелочки какой-то кружочек, изза этого не могу посмотреь работает ли cursor pointer)?????

[@НикитаТютюгин-э3о]

А зачем нам для планшетов делать cursor: pointer; на планшетах же все равно нет курсора

[@webit9026]

Привет, есть минибуки. с клавиатурой и мышкой

[@НикитаТютюгин-э3о]

@@webit9026 а понял, спасибо

[@thecatwrites9731]

псевдоэлементы такие как after и before разве не через :: пишутся?? или я что-то не читал?

[@BrainsCloud]

Можно через одно двоеточие, но лучше через два

[@umalishonuy7977]

У меня / cover и в хроме не работал) я просто без него оставил, вроде работало все

[@hiddenisland1165]

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

[@ОлексійКучер-р3с]

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

[@СергейВасильевичДиденко]

Скажу так....., ох и намаялся я в интере с ковер))), пока не прописал бакграунд-сайз : ковер)) ни хрена у меня картина не хотела появляться)))

[@artem-cj5jk]

в chrome и других браузерах адаптация работает отлично , а вот с mozila проблемы. не понимаю почему

[@bigsasiska3921]

у меня на всех дивайсах почему то справа есть отступ, как это пофиксить????((((

[@pimpam88]

У меня была та же проблема. После часа поиска нашла самую тупую ошибку, которую могла совершить: в css после body мы прописывали следующий код: *, *:before, *:after { box-sizing: border-box; } и у меня не стояла запятая после *:before. Как только поставила, всё сразу отразилось как надо. Буду рада, если помогла )))

[@bigsasiska3921]

@@pimpam88 у меня с этим все впорядке, наверное браузер лагает, ну как-бы браузер лагать не может в этом плане, тогда я не знаю. Запятую проверил все стоит, в чем же пробема??????

[@Сергей-й9т7ъ]

скорее всего какой-то элемент вылазит в сторону, поищи его, попробуй по прописывать overflow: hidden чтобы скрыть лишнее у блоков

[@СергейЗагорский-б9ж]

Смотри код. Есть то, что вылазит за нормальные рамки. В моём случае это был раздел Our Team в котором 4 блока я разделил не как 25%, а по 270px, в коде написал его не резиновым, а статичным. + ещё overflow можно сделать для вылезающей части. Главное не печалься сильно, всё будет чётко))

[@Евгений-г6и9н]

это из за иконок social внизу, они не помещаются

[@Видеокарта-т9л]

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

[@BrainsCloud]

У секции должен быть заголовок обозначающий что это за секция. Здесь у секций заголовков нет, поэтому div.

[@green3216]

А выносить media.css в отдельный файл будет норм? Если в html подключить его после основного .css файла

[@BrainsCloud]

Ну такое. Я раньше так работал и пришел к выводу что это не очень удобно. Попробуйте.

[@avtomatoUwU]

В safari для винды все ужасно, последняя версия 5.1.7 - 2012 год, все блоки находятся друг под другом, скорее всего это из-за display: flex

[@romaroman8204]

в Microsoft edge что-то с иконками