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

563 ratings | 20593 views


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

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

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

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