Being a jack of all trades, I constantly have to deal not only with implementing the back-end and front-end logic, but also with breathing life into existing design files.

The process almost Just Happens™ to me without any additional effort, but I’ve been asked a few times recently about how a CSS-averse developer can get started with that.
This post is going to outline my approach to it.

Note that I won’t be providing the actual CSS for every step or even the end result.
The goal here is to understand the process on the higher level, which you can apply to many other cases.
There will be some references to CSS and tips, though, of course!

If you want to have an overview of the post for your references, download the cheatsheet below.
Keep on reading to see the actual steps.

Exclusive bonus: Everyone can do this! Download the free Design to CSS cheatsheet that you can print out or have handy on your desktop.I'll email it to you right away so you can access it from anywhere!

No spam. I will ocassionally send you my posts on JavaScript and React.

Exclusive bonus: Everyone can do this! Download the free Design to CSS cheatsheet that you can print out or have handy on your desktop.I'll email it to you right away so you can access it from anywhere!

The Case

Trying to come up with a case to tackle, I’ve picked Product Hunt as a solid example.
Its structure is what you’ll see on many other websites.
Its aesthetics are clean and simple.

Take a look:

Imagine you are detail-blind

Like you’ve put on prescription glasses that don’t match your vision.
You see everything in the blur, and you can’t tell any detail.
Now look at the Product Hunt website.

You’ll be seeing something like this:

This is the very bare bones of the app’s layout.
It’s also a great starting point — you don’t have to deal with text and images and links and stuff like that.
Only pure, raw structure.

I find it useful to think in terms of “blocks” at this stage.
And these blocks have other blocks, and so on.
How many can you spot there?

In pink are the two top-level blocks: topbar and content area.
These span full-width and usually contain other blocks.

Content area contains three column blocks, which in turn host several “cards”.

This is where I fire up my trusty editor and start encoding this basic layout.

First, I write the HTML with divs that are structured like my higher-level view of the layout blocks.
For example in this case: