Профессиональная верстка сайта - flexbox для каждого
Мы продолжаем курс верстка сайта с нуля для начинающих профессионально. В данном видео мы продолжим и закрепим верстку с использованием концепции flexbox для новичков. Если вы еще не разобрались как верстать на flexbox, то этот урок с простым примером идеально подойдет для вас. Профессиональная верстка сайта требует от вас знания всех новейших концепций верстки и умения быстро их применить.
Хостинг Fornex - li.tl/Fornex1
Зарегистрируйся прямо сейчас и по промокоду Blog10x Вы получите скидку на все услуги кроме заказа доменов
Пікірлер: 157
Подключение FontAwesome иконок для ленивых=)
@vitalysementsov3157
4 жыл бұрын
FontAwesome вроде как погиб смертью храбрых в бою за свободу и независимость отечества...
@vitalysementsov3157
4 жыл бұрын
кстати, 11 видео не в тему в плейлисте
@exdevil3832
4 жыл бұрын
@@vitalysementsov3157 Работает же
@vitalysementsov3157
4 жыл бұрын
@@exdevil3832 уже да, на момент написания дохлый был
не пойму почему ставяд дизлайк, парень старается, еще и отвечает на вапросы в коментах, это же его время, если не нравится просто можно не смотреть. Спасибо большое за уроки Web Developer Blog
@SuprunAlexey
4 жыл бұрын
Спасибо 🙏🏻
@user-rf8cn6ii3q
3 жыл бұрын
@David GDK эт как раз те которые не пытаються разобраться что он пишет , а думают повторят и научатся.
@lavilas.
3 жыл бұрын
@David GDK помоги пожалуйста страница не адаптируеться под копмьютер тоесть как у автора ставлю айфон x но потом когда убераю просмотр кода все пропадает
@user-pt2uz5st7i
2 жыл бұрын
@David GDK спасибо ты мне помог))
А можно как-то без position: absolute делать? При изменении размеров экрана все съезжает и это сложно назвать адаптивной версткой.
Очень круто и понятно объясняешь, слушать интересно.
Хороший канал, полезный контент. Дерзайте ребят в том же духе!
Отличные уроки!жду следующее видео!
Круто, жги! Только не тяни с новыми видосами! Кросавчег
@SuprunAlexey
4 жыл бұрын
Очень постараюсь
Полезно. Спасибо.
@SuprunAlexey
4 жыл бұрын
Все для вас
Ты лучший! Всё по делу!
@SuprunAlexey
3 жыл бұрын
Спс
Пока всё получается ! Спасибо!
Спасибо)
Супер, спасибо за уроки. Только жаль что результат вы не выложили куда-нибудь на гитхаб например.
Больше таких видосов! После них лучше код понимаешь, даже если ты плохо знаешь HTML и CSS, но шаришь в английском.
@SuprunAlexey
4 жыл бұрын
Согласен, сам учился по практике
Это точно будет работать на любых экранах(и я сейчас не про смартфоны) . Мне кажется он делает это только под свой дисплей. У меня картинка room.jpg совсем не достает до низа, а у него почти полностью. И кажется из за этого Контакты и текст сместился вправо, как будто нужно больше отступа указать. А если зумировать норм становится
Уроки супер , вот бы объяснений больше
Господа верстальщики, не ленитесь пожалуйста ставить полный тег , так как неполный при натягивании на некоторые движки типа jsp может всё ронять)
@SuprunAlexey
4 жыл бұрын
И такое бывает
@FREEKIR1
4 жыл бұрын
Все претензии к в3ц, теперь так можно. Остальное личные договоренности на проекте.
Автор, ты прям реально проблемный какой-то, нет макета - нет лайка - я так считаю
@SuprunAlexey
Жыл бұрын
Уйди с канала вообще тогда
Круто
Я, конечно, могу быть не прав, но как по мне, при позиционировании в некоторых моментах relative смотрится лучше, чем absolute -_-.
Подскажите пожалуйста, почему в медиа запросах Ваши значения top для intro-text и intro-contacts для меня не подходят, подобрал свои, получились значительно выше, отобразилось все отлично, но почему так могло произойти?
Привет, подскажи пожалуйста, почему пропадает цвет у иконок телефона и карты?
А не лучше ли использовать vw и vh при верстке?
здравствуйте, спасибо за видео- урок очень классный😊, кажется всё работает, но с экраном что то не то, когда сделаю iPhone X тоже не работает((
У меня каша получилось походу мой редактор не хочет чтобы я изучал верстку , теперь я буду заново делать нече страшного для меня это ещё раз изучение
Неожиданно
@SuprunAlexey
4 жыл бұрын
Под каждым видео?😄
@artemkatr9483
4 жыл бұрын
@@SuprunAlexey 😆
все, на этапе вставки картинки у меня адаптировался сайт и желтая штучка с меню появилась. видимо, надо было подождать.
Большое спасибо за урок, как всегда интересно и познавательно) На третьем уроке заметил, что у меня .intro-contacts смещено влево, если как по уроку делать right:170px; , если подправить на 190px, то все окей. Я код на codepen залил, если будет время и не лень то глянь из-за чего можеn быть) codepen.io/perdachelios/pen/rNagwbj
@yanesbn
2 жыл бұрын
Такая же беда
@user-sr3wl9tf2l
2 жыл бұрын
" у меня .intro-contacts смещено влево, если как по уроку делать right:170px; , если подправить на 190px, то все окей." То есть, я так понимаю у Вас блок смещен влево (right:170px) Вы отодвинули его еще на 20px от правого края и он ушел вправо?
@user-sr3wl9tf2l
2 жыл бұрын
@@yanesbn Я сделал так : .wrapper{ ....... position: relative; } А .intro-contacts{ ...... right: 0px; top: 558px; ....... } И все стало на свои места.
При эмуляции сматфона не работает css св-ва. Css работает только в обычном режиме когда другую половину экрана занимает devtools
@user-kl2xh3cx4m
4 жыл бұрын
В нужно прописать
Подскажите почему в CSS пишем для .intro .intro-text{ ... и потом .intro-contacts{... , а вот в медиа запросе уже по другому .intro .intro-text{ ... и потом .intro .intro-contacts{... т.е. добавили класс .intro к классу .intro-contacts
Почему-то в мобильной версии сайта в контактах не отображается местоположение. Телефон отображается правильно, а местоположения нет. Что с этим можно сделать?
Добрый вечер, не могу понять, у меня неправильно позиционируется блок intro-text, сделано все как на видео.
@vitalysementsov3157
4 жыл бұрын
а код мы сами должны написать с твоей ошибкой, чтобы понять где у тебя косяк?
Лаврик говорил, что в таком выпадающем меню есть минус: жирный сайт каждый раз перерисовывается при нажатии, то вверх то вниз и лучше меню делать прозрачным. А как? )
@SuprunAlexey
4 жыл бұрын
На таком сайте все будет норм
Извиняюсь, а откуда взять бэкграунд ?) Автору отдельное спасибо за труд.
@SuprunAlexey
4 жыл бұрын
Картинку?
@hashira_d
4 жыл бұрын
@@SuprunAlexey да
@koktangri
4 жыл бұрын
надо скачать макет в .psd формате, в самом фш тапнуть на нужную картинку, справа, во вкладке слои эта картинка выделится, нажимаеешь "экспортировать как" и выбираешь директорию.
@marcysphoenix8794
4 жыл бұрын
@@koktangri А где ссылка на макет?
@jastinmakalister637
4 жыл бұрын
@@koktangri а где макет скачать можно?
Как часто будут выходить видосы!?
@SuprunAlexey
4 жыл бұрын
Постараюсь каждый день
Кто подскажет почему из предыдущего урока у меня не получается сделать всплывающее меню? Вроде все правильно а при неводе курсора и клике оно не открывается...
Скажите в чем проблема,код идентичен вашему,но есть проблема с картинкой в intro,она появляется не вся,а лишь ее часть и я не знаю как это исправить (к слову картинка скачана вся и правильно). И еще,почему при открытии данного проекта на большем мониторе (код написан на ноутбуке) идет сдвиг текста из-за чего сообствено оно не соответствует макету. Буду рад,если вы ответите)
@SuprunAlexey
4 жыл бұрын
Загрузите на codepen, давайте гляну. Вы где то допустили ошибку, код не может быть идентичен. Был бы идентичен, проблемы бы не было.
@igorpilyavsky7200
4 жыл бұрын
@@SuprunAlexey codepen.io/igorpilyavsky/pen/vYYqjRJ Пожалуйста,вот код)
@k4in17
4 жыл бұрын
@@SuprunAlexey Имеется в виду что при открытии на весь экран в fullhd, блок контактов уезжает вправо, относительно картнки. Это косается второй части вопроса от Igor.
text-outline - он же не поддерживается?
Туториал супер, одна только загвоздка: background-image не работает, изображение не появляется, не знаю все ли перепробовал, через разные редакторы сохранял(vscode, sublime), менял путь, ставил скобки, проблема не уходит, буду благодарен за советы)
@SuprunAlexey
4 жыл бұрын
ну не может не работать
Где скачать макет? Картинки-то откуда брать для фона?
@SuprunAlexey
4 жыл бұрын
Я сказал в видео, макет вам не нужен - просто повторяйте по шагам, картинки берите любые
@ARLIAMANJHO
Жыл бұрын
@@SuprunAlexey друг, а вот смотри, иконка локации которую ты использовал - не подгружается, сайт с иконками умер. Вот ты сказал, а дальше что делать? Чё в лом было макет скинуть?
@SuprunAlexey
Жыл бұрын
@@ARLIAMANJHO наглости нет предела
Вопрос, может я ещё чего-то не понимаю, но зачем делать всё через px? через % не лучше было бы? я просто случайно нажал контрл и покрутил колёсиком, и всё пошло не очень
@bismarckren
Жыл бұрын
вооооот такая же бяка !
когда меняешь масштаб страницы всё разъезжается в разные стороны! можно вместо пикселов в отступах использовать проценты и как их корректно рассчитать ?
@bismarckren
Жыл бұрын
конечно прошло уже 2 года с момента выхода и думаю что и технологии написания изменились и отвечать и разъяснять уже ни кто не будет
Валидатор ругается на section. Header, main, footer, обязательны?
@SuprunAlexey
4 жыл бұрын
не может такого быть, да обязательны
У кого неполучается background url проверьте intro-img между ними должна стоять терэ-
если задаёте вопрос по коду, будьте любезны скидывать кусок кода, вообще в сообществе, при вопросе у меня не работает бэкграунд, вас пошлют куда подальше и заблочат на ресурсе, ну либо уволят если вы джут(хотя тут я может перегибаю) всегда скидывайте кусок проблемного кода, часто ваши "я всё написал правильно" означает что вы где-то ошиблись, может ; забыли поставить в конце строки, может слово не правильно написали, это не так бросается в глаза, особенно когда код писал ты сам
нормально, что "margin: 0 auto;" , делает совершенно другие сдвиги?
Почему то контакты (в мобильной версии) показывают не снизу, а справа и во всю длину. Скорее всего ошибка в строке intro. intro-contacts в позиции, только вот не знаю где конкретно, списал все в точности как в видео. Может кто подскажет?
@denisweb1983
4 жыл бұрын
У меня такая же проблема.
у меня проблема с .intro-contacts не перемещает и не применяет цвет вообще не реагирует на код , ошибок нет не в консоле ни редакторе , удалил слово интро и надпись упала вниз и цвет появился
Где можно скачать макет?
@SuprunAlexey
4 жыл бұрын
Посмотрите видео, вначале говорю что не надо ничего скачивать, просто повторяйте за мной по видео, пишите так же код у себя и получите результат
@arturbjj2788
4 жыл бұрын
@@SuprunAlexey делаю все как у тебя, но моя страница отображается по другому, текст и картинка съезжают, крч пока не могу понять проблему
@user-gs8ks4zc2c
4 жыл бұрын
@@arturbjj2788 таж фигня)
Подскажите в чём может быть проблема? пишу как в видео, 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
4 жыл бұрын
так нашел ошибку забыл точки поставить :-)
Не открывает каринку через css. Всё правильно указано, просто пишет что произошла ошибка при открытии. Кто-нибудь знает в чём может быть проблема?
Привет, при увеличению масштаба текст съезжает с картинки! Что не так ? Заранее спасибо
@SuprunAlexey
4 жыл бұрын
Именно масштаба?
@user-gt7pv1yc2e
4 жыл бұрын
@@SuprunAlexey да, делаю масштаб больше или меньше. Текст и контакты съезжают с картинки.
+
Hello, попробовал включить в консоле браузера телефон, там сайт как сайт без мобильной версии как у тебя, что не так?? браузер Yandex
@sergeykuksin1133
4 жыл бұрын
в хроме тоже просто сайт(
@Edmond_Dantes28
3 жыл бұрын
@@sergeykuksin1133
@Edmond_Dantes28
3 жыл бұрын
@@sergeykuksin1133 meta тег решает твою проблему
почему у меня вместо одной иконки местоположения появилось 4шт?
А где ссылка на макет?
@SuprunAlexey
4 жыл бұрын
Делайте просто по видео, вам макет не нужен
Почему у моих иконок сбивается кодировка?
уже давно не используется ведь
@SuprunAlexey
4 жыл бұрын
Не запрещено
@fmleglrmglrml
4 жыл бұрын
@@SuprunAlexey br в приницпе не приветсвуется использовать,зачем вводить плохую практику в обучение? Вредные советы практикуете?
@SuprunAlexey
4 жыл бұрын
Так как я показал можно спокойно. Нельзя допустим или с фанатизмом пользоваться данным тегом
@Vladikslavik
4 жыл бұрын
Предлагаете в отдельные теги заворачивать? А смысл?
@FREEKIR1
4 жыл бұрын
Юрий Изотов вы не до конца поняли видимо рассказ про запрет. Бр отличный тег, если он на своём месте. Как вы стих будете верстать к примеру? Каждую строку в пэ?
ставят дизлайк они не автору, а самому себе.
@ARLIAMANJHO
Жыл бұрын
Дизлайк ставят автору. Сам лично поставил. Он проблем на ровном месте наделал. Зажал макет, а теперь у многих картинки не в доступе и с иконками проблемы
При большем экране, чем у автора, текст находится почти в центре страницы, даже с учётом отступа в 750пх...
@deniswork938
4 жыл бұрын
Можно исправить так: .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;
почему у меня контактные данные с верху, а у тебя снизу?
@SuprunAlexey
4 жыл бұрын
Может в структуре html ошибку сделал
Столкнулся с такой проблемой : не отображается картинка в классе .intro-img { background-image: url(); }
@user-xo8pr1hf8p
4 жыл бұрын
Сразу говорю то, что путь к картинке указан верно и она того же размера, что и указанные ширина и высота
@SuprunAlexey
4 жыл бұрын
Ну не может свойство не работать просто так)
@user-xo8pr1hf8p
4 жыл бұрын
@@SuprunAlexey всё, всё, паникую раньше времени, нашёл ошибку)
@SuprunAlexey
4 жыл бұрын
И в чем была проблема?
@user-xo8pr1hf8p
4 жыл бұрын
@@SuprunAlexey картинка была на рабочем столе, а html, css, js документы в папке)
А как одобтацыя под другие девайсы
@SuprunAlexey
4 жыл бұрын
Медиа запросы под другие размеры экрана
@abmai6627
4 жыл бұрын
Как понял макетов нет. спасибо за хорошие уроки.
@SuprunAlexey
4 жыл бұрын
Макет не нужен, повторяйте по видео за мной и все так же получится
Картинка не загружается( .into-img { background-image: url(img/room.jpg); width: 965px; height: 640px; }
@SuprunAlexey
4 жыл бұрын
Intro может?
@cook1eqs
4 жыл бұрын
@@SuprunAlexey Не помогло
@SuprunAlexey
4 жыл бұрын
Блок если не ошибаюсь назывался intro-img. Проверь так же название блока в html. Далее проверь где у тебя лежит css файл, если он рядом в одной папке с index.html то все норм. Проверь расширение изображения вдруг картинка у тебя jpeg или png
@cook1eqs
4 жыл бұрын
@@SuprunAlexey Спасибо, пересмотрел урок и понял)
На одних Html, CSS и JS далеко не уедешь , тем более что для Джуна этого не достаточно
@SuprunAlexey
4 жыл бұрын
В каждом видео это говорю, но надо в любом случае начинать с верстки.
@FREEKIR1
4 жыл бұрын
А какие технологии нужны ну кроме там протоколы знать и сервера хотябы на базовом уровне. По вашему? Для фронтенда разумеется.
За тобой даже на скорости 0.75 тяжело успевать без пауз
@SuprunAlexey
4 жыл бұрын
Паузы ставьте
Не могу поставить картинку размер не тот.
@SuprunAlexey
4 жыл бұрын
обрежте
@Rick-rx6ll
4 жыл бұрын
@@SuprunAlexey Я нашел картинку как у вас, поставил всё правильно width: 965px; height:640px размер не как у вас.
@SuprunAlexey
4 жыл бұрын
Надо не размеры ставить а саму картинку обрезать в фотошопе и тогда будет как у меня
Доброго времени суток всем! Автору ОГРОМНОЕ спасибо за данные ролики, давно подписан, с удовольствием смотрю! Кто может помочь, пишу(вроди)) символ-в-символ с уроком, но на выходе какая то &%#$я получается: drive.google.com/open?id=10hdpgh58Kw5fpdQcIPKYEKZ3p9ZlLW1Q (это вёрстка) drive.google.com/open?id=1hD60_Kt2Ppah6znQL3m36I7N8gUGSM3o (это результат)) При этом меню вчера отображалось как нужно(и на медиа всё работает) когда начал main делать всё поплыло, при этом, повторюсь - не трогал меню совсем, просто посхлопывалось всё фиг пойми как((( PS Спасибо всем кто пишет по делу!
Всё конечно здорово, но мне одному режет глаз этот торчащий оранжевый прямоугольник справа снизу картинки? Ну тот что с контактами. Я всё ждал когда он его поправит, но, видимо, хрен с ним)))
Блин я там наделал сколько глупостей и у меня стоит автосохранение(((( Походу заново буду писать)
@SuprunAlexey
4 жыл бұрын
Просто поставьте на паузу и перерешите все как у меня
@celestial9411
4 жыл бұрын
@@SuprunAlexey я так і сделал и картинка не та, а чтоб била та нужно розмеры менять
@celestial9411
4 жыл бұрын
Или в каждого могут бить разные?
@SuprunAlexey
4 жыл бұрын
Можете сделать по своему. Размеры картинки я называл, обрезать ее дело одной минуты
Не хочу показаться тупым, но флекс бокс это типа конструкторов? Сейчас все на них чтоли верстают?
@SuprunAlexey
4 жыл бұрын
Не
@Vladikslavik
4 жыл бұрын
Это Flexible Box Layout Module. Короче, это CSS-модуль, который уже входит в пакет CSS. Подключать дополнительно ничего не нужно.