CSS and Boxes

CSS is pretty easy, actually. It’s just moving boxes around.
- A Front-End Dev Friend

Yeah, right. Tell that to my tired fingers and eyes.

Ok, so maybe he’s not too far off. It really is just moving boxes around. But how you move those boxes around can get tricky if you’re just starting.

Here’s my advice: use a background color on your element (not a border!) to get it in place.

And be wary of the semantics of your element. Do you want your elements to be inline, block, inline-block? Are you moving relative to the box you’re in or to the page?

A web search for “systematic web design” yielded nothing useful. As an engineer, I like systematic processes. I think I’m going to work on that - maybe it’ll be my little contribution to the webdev community.

Allow me to begin:

Systematic Web Design

  1. Fully understand what you want to do before you do it. Draw it out on paper, mock it up on whatever your favorite program is, and calculate. (I anticipate, since I haven’t quite gotten there yet, that this will be particularly useful when I get to responsive design.)

To be fair, I’m figuring things out as I go along. But for the future, I know I’ll be starting from here, instead of from scratch!