Designers ♥ Code

V: Hey Thijs, how about we start writing that book we talked about for a while?
T:

V: Word.
T: Whatdoyouwannaknow
V: All the things
T: Why?!
V: I want to become a 🦄
T:

What do you know already?
V: I done some Javascript, HTML and CSS. Even some AS3 and Processing back in the day. Anything to get the job done. I'm comfortable using variables, functions, listeners etc, but I consider myself a tweaker. I want to get to a point where I can code my own portfolio from scratch. Sounds like now is a good time to go deep into HTML/CSS again. What would be the first thing to learn?
T: Positioning elements, once you understand how to put things on your screen the way you want, you'll have that warm and fuzzy feeling inside that we all secretly yearn for ;). Can you send me a very simple design of some elements you want to position on a site?
V: How about this? I remember vertical position was always a fun one.
500x300px #A6CFE2 centered box, 2px rounded corners with centered text, Avenir Medium
T: Alright! Look in the 1-center-all-the-things folder! I've created an index.html file with comments in the code to get started! Let's go over each operation (positioning, color, font, overriding) step by step! Let's start with the positioning, do you see and understand what I did there?
V: Absolute positioning makes sense to me as a designer. Looks like to left is the reference point of the Box, just like in Sketch. Any downsides to using absolute positioning? I added the .sketch file in case you want to make some annotations.
T: I've added 2 images below that better illustrate how positioning works in CSS. The first one show the absolute positioning while the second one shows the margin re-positioning. Absolute positioning works well enough in most cases except when you don't know the width or height of your box, that's another story, do you want me to explain how to position something with variable width/height?