CSSBattle.dev is an awesome website that helps you master concepts like positioning, flex, grid, pseudo-elements, shadows, and a lot more!

Taking on any one of the many free and fun challenges they have hosted lets you train your ability to take a design and break it down into parts and requirements. This helps you understand how to structure your markup better.

Once you’ve got the architecture of the HTML in mind, you can then make use of all the properties that are available in CSS to craft the design. You’re gonna be using stuff like display, position, margin, and background a lot for these challenges.

See the Pen CSS Battle #7 by Brian Michael Poblete (@brian-pob) on CodePen.

And while it may be impractical to actually create graphics this way, you start to learn how these properties work and how to apply them.

You can check out this particular battle at this link.