Тёмный

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

Glo Academy
Подписаться 147 тыс.
Просмотров 165 тыс.
50% 1

Качай макет сайта PSD тут yadi.sk/d/1Ux7XIXG3Kukut
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork

Опубликовано:

 

9 июл 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 310   
@Glo_Academy
@Glo_Academy 6 лет назад
Не бросайте камнями за ошибки. Торопился - дел невпроворот. Завтра свадьба. Многие писали, что я у меня нет реквизитов для доната. Теперь есть. Смотри в описании к видео. Приятного просмотра, парни!
@sandstorm184
@sandstorm184 6 лет назад
У вас свадьба?))
@manvi3889
@manvi3889 6 лет назад
Я, конечно, ещё не посмотрел урок, но промотав немного, уже прошлись мурашки по коже. С Празником, джём-с новых видео ;)
@manvi3889
@manvi3889 6 лет назад
кстати, можно писать c#f, а не c#fff - будет быстрее
@user-nf6xv1dk5t
@user-nf6xv1dk5t 6 лет назад
Glo Academy есть еще display inline-flex как строчные елементы получается.. можно было в меню лишкам дать)
@abaiakpan1306
@abaiakpan1306 6 лет назад
Михаил Колоколуша Не елементы, а элементы
@Wraith2401
@Wraith2401 6 лет назад
Как хорошо, что есть люди с приятной озвучкой своих уроков. Большинство ораторов рунета вещают с унитаза. Приятно слушать. спасибо за урок
@arkadych
@arkadych 5 лет назад
Спасибо большое за урок. Всё очень просто легко и понятно. Ничего лишнего. Буду смотреть и другие ваши уроки, спасибо огромное!)
@alexr5664
@alexr5664 5 лет назад
Большое спасибо за адекватные уроки!
@Hovik46
@Hovik46 5 лет назад
Твой уроки всегда полезные спасибо тебе.
@user-ek7oh2og2t
@user-ek7oh2og2t 6 лет назад
Отличные видео делаешь, пожалуйста продолжай! Спасибо!
@user-ep2xl3rl3m
@user-ep2xl3rl3m 3 года назад
Спасибо за урок, Ваши видео очень познавательны! Артем, подскажите, пожалуйста, обязательно ли при верстке меню использовать список? Ведь все прекрасно позиционируется в блоке средствами flexbox и без списка
@eyyubmuradov9308
@eyyubmuradov9308 6 лет назад
ПОЗДРАВЛЯЮ!!!!!!!!!!!! спасибо за уроки .....очень большое спасибо
@user-mv9ek1rm7i
@user-mv9ek1rm7i 4 года назад
супер! и видео и канал в целом. очень много полезного и слушать и смотреть легко! спасибо
@Elator11777
@Elator11777 6 лет назад
Вот это подгон, так подгон! Не ожидал! Буду верстать теперь. Спасибо! Поздравляю со свадьбой
@user-di9un4uh4q
@user-di9un4uh4q 5 лет назад
4:56 . Почему у меня не работают BACKGROUND-IMAGE? Написал всё, как на видео, вот только слова "moz", "webkit" и "ms" наклонены в отличие от следующих слов. Помогите разобраться, пожалуйста.
@Nazar0005
@Nazar0005 6 лет назад
спасибо ждем завтра продолжение! 😃
@user-yl5xn4si7k
@user-yl5xn4si7k 6 лет назад
Классное видео. А главное все понятно. Спасибо Артём.
@xtapofficial6732
@xtapofficial6732 4 года назад
Спасибо, очень крутой видос. Пойду смотреть следующую часть с адаптивом)
@xglot
@xglot 6 лет назад
отличный видео урок. Спасибо большое.
@alexdzyuba5123
@alexdzyuba5123 6 лет назад
Офигенно, Исламов, ты лучший)
@user-bj7sc9nr1f
@user-bj7sc9nr1f 5 лет назад
Спаассибооо, добрый человек ❤️
@17madjoker47
@17madjoker47 6 лет назад
Спасибо, очень полезный ролик!)
@buklogs
@buklogs 6 лет назад
Мне понравилось. Спасибо Артём !
@vlaaaaad111
@vlaaaaad111 6 лет назад
классные ролики! Побольше флекса! Побольше хитрых штучек на Flex!
@alexeydanilov1557
@alexeydanilov1557 6 лет назад
Отличный урок! Ставлю лайк.
@s1khar
@s1khar 4 года назад
Спасибо. Быстро но с паузой все понятно.
@vasya8441
@vasya8441 6 лет назад
Сегодня целый день пытался сделать верстку, все делал за автором, не получалось, мне было грустно и вечером смотрю на другой макет и сразу вспомнил что делал, спасибо за видео, все макеты для лендинга почти одинаковые, я даже опять захотел все делать и учиться
@JuLin39
@JuLin39 6 лет назад
Полезно и понятно. Спасибо!
@gulnarasmadiyarova9631
@gulnarasmadiyarova9631 5 лет назад
Спасибо! Артем супер просто!!!
@dinarakabzhanova141
@dinarakabzhanova141 5 лет назад
Очень полезный видеоролик! 👍🏻
@alexsoft7073
@alexsoft7073 4 года назад
Отличное видео, оказывается верстать с помощью flex очень просто. Удачи во всем)
@user-nr5gh1dy2s
@user-nr5gh1dy2s 6 лет назад
Спасибо, поучительно)
@gamebang1956
@gamebang1956 6 лет назад
Спасибо,было очень полезно!)
@Computa_Hakka
@Computa_Hakka 4 года назад
Подскажите пожалуйста, я один такой недалёкий? Вроде ничего сверхъестественного, но как самостоятельно пытаешься повторить, без видео, не получается нихренашеньки..)
@Glo_Academy
@Glo_Academy 4 года назад
Это нормально, друг. Нужно больше практики. Делаешь - гуглишь. Все получится!
@VolhaCharnyshQuetzal
@VolhaCharnyshQuetzal 4 года назад
так ты все равно в каких-то местах должен под свой шаблон подстраивать.или с ошибками списываешь.
@mishachubenko3394
@mishachubenko3394 Год назад
Э така фігня :)!
@user-mz7bt2do8z
@user-mz7bt2do8z 6 лет назад
Круто!Молодец.Спасибо! Ты крутой!
@user-rz9nq3up4t
@user-rz9nq3up4t 6 лет назад
Отличное видео ! Спасибо !
@konstantindude9430
@konstantindude9430 6 лет назад
круть! но почему бы не использовать flexbox grid? опять таки, дело каждого
@_Fantom_.
@_Fantom_. 4 года назад
Хоть для меня это уже и пройденный этап, но все же было интересно..
@yuriiyablonskyi6626
@yuriiyablonskyi6626 4 года назад
спасибо огромное делал все за тобой и все получилось
@user-xd4mu1zq7c
@user-xd4mu1zq7c 6 лет назад
Здравствуйте, отличный канал! Но хотелось бы, чтобы вы выкладывали все материалы для вёрстки, чтобы смотреть и одновременно самому верстать.
@astronautdaniel3528
@astronautdaniel3528 6 лет назад
Первый раз в жизни вижу такой красивый и аккуратный код!
@vadimp4669
@vadimp4669 6 лет назад
Всё отлично!) Единственное чуть больше бы комментариев, когда меняете row на column
@antilebron2k238
@antilebron2k238 6 лет назад
Как всегда годно!
@noname-nj4gk
@noname-nj4gk 6 лет назад
Спасибо за видео!
@youtubeCyborg
@youtubeCyborg 5 лет назад
Насколько кросбраузерна верстка flexbox-м на сегодняшний день во всех ли браузерах поддерживается одинаково или где то будет разваливаться ?
@zaurbay7127
@zaurbay7127 3 года назад
кстати четко, мне нравится по флексбоксу работать
@user-mr1yi9tq1n
@user-mr1yi9tq1n 5 лет назад
Круто, спасибо!
@ania_bliznec
@ania_bliznec 5 лет назад
Понравилось, спасибо)
@user-jk3ec6bq4g
@user-jk3ec6bq4g 6 лет назад
Я только стартую в верстке, по доброму завидую скорости с которой работаешь)
@user-jk3ec6bq4g
@user-jk3ec6bq4g 6 лет назад
Спасибо за видос, много нового узнал.
@kartopla123
@kartopla123 6 лет назад
Артем, спасибо за видео! скажи, пожалуйста, что ты используешь для смены заглавочных букв на строчные? (14:35 минута)
@Glo_Academy
@Glo_Academy 6 лет назад
ctrl (cmd) + K и после нажимаешь L
@kartopla123
@kartopla123 6 лет назад
спасибо!
@user-pm7vg4zn1f
@user-pm7vg4zn1f 5 лет назад
всё супер!!!
@muradsuleymanli1147
@muradsuleymanli1147 3 года назад
Можете сказать размеры фона с очками просто у меня не все фото выходит на экран
@fastikMobla
@fastikMobla 2 года назад
Круто спасибо)
@crash6699
@crash6699 4 года назад
Артем спасибор большое
@orenbani
@orenbani 4 года назад
Артём! Что за прога и что за сокращённый набор ты используешь? Очень понравилось!
@youreawake4613
@youreawake4613 4 года назад
Это плагин Emmet, в Visual Studio Code он установлен по умолчанию, в остальные же редакторы кода нужно самостоятельно его устанавливать.
@jaerb1
@jaerb1 6 лет назад
Все очень круто))
@senianga1
@senianga1 Год назад
Много полезного!
@mishapliskunov9639
@mishapliskunov9639 6 лет назад
спасибо за уроки - очень познавательно! ребята, можете рабочий psd перезалить куда-нить пожалуйста - мой cc2017 отказывается его открывать (пишет Could not complete your request because an unexpected end-of-file was encountered.)
@BillieBonse
@BillieBonse 4 года назад
Здорово!
@sundulzundul866
@sundulzundul866 5 лет назад
Спасибо очень помогает
@user-fs9dq8xy5m
@user-fs9dq8xy5m 4 года назад
все получилось , все круто))
@dmitrii8249
@dmitrii8249 6 лет назад
Можно узнать какие у Вас стоят плагины на Сублайме?
@user-qy5dx1oh4s
@user-qy5dx1oh4s 6 лет назад
Очень хороший урок.
@RMirsaitov
@RMirsaitov 4 года назад
Спасибо!
@victormog
@victormog 4 года назад
Если подключается normalize.css, то _body { margin: 0; }_ - лишнее...
@LexPustokov
@LexPustokov 5 лет назад
Ахах, ск, я мудак, спасибо за видео. Нечего не понял, но смотрел до конца. :D
@TIEST0s
@TIEST0s 6 лет назад
подскажите пожалуйста как сделать несколько фонов для 1 блока?
@brainslug3580
@brainslug3580 6 лет назад
а почему не применяешь бэм, раз это все равно не бутстрап?
@anixi85
@anixi85 6 лет назад
хорошие уроки, но хотелось бы комментария на некоторых более сложных местах. такого плана как про after before хотелось бы хоть минуту твоего объяснения, когда писал 100vh (хоть бы пару слов почему ты пишешь именно так, не все специалисты используют это) и тд
@VolhaCharnyshQuetzal
@VolhaCharnyshQuetzal 4 года назад
@@dim_am менять ли в списках на свое: list-style: outside url
@yrtrk8521
@yrtrk8521 6 лет назад
скорость отличная, все гут!
@almatkabul9165
@almatkabul9165 6 лет назад
а как ты в редакторе уменьшил текст при выделении?
@maksoleksyuk7712
@maksoleksyuk7712 4 года назад
Обьясните, зачем box-sizing для before ,after ?
@soundsay7763
@soundsay7763 3 года назад
Есть проблема, эта стрелочка которая ведет вниз, у меня по ширине на весь документ, то есть кликнуть можно хоть в конце, хоть в начале, как это исправить?
@MrRonnieJamesDio
@MrRonnieJamesDio 6 лет назад
После обновления страницы слайдер перестаёт работать. Начинает работать только если в style.less сменить значение &:hover{ flex-basis:100%; } ,но после обновления страницы он опять не работает. В чём может быть проблема?
@d1mausxx264
@d1mausxx264 3 года назад
Проста супер 👍👍👍
@orbita_studios3835
@orbita_studios3835 6 лет назад
Кстати как ты скопировал css в фотошопе с помощью css hat?
@ravabat5841
@ravabat5841 5 лет назад
Что за тема эффекта листания когда переключаешь окна программ? Можно на Убунту так сделать ну или на Винде?
@Glo_Academy
@Glo_Academy 5 лет назад
Это Mac OS
@urbanmauglisq9554
@urbanmauglisq9554 6 лет назад
Было полезно!
@webhero42
@webhero42 6 лет назад
В принципе, нормально, сам юзаю только флексбоксы, хочу еще css grid layout изучить. Только не совсем понимаю, ты бросил bootstrap что ли? Сейчас вышла бета 4, полностью на флексбоксах; или это потеряло актуальность?
@BillieBonse
@BillieBonse 4 года назад
всегда полезно знать как класть кирпич при постройке здания
@progerlife6690
@progerlife6690 4 года назад
Круто спасибо"!!
@arthurcode4225
@arthurcode4225 4 года назад
А normilize.css нужно скачивать или самому прописывать стили?Что прописывать если так?
@alexlisouski4069
@alexlisouski4069 4 года назад
самому нужно скачивать. у каждого верстальщика этот файл мастхэв
@confymarlow8616
@confymarlow8616 4 года назад
Здравствуйте! Скажите - сейчас писать footer, nav , header вместо div?
@ihatemyfuckinlife
@ihatemyfuckinlife 3 года назад
@@rjuman в любом случае надо делать, как правильно, а не как хочешь
@exzo1068
@exzo1068 6 лет назад
20k будет раньше сентября ;) спасибо за отличный материал, ждём новый видос
@lewmilow3873
@lewmilow3873 6 лет назад
скачал я psd , а там в фотошопе шрифты "maven pro" не грузятся, хотя на компьютере он установлен
@braivs
@braivs 3 года назад
Картинка main-bg.jpg у меня позиционируется по другому, обрезана и не вся целиком. И если написать, без префиксов background-image: linear-gradient(-60deg, rgb(136, 211, 206) 0%, rgb(110, 69, 226) 100%) , то opacity будет по другому выглядеть. Делал в Avocode. Он показывает opacity: 0.39, если поставить так, то без префиксов как у автора видно. Но вопрос позиционирования картинки ещё актуален.
@user-by6jg7pk1s
@user-by6jg7pk1s 4 года назад
ставлю лайк. пишу комментарий.
@user-cw7yo6zl9e
@user-cw7yo6zl9e Год назад
Дякую! Дуже допомагає!
@bondar_uk
@bondar_uk 6 лет назад
отлично =)
@user-lx1ii1ht6x
@user-lx1ii1ht6x 9 месяцев назад
Молодец!
@slava170888
@slava170888 6 лет назад
Спасибо!!!!!!!!
@span4ev
@span4ev 6 лет назад
Спасибо за урок. Хотелось бы видеть исходники, или я кривожопый. Не нашёл в макете изображения из хэдера. ПРи открытии есть вариант "сведение" - там есть фото, но оно под текстом, и второй вариант "сохранить слои", и там картинки нет.
@princerockstar1775
@princerockstar1775 5 лет назад
обнови Photoshop
@user-vd5wk8jn5z
@user-vd5wk8jn5z 5 лет назад
очень просто и понятно, благодарю))
@stasmaksimov9531
@stasmaksimov9531 4 года назад
Спасибо! Здорово! 👍
@JustMadDENN
@JustMadDENN 6 лет назад
Хм.... Чётко!)
@user-su3ef5cb8p
@user-su3ef5cb8p 6 лет назад
Спасибо
@user-df5hd4lp9s
@user-df5hd4lp9s 5 лет назад
Что в файле normalize.css?
@galchik5870
@galchik5870 5 лет назад
а чем отличается ворд-пресс от верстки???
@livingston9750
@livingston9750 4 года назад
Почему не отображается фоновая картинка? Я вырезал фон, сохранил в папку img, путь написал правильный - с точками и всё такое, изменения сохранил, сайт обновил и ... ничего.
@snakill97
@snakill97 6 лет назад
круто!
@nikolayg.5319
@nikolayg.5319 6 лет назад
Обновите ссылку на макет пожалуйста.
@HlibShmatkov
@HlibShmatkov 6 лет назад
Привет! Подскажи, что за плагин в subline, названия картинок подсказывает?
@Glo_Academy
@Glo_Academy 6 лет назад
AutoFileName
@HlibShmatkov
@HlibShmatkov 6 лет назад
Спасибо большое :)
@ErlatTV
@ErlatTV 5 лет назад
не плохо, спс
@abvgd1100
@abvgd1100 4 года назад
А можно же также сделать меню , без помощи ul li
@anonimanonim6552
@anonimanonim6552 3 года назад
Да можно используя тег с каким либо классом
@alcocc
@alcocc 4 года назад
А зачем прописывать z-index, разве не проще задать два фона?
@BillieBonse
@BillieBonse 4 года назад
а почему верстаете в основном проверяя в Safari?
Далее
This is so cool 😲
00:31
Просмотров 9 млн
Я ДРОЖАЛ ПОСЛЕ ЭТОГО...
16:24
Просмотров 441 тыс.
Слайдер на flexBOX
9:54
Просмотров 46 тыс.