Find a piece of card layout design within a larger piece of web design from designspiration.

Then draw a box model on the design working from the outside to the inside. Don’t worry about “content” (text and images) only draw the boxes needed to build the layout.

Next create an HTML skeleton model that has notes of which elements will need to be flex containers and note widths of elements that are flex items. This syntax closely aligns with Emmet syntax.

And if you’re interested you might create the html using your model.


