Уроки Flexbox Практика - Адаптивная верстка сайта. Макет.

там блоки переежают, с 4 в 3 и тогда 4-тий болтается снизу, а хотелось би чтоб 3 небило а сразу 2

в phpstorm:
не сработает Lorem# нужен именно нижний регистр
если хотите как автор поставить курсор в нескольких местах нажмите и удерживайте Alt и используйте мышь, чтобы выбрать места, где требуется курсор.

СПАСИБО, НЕ СОВСЕМ АРГУМЕНТИРОВАНО ,НО ПЛЮСЫ ЕСТЬ. БОЛЬШОЕ СПАСИБО,БУДУ, ЗАНИМАТЬСЯ ДАЛЬШЕ.

Видео рассчитано на тех кто в теме, но никак не на новичков

Думала, ребята придираются к уроку, говоря, что плохо объяснили порядок действий. Оказалось, видео гораздо хуже в плане объяснения. Хоть я более-менее разобралась во flexbox, но и то некоторая реализация задания осталась непонятной. Вообще никакой практической пользы от данного видео. Для новичка и того, кто немного в теме, эта запись только запутает (зачем отрицательные margin, calc и ширина div с непонятной логикой присвоения абсолютных параметров, html и body со свойством display : flex и много других т. д). Если видео рассчитано на профи, то думаю, они и без данного видео вполне обойдутся. В общем, непонятно, для какой публики снимал автор. Может, это была демонстрация знаний?

У меня не хочет работать медиа запрос, хотя все правильно сделал, как на видео.
Изменено: Уже работает, я просто вместо .grid-itm, ввел .grid-img

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

Странные объяснения.

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

Добрый день, у меня блоки grid_itm не встаю один за другим. То есть в строчку

Всё круто! Но ты бы мог почаще обновлять браузер, ну чтобы видеть как всё это меняется.
Надеюсь понял :)

крутой урок

почему то сколько не переписывал в html и CSS селектор grid... На justify-content: space-between; реагирует как и должен а вот на flex-wrap: wrap; выстраивает все .grid_itm (селектор) в одну колонку... По ходу упустил где на две колонки бьётся... И разве если без wrapa мы не получим те же 4 колонки с теми же параметрами что задаем потом в grid_itm&? Ума не приложу, что со мной не так?

Привет, возникла проблема! Помогите решить)
Kод css такой-же как в примере, но при выведении .nav-itm отображается столбцами. Как это исправить, подскажите пожалуйста!
Заранее спасибо)

Автор отбитый верстальщик, лол

Урок очень интересный, но есть много вопросов. Web Developer Blog где можно их Вам задать?

Спасибо. Сильный урок!

а теперь заного и с объяснениями

Благодаря вашему видео я решил сразу несколько проблем, имевшихся в верстке. Большое спасибо!

Надеюсь что с временем ( уже когда верстать по примеру) будет понятнее это все.

zachem dal html display:flex; eto pamoyemu besmislana html tag raditel body i head ti chyo delaesh tak uchit nelzya

Слишком быстро и нет объяснений практически ничего. Зачем так делать? Пыталась писать просто параллельно и бездумно но с такой скоростью постоянно ошибки получаются. Ну и ничего не отложилось в голове. Тут знаний 0....

Да на кой фиг такие уроки, не понимаю. еще пишет в комментах, что учтет, замечания, что плохие делает уроки... короче - дизлайк на все, что смотрел и от канала отписка. не реально, что то смотреть. Сам для себя снимаешь видео.

не понимаю кто ещё умудряется лайки ставить! ну жесть, а не урок. таланта препода у тебя к сожалению нет.

Нужно больше рекламы!

Плейлист для закрепления теории самое то! Вся суть в том, что вы сами должны разобраться, что и зачем делается, самостоятельно это все сверстать потом раза 3. Так лучше запоминается и вы сразу учитесь базовые вещи делать, которые применимы на реальных проектах.

Спасибо за то что проделал эту работу, мне очень помогает!

Как Вам идея записать видео на тему функции calc(), было бы замечательно! ибо не понятна запись: flex: 0 1 calc(25% - 30px * 3/4);

лол в комментах такие животные сидят)) Ребят открою тайну, вы сами должны читать статьи на разных источниках о флексбоксах и практиковатся, а видос смотреть уже как закрепление.Те кто пришёл сюда с 0 то просто идите нахуй и учите мат-часть

чувак, давай ты будешь помедленее. создаётся впечатление, что ты написал себе на листик весь код и потом тупо переписываешь и озвучиваешь. говори откуда ты берешь именно такие марджины и тд.
а эта строка вообще убила - flex: 0 1 calc(25% - 30px * 3/4); откуда ты взял эти расчеты? как ты к ним пришел? как бы это надо было бы объяснить, не думаешь? а так тупое копирование ни к чему не приведет. надеюсь увидишь мой коммент, видео то год уже...

Спасибо за ваши уроки! И совет всем, кому ничего непонятно: открывайте панель разработчика в браузере и меняйте CSS параметры, которые вызывают вопросы. Таким образом понимание приходит намного быстрее :)

Что за прога, где html документ писал ?

1) Для чего прописывались свойства img, a, a:hover?
2) почему формула расчёта flex-basis именно такая? (конкретно не ясно для чего 30px * 3/4)

Спасибо, очень классный урок...

Сколько рекламы....жесть

чем отличается .grid-img от .sqr в css если в html у нас только один класс: class="grid- img sqr"?

Зачем Вы просто пишете код? Уроки без объяснения - бессмысленные,

Вопрос такой, если создать [<div class="grid-item">] не 4-е штуки, а 5-ть ... То при сужении, будет не очень красиво ... Скорее всего, это надо сменить justify-content: space-between на justify-content: flex-start в [.grid], но в таком случае [<div class="grid-img sqr">] при сужении "наезжают" друг на друга ...

Если понимаешь белее менее CSS и Flex, можно не смотреть этот ролик, т.к. сам не хуже сделаешь,
а если действительно хочешь разобраться, тоже лучше не смотреть этот ролик, т.к. не поймешь ничего.
В общем - если ищешь уроки, проходи мимо.

Для чего задается min-width ?
Зачем header/main/nav/footer одноименные классы? Они итак по одному разу встречаются

Всё понятно и просто ! если ты хочешь узнать что такое (margin padding) и т.д. Иди учи Css3 Html а не flexbox

Прекрасные уроки!!! Спасибо. У меня единственное пожелание, чтобы вы вкратце комментировали некоторые flex свойства. Ведь уроки рассчитаны для новичков. А так Вы просто пишите те или иные свойства и бывает не совсем понятно для чего Вы это пишите. Например, для flex вы ставите 3 значения. Какова функция каждого из них? Третье значение прописываете как calc(25% - 30px * 3/4)... вот эта запись не совсем понятна.

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

Зачем элементам header, footer, main, nav назначать класс с тем же именем? Их для того и придумали чтобы не нужно было создавать новые клаcсы или id.

По комментариям видно, что народ совсем не любит учиться. Помимо видео нужно ещё читать статьи, документацию, практиковаться, а не посмотреть 15 минут и сразу всё умеешь :D. Автору большое спасибо за видео! Посмотрел, увидел, где пробелы в знаниях и пошёл учить свойства.

Бро, ты просто мой герой. Все видео великолепны.

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

В какой программе код пишите в видео?

добрый вечер! спасибо за видео! я не совсем понимаю расчеты с calc ( ), как вы знаете, что именно рассчитывать?

Зачем display:flex и другие правила флекса задавать html и body?