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

109 ratings | 1482 views


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

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

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

Андрей Михеенко 19 days ago
можно ли в слайдере использовать инлайновые рисунки?
Vitalii Taranik 19 days ago
Есть проблема,может всё таки необходимо img web.jpg оборачивать в div? Потому будто у меня при разрешении 2560 не центрируется,этак будто не задано характеристики margin 0 auto,а чему задавать то когда обёртки дудки? Просто если поставить text align: center; на main будут центрироваться всё,что быть в main,а внезапно это нам не необходимо?
Vitalii Taranik 19 days ago
Чувак у тебя непозволительная промах в вёрстке.Ты в titlte написал заглавие веб-сайта MiRRilis заместо MiriLLis,а этак красавец всё супер))))
Anton Nikolaevich 20 days ago
с какой частотой будут сходить выпуски? а то уже заждался?)
aNfain 20 days ago
img растягивается на 1400+ (свою ширину), а далее пустое пункт!
Виталий Слободянюк 20 days ago
Доброго времени суток! Можно задание на тему: Какие шрифты для веб-сайта использовать, а конкретно для логотипов для контента и остальные =)
Вячеслав Журавский 20 days ago
Главное чтоб у шрифтов не было засечек. Хорошие шрифты для интернета: Open Sans, PT Sans, Roboto, Ubuntu. Ещё больше можешь отыскать здесь fonts.google.com
Виталий Слободянюк 20 days ago
А если строчить веб-сайт одному с нуля к примеру?) Вот я сам столкнулся с таковой неувязкой
Web Developer Blog 20 days ago
+Виталий Слободянюк этак какие дизайнер даёт такие и использовать)
Yevgeniy Babanin 20 days ago
Просто благодарю! Доступно, аккуратненько, понятно и ничего излишнего.
Web Developer Blog 20 days ago
+Yevgeniy Babanin и вам благодарю что смотрите
Dimaster 20 days ago
Жду твоих видео посильнее чем телесериалов. А отчего основная картина не по центру? нужно добавить к.mw-100 display:block; margin: 0 auto;
Dima S 20 days ago
либо flex, и лучше картину по обширнее сделать, что бы на всю ширину была(1920)
Web Developer Blog 20 days ago
Ахах благодарю!
Orbita_Studios 20 days ago
Слайдер сделай в последующем уроке весьма здорово будет
Orbita_Studios 20 days ago
Как ты высчитываешь в процентах ширину контейнер а позже ширину блоков?
Web Developer Blog 20 days ago
блоки высчитываются уже снутри родительского контейнера по его ширине
aNfain 21 days ago
желаю ещё!=) неплохой формат!
Web Developer Blog 20 days ago
Будет еще немало
SHADERSHOW 21 days ago
Пожалуйста, оставляй материал (рисунки, и т.д.) не лишь в вк, а еще к примеру в google диске, либо еще где-то, этак будто на Украине ВК заблокирован.
FlasHD 19 days ago
Оо брат
Виталий Слободянюк 20 days ago
Я из Гниваня)
SHADERSHOW 20 days ago
Виталий Слободянюк Я из Каменец-Подольска)
Виталий Слободянюк 20 days ago
ахахах, я тоже из Украины) А Вы из которого городка?
SHADERSHOW 20 days ago
Web Developer Blog понятно
Владислав Дидковский 21 days ago
Жаль, что без слайдера, :[
Web Developer Blog 20 days ago
вы параллельно не пишете код?
Владислав Дидковский 20 days ago
Смотреть, не мастерить :)
Web Developer Blog 20 days ago
этак сами доделайте
Pirate Stories 21 days 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 21 days ago
Видео по верстке на гридах для меня идеал на вашем канале. Сам умею верстать, однако 54минутное видео смотрел с упоением. Вот там все прямиком будто нужно. А здесь вы пытаетесь все испытать и выходит не то. Ничего сложного для новичков там небыло, а здесь самого в ступор вводит. Почему дудки враппера? отчего меню не в перечне ul? отчего иконки полностью с круглым блоком? Меню нереально санимировать с display.
Web Developer Blog 20 days ago
54 минутное видео это не у меня. Я делал очень попросту
Ascold Channe 21 days ago
Присоедиеяясь к коментатором ниже, еще замечание - где wrapper? квждому блоку строчить max-width:700px - дурной подход. Давайте уж по нормальному - в блок враппер вкладывать.
Web Developer Blog 20 days ago
можно и этак
Ruslan Koshevoy 21 days ago
advantages снутри advantages__container? Это будто этак? Как элемент может быть без блока? Должно быть напротив, или advantages -> advantages__container -> advantage
Nikolai Titov 18 days ago
Мда, абсурд целый. А еще столько лайков. А еще уместно там не нужно было flex-direction поменять, попросту задаешь ширину, а когда блоки не влезают, они сами прыгают книзу, что может быть проще?
Слава 1992 Илюшин 21 days ago
Лайк бро!Кстати, просматривая комменты канала Трансформатор,нашёл там тебя)
Web Developer Blog 20 days ago
Да, посматриваю трансформатор часто