Верстка сайта с нуля. Верстка на Flexbox. Адаптивные изображения

[@tblkBa91]

Это не просто уроки это БОЖЕСТВЕННЫЕ уроки! Спасибо Тебе милый друг 😌

[@Tim_Linkel]

Четкий урок, благодаря тебе, перебрал мой мини серв на html, всю структуру переделал сайту, и файлы в папки раскидал, стало чистенько, есть еще что приводить в порядок, но там мелочи) Круто, молодец 5+

[@АнтонинаАхунова-ч2э]

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

[@anfain3831]

хочу ещё!=) хороший формат!

[@SuprunAlexey]

Будет еще много

[@appleipad9226]

Спасибо большое за крутой урок 👌🏿

[@itsme578]

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

[@proodfirst2330]

Просмотрел на одном дыхании! Спасибо!

[@zefncs]

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

[@knzev]

Отличные уроки! Так держать.

[@НастяЕрофеева-ю4ъ]

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

[@viktorshatalov1920]

Для такого тренера и лайка не жалко!!!!)))

[@АртёмТриколич]

Спасибо за работу. жду новых уроков!

[@KuKu_RuKu88]

Вам, что даже самые элементарные вещи обьясняете !!! Очень доходчиво !!!

[@orbita_studios3835]

Слайдер сделай в следующем уроке очень здорово будет

[@serega11071993]

Очень полезный урок.

[@SuprunAlexey]

Согласен

[@Слава1992Илюшин]

Лайк бро!Кстати, просматривая комментарии канала Трансформатор,нашёл там тебя)

[@SuprunAlexey]

Да, посматриваю трансформатор частенько

[@bdg5242]

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

[@НикитаСмык-ч2в]

к классу advantages не применяется свойство display: flex; т.е. каждый объект с картинкой и текстом забирает себе отдельную строку( help!

[@ahmedovabdulaziz1501]

Когда открываем меню на мобильный вариант то меню завкрывает картинку

[@TheElement1000]

все получилось спасибо!!

[@hennadiipetrov1967]

Спасибо, все понятно)

[@kartoshk4]

Столкнулся с проблемой что не работает flex-wrap: wrap; Что делать кто знает?

[@eagleeye7570]

Рахмат тебе дорогой учитэл

[@viktorshatalov1920]

Очень круто!!!

[@БогданВендичанский-я4и]

Что делать,если текст от картинки уходит влево при уменьшении ширины экрана

[@Андрей-п6в7д]

когда для advantages__item задали ширину 30% все стало нормально как по примеру но текст в строку идет и налазит на соседние элементы

[@virpilot]

Почему у меня не работает justify-content center когда я написал display flex

[@jekachaychuk7293]

у меня почему то картинки не стают в 3 колонки ( как решить ? *{ margin: 0; padding: 0; } a{ text-transform: none; } li{ text-transform: none; list-style: none; } body{ font-family: 'Raleway', sans-serif; } .logo{ background: #000; max-width: 100%; display: flex; justify-content: center; } .graficlogo{ padding: 5px; max-width: 100%; box-sizing: border-box; } nav{ margin: auto; width: 800px; height: 100px; } .topnav{ background-color: #fff; font-size: 14px margin-top:40px; } .topnav a{ color:#000; text-align: center; padding: 14px 16px; font-size: 15px; } .topnav a:hover{ border-bottom: 2px solid#000; } .topnav .icon{ display: none; } .mw-100{ display: block; margin: 0 auto; max-width: 100%; } .advantages__container{ display: flex; justify-content: center; } .advantages{ width: 70%; display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; } .advantages__item{ width: 30px; } @media screen and(max-width:768px ){ .topnav a:not(:first-child){ } .topnav a .icon{ float: right; margin-top: -17px; display: block; color:black; } nav{ width: 100%; height: 100px; } .topnav.responsive{ position: relative; } .topnav.responsive a.icon{ position: absolute; right: 0; top: 0; } .topnav.resposive a { float: none; display: block; text-align: left; } .advantages__item{ width:45%; @media screen and(max-width:768px ){ .adventages_item{ flex-direction: column; } .advantages__item{ width:100%;

[@555ll]

Ты бы ещё трёх тонный код скинул? Зачем ты скинул сюда лишние селекторы??? Они просто не нужны.

[@ДавидКобахидзе-м7м]

в @media после and пробел (перед (max-width:768px ))

[@ummadiamond]

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

[@Darkistay77]

А где картинки ко второму уроку что-то найти не могу

[@hackergamer9981]

Простите как правильно переводится ABOUT? По идеи он должен переводится: около, о, об.

[@hackergamer9981]

Ну как???

[@SuprunAlexey]

About us - о нас

[@hackergamer9981]

@@SuprunAlexey Спасибо)))

[@jamAll228]

Почему после .advantages__item{ width: 45%; изображения встают в две колонки вместо трёх?

[@SuprunAlexey]

А почему должно в три?

[@jamAll228]

@@SuprunAlexey Ну как, при размере экрана выше 768px у нас три колонки, затем когда экран меньше то 2 колонки, и когда уже меньше 480px то остается всего одна колонка) Но я уже нашел ошибку, спасибо:)

[@AlexFlib]

Дякую!

[@ekobilske1368]

Все хорошо, но там где вставляем изображение с классом mw-100, если у меня ширина монитора 1920 пикселей, то изображение приклеивается к левому краю, и полностью не увеличивается.

[@artb554]

Добавь в класс mw-100 свойства display: block; margin: auto;

[@kartoshk4]

@@artb554 Спасибо, помогло.

[@ВасильБереза-щ2г]

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

[@Андрей-п6в7д]

появились проблемы при использовании своих лого . пришлось фиксировано задавать каждому размер

[@viktorshatalov1920]

А есть уроки чтобы менюшки рисовать разные и в какой программе?

[@firebird6034]

а не лучше ли advantages_item задать вместо свойства width flex-basis? тогда и медиа запрос лезть не придется, и адаптивно будет все, я правильно рассуждаю?

[@ЕвгенийРябченко-ж4ф]

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

[@virgo6324]

В первый раз карта загрузилась и все работало. Через некоторое время открываю страницу с картой, карта на секунду открывается, а потом закрывается темным фоном с надписью "При загрузке Google Карт на этой странице возникла проблема." Что это может быть?

[@НаильАрсланов-г5б]

у меня после команды display flex ,advantages все равно находятся по одному на одной строке а не выстраиваются,что не так

[@SuprunAlexey]

та по такому коменту так и не скажу

[@romanusolcev]

Подскажите, пожалуйста. У меня следующая ситуация. Меню остается под картинкой. Т.е. на экранах меньше 700 при нажатии на кнопку меню открывается, но пропадает под изображением. Хотя как в данном видео оно располагается поверх изображения. В чем может быть ошибка? Сначала добавил слайдер, как в восьмом уроке яваскрипт, но эффект был тот же. Меню открывается и остается за картинкой или слайдером. После я скрыл код слайдера и оставил только картинку, чтобы было 1 в 1 как на видео, но нужного результата не получил. Спасибо!

[@romanusolcev]

Убрал значение height: 100px; у атрибута nav и теперь меню открывается и уезжает вместе с картинкой. Т.е. проталкивает изображение под собой вниз. Тоже, конечно, вариант, но не то, что нужно. Еще забыл указать, что на экране 700< при нажатии на иконку она открывает меню и становится вниз списка выпавшего меню, а не остается справа, как стояла изначально. Ощущение, как будто пишешь на бустрап4 код бутстрап 3 и все, вроде, правильно написал, но не покидает ощущение, что площадка не так или что- то в этом роде. Типа код не может прочесть правильно. Браузер хром.

[@romanusolcev]

Афигеть! На сколько же коварен этот код :) Требует максимального внимания. Дело был вот в чем. .topnav.responsive{ position: relative; } .topnav.responsive a.icon{ position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } Я везде между .topnav и .responsive ставил пробел(.topnav .responsive). После того, как я эти пробелы убрал, как показано на примере выше, то меню сразу же повело себя именно так, как и должно. Спасибо большое!

[@МаксимСергеевич-е4ь]

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

[@polinatelnik2586]

Как сделать эти картинки ссылками

[@vladmordasov6438]

Почему у меня все круглые иконки в столбец выстраиваются а не в ряд ???

[@firebird6034]

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

[@ЮрийБарсуков-к9ф]

Благодарю

[@zero_klou]

Вместо Кучи media можно просто обойтись flex-basis:30%. Тогда при необходимости элементы сами смогут растягиваться

[@carrera5822]

Простите но у меня вопрос! Все как в видео сделал но блоки тупо вниз идут. Также больше трех не отображаются. Также если удолять все блоки в html все равно когда переходишь на страницу в браузере отображается три блока и изображение с текстом не меняется .

[@kumarzhekshenbekov9607]

Яне понял откуда взялся .responsive .У меня неработает javascript?

[@ВадимАлександрович-и9о]

Картинки в ряд не получаются! Плиз, хэлп! Все названия проверены, все блоки на месте. Почему в один столбец?

[@Кусаюсь-п6ч]

После второго урока пропала адаптивность меню, хотя до этого всё работало. У кого нибудь было так?

[@Дима-э1ы5ж]

Почему у меня картинка не на всю длину?

[@reutoffreutoff4549]

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

[@romanusolcev]

Не получается при сужении экрана уменьшать кол-во колонок. @media screen and (max-width: 768px){ .advantages_item { width: 45%; } } Класс точно прописан правильно. @media screen and (max-width: 420px){ .advantages{ flex-direction: column; } .advantages_item { width: 100%; } } При размере экрана 420пкс становится одна колонка, но ее косит влево и края изображения съедаются. Т.е. не как в логотипе. Пробовал box-sizing: border- box; - не помогло :(

[@romanusolcev]

@media screen and (max-width: 768px){ .topnav a:not(:first-child){ display: none; } .topnav a.icon{ float: right; margin-top: -17px; display: block; color: black; } nav{ width: 100%; } .topnav.responsive{ position: relative; } .topnav.responsive a.icon{ position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .advantages_item{ width: 45%; } } @media screen and (max-width: 480px){ .advantages{ flex-direction: column; } .advantages_item{ width: 100%; } } Ни малейшего понятия, где может скрываться проблема того, что при уменьшении экрана он отказывается уменьшать кол- во столбцов :(

[@romanusolcev]

Я не знал, что последовательность важна и в css. После того, как переместил коды advantages над @media, то все заработало.

[@StasianGames]

мне ваш комментарий только что помог, та же проблема была

[@valeryiahrabnitskaya6736]

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

[@ВячеславИлькевич-о2ъ]

@@romanusolcev Спасибо, мужик!!! Мне помогло. @media внизу, а .advantages выше @media и проблема логотипов в колонку решена. Все стало в ряд выстраиваться !!!!

[@StudioRainOfficial]

Приветствую! У меня вместо первого вашего адаптивного изображения слайдер (CSS), и как я не пытался его сделать адаптивным, не получается. Обращаюсь к нему вот так: .slider{ max-width: 100%; box-sizing: border-box; }

[@alexeybogutsky7158]

Как я понял все манипуляции с шириной-адаптация под смартфоны? Спасибо.

[@ВладиславАчкасов-ф1у]

да

[@АнжелаМакеенко-р1д]

Здравствуйте! Спасибо за уроки! Подскажите, пожалуйста, как увеличить расстояние между текстом второго ряда и картинками третьего.

[@Teacification]

Привет. Есть пару замечаний которые заметил. 1. У тега img не заполняешь alt. 2. Меню навигации удобней делать не сортированным списком. 3. Текст меню правильней оформлять в css через свойство uppercase.

[@briceag2411]

Почему бы сразу картинке-обложке не задать ширину 100%? С max-width она ведь на широких экранах не вырастет больше своей ширины. А с width всегда будет строится по ширине окна, будь то мобилка или 4к дисплей.

[@ДанилаУланов-м3т]

у меня не появляются картинки которые с тексом внизу. Вроде написано правильно Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur architecto arque alias vel illo quod?

[@modg2774]

Проверь весь html может где-то не закрыл тэг

[@ДанилаУланов-м3т]

Я нашел ошибку. В название папки😂

[@kartoshk4]

@@ДанилаУланов-м3т что не так было?

[@present-g]

Спасибо за Ваши уроки! вопрос: не лучше ли задать для .adventages__items { flex-grow: 1; flex-basic: 30%;} что б не использовать @media запрос? коротко {flex: 1 30%;}

[@seamensclubaihub]

спасибо!!

[@ВиталийСлободянюк-х8м]

Доброго времени суток! Можно урок на тему: "Какие шрифты для сайта использовать, а именно для логотипов для контента и прочие" =)

[@SuprunAlexey]

+Виталий Слободянюк так какие дизайнер даёт такие и использовать)

[@ВиталийСлободянюк-х8м]

А если писать сайт одному с нуля например?) Вот я сам столкнулся с такой проблемой

[@tacticalbelyash]

Главное чтобы у шрифтов не было засечек. Хорошие шрифты для веба: Open Sans, PT Sans, Roboto, Ubuntu.... Ещё больше можешь найти тут fonts.google.com

[@ifriendly90]

Спасибо, отличное видео. Такой вопрос: как добавить боковую панель, но чтобы она исчезала при уменьшении экрана менее 420px?

[@DarkHunter-e7n]

Здравствуйте Я сейчас закинул каталог со всеми файлами на смартфон, но когда открываю в браузере, то приходится зумировать Почему не учитывается ширина экрана?

[@ИванИванько-д5ч]

Здравствуй , при всех значениях что ты поставил картинка у меня не на всю ширину, от 1420px . что в этом случае делать?background-size: cover; ?

[@ДмитрийВладимиров-к5ф]

Материал для изучения какой использовать?

[@jelarej9162]

можно ли в слайдере использовать инлайновые картинки?

[@dimaster5880]

Жду твоих видео сильнее чем сериалов... А почему главная картинка не по центру? надо добавить к .mw-100 display:block; margin: 0 auto;

[@SuprunAlexey]

Ахах спасибо!

[@dmitrykharlamov3406]

или flex, и лучше картинку по шире сделать, что бы на всю ширину была(1920)

[@drewnaumenko2469]

Да я тоже это заметил что не по центру, думал так задумано автором или забыл , я просто поставил width: 100%; ресайзитса также как и с max-width.

[@alexsmirn]

Dmitry Kharlamov Как в данном случае можно использовать flex?

[@maxgold1539]

у кого проблема с адаптированием экрана: пишите весь код до @media а не после, мне лично помогло

[@maxgold1539]

желательно вообще сделать все @media в конце кода.

[@mattmurdock2414]

@@maxgold1539 сделал в конце кода, все сработало. спасибо)

[@MrFog124]

у кого не получается выравнивать элементы в ряд проверьте: 1) струдтура трех элементов состоит так: адвентеж контейнер адвентеж адвентеж итем адвентеж итем адвентеж итем Будьте внимательны, я когда дублировал я дублировал адвентеж контейнер и адвентеж, а этого делать не надо

[@kartoshk4]

все равно не получилось

[@ЕкатеринаБахарева]

У меня ширина экрана больше размера баннера. и картинка стала сбоку, а не по центру. как ее расположить по центру? display: center?

[@kyberi13]

.mw-100{ max-width: 100%; display: block; margin: 0 auto; }

[@ЕкатеринаБахарева]

Спасибо. разобралась

[@vitaliitaranik]

Чувак у тебя непозволительная ошибка в вёрстке.Ты в titlte написал название сайта MiRRilis вместо MiriLLis,а так красавчик всё супер))))

[@ProGeep]

Такой вопрос, делал все по уроку. Но при этом при всем иконки не выстраиваются в ряд. А так и остаются в линию.

[@sallyMaks]

У меня в html коде была ошибка, поэтому flex не работал

[@kartoshk4]

@@sallyMaks а какая была ошибка не подскажете?

[@sallyMaks]

@@kartoshk4 опечатка в коде, перепроверяйте внимательно

[@vitaliitaranik]

Есть вопрос,может всё таки нужно img web.jpg оборачивать в div? Потому как у меня при разрешении 2560 не центрируется,так как не задано свойства margin 0 auto,а чему задавать то когда обёртки нет? Просто если поставить text align: center; на main будут центрироваться всё,что находиться в main,а вдруг это нам не нужно?

[@kyberi13]

.mw-100{ max-width: 100%; display: block; margin: 0 auto; }

[@TimkaPLAYgaming]

а, че у меня перенос после каждого слова?

[@НикитаКучко-э5ч]

flex-wrap: wrap; Если писать, то все блоги идут в столбик. В линии они никак не выстриваются

[@jonyiik]

Display flrx

[@VS-io9so]

медиа адаптация не работает вообще удолил тоже самое может ошибся где подскажите пожалуйста, @media screen and(max-width: 768px) {/*медиа запрос действие при разреш экрана меньше*/ .topnav a:not(:first-child){ display: none; } .topnav a.icon{ float: right; margin-top: -17px; display: block; color: black; } nav{ width: 100%; height: 50px; } .topnav.responsive{ position: relative; } .topnav.responsive a.icon{ position: absolute; right: 0; top: 0; } .topnav.responsive a{ float: none; display: block; text-align: left; } .advantages_item{ width: 45%; }

[@valeryiahrabnitskaya6736]

после and поставь пробел

[@alexanderkandinsky5565]

Как растянуть картинку на весь экран?У меня она встала по центру...

[@altynaichalaeva7940]

.mw-100{ max-width: 100%; }

[@tarasvakulka7296]

Скиньте будь ласка матеріали у вигляді посилання на GoogleDrive чи Dropbox, буду вдячний.

[@orbita_studios3835]

Как ты высчитываешь в процентах ширину контейнер а потом ширину блоков?

[@SuprunAlexey]

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

[@drewnaumenko2469]

nav{ margin:auto; width: 800px; height: 50px; } heigth всё таки нада оставить, потому что картинка лезет вверх и подсветка которая сделана нижним бордером свовсем не видна при наведении курсора на пункты меню

[@virgo6324]

Карты гугла получаются платные? Требуют номер платежной карты.

[@hv_tuning]

Нет, просто регистрируешься , и получаешь код на использование гугл API(его там нужно поискать, если что напиши я скину)

[@hv_tuning]

Также желательно запускай через сервер, но это не обязательно

[@MrErl]

*Привет! Хотел бы узнать твое мнение об редакторе "Brackets"*

[@SuprunAlexey]

+Эрл мне он не нравится

[@to_0ni]

с какой частотой будут выходить выпуски? а то уже заждался?)

[@Vlad3i3mir]

Web Developer Blog , у меня 6 картинок слиплись и получилось как карты в руке.

[@altynaichalaeva7940]

проверьте .advantages

[@b_trends_24]

помогите, .advantages_container{ display: flex; justify-content: center; border: 1px solid red; } .advantages{ width: 70%; display: flex; justify-content: space-between; border: 1px solid blue; text-align: center; flex-wrap: wrap; } .advantages_item{ width: 30%; } все равно не стали в строчку, а идут в столбик

[@annajn596]

Егор Калинин , Разобрался с проблемой ? Дай списать 🙏

[@ruslankoshevoy6291]

advantages внутри advantages__container? Это как так? Как элемент может быть без блока? Должно быть наоборот, либо advantages -> advantages__container -> advantage

[@ruslankoshevoy6291]

Elmir Pires в видео попытка сделать по БЭМу. И по БЭМу такое присвоение классов неправильное.

[@ruslankoshevoy6291]

Если не учитывать, что это БЭМ - то конечно правильно. Но здесь, мне кажется, была попытка его использовать)

[@Ulftar]

Картинки нарезаны с разным разрешением, поэтому у меня возникало вертикальное смещение текста. Нарезал все картинки 137х137px, смещение ушло.

[@mostwanted6784]

Для изучения CSS. Большая книга CSS как вам?

[@СергейПротос-р1р]

второго урока нет

[@SuprunAlexey]

Сергей Протос в смысле? Все есть!

[@СергейПротос-р1р]

в плейлисте там где четыре урока. написано что второе видео удалено

[@otbasyomiri]

Картинка не растягивается по всему макету макс 1428px ( как раз соответствует разрешению самой картинки ) ссылка на скрин prntscr.com/jg0d7k Как сделать адаптивным ?

[@ВЛАДМагдыш]

Нужно сделать как с логотипом , то есть: mw100{ display: flex; justify-content: center; width: 100%; box-sizing: border-box;}

[@kartoshk4]

@@ВЛАДМагдыш спасибо, помогло

[@kartoshk4]

@@ВЛАДМагдыш только мне больше помогло .mw-100{ max-width: 100%; display: flex; justify-content: center; width: 100%; }

[@quelo7296]

В тексте compani__img

[@ThePirateHistory]

10:20 не???? как бы так будет более практично и этично! идет все автоматом. также можно добавить это к любому блоку. раз писать на 4 бутстрапе, то уж как по докам) и это не сложно, для новичков, если они будут слушать внимательно и повторять, затем смотреть что они там по накалякали, что у них не получилось, хотя в видео все работает, ну раз уж они смогли вкчлюить тутор, то и разжувать они должны сами, тем более, при таком объяснение как у тебя, вопросов не должно быть. разве что если не понял, как именно работает то или это, в общем, делай как лучше на продакшене! @include media-breakpoint-up(lg) { text-align: left; } P.S код с выравниванием текста просто вставлен для примера!!!!!!!!!!!!! @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Example usage: @include media-breakpoint-up(sm) { .some-class { display: block; } }

[@anfain3831]

img растягивается на 1400+ (свою ширину), а дальше пустое место!

[@anfain3831]

max-width: 100%; - не работает, а width: 100%; - работает как нужно! почему?

[@skeelo3157]

Максимально свое ширины картинка не растягивается , поставь min width тогда она всегда будет по размеру экрана

[@wickedtorpedo75]

Напиши width: 100%, А в медиа запросе: max-width: 100%

[@termoxin8429]

Сколько ты в среднем тратишь времени на обучения веб-разработке в день?

[@SuprunAlexey]

+Termoxin обучении вас? 2 часа

[@termoxin8429]

Своему обучению веб-разработке.

[@yungosu5786]

флекс рэп, ноу рэп

[@SuprunAlexey]

Рэп

[@ВасяСидоров-я6ш]

Жаль, что без слайдера, :[

[@SuprunAlexey]

так сами доделайте

[@ВасяСидоров-я6ш]

Смотреть, не делать :)

[@SuprunAlexey]

вы параллельно не пишете код?

[@realolejka]

jquerry слайдер гуглишь и все.

[@Artist-pi8ek]

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

[@Андрей-п8й7ю]

Ребят, у кого не получается, попробуйте медиа запрос в конец css закинуть - полчаса на это убил