Today was the first day of the spring 2013 cohort at Bitmaker Labs. I’ve been waiting for this day for the past 2 months, and it certainly didn’t disappoint. There’s a great group of people here with very diverse backgrounds (certainly far more impressive than mine!). I think I’m the only one who’s worked full-time as a software developer. I’m happy to be here with people who are excited to learn, the enthusiasm is contagious and keeps me going.
The day started with a presentation selling everyone on the idea of working as a software developer, and a tour of “startup culture”. This was followed by a live-coding session to review HTML and CSS. We spent the rest of the day in pairs working through a CodeSchool module.
While HTML is a bit of review for me, CSS has always been one of my biggest weaknesses. Going through the CSS Cross Country course has been a great help. Here are some things I’ve learned so far:
First, just a simple shorthand for the padding/margin properties:
Second, element positioning. It’s really hard to describe without drawing diagrams (I’ll have to figure out how to get images with thumbnails in Octopress!), but let’s try anyway:
Consider a page with a single square
<div>tag. If you set its
absolute, you can say
bottom: 0px;and it will go to the bottom of the page.
Now, consider nested
<div>s: a big outer square and a small inner square. Let’s say you want to position the inner square at the bottom of the outer square. If you use the strategy above, it will just position it at the bottom of the page (as in the first case), not at the bottom of the div.
The solution is to set
position: relative;on the outer div. But why does this work? The “aha” moment for me was realizing that the default
static. When absolutely positioning an element, if its parent container is
static(and all its parent containers are too), then you’re positioning relative to the window. If it’s anything other than
static, you’re positioning relative to that container.
Yeah, that was tough to explain.
Third, clearing floats. If you float an element left or right, you take it out of the flow of the page. If you have a float nested in a container, the float may overflow the height of that container. The container won’t have it’s background extended to contain the float. You fix this by clearing the float. There’s two ways to do this:
- Creating an empty
clear: both;as the last element of the container
- Using the clearfix
It touches briefly on CSS sprites, which is a technique for improving performance by reducing the number of small icon-sized images that need to be requested.
Tonight, I’ll be working a little more on my resume. At the very least, I want to fix the background image so that it’s got a full page background, right now if you zoom out enough you’ll see the background repeat, which is ugly. Sometime further down the road, I want to incorporate responsive design into the mix; I’d love to see it display nicely on a phone without resorting to zooming.