Paper to Pixel

For a long time I was looking for a perfect way to start this series, a statement that would summarize it all and the only thing that ever came into my mind was “you already know it, you just don’t know how to use it”.

I think one of the biggest misconceptions in relation to front-end development is a belief that it actually is programming and thus requires such skills from a person doing it.

Of course saying that there’s no programming in front-end development at all wouldn’t be completely true although those elements do not appear on a basic level. What we will be discovering is in fact closer to what you do everyday as designers than to programming.

But let’s start with what css coding is all about, in simplest terms, skipping the history and ideology behind it. Coding with CSS is just a way of recreating your layout with code, words, commands and numbers, nothing else. It is a way of telling web browser where elements are positioned on a page, what they are made of and how they behave if they are interactive.

That sounds familiar right?
If you look at a text-layout software that you would use in your everyday work (I will be using inDesign or QuarkXpress as examples here) and open any already designed document in it, if you look up (inDesign) or down (Quark)  you will notice a properties bar (inD) or measurements palette (QX) containing no more no less but your artwork described with commands (type, text formatting etc.) and numbers (positioning, sizes). In fact, although it would be a hideous task, you could recreate your artwork using those values (well, with some exceptions but they are of no importance here right now)

CSS works in almost exactly the same way, it is just a way of recreating your artwork with commands and numbers although this task in much less hideous.

inDesign properties bar showing X and Y position of a box as well as it’s width and height.

An excerpt from a CSS code showing size of an element (width and height) and it’s positon on a page (distance from top and left edge of a page)

Another similarity is the way you place elements on the page. With CSS, just like your design elements on a page, elements are placed in boxed or containers. Of course in most cases you can’t see them, they are just virtual containers that you create especially for the object or element but the general idea is the same.

A fragment of a web page with all boxes shown in red, those boxes, their positions, what they contain and how big or small they are have been described in CSS. Web browser interprets the code and displays what you see above.

Of course there are some differences between the two media, quite a lot of them actually and we will be going through them during the course of this series but the most important thing for now is to realize that the principal of the two is very similar and the rest will be plain simple.

As I said, you already know most of it, you just don’t know how to use it.

(all copyright to examples shown: myself, no other graphics than my own have been used here)

See Also:

Part 2 of the series: How does the code work?