Dave Ceddia

Implementing a Mockup: CSS Layout Step by Step

Screenshot of “Implementing a Mockup: CSS Layout Step by Step”

https://daveceddia.com/implement-a-design-with-css/

If you don't know yet how to do Web layout with CSS, or feel like struggling with it, this great (baby) step by step tutorial will help you a lot:

You can spend hours trying random CSS properties, copying and pasting from Stack Overflow, and hoping to stumble upon that magical combination that will produce the layout you want.

If your usual strategy is to approach layout in an item-by-item way – put A over here, and now that A is in its place, I want to put B over there… well, that’s a guaranteed route to frustration. CSS doesn’t work like Sketch or Photoshop.

In this post I want to show you a way to approach layouts wholistically, as a cohesive problem to be solved.

an example of Dave Ceddia's rough but efficient illustrations

We’ll go through a small example, start to finish, and I’ll explain all the CSS along the way […]

Really brilliant!

  2. Note from 16 December 2022

    While we wait for browsers to implement the text-wrap: balance; #CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:

    https://codepen.io/nhoizey/pen/mdjbrVx

    Tell me what you think!

    But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅