Профессиональная верстка сайта - flexbox для каждого

Мы продолжаем курс верстка сайта с нуля для начинающих профессионально. В данном видео мы продолжим и закрепим верстку с использованием концепции flexbox для новичков. Если вы еще не разобрались как верстать на flexbox, то этот урок с простым примером идеально подойдет для вас. Профессиональная верстка сайта требует от вас знания всех новейших концепций верстки и умения быстро их применить.
Хостинг Fornex - li.tl/Fornex1
Зарегистрируйся прямо сейчас и по промокоду Blog10x Вы получите скидку на все услуги кроме заказа доменов

[@SuprunAlexey]

Подключение FontAwesome иконок для ленивых=)

[@vitalysementsov3157]

FontAwesome вроде как погиб смертью храбрых в бою за свободу и независимость отечества...

[@vitalysementsov3157]

кстати, 11 видео не в тему в плейлисте

[@exdevil3832]

@@vitalysementsov3157 Работает же

[@vitalysementsov3157]

@@exdevil3832 уже да, на момент написания дохлый был

[@anonuser1366]

не пойму почему ставяд дизлайк, парень старается, еще и отвечает на вапросы в коментах, это же его время, если не нравится просто можно не смотреть. Спасибо большое за уроки Web Developer Blog

[@SuprunAlexey]

Спасибо 🙏🏻

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

@David GDK эт как раз те которые не пытаються разобраться что он пишет , а думают повторят и научатся.

[@lavilas.]

@David GDK помоги пожалуйста страница не адаптируеться под копмьютер тоесть как у автора ставлю айфон x но потом когда убераю просмотр кода все пропадает

[@user-pt2uz5st7i]

@David GDK спасибо ты мне помог))

[@ViP-fs8dl]

А можно как-то без position: absolute делать? При изменении размеров экрана все съезжает и это сложно назвать адаптивной версткой.

[@kehhill63]

Очень круто и понятно объясняешь, слушать интересно.

[@alexburov4435]

Хороший канал, полезный контент. Дерзайте ребят в том же духе!

[@anton28348]

Супер, спасибо за уроки. Только жаль что результат вы не выложили куда-нибудь на гитхаб например.

[@exdevil3832]

Это точно будет работать на любых экранах(и я сейчас не про смартфоны) . Мне кажется он делает это только под свой дисплей. У меня картинка room.jpg совсем не достает до низа, а у него почти полностью. И кажется из за этого Контакты и текст сместился вправо, как будто нужно больше отступа указать. А если зумировать норм становится

[@g3fe5t]

Больше таких видосов! После них лучше код понимаешь, даже если ты плохо знаешь HTML и CSS, но шаришь в английском.

[@SuprunAlexey]

Согласен, сам учился по практике

[@alekseysverbeev2934]

Господа верстальщики, не ленитесь пожалуйста ставить полный тег , так как неполный при натягивании на некоторые движки типа jsp может всё ронять)

[@SuprunAlexey]

И такое бывает

[@FREEKIR1]

Все претензии к в3ц, теперь так можно. Остальное личные договоренности на проекте.

[@Alexmiroha]

Я, конечно, могу быть не прав, но как по мне, при позиционировании в некоторых моментах relative смотрится лучше, чем absolute -_-.

[@rickgrimes7734]

Отличные уроки!жду следующее видео!

[@ARLIAMANJHO]

Автор, ты прям реально проблемный какой-то, нет макета - нет лайка - я так считаю

[@SuprunAlexey]

Уйди с канала вообще тогда

[@MrAznaurov]

Круто, жги! Только не тяни с новыми видосами! Кросавчег

[@SuprunAlexey]

Очень постараюсь

[@igor.shatrov]

А не лучше ли использовать vw и vh при верстке?

[@Сергей-о1п3р]

Ты лучший! Всё по делу!

[@SuprunAlexey]

Спс

[@petrovasyka8]

При эмуляции сматфона не работает css св-ва. Css работает только в обычном режиме когда другую половину экрана занимает devtools

[@ИгорьРадимов-ц7ф]

В нужно прописать

[@КириллАлексеевич-т1ц]

Подскажите пожалуйста, почему в медиа запросах Ваши значения top для intro-text и intro-contacts для меня не подходят, подобрал свои, получились значительно выше, отобразилось все отлично, но почему так могло произойти?

[@Орбуз-ъ5ц]

Привет, подскажи пожалуйста, почему пропадает цвет у иконок телефона и карты?

[@ted3309]

Уроки супер , вот бы объяснений больше

[@МихаилЖук-ы4т]

Пока всё получается ! Спасибо!

[@hollow_n5116]

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

[@ВячеславГоряинов-х3ц]

Добрый вечер, не могу понять, у меня неправильно позиционируется блок intro-text, сделано все как на видео.

[@vitalysementsov3157]

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

[@rolandsto]

Полезно. Спасибо.

[@SuprunAlexey]

Все для вас

[@yanesbn]

у меня проблема с .intro-contacts не перемещает и не применяет цвет вообще не реагирует на код , ошибок нет не в консоле ни редакторе , удалил слово интро и надпись упала вниз и цвет появился

[@vitaliidrapaliuk5652]

Спасибо)

[@ramal1407]

Извиняюсь, а откуда взять бэкграунд ?) Автору отдельное спасибо за труд.

[@SuprunAlexey]

Картинку?

[@hashira_d]

@@SuprunAlexey да

[@koktangri]

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

[@marcysphoenix8794]

@@koktangri А где ссылка на макет?

[@jastinmakalister637]

@@koktangri а где макет скачать можно?

[@bismarckren]

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

[@bismarckren]

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

[@vitalysementsov3157]

Вопрос, может я ещё чего-то не понимаю, но зачем делать всё через px? через % не лучше было бы? я просто случайно нажал контрл и покрутил колёсиком, и всё пошло не очень

[@bismarckren]

вооооот такая же бяка !

[@badmad8234]

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

[@SuprunAlexey]

На таком сайте все будет норм

[@АнтонЛучин-ы9ъ]

почему у меня вместо одной иконки местоположения появилось 4шт?

[@alexvav2161]

Подскажите почему в CSS пишем для .intro .intro-text{ ... и потом .intro-contacts{... , а вот в медиа запросе уже по другому .intro .intro-text{ ... и потом .intro .intro-contacts{... т.е. добавили класс .intro к классу .intro-contacts

[@viktoriacherepennikova5416]

Где скачать макет? Картинки-то откуда брать для фона?

[@SuprunAlexey]

Я сказал в видео, макет вам не нужен - просто повторяйте по шагам, картинки берите любые

[@ARLIAMANJHO]

@@SuprunAlexey друг, а вот смотри, иконка локации которую ты использовал - не подгружается, сайт с иконками умер. Вот ты сказал, а дальше что делать? Чё в лом было макет скинуть?

[@SuprunAlexey]

@@ARLIAMANJHO наглости нет предела

[@yanesbn]

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

[@igorpilyavsky7200]

Скажите в чем проблема,код идентичен вашему,но есть проблема с картинкой в intro,она появляется не вся,а лишь ее часть и я не знаю как это исправить (к слову картинка скачана вся и правильно). И еще,почему при открытии данного проекта на большем мониторе (код написан на ноутбуке) идет сдвиг текста из-за чего сообствено оно не соответствует макету. Буду рад,если вы ответите)

[@SuprunAlexey]

Загрузите на codepen, давайте гляну. Вы где то допустили ошибку, код не может быть идентичен. Был бы идентичен, проблемы бы не было.

[@igorpilyavsky7200]

@@SuprunAlexey codepen.io/igorpilyavsky/pen/vYYqjRJ Пожалуйста,вот код)

[@k4in17]

@@SuprunAlexey Имеется в виду что при открытии на весь экран в fullhd, блок контактов уезжает вправо, относительно картнки. Это косается второй части вопроса от Igor.

[@kimmery5241]

здравствуйте, спасибо за видео- урок очень классный😊, кажется всё работает, но с экраном что то не то, когда сделаю iPhone X тоже не работает((

[@mishazharkov6113]

Почему-то в мобильной версии сайта в контактах не отображается местоположение. Телефон отображается правильно, а местоположения нет. Что с этим можно сделать?

[@ЮрийПанков-ы8у]

Кто подскажет почему из предыдущего урока у меня не получается сделать всплывающее меню? Вроде все правильно а при неводе курсора и клике оно не открывается...

[@brotherszorin3635]

Подскажите в чём может быть проблема? пишу как в видео, intro-contact i{ color: white; margin right: 30px; } intro-contact p{ font-size: 18px; color: #000; margin-right: 60px; } итог ничего не работает((( Написал так, p{ color: #000; font-size: 18px; margin-right: 30px; } i{ color: white; margin right: 30px; } вуаля ))) всё заработало в html название класса проверил. Всё один в один

[@brotherszorin3635]

так нашел ошибку забыл точки поставить :-)

[@Сергей-о1п3р]

text-outline - он же не поддерживается?

[@РоманРоман-г6о]

Большое спасибо за урок, как всегда интересно и познавательно) На третьем уроке заметил, что у меня .intro-contacts смещено влево, если как по уроку делать right:170px; , если подправить на 190px, то все окей. Я код на codepen залил, если будет время и не лень то глянь из-за чего можеn быть) codepen.io/perdachelios/pen/rNagwbj

[@yanesbn]

Такая же беда

[@ВикторСмоляк-д2в]

" у меня .intro-contacts смещено влево, если как по уроку делать right:170px; , если подправить на 190px, то все окей." То есть, я так понимаю у Вас блок смещен влево (right:170px) Вы отодвинули его еще на 20px от правого края и он ушел вправо?

[@ВикторСмоляк-д2в]

@@yanesbn Я сделал так : .wrapper{ ....... position: relative; } А .intro-contacts{ ...... right: 0px; top: 558px; ....... } И все стало на свои места.

[@ДмитрийЛембер]

Туториал супер, одна только загвоздка: background-image не работает, изображение не появляется, не знаю все ли перепробовал, через разные редакторы сохранял(vscode, sublime), менял путь, ставил скобки, проблема не уходит, буду благодарен за советы)

[@SuprunAlexey]

ну не может не работать

[@ilya1639]

Не открывает каринку через css. Всё правильно указано, просто пишет что произошла ошибка при открытии. Кто-нибудь знает в чём может быть проблема?

[@maynor1337]

нормально, что "margin: 0 auto;" , делает совершенно другие сдвиги?

[@igormuryy5722]

Как часто будут выходить видосы!?

[@SuprunAlexey]

Постараюсь каждый день

[@ВячеславВоронов-н2ю]

Круто

[@Олексійграбовець-г7э]

Привет, при увеличению масштаба текст съезжает с картинки! Что не так ? Заранее спасибо

[@SuprunAlexey]

Именно масштаба?

[@Олексійграбовець-г7э]

@@SuprunAlexey да, делаю масштаб больше или меньше. Текст и контакты съезжают с картинки.

[@erbolaktlesov5068]

У кого неполучается background url проверьте intro-img между ними должна стоять терэ-

[@vitalysementsov3157]

если задаёте вопрос по коду, будьте любезны скидывать кусок кода, вообще в сообществе, при вопросе у меня не работает бэкграунд, вас пошлют куда подальше и заблочат на ресурсе, ну либо уволят если вы джут(хотя тут я может перегибаю) всегда скидывайте кусок проблемного кода, часто ваши "я всё написал правильно" означает что вы где-то ошиблись, может ; забыли поставить в конце строки, может слово не правильно написали, это не так бросается в глаза, особенно когда код писал ты сам

[@vovakotov8345]

Где можно скачать макет?

[@SuprunAlexey]

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

[@arturbjj2788]

@@SuprunAlexey делаю все как у тебя, но моя страница отображается по другому, текст и картинка съезжают, крч пока не могу понять проблему

[@ЮраТерлецький-щ6щ]

@@arturbjj2788 таж фигня)

[@1Mc1Koval]

Валидатор ругается на section. Header, main, footer, обязательны?

[@SuprunAlexey]

не может такого быть, да обязательны

[@Krytou007]

Почему то контакты (в мобильной версии) показывают не снизу, а справа и во всю длину. Скорее всего ошибка в строке intro. intro-contacts в позиции, только вот не знаю где конкретно, списал все в точности как в видео. Может кто подскажет?

[@denisweb1983]

У меня такая же проблема.

[@artemkatr9483]

Неожиданно

[@SuprunAlexey]

Под каждым видео?😄

[@artemkatr9483]

@@SuprunAlexey 😆

[@user-xo8pr1hf8p]

Столкнулся с такой проблемой : не отображается картинка в классе .intro-img { background-image: url(); }

[@user-xo8pr1hf8p]

Сразу говорю то, что путь к картинке указан верно и она того же размера, что и указанные ширина и высота

[@SuprunAlexey]

Ну не может свойство не работать просто так)

[@user-xo8pr1hf8p]

@@SuprunAlexey всё, всё, паникую раньше времени, нашёл ошибку)

[@SuprunAlexey]

И в чем была проблема?

[@user-xo8pr1hf8p]

@@SuprunAlexey картинка была на рабочем столе, а html, css, js документы в папке)

[@ermak50]

уже давно не используется ведь

[@SuprunAlexey]

Не запрещено

[@fmleglrmglrml]

@@SuprunAlexey br в приницпе не приветсвуется использовать,зачем вводить плохую практику в обучение? Вредные советы практикуете?

[@SuprunAlexey]

Так как я показал можно спокойно. Нельзя допустим или с фанатизмом пользоваться данным тегом

[@Vladikslavik]

Предлагаете в отдельные теги заворачивать? А смысл?

[@FREEKIR1]

Юрий Изотов вы не до конца поняли видимо рассказ про запрет. Бр отличный тег, если он на своём месте. Как вы стих будете верстать к примеру? Каждую строку в пэ?

[@петргусак-з9и]

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

[@sergeykuksin1133]

Hello, попробовал включить в консоле браузера телефон, там сайт как сайт без мобильной версии как у тебя, что не так?? браузер Yandex

[@sergeykuksin1133]

в хроме тоже просто сайт(

[@Edmond_Dantes28]

@@sergeykuksin1133

[@Edmond_Dantes28]

@@sergeykuksin1133 meta тег решает твою проблему

[@chekalinanina9642]

ставят дизлайк они не автору, а самому себе.

[@ARLIAMANJHO]

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

[@deniswork938]

При большем экране, чем у автора, текст находится почти в центре страницы, даже с учётом отступа в 750пх...

[@deniswork938]

Можно исправить так: .intro__img { background-image: url(../images/introbg.jpg); width: 960px; height: 640px; position: relative; } .intro__text { max-width: 520px; position: absolute; font-size: 62px; top: 150px; left: -120px;

[@cook1eqs]

Картинка не загружается( .into-img { background-image: url(img/room.jpg); width: 965px; height: 640px; }

[@SuprunAlexey]

Intro может?

[@cook1eqs]

@@SuprunAlexey Не помогло

[@SuprunAlexey]

Блок если не ошибаюсь назывался intro-img. Проверь так же название блока в html. Далее проверь где у тебя лежит css файл, если он рядом в одной папке с index.html то все норм. Проверь расширение изображения вдруг картинка у тебя jpeg или png

[@cook1eqs]

@@SuprunAlexey Спасибо, пересмотрел урок и понял)

[@celestial9411]

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

[@SuprunAlexey]

Может в структуре html ошибку сделал

[@payravabduraimov3746]

А где ссылка на макет?

[@SuprunAlexey]

Делайте просто по видео, вам макет не нужен

[@Rick-rx6ll]

Не могу поставить картинку размер не тот.

[@SuprunAlexey]

обрежте

[@Rick-rx6ll]

@@SuprunAlexey Я нашел картинку как у вас, поставил всё правильно width: 965px; height:640px размер не как у вас.

[@SuprunAlexey]

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

[@НикитаМещеряков-и6э]

Всё конечно здорово, но мне одному режет глаз этот торчащий оранжевый прямоугольник справа снизу картинки? Ну тот что с контактами. Я всё ждал когда он его поправит, но, видимо, хрен с ним)))

[@abmai6627]

А как одобтацыя под другие девайсы

[@SuprunAlexey]

Медиа запросы под другие размеры экрана

[@abmai6627]

Как понял макетов нет. спасибо за хорошие уроки.

[@SuprunAlexey]

Макет не нужен, повторяйте по видео за мной и все так же получится

[@fmleglrmglrml]

На одних Html, CSS и JS далеко не уедешь , тем более что для Джуна этого не достаточно

[@SuprunAlexey]

В каждом видео это говорю, но надо в любом случае начинать с верстки.

[@FREEKIR1]

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

[@viktoriacherepennikova5416]

За тобой даже на скорости 0.75 тяжело успевать без пауз

[@SuprunAlexey]

Паузы ставьте

[@Xarakternuk13]

+

[@user-arbuzer1133]

Доброго времени суток всем! Автору ОГРОМНОЕ спасибо за данные ролики, давно подписан, с удовольствием смотрю! Кто может помочь, пишу(вроди)) символ-в-символ с уроком, но на выходе какая то &%#$я получается: drive.google.com/open?id=10hdpgh58Kw5fpdQcIPKYEKZ3p9ZlLW1Q (это вёрстка) drive.google.com/open?id=1hD60_Kt2Ppah6znQL3m36I7N8gUGSM3o (это результат)) При этом меню вчера отображалось как нужно(и на медиа всё работает) когда начал main делать всё поплыло, при этом, повторюсь - не трогал меню совсем, просто посхлопывалось всё фиг пойми как((( PS Спасибо всем кто пишет по делу!

[@wolum7]

Не хочу показаться тупым, но флекс бокс это типа конструкторов? Сейчас все на них чтоли верстают?

[@SuprunAlexey]

Не

[@Vladikslavik]

Это Flexible Box Layout Module. Короче, это CSS-модуль, который уже входит в пакет CSS. Подключать дополнительно ничего не нужно.

[@celestial9411]

Блин я там наделал сколько глупостей и у меня стоит автосохранение(((( Походу заново буду писать)

[@SuprunAlexey]

Просто поставьте на паузу и перерешите все как у меня

[@celestial9411]

@@SuprunAlexey я так і сделал и картинка не та, а чтоб била та нужно розмеры менять

[@celestial9411]

Или в каждого могут бить разные?

[@SuprunAlexey]

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