Практика верстки на flex'ах часть 2

Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...

[@dennis_mihaylov]

Это лучший плейлист и тема, которую я когда либо видел Я посмотрел первое видео и не смог остановиться Я ссался кипятком, Я кричал от радости от всех этих Flexов И платал, когда этот плейлист закончился Спасибо огромное, за всё это Это было чудесно

[@Wraith2401]

что бы не задавать жесткую высоту в 600рх надо было прописать align-items: stretch; выровнялись бы все по высоте самого высокго блока

[@ДмитрийБорисенко-и5ъ]

Иван Бондарь это точно!

[@user1784]

align-items выравнивает по горизонтали, justify-content: stretch тогда уж

[@ДмитрийБорисенко-и5ъ]

думаю нет, при row выровнять все блоки по высоте можно свойством align-items: stretch. Блоки растянутся по вертикальной оси на всю ширину flex блока!

[@princerockstar1775]

задать род.блоку max-width и по классике margin: 0 auto ну и justify-content: space-between; align-items: stretch; род.блоку

[@andrewkovalenko3587]

Годно, хоть и знаю всё это) Доверстай и перенести на WP, вот это, думаю, зайдёт

[@МиколаСвятий]

Смотрю в 2021, задаюсь вопросом, почему не смотрел тебя 3 года назад? )) подписка, лайк

[@Elator11777]

Спасибо, крутое видео. Поддерживаю тему переноса этой верстки на вордпресс!

[@noname-nj4gk]

Годно! Практика - это лучший контент у тебя на канале.

[@alexeydanilov1557]

Очень годно и ценно то, что видео небольшие! Ставлю лайк!

[@onemasterlomaster1829]

*хороший темп ) каждый день по видосу*

[@ВолодимирКоторажук]

Видео супер. Если можно то сделайте еще больше обучающих уроков

[@disdein]

Отлично, годное видео. Интереснее будет дальше по флексам уроки.

[@freelistener123]

WP - отлично! Очень буду рад. Спасибо за курс флекс.

[@ilyaaverin1042]

ждем с нетерпением следующего видео!!!

[@katyaantonova8096]

Годно,огромное спасибо!

[@broker_evgeniy]

Круто! Спасибо за хорошее объяснение о флексах! Лайк!

[@LxndrKrchvtsv]

Полезное видео. Больше таких видео.

[@xKUMAxMU]

можно было флексами сделать прайс align-self одному start последнему end ну а цифры по умолчанию стрейч

[@Alex-ni2uv]

для price-tags не задавать align-items: center; и все блоки price-tag будут одинаковой высоты

[@astronautdaniel3528]

Больше верстки макетов. Разные сложные ситуации.

[@banzayplay3839]

Очень годный и позновательный контент, спасибо!

[@maxim_spqr]

Годно и актуально на 2019

[@azatkhabirov9639]

Немного оптимизировал) .table_header span::after, .table_header span::before { content: ''; width: 25px; height: 2px; display: inline-block; vertical-align: middle; margin: 0 10px 0 10px; background-color: #6e45e2; }

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

Круто , март 2020 все еще как по мне годната , как по мне , хотя что я понимаю))))

[@АнтонСурыгин-ф9ж]

Хотел написать комментарий, потом глянул на дату публикации. В итоге пишу комментарий, про то, как пишу комментарий :)

[@Glo_Academy]

И правильно)

[@NEVALZZ]

будет ли 3я часть?

[@ВікаДеркач-ъ8э]

Thank you

[@artemkyslyi1728]

Полезный контент, лайк и подписка

[@star_ebrietas]

10:45 какое сочетание клавиш делает такое?:) Если это tab, то, видимо, идти по адресу в папки и удалять определенный файл? Работаю на vs 1.57.1

[@alexanderfilippovich4757]

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

[@АртемОрлов-в8м]

Никак не понять, в начале 13-й минут, примерно в 12.05 Артём задает родителю prise-tags display flex, и элементы внутри, которые prise-tag сразу становятся по центру. Как так? Когда я так делаю, у меня элементы выравниваются в строку, но они встают с начала блока родителя, а не по середине. Ведь там не прописано ничего типа justify-content: center; Может я где то что-то пропустил? Подскажите, всю голову сломал) Или готовый код бы на это для изучения... Добавлено: как обычно это бывает - разобрался почти сразу, после того как написал...просто контент всю ширину родителя занимает, отступы в родителя слева и справа от края есть.

[@Plan_B]

Очень круто! Спасибо

[@lapatvse2076]

Годно

[@emirrrrr123]

шикарно)

[@dachvanweb3564]

можно ли с помощью флексов сделать скрывающиеся и раскрывающиеся блоки? очень интересно как ты будешь делать адаптив) и как будет это всё смотреться на браузере который не поддерживает флекс верстку

[@webhero42]

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

[@maksym9228]

Давай Вордпресс, самая популярная CMS. Если перенесешь вёрстку на ВП - вообще топ будет

[@Moon_Cat77]

Где часть 3?

[@taump_dev]

Отлично, спасибо!)

[@dtoolscomua]

Почему враперов нет?

[@anixi85]

почему до середины второго урока не писали блоки в пикселях (только в процентах и vh), а потом начали?

[@vladimirvladimirovich2809]

Привет. Как заставить кнопку прижаться к нижнему краю price-tag? align-self позиционирует по горизонтали...

[@ПартнерскийМаркетингЛегко]

Артём, если у html задан размер шрифту, потом чтобы оттолкнуться от этого размера в единицу rem, только шрифту ставим единицу rem, или можно по всем размерам ставить единицу rem?

[@iso1286]

Ты крут!

[@saskirakosyan3788]

Я для практики скачал макет и верстаю .исползую авосод .но припроцесори не. Насколько это(неисползовать припр.) важно.для начало. ?

[@Glo_Academy]

Можно без препроцессоров

[@РифатНазипов-у1к]

почему у меня не работает? при клике на бургер к классу m-menu прибавляется ещё m-menu__acrive и больше не чего не происходит при повторном клике уберется ММЕНЮАКТИВ,

[@Hello-fo6io]

Редко пишу комментарии, но контент реально годный. Я за перенос этой вёрстки на WP. Всем рекомендую игру для усвоения материала: flexboxfroggy.com

[@ДмитрийБорисенко-и5ъ]

игра годная 100%

[@ГозиевОзоджон-ю6ц]

Братан, а игра для Grid есть ? А за флексбокс огромное спасибо

[@staskopytich]

@@ГозиевОзоджон-ю6ц гугли grid garden

[@misha_mg]

Хорошая игра, благодаря ей подтянул flex до уровня комфортной верстки) 3 года прошло а она все еще актуальна

[@braivs]

Впервые вижу такой подбор размеров на глаз)

[@ЧЕЛОВЕК-ь5п]

спасибо!лайк

[@albystritz]

Сбросьте пожалуйста ссылку на готовый проект

[@Cinerable]

Давай продолжение посадки верстки на WP. Очень жду.

[@maciborka78]

Спасибо!!!

[@JustMadDENN]

Годно и давай Вордпресс)

[@ЛевФёдоров-ю2г]

Ну кстати не чисто черный цвет шрифта проще читается, давно замечаю подобное

[@crymore_baby6777]

а где продолжение верстки,кто знает?

[@snagoff]

так в css можно задавать щас переменные не используя предпроцессор. Переменная :root {--main-color: #fff;} вывод переменной color: var (--main-color);

[@sabitdev5647]

Чистая верстка+вордпресс... ето нужно зрителям

[@ЛевФёдоров-ю2г]

Доверстай и на WordPress этот же сайт

[@VladStrikeR]

Согласен!!

[@АлексейСеменец-я2т]

Уже сам доверстал на flex box :)

[@dmitrii8249]

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

[@denisermakov6730]

давай лучше потом про WP)

[@Slaawwa]

Годнота!

[@СаняАлексеев-н6о]

5 баллов)

[@wskeal86]

Подскажи пожалуйста какой версии у тебя Sublime. В третьей AutoComplete не работает на css, точнее он работает, но не автоматически, когда пишешь точку и название класса, нужно нажимать Ctrl+Space и только тогда выпадает табличка, а во второй версии саблайма, говорят, автоматически выпадала. Кучу забугорных топиков на этот счёт перелопатил, так и не нашли решение пока.

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

Если я правильно понимаю у него плагин EMMET стоит

[@oleksandrmyshchyshyn1093]

Годнота!)

[@snakill97]

годно

[@emirrrrr123]

тому кто придумал SASS предлагаю скинуться на памятник)

[@sergeevdan]

Еще не досмотрел видео, но напишу сразу... Wordpress

[@dennyluckes4783]

godno

[@HlibShmatkov]

Есть плагин хороший, который по высоте делает все элементы одинаковые. Называется EqualHeight.

[@tekleha]

Годно1

[@andreykhalepov8260]

Давай wordpress

[@artemkonoplin2143]

Мегагодно!

[@bogdan-e6w]

что за плагин, который при написании css высвечивает классы из html файла ??

[@Glo_Academy]

All autocomplete

[@dr.rastafarai7548]

Годнота! адаптивность будет?

[@Glo_Academy]

Будет, конечно)

[@dr.rastafarai7548]

отлично! Жду!

[@phil4765]

👍

[@hairy_nose]

"Ну да и хрен с ним...))"

[@DanilSavchenko-s8z]

Wordpress

[@dtoolscomua]

цена и месяц не в одной линии

[@ananasios]

дядь давай бем !

[@anfain3831]

посади вёрстку на wordpress =)

[@ThomasLinkzat]

grid css расскажи)

[@astelit8]

Ужас... понятное дело блоки будут разными по высоте, ты же контейнеру (prise-tags) задал align-items: center, а нужно оставить по умолчанию. тогда все блоки начинают подстраиваться под самый большой... Ты слишком спешишь, от этого косяки такого рода.

[@Glo_Academy]

Запиши видео в день, когда у тебя свадьба) Посмотрю на твою размеренную верстку) А вообще да, много ошибок на видео выскакивают. Я уже смирился с этим, у каждого скелеты в шкафу, я вот их на видео записываю, может кому полезно будет.

[@astelit8]

Glo Academy , свадьба? Круто же! Если только не спешишь и все обдуманно. Поздравляю. Отвечая на твой вопрос из видео, я за WordPress :)

[@qexly512]

@@Glo_Academy Ну никто же не заставлял в день свадьбы под дулом видео записывать, это своего рода дибилизм) Нужно было спокойно после свадьюы сесть и все записать.

[@Аиди-д3л]

скинь psd

[@ЕвгенийДатура]

WP~!)

[@artembuniashyn5290]

wp давай

[@ГригорийИванченко-б6г]

ГОДНО

[@oleksandrmyshchyshyn1093]

Не нужно различные CMS, интересно именно чистая вёрстка

[@viy8402]

Ну и не гибко ну и пох. А для чего блеть вообще тогда тебе флексы?=_=

[@xKUMAxMU]

можно было флексами сделать прайс align-self одному start последнему end ну а цифры по умолчанию стрейч

[@andriititar3129]

годно

[@senianga1]

godno