Ну так это же очевидна и давно известная мудрость - "Скажи мне - и я забуду, покажи мне - и я запомню, дай мне сделать - и я пойму"

Укоренилась стойкая ассоциация флексбокса с шашлыком, спасибо Дмитрий! )

спасибо большое! годно! доходчиво! Успехов тебе в добрых делах!

Ролик просто топ. Продолжай также!!

Тренажер кайф!!! Очень классная идея!

Отличная идея с тренажером!!! Очень понравилось!

Чувак, я твой фанат! 😍

Отличная идея с тренажером. Очень понравилось

И урок и тренажер оч. крутые. Дима как всегда молодец! Спасибо!

Спасибо, очень полезный и познавательный урок!

Конечно помогают. Нужно больше тренажёров)

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

Дима ты большой молодец ! очень доступно, тренажер крут.

С трудом, но прошла. Идея отличная!!!

Тонкости, а ведь какие они важные, СПАСИБО.

Пишу комментари, чтобы продвинуть ролик в алгоритмах Ютуба. Спасибо автору за полезный ролик!

Спасибо! Очень полезная инфа!

Очень толковое видео. Бриллиант на ютубе в данной теме. Спасибо автор.

Отлично все объяснили, спасибо!!)

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

Хорошая задумка.

спасибо за тренажёр

Нужно больше тренажёров!

Классная идея. Плюсую!

Очень все доступно объяснил

Все круто!

Интерактивный тренажёр - хорошая идея!

Хороший, понятный урок. Тренажер штука нужная. Прошел задания, помогло упорядочить кашу в голове. В полноэкранном режиме F11 все видно нормально. Мне лично все понравилось

Классная тема)

Отлично, я за!

Flexbox-Это тема !

тема топ, вариант хорош

Дмитрий, наконец-то с npp перешли на sublime!

Круто.

Да,... шаШлык помню) Красавчик, хорошо объяснил.

спасибо!

Крутая штука! Хорошая работа Дмитрий! Усваевается материал на 5 из 5. Вот что бы предложил изменить: шрифт в описании на 14, межстрочный интервал поставил бы 16 или 18, и font-weght уменьшил (поиграться). Мне кажется, что текст как будто разорван, строки сами по себе каждая (хотя возможно вы эту цель и преследовали). Это даст больше места, сделает текст компактным и более читаемым и даст больше места для нижней части эмулятора. И предложил бы сделать возможным возвращаться на предыдущие упражнения.

Огонь!

отличный тренажер. а может запишешь курс по написанию тренажера. (PHP, JS, SQL) интересно написать для себя. понять как работает и потренироваться по ходу написания :)

идея с тренажёром хорошая

супер

Очень понравилось! За исключением нескольких грамматических ошибок (в стиле Дмитрия :)) и несовершенства системы проверки ответов все очень круто. Класно было бы разных уровней сложности добавить и рандомных цифр в задачах (чтоб не автоматом...) Класс!!! P.S. Вижу курс по WP появился - это тот что ранее был, или доработанный?

Дмитрий! Спасибо, за тренажер. Очень интересно и полезно. Как я понял, вы разработчик smart-grid ? Установил потестил, интересная вещь. Если не трудно, ответьте на 2 вопроса. 1. В качестве препроцессора, как я понял, можно использовать любой, в том числе sass|scss просто указав его при генерации сетки, или я не прав? 2. В 2-х словах, за что отвечает примесь .shift и другие ее разновидности - это что-то вроде offset в bootstrap? Или что-то другое? В качестве улучшения тренажера, на мой субъективный взгляд: 1. Примеры нужно вынести в верх экрана; 2. При описании того, что нужно сделать для выполнения задания, не стоит так детально описывать. Достаточно просто указать, к примеру, для того, чтобы выполнить задания используйте свойство justify-content. А не писать свойство, значения, и элемент которому его добавить. Это, ИМХО, лишнее. Ведь тренажер - своеобразный тест, после прочтения статьи. Спасибо!

А как рассчитывать колонки, если, к примеру, 2 итема, один занимает 5 колонок, второй - 7 колонок

Спасибо за труд! В ноябре планирутете платные уроки по верстке?

а если например один элемент в строке должен занимать 6 колонок, в второй 4 и 2 колонки как оставшееся расстояние между ними? Как тогда рассчитывать?

За шашлык лайк)

Всё класс, но так привык к Emmet, что просто ппц, может получится добавить в тренажёр поддержку Emmet? :)

могу ошибаться, но слева и справа остаются висеть хвосты блока row, образованные от отрицательных марджинов. Если они висят в пустоте то проблем нет. Если вы попробуете слева и справа от блока container воткнуть что-то еще (например меню, рекламу, блок новостей), то возникнут проблемы. Метод явно имеет ограничение по применению, о которых в видео вроде как не сказано

чтобы достичь прилегания блоков слева и справа на каком-то англоязычном ресурсе предлагалось применять свойство justify-content:space-evenly.Т.е оно должно исправить ошибку разработчиков флексов по неполному набору свойств.Приходилось применять это свойство?

А какая есть альтернатива по заданию количества столбцов/строк вместо Бутстраповского подхода?

Тренажеры отличная вещь. Если бы еще на более реальном примере. Т.к. на кубиках, иногда понимание принципа, не происходит.

Вариант который я всегда использую это у row поставить margin: -30px 0 0 -30px; а у item padding: 30px 0 0 30px, и можно задавать ширину без всяких calc

Мне казалось, что современные frontend-разработчики не используют сетки вообще. Во всяком случае встречал много подобных мнений. Насчёт формулы - нашёл это полезным для себя. И тренажёр хороший, мне понравился. Правда на 8 шаге произошёл казус: вроде всё верно сделал, вот пример: .container{ display: flex; flex-wrap: wrap; margin: 0 -20px; } .item{ width: calc(100% / 12 * 3 - 40px); margin: 20px; padding: 20px; box-sizing: border-box; } Но в итоге кнопка "Перейти к следующему" осталась неактивной.

надо вам Дмитрий сделать упражнения так чтобы люди сами думали куда вписывать что надо - а то там получается что всё время линейный сюжет и все понятно что делать

есть отступы между строками и стобацами вконтейнере

Формула расчета ширины: calc( 100% / columns * n - offset ) n = количество колонок, которые будет заимать элемент

Очень полезная тема и после ваших классных и понятных объяснений материала тренажер позволяет очень хорошо закрепить в памяти пройденный материал. Нужно немножко доработать удобство использования тренажера (описал как по моему субъективному мнению нужно это сделать - prntscr.com/jjdgko)

тренажер +

Дмитрий, у меня к вам такой вопрос, нигде не могу найти. Можно ли методами PHP сжимать размер файлов изображений и вырисовывать их на загружаемой странице, без сохранения уменьшенной копии на сервере

Классы в html (в пределах разумного: container, row, cols), на мой взгляд единственное решение. Если контент менеджеру нужно изменить ширину абзаца в статье, например, ему в Sass нужно идти и сайт компилить? Или я что-то не понимаю?

Тренажёр крут) Но 8 урок, не получается пройти, хотя вроде бы всё правильно сделал. .container{ display: flex; flex-wrap: wrap; margin: 0 calc(-40px / 2);; } .item{ width: calc(100% / 12 * 3 - 40px); margin: calc(40px / 2); padding: 20px; box-sizing: border-box; }

можно ли такое в 2021 сделать на свойстве gap?

на 8 не пускает дальше, есть ошибка? .container{ display: flex; flex-wrap: wrap; margin: 0 -20px; } .item{ width: calc(100% / 12 * 3 - 40px); margin: 20px; padding: 20px; box-sizing: border-box; }

В 9 задании @media screen and (max-width: 900px) { .item { width: calc(100% / 12 * 6 - 40px); } } что не так ?

В хроме в режиме эмуляции мобильных устройств при изменении ширины экрана элементы так и стоят по 4 в ряд :( и не соскакивают в 3, 2, 1. Почему такое может быть? Код списан с видео дословно.

Что с 8 заданием в тренажере? не могу пройти, все сделал правильно на мой взгляд. .container{ display: flex; flex-wrap: wrap; margin: 0 -20px; } .item{ width: calc(100% / 12 * 3 - 40px); margin: 0 20px; }

Идея хорошая!!! Только после выполнения 9-го упражнения к 10-му перейти не получается.... кнопка не активна. Это только у меня так?

Что я сделал не так в 8 задании? .container{ display: flex; flex-wrap: wrap; margin: 0 -20px; } .item{ box-sizing: border-box; width: calc(100% / 12 * 3 - 40px); margin: 20px; padding: 20px; }

и как теперь перестать думать о шашлыке :)

* { margin: 0; padding: 0; box-sizing: border-box; } .row { margin: auto; display: flex; justify-content: space-between; max-width: 1280px; flex-wrap: wrap; background-color: aqua; } .item { margin: 16px 0; /* width: calc(25% - 30px);*/ background-color: antiquewhite; width: calc(100% / 12 * 3 - 30px); } убираем лишнюю обертку и margin с минусом

если не хочешь писать медиа запросы каждый раз вручную пользуй less или sass что-то вроде: .colLg(@rules){@media screen and (min-width: 1200px){@rules();}} .colMd(@rules){@media screen and (min-width: 992px) and (max-width: 1199px){@rules();}} .colSm(@rules){@media screen and (min-width: 768px) and (max-width: 991px){@rules();}} .colXs(@rules){@media screen and (max-width: 767px){@rules();}} .colXXs(@rules){@media screen and (max-width: 460px){@rules();}} и потом уже запихивай в них (в .colSm например) вот такое .container{ max-width: 1280px; margin: 30px auto; .row{ display: flex; flex-wrap: wrap; padding: 0 30px; margin: 0 -15px; .item{ background: #CCC; padding: 50px 10px; box-sizing: border-box; width: ~'calc(25% - 30px)'; border: 1px solid #333; margin: 15px; .colSm({width: ~'calc(50% - 30px)';}); // Здесь для Sm .colXs({width: ~'calc(100% - 30px)';}); // Здесь для Xs } } }

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

oooo

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

Нормуль. Надо только над дизайном поработать. Без шашлыков, котов и прочего не комильфо.

Это очень круто! Обалденная идея, обязательно надо развивать! Вот только с шага 7 не получается перейти, сделал скриншот: prntscr.com/jipay0

заче постоянно смотреть видео на твоем ютуб канале !?

Нет проблемы в том, что на сегодняшний день css-grid поддерживается на 83 %. Все браузеры, которые нужны - входят в эти 83 %. остальные 17 % это мертвый мусор, никому не нужный.

тема огонь