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

563 ratings | 20593 views


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

Мы продолжаем изучать верстку сайта с нуля. В этом видео мы разберем на практике как в верстке сделать адаптивные изображения. Так же сделаем блок преимущества. Такой блок приходится делать довольно таки часто, так что б изначально в одной строке было по три элемента, затем два ну и затем они становились в одну колонку. Создание сайта с нуля для новичка по этому видео не составит труда, но если у вас остаются вопросы, обязательно пишите их в комментарии к этому видео. В данном уроке по верстке сайта мы будем использовать flexbox для расположения блоков. Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб. Активационный платеж не расходуется, оставаясь на балансе и является всего лишь барьером против злоупотреблений со стороны спамеров, мошенников и т.п. Группа вк: Пост с логотипом в группе:

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

Valera Medvedskiy 4 days ago
Подскажите будто поставить наверх меню? У меня менюшка под background ушла!
Арсений 1 month ago
к классу advantages не применяется свойство display: flex; т.е. любой объект с картинкой и текстом конфискует для себя отдельную строчку( help!
Ahmedov Abdulaziz 2 months ago
Когда открываем меню на мобильный вариант то меню завкрывает картину
Виктория Никитина 2 months ago
Спасибо огромное за настолько полезные уроки ! Почти всё понятно, однако кушать маленькие пробелы (недопонимание) в css, этак будто покамест не всё исследовала по нему. Но ничего, всё будет)) Ещё один благодарю!
Untouchable 3 months ago
у меня не возникают рисунки которые с тексом понизу. Вроде написано верно <div class= advantages_item > <img src= img/company_icons/1.png alt= > <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur architecto arque alias vel illo quod?</p> </div>
Untouchable 2 months ago
Я отыскал ошибку. В заглавие папки😂
Modg 2 months ago
Проверь полный html может где-то не закрыл тэг
Meowmere 3 months ago
Не для новичков твои видео. вообщем не понимаю че ты за херню творишь(
Drew Naumenko 3 months ago
nav margin:auto; width: 800px; height: 50px; heigth всё таки нада бросить, поэтому что картина лезет ввысь и подсветка которая изготовлена нижним бордером свовсем не видна при наведении курсора на пункты меню
Daniel Helper 3 months ago
Большое благодарю за видео,все круто работает
Friday 4 months ago
thank you
GyGerr 4 months ago
В тексте compani__img
GyGerr 4 months ago
Это же французский стиль
Web Developer Blog 4 months ago
где?
Тлек Жангабылов 4 months ago
Картинка не растягивается по всему макету макс 1428px ( будто один соответствует разрешению самой рисунки ) ссылка на скрин Как сделать адаптивным ?
ВЛАД Магдыш 1 month ago
Нужно сделать будто с логотипом , то кушать: mw100 display: flex; justify-content: center; width: 100%; box-sizing: border-box;
Alex Lisouski 4 months ago
у меня флекс дирекшн не работает((
Altynai Chalaeva 19 days ago
вы не написали.advantages_item width: 100%;
Владимир Клочко 5 months ago
Web Developer Blog , у меня 6 картинок слиплись и вышло будто карты в руке.
Altynai Chalaeva 19 days ago
проверьте.advantages
VS Новый день 5 months ago
медиа адаптация не работает вообщем удолил тоже самое может ошибся где подскажите изволь, @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%;
Valeryia Hrabnitskaya 23 days ago
потом and поставь пробел
Alex Bogutsky 5 months ago
Как я сообразил все манипуляции с шириной-адаптация под телефоны? Спасибо.
Yasha 5 months ago
Помогите изволь, что мастерить если сейчас при открытии меню, оно падает под картину. Как поправить, помогите изволь.
IT-Мастер 5 months ago
Код в студию!
Nikita Stepanov 6 months ago
Большая неувязка с этими преимуществами. Они упрямо не становятся по три штуки в линия. Но при сжатии до 420пх видать, что срабатывает адаптивность, однако при обыкновенной раскладке идут попросту столбиком по одному. Вот код, может быть там где-то промах? Хотя три раза сверился с Вами. .advantages_container display:flex; justify-content:center; .advantages padding-top:40px; padding-bottom:40px; width:70%; display:flex; justify-content: space-between; text-align:center; flex-wrap:wrap; .advantages_item width:30%;
Frontend Developer 6 months ago
К создателю обращаюсь)
Frontend Developer 6 months ago
Эти блоки у меня попросту глупо книзу идут подскажите изволь что мастерить?
Frontend Developer 6 months ago
Здравствуйте у меня проблема! Всё сделал будто в видео однако мои блоки всёравно глупо в низ попорядку что мастерить подаскажите!
Altynai Chalaeva 19 days ago
напишите код сюда
Василь Береза 6 months ago
Вот за Вордпресс особое благодарю, собираюсь его учить, однако он меня весьма стращает, поэтому что нехорошо разбираюсь в бекенде и администрировании.
Саша Гулид 6 months ago
Сначала естественно же благодарю создателю.  Верстаю 2-ой один этот веб-сайт, тщательно переписывая. Сначала на ВШторме, позже на Sublime. Ниже, моя неувязка уже описывалась, однако, к огорчению, осталась без ответа. Дело в том, что Advantages_item'ы размещены не на схожем уровне относительно товарищ друга - рисунки и текст, невооруженным глазом, немного выше либо ниже примыкающих. В чем может быть неувязка?
Сергей Сафронов 6 months ago
Проблема в том, что все рисунки различного размера. Попробуйте .advantages_item img height: 160px; width: 185px;
Teacification 6 months ago
Привет. Есть пару замечаний которые увидел. 1. У тега img не заполняешь alt. 2. Меню навигации удобней мастерить не сортированным перечнем. 3. Текст меню правильней оформлять в css чрез свойство uppercase.
Илья Князев 6 months ago
Отличные уроки! Так содержать.
Yura Gruschinsky 7 months ago
Спасибо за Ваши уроки! проблема: не лучше ли задать для .adventages__items flex-grow: 1; flex-basic: 30%; что б не использовать @media запрос? кратко flex: 1 30%;
Apple iPad 7 months ago
Спасибо огромное за крутой задание 👌🏿
Анжела Макеенко 7 months ago
Здравствуйте! Спасибо за уроки! Подскажите, изволь, будто прирастить дистанция меж текстом второго ряда и картинами третьего.
Timka PLAY 7 months ago
а, че у меня перенос потом каждого слова?
John 7 months ago
Реклама затрахала! Подумай о нас хоть малость. Я все понимаю, однако это весьма нередко.
Фрэн kоt 4 months ago
за все видео 2 рекламы, в начале и в середине. конечно это лишь твои трудности
John 7 months ago
Да понятно все, однако не 8 реклам за 10 мин. Это неуважение, а ужаснее того, энтузиазм пропадает. В меру надлежит быть, об этом немало полезной инфо написано.
Sergei Gregul 7 months ago
То кушать, выходит что для тебя делают задание(безвозмездно), а ты еще жалуешься на рекламу, он тоже человек, он тоже есть желает)
Haze 7 months ago
Приветствую! У меня заместо первого вашего адаптивного изображения слайдер (CSS), и будто я не пробовал его сделать адаптивным, не выходит. Обращаюсь к нему вот этак.slider max-width: 100%; box-sizing: border-box;
Roman Usoltcev 7 months ago
Не выходит при сужении экрана убавлять кол-во колонок. @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; - не посодействовало :(
Valeryia Hrabnitskaya 23 days ago
у меня была такая же неувязка. я тоже не знала, что и у медиа должна быть последовательность
Stasian_Games 5 months ago
мне ваш комментарий лишь что посодействовал, та же неувязка была
Roman Usoltcev 7 months ago
Я не знал, что последовательность принципиальна и в css. После того, будто переместил коды advantages над @media, то все заработало.
Roman Usoltcev 7 months ago
@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%; Ни мельчайшего понятия, где может прятаться неувязка того, что при уменьшении экрана он отрешается убавлять кол- во столбцов :(
Roman Usoltcev 7 months ago
Подскажите, изволь. У меня последующая ситуация. Меню остается под картинкой. Т.е. на экранах меньше 700 при нажатии на кнопку меню раскрывается, однако теряется под изображением. Хотя будто в данном видео оно размещается поверх изображения. В чем может быть промах? Сначала добавил слайдер, будто в восьмом уроке яваскрипт, однако эффект был тот же. Меню раскрывается и остается за картинкой либо слайдером. После я укрыл код слайдера и оставил лишь картину, чтоб было 1 в 1 будто на видео, однако подходящего результата не получил. Спасибо!
Roman Usoltcev 7 months ago
Афигеть! На сколько же коварен этот код :) Требует наибольшего внимания. Дело был вот в чем.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). После того, будто я эти пробелы убрал, будто показано на примере выше, то меню сходу же повело себя конкретно этак, будто и надлежит. Спасибо огромное!
Roman Usoltcev 7 months ago
Убрал смысл height: 100px; у атрибута nav и сейчас меню раскрывается и уезжает совместно с картинкой. Т.е. проталкивает изображение под собой книзу. Тоже, естественно, вариант, однако не то, что необходимо. Еще запамятовал показать, что на экране 700< при нажатии на иконку она открывает меню и становится книзу перечня выпавшего меню, а не остается справа, будто стояла вначале. Ощущение, будто как будто пишешь на бустрап4 код бутстрап 3 и все, вроде, верно написал, однако не покидает чувство, что площадка не этак либо что- то в этом роде. Типа код не может прочитать верно. Браузер хром.
Alexander Kandinsky 7 months ago
Как распялить картину на полный экран?У меня она встала по центру.
Altynai Chalaeva 19 days ago
.mw-100 max-width: 100%;
Дмитрий Владимиров 7 months ago
Материал для исследования какой использовать?
Александр Моргунов 7 months ago
Он гавно чувак мутит чтото. А люд ебется и ниче не работает))))))))))))0
Александр Моргунов 7 months ago
Автор сукооооо.Ничего не пашет 10 один все поторял ничего не пашет не считая шапки,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Madi Oralkhan 8 months ago
можешь записать уроки для верстки уже готовых макетов ? У тебя весьма отлично выходит, все понятно и доходчиво
Сергей Хандога 8 months ago
не наилучший метод верстать с помощью flexbox в старенькых версиях браузера не поддерживается
Web Developer Blog 8 months ago
у вас на данный момент немало заказов с поддержкой старенькых версий браузеров?
eagle eye 8 months ago
Рахмат для тебя дорогостоящий учитэл
Most Wanted 8 months ago
Для исследования CSS. Большая книжка CSS будто вам?
Павел Заверженец 8 months ago
Спасибо, хорошее видео. Такой проблема: будто добавить боковую панель, однако чтоб она исчезала при уменьшении экрана наименее 420px?
Sly Fox 8 months ago
та хватит уже для новичков. у тебя практически все видео для новичков )
Сергей Протос 8 months ago
второго урока дудки
Сергей Протос 8 months ago
в плейлисте там где четыре урока. написано что 2-ое видео удалено
Web Developer Blog 8 months ago
Сергей Протос в смысле? Все кушать!
Taras Vakulka 9 months ago
Скиньте будь ласка матеріали у вигляді посилання на GoogleDrive чи Dropbox, буду вдячний.
Екатерина Щетинкина 9 months ago
У меня ширина экрана больше размера баннера. и картина стала с боковой стороны, а не по центру. будто ее разместить по центру? display: center?
Екатерина Щетинкина 7 months ago
Спасибо. разобралась
Юра Столяр 8 months ago
.mw-100 max-width: 100%; display: block; margin: 0 auto;
FireBird 9 months ago
и уместно, здесь элементы не совершенно ровно размещены, на параграфы обратите внимание, они не в линию, где то текст размещен чуток выше, где то чуток ниже, будто все сделать ровно?
Саша Гулид 6 months ago
А дудки. Сейчас дописал на саблайме и тоже самое. Какие-то из преисподняя_айтемов находят ниже, другие чуток выше
Саша Гулид 6 months ago
У меня такое было когда верстал это на ВебШторме, Установил Саблайм и неувязка пропала - вина - хз
FireBird 9 months ago
а не лучше ли advantages_item задать заместо характеристики width flex-basis? тогда и медиа запрос карабкаться не придется, и адаптивно будет все, я верно рассуждаю?
Артём Триколич 9 months ago
Спасибо за работу. жду новых уроков!
ProodЪ First 9 months ago
Просмотрел на одном дыхании! Спасибо!
Termoxin 9 months ago
Сколько ты в среднем тратишь времени на обучения интернет-разработке в денек?
Termoxin 9 months ago
Своему обучению интернет-разработке.
Web Developer Blog 9 months ago
+Termoxin обучении вас? 2 часа
Эрл 9 months ago
*Привет! Хотел бы выяснить твое мировоззрение об редакторе Brackets *
Web Developer Blog 9 months ago
+Эрл мне он не нравится
Андрей Михеенко 9 months ago
можно ли в слайдере использовать инлайновые рисунки?
Vitalii Taranik 9 months ago
Есть проблема,может всё таки необходимо img web.jpg оборачивать в div? Потому будто у меня при разрешении 2560 не центрируется,этак будто не задано характеристики margin 0 auto,а чему задавать то когда обёртки дудки? Просто если поставить text align: center; на main будут центрироваться всё,что быть в main,а внезапно это нам не необходимо?
Юра Столяр 8 months ago
.mw-100 max-width: 100%; display: block; margin: 0 auto;
Vitalii Taranik 9 months ago
Чувак у тебя непозволительная промах в вёрстке.Ты в titlte написал заглавие веб-сайта MiRRilis заместо MiriLLis,а этак красавец всё супер))))
Anton Nikolaevich 9 months ago
с какой частотой будут сходить выпуски? а то уже заждался?)
aNfain 9 months ago
img растягивается на 1400+ (свою ширину), а далее пустое пункт!
MEC Production 26 days ago
Максимально свое ширины картина не растягивается , поставь min width тогда она вечно будет по размеру экрана
aNfain 9 months ago
max-width: 100%; - не работает, а width: 100%; - работает будто необходимо! отчего?
Виталий Слободянюк 9 months ago
Доброго времени суток! Можно задание на тему: Какие шрифты для веб-сайта использовать, а конкретно для логотипов для контента и остальные =)
Вячеслав Журавский 9 months ago
Главное чтоб у шрифтов не было засечек. Хорошие шрифты для интернета: Open Sans, PT Sans, Roboto, Ubuntu. Ещё больше можешь отыскать здесь fonts.google.com
Виталий Слободянюк 9 months ago
А если строчить веб-сайт одному с нуля к примеру?) Вот я сам столкнулся с таковой неувязкой
Web Developer Blog 9 months ago
+Виталий Слободянюк этак какие дизайнер даёт такие и использовать)
Yevgeniy Babanin 9 months ago
Просто благодарю! Доступно, аккуратненько, понятно и ничего излишнего.
Web Developer Blog 9 months ago
+Yevgeniy Babanin и вам благодарю что смотрите
Dimaster 9 months ago
Жду твоих видео посильнее чем телесериалов. А отчего основная картина не по центру? нужно добавить к.mw-100 display:block; margin: 0 auto;
Drew Naumenko 3 months ago
Да я тоже это увидел что не по центру, задумывался этак задумано создателем либо запамятовал , я попросту поставил width: 100%; ресайзитса также будто и с max-width.
Dmitry Kharlamov 9 months ago
либо flex, и лучше картину по обширнее сделать, что бы на всю ширину была(1920)
Web Developer Blog 9 months ago
Ахах благодарю!
Orbita_Studios 9 months ago
Слайдер сделай в последующем уроке весьма здорово будет
Orbita_Studios 9 months ago
Как ты высчитываешь в процентах ширину контейнер а позже ширину блоков?
Web Developer Blog 9 months ago
блоки высчитываются уже снутри родительского контейнера по его ширине
aNfain 9 months ago
желаю ещё!=) неплохой формат!
Web Developer Blog 9 months ago
Будет еще немало
Владислав Дидковский 9 months ago
Жаль, что без слайдера, :[
Artist Хам 2 months ago
Всё пишу, время от времени что-то переделываю будто мне нравится. В этом и полезность видео, будто как будто сидишь пишешь с ментором
Oleja Olejovich 3 months ago
jquerry слайдер гуглишь и все.
Web Developer Blog 9 months ago
вы параллельно не пишете код?
Владислав Дидковский 9 months ago
Смотреть, не мастерить :)
Web Developer Blog 9 months ago
этак сами доделайте
Pirate Stories 9 months ago
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;
Ascold Channe 9 months ago
Видео по верстке на гридах для меня идеал на вашем канале. Сам умею верстать, однако 54минутное видео смотрел с упоением. Вот там все прямиком будто нужно. А здесь вы пытаетесь все испытать и выходит не то. Ничего сложного для новичков там небыло, а здесь самого в ступор вводит. Почему дудки враппера? отчего меню не в перечне ul? отчего иконки полностью с круглым блоком? Меню нереально санимировать с display.
Web Developer Blog 9 months ago
54 минутное видео это не у меня. Я делал очень попросту
Ascold Channe 9 months ago
Присоедиеяясь к коментатором ниже, еще замечание - где wrapper? квждому блоку строчить max-width:700px - дурной подход. Давайте уж по нормальному - в блок враппер вкладывать.
Web Developer Blog 9 months ago
можно и этак
Ruslan Koshevoy 9 months ago
advantages снутри advantages__container? Это будто этак? Как элемент может быть без блока? Должно быть напротив, или advantages -> advantages__container -> advantage
Ruslan Koshevoy 9 months ago
Если не учесть, что это БЭМ - то естественно верно. Но тут, мне будто, была поползновение его использовать)
Elmir Pires 9 months ago
Ruslan Koshevoy - конечно хорошо, может быть попросту человек использовал такие классы без мыслей о БЭМ. Хотя мне будто, что в плане присвоения классов все правильно. Ну это ведь разумно, что поначалу идёт всеобщий контейнер, потом блок и потом элемент? Ну если без всяких правил, Вам будто будто логичным?
Ruslan Koshevoy 9 months ago
Elmir Pires в видео поползновение сделать по БЭМу. И по БЭМу такое присвоение классов неверное.
Elmir Pires 9 months ago
Ну поначалу идет advantages__container (т.е. горница где хранятся инструменты). Далее идет блок с advantages (т.е. ящик с инструментами) и дальше advantages_item (любой прибор в ящике). Я полусонный, этак что сопоставление не весьма) Если что, то осознать и извинить)
Слава 1992 Илюшин 9 months ago
Лайк бро!Кстати, просматривая комменты канала Трансформатор,нашёл там тебя)
Web Developer Blog 9 months ago
Да, посматриваю трансформатор часто