Очень разумный выпуск, побольше такого, мне вот как уже джуниору, очень в кайф иметь на заготовке такую сетку, спасибо большое Дмитрию за его супер обучающие видосы, с помощью них я делаю деньги с кода, огромное спасибо Дмитрий, вы топчик))
Хороший, понятный урок. Тренажер штука нужная. Прошел задания, помогло упорядочить кашу в голове. В полноэкранном режиме F11 все видно нормально. Мне лично все понравилось
Очень понравилось! За исключением нескольких грамматических ошибок (в стиле Дмитрия :)) и несовершенства системы проверки ответов все очень круто. Класно было бы разных уровней сложности добавить и рандомных цифр в задачах (чтоб не автоматом...) Класс!!! P.S. Вижу курс по WP появился - это тот что ранее был, или доработанный?
Дмитрий! Спасибо, за тренажер. Очень интересно и полезно. Как я понял, вы разработчик smart-grid ? Установил потестил, интересная вещь. Если не трудно, ответьте на 2 вопроса. 1. В качестве препроцессора, как я понял, можно использовать любой, в том числе sass|scss просто указав его при генерации сетки, или я не прав? 2. В 2-х словах, за что отвечает примесь .shift и другие ее разновидности - это что-то вроде offset в bootstrap? Или что-то другое? В качестве улучшения тренажера, на мой субъективный взгляд: 1. Примеры нужно вынести в верх экрана; 2. При описании того, что нужно сделать для выполнения задания, не стоит так детально описывать. Достаточно просто указать, к примеру, для того, чтобы выполнить задания используйте свойство justify-content. А не писать свойство, значения, и элемент которому его добавить. Это, ИМХО, лишнее. Ведь тренажер - своеобразный тест, после прочтения статьи. Спасибо!
Крутая штука! Хорошая работа Дмитрий! Усваевается материал на 5 из 5. Вот что бы предложил изменить: шрифт в описании на 14, межстрочный интервал поставил бы 16 или 18, и font-weght уменьшил (поиграться). Мне кажется, что текст как будто разорван, строки сами по себе каждая (хотя возможно вы эту цель и преследовали). Это даст больше места, сделает текст компактным и более читаемым и даст больше места для нижней части эмулятора. И предложил бы сделать возможным возвращаться на предыдущие упражнения.
отличный тренажер. а может запишешь курс по написанию тренажера. (PHP, JS, SQL) интересно написать для себя. понять как работает и потренироваться по ходу написания :)
могу ошибаться, но слева и справа остаются висеть хвосты блока row, образованные от отрицательных марджинов. Если они висят в пустоте то проблем нет. Если вы попробуете слева и справа от блока container воткнуть что-то еще (например меню, рекламу, блок новостей), то возникнут проблемы. Метод явно имеет ограничение по применению, о которых в видео вроде как не сказано
Вариант который я всегда использую это у row поставить margin: -30px 0 0 -30px; а у item padding: 30px 0 0 30px, и можно задавать ширину без всяких calc
Mr Reflection, по той же формуле. Допустим ширина viewport 100% = 1920px. Тогда ширина 1-го эл-та = calc(100%/12*6 - 40px) = 920px. Ширина 2-го эл-та = (100%/12*4 - 40px) = 600px. Остаётся 2 пустые колонки: 2*160px = 320px. Плюс 2 отступа по 40px: 80px. Итого: 920 + 600 + 320 + 80 = 1920px
Мне казалось, что современные 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; } Но в итоге кнопка "Перейти к следующему" осталась неактивной.
чтобы достичь прилегания блоков слева и справа на каком-то англоязычном ресурсе предлагалось применять свойство justify-content:space-evenly.Т.е оно должно исправить ошибку разработчиков флексов по неполному набору свойств.Приходилось применять это свойство?
Очень полезная тема и после ваших классных и понятных объяснений материала тренажер позволяет очень хорошо закрепить в памяти пройденный материал. Нужно немножко доработать удобство использования тренажера (описал как по моему субъективному мнению нужно это сделать - prntscr.com/jjdgko)
надо вам Дмитрий сделать упражнения так чтобы люди сами думали куда вписывать что надо - а то там получается что всё время линейный сюжет и все понятно что делать
Дмитрий, у меня к вам такой вопрос, нигде не могу найти. Можно ли методами PHP сжимать размер файлов изображений и вырисовывать их на загружаемой странице, без сохранения уменьшенной копии на сервере
Классы в html (в пределах разумного: container, row, cols), на мой взгляд единственное решение. Если контент менеджеру нужно изменить ширину абзаца в статье, например, ему в Sass нужно идти и сайт компилить? Или я что-то не понимаю?
На мой взгляд нужно и то и другое. Для контент менеджера в бутстрапе слишком много классов, он же не вёрсткой занимается. Сложные вещи делает верстальщик в препроцессорах примесями, а статическая сетка для контента статей и т.п. может быть в виде классов, просто их намного меньше. Но это уже зависит от проекта.
В хроме в режиме эмуляции мобильных устройств при изменении ширины экрана элементы так и стоят по 4 в ряд :( и не соскакивают в 3, 2, 1. Почему такое может быть? Код списан с видео дословно.
Что с 8 заданием в тренажере? не могу пройти, все сделал правильно на мой взгляд. .container{ display: flex; flex-wrap: wrap; margin: 0 -20px; } .item{ width: calc(100% / 12 * 3 - 40px); margin: 0 20px; }
если не хочешь писать медиа запросы каждый раз вручную пользуй 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 } } }
width: ~'calc(25% - 30px)'; - обязательно дибо значения % и px заключать в кавычки, либо все выражение. и не забываем пробеля в выражении между знаками вычислений ставить
Всё бы хорошо, но justify-content space-between часто делает не то, что нужно, при неполностью заполненных строках. Например карточки товаров по 4 в строке, а на последней строке их может быть 1, 2, 3 или 4 в зависимости от количества товаров в базе. При 2 и 3 justify-content space-between очень жёстко сделает)
для меня проще видео смотреть и параллельно делать в саблайме что-то не понял - перемотал - сделал как по мне, достаточно просто продиктовывать в видео все, что пишешь, чтобы можно было видео только слушать а в тренажере, чтобы прописать несчастный маржин, нужно перечитать 5 абзацев текста, после чего теряешь всю нить работы.
Нет проблемы в том, что на сегодняшний день css-grid поддерживается на 83 %. Все браузеры, которые нужны - входят в эти 83 %. остальные 17 % это мертвый мусор, никому не нужный.
Очень сильно зависит от тематики сайта. Многие заказчики умеют по метрике смотреть процент использования какого-либо браузера. Глянул тут в интернет магазине качелей за последнюю неделю 6.8% людей с разных IE, в основном с 11. Заказчик никогда не откажется от такой части аудитории. Так-то я тоже против старых браузеров, но 83% маловато.
Ну так это же очевидна и давно известная мудрость - "Скажи мне - и я забуду, покажи мне - и я запомню, дай мне сделать - и я пойму"
Аминь!
Укоренилась стойкая ассоциация флексбокса с шашлыком, спасибо Дмитрий! )
спасибо большое! годно! доходчиво! Успехов тебе в добрых делах!
Ролик просто топ. Продолжай также!!
Отличная идея с тренажером!!! Очень понравилось!
Тренажер кайф!!! Очень классная идея!
Очень круто!Спасибо большое
С трудом, но прошла. Идея отличная!!!
Отличная идея с тренажером. Очень понравилось
И урок и тренажер оч. крутые. Дима как всегда молодец! Спасибо!
Тонкости, а ведь какие они важные, СПАСИБО.
Конечно помогают. Нужно больше тренажёров)
Пишу комментари, чтобы продвинуть ролик в алгоритмах Ютуба. Спасибо автору за полезный ролик!
Спасибо, очень полезный и познавательный урок!
Спасибо! Очень полезная инфа!
Дима ты большой молодец ! очень доступно, тренажер крут.
Чувак, я твой фанат! 😍
Отлично все объяснили, спасибо!!)
Очень толковое видео. Бриллиант на ютубе в данной теме. Спасибо автор.
Классная идея. Плюсую!
Нужно больше тренажёров!
Очень разумный выпуск, побольше такого, мне вот как уже джуниору, очень в кайф иметь на заготовке такую сетку, спасибо большое Дмитрию за его супер обучающие видосы, с помощью них я делаю деньги с кода, огромное спасибо Дмитрий, вы топчик))
Интерактивный тренажёр - хорошая идея!
Очень все доступно объяснил
Хорошая задумка.
спасибо за тренажёр
Хороший, понятный урок. Тренажер штука нужная. Прошел задания, помогло упорядочить кашу в голове. В полноэкранном режиме F11 все видно нормально. Мне лично все понравилось
Все круто!
Да,... шаШлык помню) Красавчик, хорошо объяснил.
Отлично, я за!
Flexbox-Это тема !
Классная тема)
Дмитрий, наконец-то с npp перешли на sublime!
Круто.
Очень понравилось! За исключением нескольких грамматических ошибок (в стиле Дмитрия :)) и несовершенства системы проверки ответов все очень круто. Класно было бы разных уровней сложности добавить и рандомных цифр в задачах (чтоб не автоматом...) Класс!!!
P.S. Вижу курс по WP появился - это тот что ранее был, или доработанный?
идея с тренажёром хорошая
Дмитрий! Спасибо, за тренажер. Очень интересно и полезно. Как я понял, вы разработчик smart-grid ?
Установил потестил, интересная вещь.
Если не трудно, ответьте на 2 вопроса.
1. В качестве препроцессора, как я понял, можно использовать любой, в том числе sass|scss просто указав его при генерации сетки, или я не прав?
2. В 2-х словах, за что отвечает примесь .shift и другие ее разновидности - это что-то вроде offset в bootstrap? Или что-то другое?
В качестве улучшения тренажера, на мой субъективный взгляд:
1. Примеры нужно вынести в верх экрана;
2. При описании того, что нужно сделать для выполнения задания, не стоит так детально описывать. Достаточно просто указать, к примеру, для того, чтобы выполнить задания используйте свойство justify-content. А не писать свойство, значения, и элемент которому его добавить. Это, ИМХО, лишнее. Ведь тренажер - своеобразный тест, после прочтения статьи. Спасибо!
Огонь!
Спасибо за труд! В ноябре планирутете платные уроки по верстке?
спасибо!
тема топ, вариант хорош
Крутая штука! Хорошая работа Дмитрий! Усваевается материал на 5 из 5. Вот что бы предложил изменить: шрифт в описании на 14, межстрочный интервал поставил бы 16 или 18, и font-weght уменьшил (поиграться). Мне кажется, что текст как будто разорван, строки сами по себе каждая (хотя возможно вы эту цель и преследовали). Это даст больше места, сделает текст компактным и более читаемым и даст больше места для нижней части эмулятора. И предложил бы сделать возможным возвращаться на предыдущие упражнения.
отличный тренажер. а может запишешь курс по написанию тренажера. (PHP, JS, SQL) интересно написать для себя. понять как работает и потренироваться по ходу написания :)
А как рассчитывать колонки, если, к примеру, 2 итема, один занимает 5 колонок, второй - 7 колонок
могу ошибаться, но слева и справа остаются висеть хвосты блока row, образованные от отрицательных марджинов. Если они висят в пустоте то проблем нет. Если вы попробуете слева и справа от блока container воткнуть что-то еще (например меню, рекламу, блок новостей), то возникнут проблемы. Метод явно имеет ограничение по применению, о которых в видео вроде как не сказано
а если например один элемент в строке должен занимать 6 колонок, в второй 4 и 2 колонки как оставшееся расстояние между ними?
Как тогда рассчитывать?
Вариант который я всегда использую это у row поставить margin: -30px 0 0 -30px; а у item padding: 30px 0 0 30px, и можно задавать ширину без всяких calc
Всё класс, но так привык к Emmet, что просто ппц, может получится добавить в тренажёр поддержку Emmet? :)
Формула расчета ширины: calc( 100% / columns * n - offset ) n = количество колонок, которые будет заимать элемент
А если например один элемент в строке должен занимать 6 колонок, в второй 4 и 2 колонки как оставшееся расстояние между ними?
Как тогда рассчитывать?
Mr Reflection, по той же формуле. Допустим ширина viewport 100% = 1920px. Тогда ширина 1-го эл-та = calc(100%/12*6 - 40px) = 920px. Ширина 2-го эл-та = (100%/12*4 - 40px) = 600px. Остаётся 2 пустые колонки: 2*160px = 320px. Плюс 2 отступа по 40px: 80px. Итого: 920 + 600 + 320 + 80 = 1920px
Тренажеры отличная вещь. Если бы еще на более реальном примере. Т.к. на кубиках, иногда понимание принципа, не происходит.
супер
А какая есть альтернатива по заданию количества столбцов/строк вместо Бутстраповского подхода?
Мне казалось, что современные 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;
}
Но в итоге кнопка "Перейти к следующему" осталась неактивной.
чтобы достичь прилегания блоков слева и справа на каком-то англоязычном ресурсе предлагалось применять свойство justify-content:space-evenly.Т.е оно должно исправить ошибку разработчиков флексов по неполному набору свойств.Приходилось применять это свойство?
на 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;
}
width: calc(25% - 40px); - буду совершенствовать систему проверки
спасибо за ответ!
@@dmitrylavrik а почему не 100%, вроде можно их оставлять?((
Очень полезная тема и после ваших классных и понятных объяснений материала тренажер позволяет очень хорошо закрепить в памяти пройденный материал. Нужно немножко доработать удобство использования тренажера (описал как по моему субъективному мнению нужно это сделать - prntscr.com/jjdgko)
За шашлык лайк)
надо вам Дмитрий сделать упражнения так чтобы люди сами думали куда вписывать что надо - а то там получается что всё время линейный сюжет и все понятно что делать
есть отступы между строками и стобацами вконтейнере
Дмитрий, у меня к вам такой вопрос, нигде не могу найти. Можно ли методами PHP сжимать размер файлов изображений и вырисовывать их на загружаемой странице, без сохранения уменьшенной копии на сервере
Чтобы что-то отобразить нужно это где-то взять
Или с вашего сервера, или с внешнего
Разве, что можно настроить крон на удаление старых thumbnail'ов
Dmitry Korenko спасибо, это не подходит, так как, скорее всего, будет долго происходить. Дольше, чем выгружать просто оригиналы
Классы в 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;
}
В хроме в режиме эмуляции мобильных устройств при изменении ширины экрана элементы так и стоят по 4 в ряд :( и не соскакивают в 3, 2, 1. Почему такое может быть? Код списан с видео дословно.
Viewport наверно забыт)
Спасибо!
В 9 задании @media screen and (max-width: 900px) {
.item {
width: calc(100% / 12 * 6 - 40px);
}
}
что не так ?
У меня та же фигня получается. Думаю баг приложения т.к. работает адаптация
.item {
width: calc(50% - 40px);
}
пишу так же - не работает
Такая ж хрень. Тренажёр бомба, но дальше этого места он не работает.
50% - 40px - интуитивно понятно. 1 элемент занимает 50%. (2 x 50%) - 40px (margin с обеих сторон)
тренажер +
Идея хорошая!!!
Только после выполнения 9-го упражнения к 10-му перейти не получается.... кнопка не активна. Это только у меня так?
Значит код как-то немного не так написан, я в принципе все шаги тестировал.
@media screen and (max-width: 900px){
.item{
width: calc(50% - 40px);
}
}
я написал вот так:
@media screen and (max-width: 900px){
.item{
width: calc(100% / 12 * 6 - 40px);
}
}
Точно, надо добавить такой вариант в альтернативные.
Спасибо, Дмитрий тебе за то, что ты делаешь!!!
Когда много знаешь, возникает больше вопросов, нежели когда не знаешь ничего)
Что с 8 заданием в тренажере? не могу пройти, все сделал правильно на мой взгляд.
.container{
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.item{
width: calc(100% / 12 * 3 - 40px);
margin: 0 20px;
}
Решил его выполнить , что бы увидеть миксины ваши... , возможно просто так сбросите код миксинов?) без прохождения тренажера, раз он "возможно встал".
можно ли такое в 2021 сделать на свойстве gap?
caniuse.com/?search=gap в 2023 авось и можно будет)
Что я сделал не так в 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;
}
Система проверки ответов пока что несовершенна - width: calc(25% - 40px);
вы забыли пробелы возле операторов +-/*
Евгений Шовган пробелы я не забыл
извините
.container{
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.item{
width: calc(25% - 40px);
margin: 20px;
padding: 20px;
box-sizing: border-box;
}
и как теперь перестать думать о шашлыке :)
если не хочешь писать медиа запросы каждый раз вручную пользуй 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
}
}
}
width: ~'calc(25% - 30px)'; - обязательно дибо значения % и px заключать в кавычки, либо все выражение. и не забываем пробеля в выражении между знаками вычислений
ставить
* {
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 с минусом
Всё бы хорошо, но justify-content space-between часто делает не то, что нужно, при неполностью заполненных строках. Например карточки товаров по 4 в строке, а на последней строке их может быть 1, 2, 3 или 4 в зависимости от количества товаров в базе. При 2 и 3 justify-content space-between очень жёстко сделает)
для меня проще видео смотреть и параллельно делать в саблайме
что-то не понял - перемотал - сделал
как по мне, достаточно просто продиктовывать в видео все, что пишешь, чтобы можно было видео только слушать
а в тренажере, чтобы прописать несчастный маржин, нужно перечитать 5 абзацев текста, после чего теряешь всю нить работы.
oooo
Нормуль. Надо только над дизайном поработать. Без шашлыков, котов и прочего не комильфо.
Это очень круто! Обалденная идея, обязательно надо развивать!
Вот только с шага 7 не получается перейти, сделал скриншот: prntscr.com/jipay0
А padding задать? Первый пункт задания)
Да, все верно, моя невнимательность. Прошу меня извинить.
я на восьмом застрял((
А ты знаеш что гаврилов из вэйапа твоему смарт гриду за деньги обучает?
заче постоянно смотреть видео на твоем ютуб канале !?
Нет проблемы в том, что на сегодняшний день css-grid поддерживается на 83 %. Все браузеры, которые нужны - входят в эти 83 %. остальные 17 % это мертвый мусор, никому не нужный.
Очень сильно зависит от тематики сайта. Многие заказчики умеют по метрике смотреть процент использования какого-либо браузера. Глянул тут в интернет магазине качелей за последнюю неделю 6.8% людей с разных IE, в основном с 11. Заказчик никогда не откажется от такой части аудитории.
Так-то я тоже против старых браузеров, но 83% маловато.
тема огонь