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

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

[@olegtsimfer455]

По сути, не работал с JS, jquery вообще не видел. Но по твоим видео не страшно пробовать что то новое, всё хорошо объясняешь, спабо!)

[@aleksandrkedria4024]

Шикарные видосы , научился верстке благодаря тебе.

[@BrainsCloud]

я рад!

[@aleksandrkedria4024]

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

[@optimist6598]

@@aleksandrkedria4024 Я думал у меня одного такое.Не нашел кто нибудь как исправить?

[@aleksandrkedria4024]

@@optimist6598 для тега body : overflow: hidden

[@optimist6598]

@@aleksandrkedria4024 Спасибо🙏

[@user-il7dx1ro1z]

к каждому последующему уроку доходит все меньше людей

[@dinir1000]

@Zigtelus что за текстовые редакторы? может редакторы кода?

[@2189108]

Это кста еще на втором уроке очень заметно было

[@zmerz]

@Zigtelus А что за курсы проходил?

[@zmerz]

@Zigtelus Спасибо за развернутый ответ!!!

[@yomzfka]

У меня почти все друзья начали учиться, особенно на карантине. Но со временем все сдавались. Остался только я. Наверно потому что мне это интересно ))

[@d.s.korochkin9238]

Круто) сверстал первый макет по твоему уроку)

[@ksupetrusenko]

8 вечера, вместо того, чтобы идти готовить ужин, я с красными глазами заканчиваю урок, спасибо ! Уроки - супер. И еще, ленивцы, такие как я, оверфлоу не делала, просто телефон подвинула и все )

[@user-yb9uf8uz8k]

Дошёл до урока 9, лайк поставил заранее, уверен что всё будет так же хорошо как и в предыдущих уроках!

[@user-xo2wt5xt4n]

Побольше бы таких уроков)) Абсолютно все понятно и простым языком

[@Anahitacode]

Круть. Неделя пролетела. Меня семья сначала потеряла))) Зато теперь влились. Делают мне картинки. Наверно будет свой оригинальный первый сайт! Дмитрий, благодарность от нас!

[@user-oh5vo5rj6y]

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

[@KuKu_RuKu88]

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

[@pogios]

Как всегда урок был отличным! благодарю за приобретенные знания!

[@allabott8128]

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

[@innameleshko7834]

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

[@MrZorg23]

Спасибо! Еще немного осталось, и сайт будет готов))))

[@Тини]

Спасибо! Как всегда на высоте!

[@realmaer6108]

Отличные видео! Спасибо))

[@demonicchannel5372]

Уроки действительно заслуживают 0 дизлайков :D

[@ai-man229]

держу в курсе. за два года набралось 2 дизлайка. есть информация из надежного источника что эти дизлайки поставили Австралийцы.

[@user-eu4zu7wf5i]

@@ai-man229 Хейтеры xD

[@user-nv1cs5vd3j]

Это было круто! Спасибо за предоставленные файлы, пригодились )) для проверки местами, в частности с размерами ширины, обнаружил у себя вместо with:100% свойство max-with и как следствие кривизна отображения...

[@romanro8630]

Большое спасибо! Как всегда всё круто!

[@Sun2rw]

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

[@user-xc9rx1gs6j]

очень крутой курс!) спасибо Вам огромное)

[@mikhailgrinchenko5541]

Спасибо , очень понравилось видео!

[@yomzfka]

А автор лучший ))) Дай бог ему здоровья ...

[@flab3rt]

Спасибо за видео, мастер!)

[@lawdriver88]

Спасибо. Очень интересно

[@user-bl5qv3jy1l]

ваш туториал очень крут!

[@shaxanematov8516]

Спасибо вам добрый человек

[@user-bo2fn9ye6b]

хорошие видео спасибо. Продолжай в том же духе

[@WinGearOfficial]

Спасибо, понятнее туториалов на ютубе нет.

[@user-ir9du6ct3m]

просто супер!

[@user-rr8gn3ft5b]

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

[@o.kiryukhin]

1:05 Адаптируем слайдер с отзывами 7:50 Адаптируем блок с логотипами 12:10 Адаптируем блок с работами 14:15 Адаптируем блок с клиентами 18:50 Адаптируем блок блога 21:35 Адаптируем футер 30:08 Удаляем горизонтальный скролл

[@asadbekkenjabaev]

fast and easy overflow:hidden eta prosta bomba Thanks

[@viktor9706]

Если у кого-то не полностью скрывается белое пространство то нужно прописать .section { position: relative; padding: 80px 0; overflow: hidden; }

[@Yakyzzza93]

"ну...border-right например"=) 10Q=) уроки реально интересные и понятные, много чего записываю, прям как на парах в универе)

[@Jerry161188]

Дмитрий, я два урока думал, что я косячник. И у меня горизонтальный скролл потому что я где-то накосячил)) В итоге задвинул айфон на -17 пикселей и всё стало гуд) Но когда дошёл до конца сам над собой ржал)) Спасибо!

[@utkirkurbanov8241]

Awesome!!!😀🙂

[@Burovasofia]

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

[@tanyamarushka7251]

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

[@hunt3rmay382]

ребят, на 13:42 дмитрий принимает решение изменить width для мобилок на 100% для блока с работами, но при этом упускает нюанс, что при ширине экрана 481-575px у всех картинок будет виден background в левой части экрана чтобы его убрать, просто добавьте под max-width 100%, который прописал дмитрий для ширины экрана 575px и меньше, следующее: .works__image { width: 100%; } также рекомендую убрать padding-top у второго блока с отзывами, для этого пропишите дополнительный класс для второго блока reviews у section, например section--reviews и в коде css (там где у вас reviews-стили), задайте следующее: .section--reviews { padding-top: 0; } всем успехов

[@sergeyermolaev270]

.works__img нужно поставить width: 100%; иначе background works__item-а вылезает от 480px до 575px

[@raccoon1399]

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

[@vladz3049]

У меня там стояла max-width:100%; и я думал что за хрень, вылазит эта фигня сбоку

[@pepega_blue]

спасибо за совет. Дмитрий этот момент, к сожалению упустил из за того, что очень быстро после внесения изменений в блок css @media для мобилок перешел к следующей странице сайта (( ну бывает

[@antonHeetch]

По большому счету плюс минус нормалью ))))) уроки огонь!

[@hotDelights_]

Спасибо, 🔥

[@PiterProduction]

Спасибо!!!)))

[@clickabelno]

Лайк!!

[@vladimirsvodjanojs8158]

Спасибо!

[@d-mbappe]

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

[@user-es3rc8uf2q]

Дякую за урок, )

[@vikogr200]

Спасибо.

[@blackmulthumor]

Спасибо

[@user-yl5xn4si7k]

Дима, а плагина Iphonов только на маке?

[@matweyptushkin7697]

народ объясните пожалуйста для чего делается margin -15 и затем padding 15 я повторять повторяю, а смысл не очень понимаю этого действия

[@samique]

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

[@user-bj9qw7lo6m]

Один раз уже сталкивался с таким "айфоном", получилось обрезать с помощью overflow-x для .section--devices.

[@TheLordDemetrius]

Если при обычной верстке все так или иначе понималось практически легко, то с адаптивкой уже сложности в голове. #404. The perekur and next one lesson))

[@DerAleksey]

Дмитрий, а сейчас не наблюдаются проблемы с помощниками типа jQuery, Figma, в связи с замедлением интернета?

[@zmerz]

Лайк не глядя!!!Никак не могу понять в чем проблема, красная полоска section__title:after при уменьшении съезжает и расположена слева...

[@endlesslysorrow]

33:03 нам же не нужен уже селектор hr, мы линию по-другому сделали при адаптации, ведь так?

[@DubinArtur]

не понял, зачем столько мороки с инстаграмом, просто убрал мах-, чтобы картинка была по ширине блока, а потом добавил height: auto, и всё встало на свои места, также осталась плитка из картинок 3х3 .instagram_item img { display: block; width: 100%; height: auto; }

[@user-rp6tw7hb7q]

21:13 Если в .blog_text написать разное количество слов из лорем ипсум (как в дизайне), постепенно съезжает .blog_footer при уменьшении ширины девайса (сначала в первом блоге, потом во втором и в конце в третьем). Я пока совсем тупой в верстке и не хочу трогать код, но если кто-то напишет, как исправить, большое спасибо.

[@skyguy8039]

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

[@yevheniidodiak3644]

Продолжаем верстать с Вами =)

[@DerAleksey]

Да, заморочек более чем достаточно... я думал всё гораздо проще =) просто на весь макет прописываешь проценты для уменьшения изображений и текста в целом... наивный =b

[@turzvuk]

а почему может не работать overflow: hidden в page????

[@talantasanov4973]

почему-то у меня blog__date не адаптируется. Остается таким же большим как и в 1230px, так и в 320px

[@aliciajc4985]

Мучает один вопрос: почему в .clients__item не сработало центрирование через margin: 0 auto? Тоже ведь блок и вроде ничего ему это сделать не мешает. Буду благодарна за ответ!

[@user-yo1ri3nc4l]

А я сам не разобрался, почему imgка выравнивается по центру вместе с текстом. Ну и ваш вопрос тоже имеет место быть :)

[@innanagaeva1094]

Каждый день я говорю себе - "все, сегодня доделаю" и так уже пару недель

[@Sufferingmind1]

Привет! При ширине 570px в блоке works справа от картинок остаётся градиент, сидел думал как исправить, так и не придумал)

[@outs1der]

Для "colmm__item" максимальную ширину задать нужно

[@irustv7674]

Для @media (max-width: 575px) добавьте в /* Works */ => .works__item:hover, .works__image { width: 100%; }

[@aliaksandrtarashkevich3048]

@@irustv7674 Cпасибо!)

[@shittywizzard5727]

@@irustv7674 разве не достаточно Для @media (max-width: 575px) в /* Works */ добавить просто .works__image { width: 100%;} ? зачем для ховера писать?

[@irustv7674]

@@shittywizzard5727 можно не писать, в данном случае это было лишним

[@skvor83]

я до сих пор не могу понят (9 видео смотрю) - кто дизы ставит? люди, что с вами не так?

[@sarsenm5874]

26:49 Почему говорите на айфоне 5 ширина 320px?, когда у него разрешение 1136 x 640 пикселей

[@kolosrodoskyi]

Спасибо за видео. При 450пкс айфон просто перестал уменьшаться. При ширине 320 айфон стал больше айпада. Не могу найти ошибку. Хотя с твоим кодом все норм.

[@kolosrodoskyi]

Один гребаньій нолик не поставил.

[@maksatsadvakas3791]

привет! почему качество плохое?

[@BrainsCloud]

Ютуб обрабатывает, подождите немного

[@maksatsadvakas3791]

@@BrainsCloud Теперь понял! уроки по js не планируете? или подскажите хорошие уроки спасибо

[@BrainsCloud]

@@maksatsadvakas3791 Обычные уроки по js вряд ли. Ничего подсказать не могу, каждому свое

[@marchenko86]

дико извиняюсь, но почему нельзя было просто заюзать overflow-x, а не делать лишний див?

[@Infinite8dog]

по идее можно

[@den3212]

12:00

[@Ajax002]

Спасибо за ролики! Как вам такой вариант для смещения айфона без использования overflow? @media (max-width: 575px) { /* Devices */ .devices { max-width: 300px; } .devices__item { max-width: 280px; } .devices__item--iphone { width: 160px; left: auto; bottom: -50px; } }

[@sabatonbaton6105]

Как говорится плюс минус спасибо )

[@u_shaco]

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

[@kostiantyn4455]

Обьясните мне, глупому, как из отрицательного margin'a и положительного padding'а получается отступ :/

[@user-up6es3nr6s]

Про это? habr.com/ru/post/23748/

[@8dog574]

+

[@sacrat4676]

ПОЧЕМУ Я ТЕБЯ НЕ НАШЁЛ РАНЬШЕ?! Если у тебя есть ролик, как выкладывать сайт в общий доступ напиши пожалуйста в коммент сюда есть он или нет

[@BrainsCloud]

Есть

[@maksatsadvakas3791]

а все ок! извянки

[@kingslaye_r]

Ясно, у автора Айфон 5

[@BrainsCloud]

4

[@user-di4zt3br5m]

+