Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Craig Kendricks
Craig Kendricks
3,413 Points

Learning "Pixels"

Hey guys,

I notice everyone that is teaching coding seems to have a really good grip on "pixels".

When they set the width of a container or the padding and/or margin of an element, they are quick to decide on the amount of pixels they might need.

How are they getting so comfortable with what a certain amount of pixels might look like? Is this from design experience? Does this just come over time?

Examples: Teacher sets width of body to 940px. How in bleep did he come up with 940px?

Margin seems popular at 5px. Padding at 2.5-5px.

Thanks!

3 Answers

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

A lot of it comes from experience and just trying things out. For you, I'd say its all about testing. Put in some random number in pixels for the width and see what that gets you. You'll either think, that's too skinny or that's too wide. Then adjust it by how much you think you'll need. After a while you'll start to have your go to widths for different situations. And that goes with any other spacing and size decisions. Do the same with fonts and borders and so on.

Herb Bresnan
Herb Bresnan
10,658 Points
Herb Bresnan
Herb Bresnan
10,658 Points

Hi Craig. I'm pretty sure that in preparation for making these videos, they have every detail laid out before presentation to save time. There are apps that can help you do this. If you are using Chrome, head to their app store. In developer apps, look for the "Page Ruler" app. There are several other like this (and may be better) but this should provide you with some help. Good luck to you. The more you do the more you learn.

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

The 940 one is directly connected to the standard width of websites from a few years back. 960px was considered to be a catch-all for desktop screens, so it stuck.