After months of anticipation, last week finally marked the beginning of Starter School.

We started out with some basic HTML and CSS - which I thought would be easy for me since I had been working with them all summer. It turns out I don’t know CSS as well as I thought I did. Here are a few concepts that I learned that helped me become less of a CSS noob.

CSS Box Model

After months of carelessly slapping margins and paddings on HTML elements, my teacher, Jeff Cohen, taught me that there’s actually an important difference between the two.

box model

Margin is different from padding in that it clears the area around the border of the element and has no background. This means that if I have a background color on my element, it wont show up in the margin. With padding, an area is cleared around just the content. This allows a background color to extend the the edge of the padding.

Inline-block

Going in, I had an idea of what inline and block were, but I had no idea what an inline-block was used for. A great resource for this at dustwell.com. It combines attributes of both inline and block by creating a rectangular region like a block, but doesn’t create any new lines like an inline element. This allows you to create larger elements next to each-other.

Frameworks are your friend

After trudging through CSS manually, Jeff introduced us to Twitter Bootstrap (which I already had a bit of experience with, and was incredibly happy to see). The takeaway from this was that when your not an expert designer, the conventions and abstractions that a framework gives you are extremely helpful and are worth taking advantage of. You can build a prototype much faster than you would using your own CSS classes.

Jeff informed us that this past week’s experience with HTML and CSS was as far we would go until the design semester. This week starts Ruby and next week, Rails.