Если каждый раз гуглите «как центрировать div» — попробуйте эти две штуки. Серьёзно, 30 минут на каждую — и CSS-раскладки перестанут быть магией.
➡️ Flexbox Froggy
24 уровня, на каждом нужно написать CSS, чтобы лягушки попали на свои кувшинки. Начинается с простого
justify-content: flex-end, заканчивается комбинациями из flex-direction, align-items, flex-wrap и order. К концу игры свойства flexbox уложатся в голове на уровне мышечной памяти.Играть: https://flexboxfroggy.com
➡️ Grid Garden
То же самое, но для CSS Grid. 28 уровней, нужно поливать морковки, задавая правильные
grid-column, grid-row, grid-template и прочие свойства. После прохождения сетки перестают казаться чем-то страшным.Играть: https://cssgridgarden.com
Обе игры бесплатные, на английском, но интуитивно понятные — там буквально два слова текста на уровень.
@devs_books