Реальная верстка на Flexbox из макета PSD

[@Glo_Academy]

Не бросайте камнями за ошибки. Торопился - дел невпроворот. Завтра свадьба. Многие писали, что я у меня нет реквизитов для доната. Теперь есть. Смотри в описании к видео. Приятного просмотра, парни!

[@sandstorm184]

У вас свадьба?))

[@manvi3889]

Я, конечно, ещё не посмотрел урок, но промотав немного, уже прошлись мурашки по коже. С Празником, джём-с новых видео ;)

[@manvi3889]

кстати, можно писать c#f, а не c#fff - будет быстрее

[@МихаилКолоколуша]

Glo Academy есть еще display inline-flex как строчные елементы получается.. можно было в меню лишкам дать)

[@abaiakpan1306]

Михаил Колоколуша Не елементы, а элементы

[@Wraith2401]

Как хорошо, что есть люди с приятной озвучкой своих уроков. Большинство ораторов рунета вещают с унитаза. Приятно слушать. спасибо за урок

[@ОлегАбрамов-к5д]

Спасибо за урок, Ваши видео очень познавательны! Артем, подскажите, пожалуйста, обязательно ли при верстке меню использовать список? Ведь все прекрасно позиционируется в блоке средствами flexbox и без списка

[@Elator11777]

Вот это подгон, так подгон! Не ожидал! Буду верстать теперь. Спасибо! Поздравляю со свадьбой

[@ДаниилКирик-л8е]

4:56 . Почему у меня не работают BACKGROUND-IMAGE? Написал всё, как на видео, вот только слова "moz", "webkit" и "ms" наклонены в отличие от следующих слов. Помогите разобраться, пожалуйста.

[@vasya8441]

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

[@astronautdaniel3528]

Первый раз в жизни вижу такой красивый и аккуратный код!

[@vadimp4669]

Всё отлично!) Единственное чуть больше бы комментариев, когда меняете row на column

[@alexsoft7073]

Отличное видео, оказывается верстать с помощью flex очень просто. Удачи во всем)

[@arkadych]

Спасибо большое за урок. Всё очень просто легко и понятно. Ничего лишнего. Буду смотреть и другие ваши уроки, спасибо огромное!)

[@ПавелПавлович-г8е]

Я только стартую в верстке, по доброму завидую скорости с которой работаешь)

[@ПавелПавлович-г8е]

Спасибо за видос, много нового узнал.

[@muradsuleymanli1147]

Можете сказать размеры фона с очками просто у меня не все фото выходит на экран

[@LexPustokov]

Ахах, ск, я мудак, спасибо за видео. Нечего не понял, но смотрел до конца. :D

[@anixi85]

хорошие уроки, но хотелось бы комментария на некоторых более сложных местах. такого плана как про after before хотелось бы хоть минуту твоего объяснения, когда писал 100vh (хоть бы пару слов почему ты пишешь именно так, не все специалисты используют это) и тд

[@VolhaCharnyshQuetzal]

@@dim_am менять ли в списках на свое: list-style: outside url

[@arthurcode4225]

А normilize.css нужно скачивать или самому прописывать стили?Что прописывать если так?

[@alexlisouski4069]

самому нужно скачивать. у каждого верстальщика этот файл мастхэв

[@soundsay7763]

Есть проблема, эта стрелочка которая ведет вниз, у меня по ширине на весь документ, то есть кликнуть можно хоть в конце, хоть в начале, как это исправить?

[@abvgd1100]

А можно же также сделать меню , без помощи ul li

[@anonimanonim6552]

Да можно используя тег с каким либо классом

[@maksoleksyuk7712]

Обьясните, зачем box-sizing для before ,after ?

[@eyyubmuradov9308]

ПОЗДРАВЛЯЮ!!!!!!!!!!!! спасибо за уроки .....очень большое спасибо

[@vlaaaaad111]

классные ролики! Побольше флекса! Побольше хитрых штучек на Flex!

[@xtapofficial6732]

Спасибо, очень крутой видос. Пойду смотреть следующую часть с адаптивом)

[@Computa_Hakka]

Подскажите пожалуйста, я один такой недалёкий? Вроде ничего сверхъестественного, но как самостоятельно пытаешься повторить, без видео, не получается нихренашеньки..)

[@Glo_Academy]

Это нормально, друг. Нужно больше практики. Делаешь - гуглишь. Все получится!

[@VolhaCharnyshQuetzal]

так ты все равно в каких-то местах должен под свой шаблон подстраивать.или с ошибками списываешь.

[@mishachubenko3394]

Э така фігня :)!

[@orenbani]

Артём! Что за прога и что за сокращённый набор ты используешь? Очень понравилось!

[@youreawake4613]

Это плагин Emmet, в Visual Studio Code он установлен по умолчанию, в остальные же редакторы кода нужно самостоятельно его устанавливать.

[@BillieBonse]

а почему верстаете в основном проверяя в Safari?

[@alexdzyuba5123]

Офигенно, Исламов, ты лучший)

[@braivs]

Картинка main-bg.jpg у меня позиционируется по другому, обрезана и не вся целиком. И если написать, без префиксов background-image: linear-gradient(-60deg, rgb(136, 211, 206) 0%, rgb(110, 69, 226) 100%) , то opacity будет по другому выглядеть. Делал в Avocode. Он показывает opacity: 0.39, если поставить так, то без префиксов как у автора видно. Но вопрос позиционирования картинки ещё актуален.

[@livingston9750]

Почему не отображается фоновая картинка? Я вырезал фон, сохранил в папку img, путь написал правильный - с точками и всё такое, изменения сохранил, сайт обновил и ... ничего.

[@dede6834]

Зачем делать div.main вместо просто main?

[@乌云-o3e]

Нужно блочный элемент, а не строчный.

[@yuriiyablonskyi6626]

@@乌云-o3e ты не понял, тега "main" нету он наверное имел ввиду что можно писать ".main" вместо "div.main"

[@akairoo]

@@yuriiyablonskyi6626 дело в том что есть тег main, так же как и header, footer, aside, article, теперь используют их вместо дивов лишних

[@kiri7788]

Один вопрос, gap на сафари < 14 чего кого как?!

[@victormog]

Если подключается normalize.css, то _body { margin: 0; }_ - лишнее...

[@youtubeCyborg]

Насколько кросбраузерна верстка flexbox-м на сегодняшний день во всех ли браузерах поддерживается одинаково или где то будет разваливаться ?

[@confymarlow]

Здравствуйте! Скажите - сейчас писать footer, nav , header вместо div?

[@ihatemyfuckinlife]

@@rjuman в любом случае надо делать, как правильно, а не как хочешь

[@КостяТрубин-д5х]

Чувак, ютуб - это не начальник, который требует: Давай ролик, сука! Ютуб и подождать может. Вот, 4 года прошло, а ролл-то тут. Так-то ничего, лайк за труды. Но за тобой будто овчариус сзади гонится. HTML5 теги вместо подобных:

[@_Fantom_.]

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

[@ravabat5841]

Что за тема эффекта листания когда переключаешь окна программ? Можно на Убунту так сделать ну или на Винде?

[@Glo_Academy]

Это Mac OS

[@galchik5870]

а чем отличается ворд-пресс от верстки???

[@zaurbay7127]

кстати четко, мне нравится по флексбоксу работать

[@dmitrii8249]

Можно узнать какие у Вас стоят плагины на Сублайме?

[@OrinokoRiver]

супер! и видео и канал в целом. очень много полезного и слушать и смотреть легко! спасибо

[@ЮрийПлисковский-щ4щ]

Отличные видео делаешь, пожалуйста продолжай! Спасибо!

[@Max-nr1bv]

Кстати, чтобы не париться с z-index, можешь ставить -1, тогда остальные прописывать не надо

[@azatkhabirov9639]

Попробовал, что-то пошло не так

[@TIEST0s]

подскажите пожалуйста как сделать несколько фонов для 1 блока?

[@alexr5664]

Большое спасибо за адекватные уроки!

[@d1mausxx264]

Проста супер 👍👍👍

[@АндрейМаркин-н5р]

Классное видео. А главное все понятно. Спасибо Артём.

[@brainslug3580]

а почему не применяешь бэм, раз это все равно не бутстрап?

[@alexeydanilov1557]

Отличный урок! Ставлю лайк.

[@kartopla123]

Артем, спасибо за видео! скажи, пожалуйста, что ты используешь для смены заглавочных букв на строчные? (14:35 минута)

[@Glo_Academy]

ctrl (cmd) + K и после нажимаешь L

[@kartopla123]

спасибо!

[@РоманБосс-н9у]

Здравствуйте, отличный канал! Но хотелось бы, чтобы вы выкладывали все материалы для вёрстки, чтобы смотреть и одновременно самому верстать.

[@buklogs]

Мне понравилось. Спасибо Артём !

[@chernkut]

Вопрос, сейчас верстать на div или уже header, footer itd?

[@Glo_Academy]

На header footer И так далее

[@chernkut]

@@Glo_Academy спасибо за ответ

[@Hovik46]

Твой уроки всегда полезные спасибо тебе.

[@lew_milow]

скачал я psd , а там в фотошопе шрифты "maven pro" не грузятся, хотя на компьютере он установлен

[@anandinidorogomilovamusic2873]

Стоит ли знать верстку на флоатах, если уже есть флексы?

[@youreawake4613]

Сейчас на флоатах никто не верстает, но в общих чертах знать всё-таки стоит.

[@almatkabul9165]

а как ты в редакторе уменьшил текст при выделении?

[@Lev_LK]

Объясните пожалуйста! В чем смысл этих извращений, с фоном main-overlay? Не проще ли - объединить все слои в фотошопе, нежели накладывать градиент и прочее?

[@ok_kov]

а если потом клиент попросит поменять картинку или фон отдельно? Опять идти в ФШ?

[@VolhaCharnyshQuetzal]

я тоже склоняюсь к раздельности. картинка сама собой, а эффекты поверху.потом и снять их удобно, и изменить. и, что самое важное, на мой взгляд, слой резинится поверх картинки. допустим. если я сделала сверху градиент полупрозрачный. не надо заморачиваться, как это се будет выглядеть, если растянется блок или перестроится. градиент подстроится. если не понравилось, поменял цифры, проще, чем рисунок.

[@konstantindude9430]

круть! но почему бы не использовать flexbox grid? опять таки, дело каждого

[@alcocc]

А зачем прописывать z-index, разве не проще задать два фона?

[@MrRonnieJamesDio]

После обновления страницы слайдер перестаёт работать. Начинает работать только если в style.less сменить значение &:hover{ flex-basis:100%; } ,но после обновления страницы он опять не работает. В чём может быть проблема?

[@exzo1068]

20k будет раньше сентября ;) спасибо за отличный материал, ждём новый видос

[@antilebron2k238]

Как всегда годно!

[@ЕленаРыжкова-ы5я]

Что в файле normalize.css?

[@ВикторШарко-ж3в]

Спаассибооо, добрый человек ❤️

[@webhero42]

В принципе, нормально, сам юзаю только флексбоксы, хочу еще css grid layout изучить. Только не совсем понимаю, ты бросил bootstrap что ли? Сейчас вышла бета 4, полностью на флексбоксах; или это потеряло актуальность?

[@BillieBonse]

всегда полезно знать как класть кирпич при постройке здания

[@ТарасЧибіс]

Дякую! Дуже допомагає!

[@ЧеченДжентльмен]

Сначала начал разбираться, потом узнал что ты ни про какие теги не рассказываешь, просто посмотрел видео и все )

[@elmaga4486]

братан хо худяш ву кхузахь))

[@Nazar0005]

спасибо ждем завтра продолжение! 😃

[@НураддинБунятов]

Насыщенное видео. Правда будучи человеком, который только вникает в весь этот фронт-энд, хотелось бы просто понять, почему так, а не иначе. А так очень понравилось, удачи.

[@orbita_studios3835]

Кстати как ты скопировал css в фотошопе с помощью css hat?

[@ostinfree5399]

Жаль нет ссылки открыть посмотреть результат урока.

[@MrSvitS1337]

2 года прошло, что как? жив ёще?))

[@mishapliskunov9639]

спасибо за уроки - очень познавательно! ребята, можете рабочий psd перезалить куда-нить пожалуйста - мой cc2017 отказывается его открывать (пишет Could not complete your request because an unexpected end-of-file was encountered.)

[@4666flex]

А что это за плагин для Sublime text позволяющий дописывать пользовательские классы в CSS ?

[@csgofairplay5514]

+1 к вопросу

[@csgofairplay5514]

@Усси прод. Emmet стоит, только он дописывает теги, но не классы в css, какие то доп настройки надо ставить?

[@csgofairplay5514]

@@pUjVhBF5sXc ты не понял вопроса

[@csgofairplay5514]

@@pUjVhBF5sXc я начал писать бэм через sass, установил плагин для sass, там все классы уже отображаются, когда пишешь

[@Max-nr1bv]

Ребят, объясните. normalize.css нужен, чтобы не нужно было прописывать вендорные префиксы?

[@СергейШаповалов-п9в]

чтоб "сбросить" стили

[@Max-nr1bv]

В смысле?

[@para6epc]

чтобы привести слитислитку во всех браузерах к 1 виду.

[@span4ev]

Спасибо за урок. Хотелось бы видеть исходники, или я кривожопый. Не нашёл в макете изображения из хэдера. ПРи открытии есть вариант "сведение" - там есть фото, но оно под текстом, и второй вариант "сохранить слои", и там картинки нет.

[@princerockstar1775]

обнови Photoshop

[@olexandrivkainfo]

Привет! Как ты из фотошопа копируешь стили?

[@alexandrs7563]

Антон Андреич, плагин для фш есть - css hat

[@HlibShmatkov]

Привет! Подскажи, что за плагин в subline, названия картинок подсказывает?

[@Glo_Academy]

AutoFileName

[@HlibShmatkov]

Спасибо большое :)

[@s1khar]

Спасибо. Быстро но с паузой все понятно.

[@gulnarasmadiyarova9631]

Спасибо! Артем супер просто!!!

[@BAS-64]

А где вторая часть ?

[@dinarakabzhanova141]

Очень полезный видеоролик! 👍🏻

[@nikolayg.5319]

Обновите ссылку на макет пожалуйста.

[@xglot]

отличный видео урок. Спасибо большое.

[@bogdan-e6w]

Может неразумный вопрос, но все же, зачем header-у присваивать position:relative ?

[@OptimisticTechHub]

Чтобы z-index работал

[@yuriiyablonskyi6626]

спасибо огромное делал все за тобой и все получилось

[@senianga1]

Много полезного!

[@АлександрГончаренко-к7ж]

Отличное видео ! Спасибо !

[@ЕвгенияЛукушина]

все получилось , все круто))

[@jaerb1]

Все очень круто))

[@Сергей-л8х5з]

у меня возникла проблема с psd макетом когда загружаю его в фотошоп cs6 то он выбивает что не поддерживаются некоторые данные в макете и они буду удалены для обеспечения возможности редактирования слоев (возможно фотошоп старый и не поддерживает макет из нового фотошопа ? )

[@Glo_Academy]

Да, обновитесь до последней версии photoshop

[@Сергей-л8х5з]

спасибо большое

[@ДмитрийБ-е6и]

описывайте почему тот или иной тег/свойство, id/class применяете, чтоб формировать понимание как писать правильно и почему именно так

[@VolhaCharnyshQuetzal]

ну это для тех. кто в курсе, что это за слова. Мне понятно. Я бы это базовым уровнем не стала называть. Я сама делаю. мне интересно глянуть, как другие. Узнаю что-то новое.

[@gamebang1956]

Спасибо,было очень полезно!)

[@МаксимАлексеев-з9р]

Круто!Молодец.Спасибо! Ты крутой!

[@ВладимирвладимиР-ь8ш]

как или чем открывать макет???хоть бы кто сказал,неужели у всех всё открывается?

[@ЮлияКовалева-щ9ф]

ну так фотошопом. Да, все открывается. Можно через авокод открыть.

[@JuLin39]

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

[@khomchenko]

Если не трудно объясняй, что значат в CSS. Justify и др. Что будет если не будет и для чего они нужны.

[@triada777]

забиваешь в гугл и узнаешь.

[@Glo_Academy]

+iamkhoma смотри предыдущие видео из этого плейлиста

[@oleksandrmyshchyshyn1093]

А загуглить или посмотреть видосы слабо? Кучу уже инфы по флексам есть, а люди и дальше хотят что-бы им разжевали по деталям при вёрстке. Учитесь находить инфу сами.

[@n0ra754]

Почему align-items: center; не центрирует ? Вроде все так же прописал.

[@Glo_Academy]

Если не работает, значит где-то опечатка.

[@Алексей644]

У меня тоже не центрирует - 10 раз уже проверил

[@itsbadnews]

@@Алексей644 нашел в чем дело?

[@sokal2001]

@@itsbadnews, разобрался?

[@gavlodermo4010]

Как называется это программирование?

[@unknownhero6187]

Html, css

[@unknownhero6187]

SMUT, а вообще - веб разработка

[@Vadymaus]

Тут нет программирования, это просто языки разметки и стилей

[@terminvox251]

Требуем также Polymer

[@BillieBonse]

Здорово!

[@span4ev]

background-image: -moz-linear-gradient(150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%); background-image: -webkit-linear-gradient(150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%); background-image: -ms-linear-gradient(150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);

[@ДаниилКирик-л8е]

а почему не работает? Объясни, пожалуйста.

[@ВячеславКотэ]

@@ДаниилКирик-л8е Разобрался почему не работает? Если да, то расскажи пожалуйста

[@ДаниилКирик-л8е]

@@ВячеславКотэ нет

[@АлександрИльин-п2с]

Спасибо, поучительно)