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

Продолжаем практиковаться в верстке сайтов на HTML и CSS. В этом видео продолжим делать адаптивную верстку для нашего сайта.
// Ссылки =================
Основы 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

[@BrainsCloud]

Привет! Я почти выздоровел - лови видос. Как ты? Не болеешь летом?)

[@KanalReal]

Хай! Не летом не болею, болею в ноябре)

[@Паша-н9ь]

не болею. спасибо бро

[@Yakyzzza93]

Привет. Я конечно пишу спустя год, но... пусть будет. Возможно где-то забываю коменты писать, а вот лайк это обязательно) Сижу ночью и смотрю видео, пишу код, ночью тихо и спокойно) По поводу самих уроков вопросов не возникает, Дима мастерОбъяснений 110го уровня!=) Так держать, огромное спасибо за твои труды!!!

[@NeedForHeavyMetal]

привился сутником, температура была под 40, но я не жалею и только рад) связь с космосом налажена всем здоровья!)

[@ardixq]

сегодня заболел, лол

[@abdul-malikmagomaev7563]

4 года назад были закинуты видео, а они остаются такими же эффективными даже по сей день. Сразу видно, уровень.

[@andrewlincoln9208]

Ближе к концу курса остаются самые сильные - видно по количеству просмотров :) Прорываемся до конца! Спасибо за лучшие видеоуроки!

[@base-color]

только хотел это написать )

[@Mykhailo_Vdovychenko]

Вот что значит, когда сразу спланировать нормально разметку и все это сразу же нормально сверстать, то потом и адаптировать нужно по минимуму. Аплодирую стоя. Работа перфекциониста. Идеально!

[@Ahmed__123j]

хорошо что я подписался на этот канала давно , здесь все понятно логично обьясняет человек по Адаптивной вертски !

[@bakedeblissnina]

Спасибо за ваши труды. Эти видео просто находка. Сколько было перелопачено KZbin, чтоб найти что-то подобное. Все получается, главное чтоб глаз был намётан на свои ошибки ). Ваши видео + литература + упорный труд = Web Developer. Желаю побыстрей набрать 100тыс и более подписчиков. Продолжайте в том же духе)))

[@settojoob8030]

Автор,ты лучший.Это самые оптимальные обучающие курсы из всех, которые я только видел.Все доходчиво и понятно.Всё разжёвываешь по малейшим деталям.Красава)))

[@НурланМаннапов-я6е]

Просто лучший! спасибо за годный Web content

[@ДмитрийБогдан-б4д]

Очень крутая серия уроков. Всем советую. Еще есть по JS отдельная серия - тоже очень просто рассказывает. Автору ОГРОМНОЕ СПАСИБО.

[@thecatwrites9731]

я наверное больше боялся этого адаптива чем надо было) спасибо

[@РоманШевченко-ч4ы]

Осваивать верстку по вашим урокам одно удовольствие. В блоке reviews для адаптации под мобильное устройство перепрописал .container { padding: 0;}, и картинка стала на свое место, красиво по центру без боковых зазоров.

[@forceward]

Спасибо что уделяете много времени для ваших подписчиков ✊🙏

[@ladyafize5689]

Только пару дней назад закончила онлайн-школу html academy и в качестве тренировки использую ваши видео! Спасибо огромное вам за ваш труд !! Надеюсь ,что видео будут выходить и дальше . Вы идеальны! ❤️

[@vladubiriya8497]

Лучшее обучающее видео, на столько понятного разбора ни у кого не видел. Так держать!!!

[@GunToys-f2z]

КТО ПОСТАВИЛ ОДИН ДИЗЛАЙК??? Ты лучший)Просто красавец) Удачи тебе )))

[@ИгорьГлазков-с1б]

Спасибо Дмитрий. Здоровья Вам.

[@WhereIsMyMind721]

Гениально все разложил по полочкам. Ты сделал для всех нас неоценимый вклад.Огромное спасибо!

[@yevheniidodiak3644]

Дмитрий Вы крутой человек! Я смотрю Вас на You Tube, вы мой билет в Web. Спасибо вам огромное за ваш труд 😎

[@holdyourcolours]

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

[@BrainsCloud]

Спасибо!

[@glass6969]

Это просто лучший канал из всех что я видела, спасибо огромное вам за объяснения, всё очень понятно ☺️😍

[@Burovasofia]

спасибо большое за ваш труд!!!!

[@shubor1091]

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

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

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

[@sergstrue362]

Просто огонь!

[@zv5585]

Здоровья тебе, лайк не глядя, еще раз скажу, что у тебя очень классные уроки

[@BrainsCloud]

Спасибо!

[@serene3d772]

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

[@alessagelespi1781]

Выздоравливай! Пили больше годных видосов)

[@EUC_Novak]

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

[@johnsilver4008]

Привет! БОЛЬШОЕ тебе, чувак человеческое спасибо!!!!!!, за то,что по полочкам все разложил! А то после курсов такая каша в башке была... Редко встретишь внятные объяснения. Смотрю дальше твои уроки. Успехов тебе!!!

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

Как обычно на высоте!! Огромное спасибо!!!

[@sigvist6228]

Кстати я нашел легкий способ сделать картинку с reviews__img без рамок. можно было прописать что через reviews мы обращаемся к container и внутри него убираем padding. То есть это было бы так: .reviews .container{ padding: 0;} Ну а затем .reviews__img{ width: 100%}

[@Tom-hk5nn]

Просто ТОП, спасибо за видео!)

[@deeco8289]

5:53 и 17:07 Возможно просто,когда ты эскпортировал картинки для блока works,то не заметил как у двух картинок,которые сейчас меньше,чем другие в эскпорте размер меньше,чем у других. Скорее всего ты просто не "вытащил" картинки из под других слоев и эти слои обрезали картинку для экспорта. У меня все картинки одинаковые. И кстати,спасибо за твой труд!)

[@artemipatov1690]

Тоже самое в блоке REVIEWS 19:24 , там картинка с женщиной больше по ширине(если убрать из слоя) и проблем с адаптацией не возникает)

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

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

[@StoryForgeArts]

*Большое спасибо за урок. Доходчиво и полезно*

[@ЕвгенийШершов]

Как всегда - супер! Не болей!)

[@BrainsCloud]

Спасибо!

[@Александр-ч9б1х]

Ты там не хворай))) годные видосы пилишь, подробно объясняешь!

[@BrainsCloud]

Уже почти здоров) Стараюсь, спасибо )

[@laskovoemeov9022]

212 лайков \ 0 дизлайков. Автор этого достоин. Спасибо тебе

[@andrewlincoln9208]

1100 лайков, два диза от шизофреников)))

[@goodgod17]

1.3k лайков и 2 диза

[@sayedakbarali5650]

Salute Boss, For ACTIVE & MOGO Tutorials Thanks a lot

[@DossymzhanBalagazhinov]

Ты лучший! Побольше таких видосов!!!

[@rda715]

Теска привет, спасибо тебе за твой труд

[@elifas2012]

Спасибо за качественно проделанную работу 💋💋💋💋👌👌👌👌😘😘😘😘💕💕💕❤❤❤

[@yungyeeze]

Салам, Диман!!! Огромное спасибо за эти уроки!!! Примерно на 6:28 с картинками опять фотошоп у тебя косякнул, у меня норм размера )

[@_Fantom_.]

Норм адаптивчик, едем дальше!

[@fabasay0073]

Спасибо тебе за этот туториал

[@alexshodan8794]

Спасибо за уроки . Здорово. Как то так ;)

[@AkciaInterestingSite]

Большое спасибо за урок!

[@kishmish7346]

Топ контент, продолжай в том же духе!!

[@UdalovArtem911]

Все очень понятно )) Спасибо за видео)))

[@romanro8630]

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

[@artema9267]

Круто еще верстки с js!!!

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

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

[@lobotomka]

Спасибо за труд!

[@Паша-н9ь]

супер

[@artem_ka3863]

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

[@elitech3339]

10K поздравлямба

[@vitaliyyasinskiy3689]

Как то так... Лайк

[@BrainsCloud]

[@KuKu_RuKu88]

Здорово, спасибо

[@BonAppetite-k3s]

При верстке не знаю что пошло не так но при расширении ширины менее 650px сайт начинает очень корячится в том плане что шапка сужается больше чем надо и в правом углу как белая полоска на всю ширину

[@TrgPlayinG]

такая же проблема

[@HISTEL]

Нашли решение?

[@Wjhebdheieiehv]

оч круто) вы профи!

[@BrainsCloud]

спасибо!

[@BKLG]

97,4к подписчиков! Ещё чуть чуть)

[@Евгений-х7п9с]

Спасибо бро

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

Top!

[@alexlisouski4069]

отсутствие дизлайков - показатель годного контента

[@ЖКуулар]

Привет! Классные уроки! Вопрос: почему контейнер выходит за пределы интра по ширине?

[@slava_tfdf]

Когда блок команды адаптировал, почему-то не перескакивает на другую строку 4 участник. Пересмотрел предыдущее видео с версткой команды, но там всё 1 к 1 в коде. В чем может быть дело?

[@inessalamjarred1]

Секция "features" к левому краю прилипает.. лишних paddingов и marginов нет. Ну кроме margin: 100px 0;. Почему так ?

[@kosha9951]

У меня все нормально с картинками. Может из макета не так вырезали?

[@Alex-dq9yk]

Здравствуйте! Хотел бы узнать вашего мнение по поводу верстки одного блока, а именно, блока с работами. (4:07) Вы показали решение с отдельной картинкой, но можно ли было сделать столько же блоков с бэкграундом этих картинок и при наводе показывать всплывающий красный блок? Просто с background-size:cover и background-position: 50% 50% по сути всегда будет качественное фото, размещенное по середине блока. Или в этом способе есть какие то подводные камни?

[@BrainsCloud]

контентные изображения через фон обычно не делаются

[@wjcurious]

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

[@dsim2632]

Привет. Не подскажите - как добавить картинки новых устройств в просмотр (как у тебя - айфоны и айпады) ? У меня только 5 айфон есть, айпад уже не отображается и другие модели устройств тоже. Спасибо за ответ. Видео классные !

[@djorji7114]

Ребят, почему у меня в браузере при включенном отображении рамок, рамки есть только для двух устройств, а для айфонов и айпадов нету.

[@АлександрТанюшкин-и5я]

У тех у кого отступ справа на мобильной версии, пропишите в css коде так : html, body{ margin: 0; font-family: 'Raleway', sans-serif; font-size: 14px; color: #6c7279; -webkit-font-smoothing: antialiased; background-color: #fff; width: 100%; overflow-x: hidden; }

[@calpyyxd2783]

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

[@Владимир-й9з1и]

Доброго времени суток. А кто-нибудь знает, почему изменения по медиа-запросам у меня начинаются от ширины экрана 1091px , хотя мы прописали от 991px (Chrome) и от 844px вместо прописанной 767px?

[@НискемкромеСовести]

С версткой разобрались. Теперь давай с js разбираться.

[@user-AntonPerepelytsia]

подскажите пожалуйста, когда адаптирую под max-width:687px, reviews__content- делаю ему ширину 100%, то при уменьшении картинка становиться на 100%, а контента просто нету. Как будто картинка перекрывает и Backround и Text . Нету ни фона , ни текста. Только одна картинка. Flex-wrap:wrap стоит. Начинаю увеличивать в браузере ширину, делаю ее больше чем 687px, то появляется фон справа от картинки, но без текста... Что это может быть? ничего не получается

[@evazakat6366]

Я не понимаю, почему, если в css прописать max-width какому нибудь блоку (например, тому же .features__item), слетает выравнивание по центру? И как его вернуть? Заранее спасибо за ответ!

[@matweyptushkin7697]

Спасибо за контент, качество как всегда на высшем уровне! Вопрос ко всем кто возможно сталкивался с такой проблемой. Когда я нажимаю в инспекторе кода Show Device Frame действие как бы происходит, но самих элементов (телефон либо планшет) не появляется, как решить данную проблему???

[@Oksana-mv7kz]

от браузера зависит, в chrome есть, но не ко всем, в brave нет вообще

[@turalperfectworld1065]

Веб привет!

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

Блок team__item вообще не меняется в ширине (как в breakpoint так и в основном)... хотя как стояло 25% в CSS, так и стоит, а если хочу поменять на 50 или 100% то не меняется... меняется все, текст, отступы, но ширина неизменна...(да, без фото/видео сложно объяснить) Кто то может помочь?

[@vi7aly]

Столкнулся с такой же проблемой. В блоке .team__inner в свойстве flex-wrap поменял значение nowrap на wrap. Сработало.

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

@@vi7aly к сожалению у меня и так стоит flex:wrap в team__inner

[@Oksana-mv7kz]

@@РоманВакуленко-л2ш flex:wrap или все-таки flex-wrap: wrap; ? Может в этом ошибка?

[@Tractoristaa]

@@Oksana-mv7kz В нужном контейнере прописал в CSS "flex-wrap: wrap;", у меня заработало. У меня контейнеры по другому называются, но делаю с ориентиром на этот урок. Выглядеть должно примерно так: .team { display: flex; margin: 100px 0; flex-wrap: wrap;

[@user62763]

Спасибо за урок. В пятом уроке на 19:58 Вы показываете iphone 6/7/8(375*677), справа появляется белая полоса на протяжении всего сайта. В шестом уроке на 13:10 Вы показываете разрешение 387*787, полосы уже нет. Как Вы убрали её? P.S не получается победить полоску при маленьком разрешении ibb.co/3yZ8Tty

[@BrainsCloud]

все показано в видео

[@Lisssssssssssssssssssssssssss]

В том случае, если еще актуально, попробуй вставить "метатег" (мне помогло)

[@user62763]

Спасибо всем , нужно было просто погуглить)

[@Tractoristaa]

@@BrainsCloud к сожалению, столкнулся с той же проблемой. Не знаю, как сформировать запрос в гугле, чтобы найти решение. В одном из видео тоже видел, что у вас сползает вся инфа влево и при уменьшении размеров экрана. в этом видео этой проблемы уже нет. ПодскАжите, как решить?

[@BrainsCloud]

@@Tractoristaa все показано в видео, нужно просто адаптировать все блоки, чтобы ничего не вылезало за пределы размеров экрана

[@АлександрСоболев-ф8р]

у меня или моник такой или что, но по мне дак лучше features__item визуально лучше запилить медиа width 50% при ширине 767px. Больше этого размера еще три нормально смотрятся. Ну тут я так понимаю строгих правил нет. как лучше смотрится так и пилить. или какой монитор (разрешение экрана) посоветуйте оптимальный приобрести для верстки.

[@BrainsCloud]

Я думаю минимум full hd, хотя я хочу себе 2к, чтобы при включенном devtools было хорошо видно сайт

[@serega_vvoi7137]

У меня почему-то большой белый кусок по правой стороне и когда уменьшаешь до мобильной версии, весь контент начинает превращаться в тонкую полоску слева? нид хелп.

[@serega_vvoi7137]

все уже разобрался)

[@ЖКуулар]

@@serega_vvoi7137 поделитесь с решением. у меня то же

[@ssgtbitva6712]

18:23 .reviews .container { padding: 0; }

[@DmytroRomanenko-s4j]

Тоже заметил, уже хотел писать))

[@webit9026]

18:06 там позиции - абсолют релатив. изза этого. паддинга нет

[@nikom9948]

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

[@ИванШквир]

я так понял ты имеешь ввиду что-то типо "аккордеона", погугли, надеюсь я правильно понял

[@nikom9948]

@@ИванШквир спасибо) Обязательно посмотрю

[@Владислав-г1ы]

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

[@BrainsCloud]

какой-то элемент вылезает за пределы сетки

[@vladisalex4410]

20:00

[@toten5409]

Спасибо за видео! Я думаю единственный дизлайк тебе поставила дама, которую ты женщиной назвал.)))

[@hellocaptain7106]

Привет, пишу сайт с нуля на HTML и CSS, я хочу выкладывать статьи на свой сайт, как можно это делать?

[@BrainsCloud]

выучить например php или работу с cms, например wordpress

[@elitech3339]

жду js

[@trayderonelove4167]

22:30 фотография же на айфон5 совсем уйдет за экран,не видно же будет нормально даже женщину

[@eeddeellwweeiiss]

27:55 ахахахах

[@ASERIA777]

15 мин

[@safuankz]

Как же лень учиться. Помню 1ое видео вышло, сказал себе учись, ему видео снимать-заливать потом, ты хотя бы смотри. и нифига. Остальные так же походу) 1 видео собрало 7к, остальные до 2 не дотягивают. эх лень враг человечества

[@BrainsCloud]

Scorpion First классика )

[@anixi85]

так везде абсолютно, посмотри уроки в ютубе например англиского, да или просто летсплейи по играм - где-то в половину с каждой серией уменьшается. Эти уроки интересные, но сама по себе верстка довольно скучна, развче что когда научишься быстро делать все и тогда пойдет живее. У меня знакомые фронт енд разраюотчики вспоминают верстку как страшный сон и плюются на нее.

[@doctorkiw1163]

Блин, у меня остался горизонтальный скролл....

[@ИльяВорон-ф4в]

эх.... костыль на костыле

[@Merxy111]

Что вы имеете ввиду конкретно?

[@tanyamarushka7251]

Спасибо большое за урок!