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 trialKevin Faust
15,353 Pointshow will i be able to know what % to put or what number to put
Nick is able to just put down percentages like n big deal or knows the exact px to put. Will this come to my knowledge naturally over time because as of now I have no idea what % to use, what px to use, when i have to use px or ems, etc. all that stuff
3 Answers
Erik McClintock
45,783 PointsKevin,
There are no right or wrong percentages or pixel values, per se; it all depends on the needs of a given site's design! There are some values that you could find that are recommended for certain heights/widths/spacing, etc. to fit particular screen sizes or average touch sizes for mobile and things like that, but ultimately the pixel and percentage values are whatever you need/want them to be. The 940px max-width that Nick applies to the main wrapper of the site is a fairly standard size, or at least is in the ballpark of what could be considered "standard", but really it's just the value that works for the design of the site that he's building. Any "standard" values you might come across online are made over time based on "standard" or "typical" screen sizes. But, as always, screen sizes are changing, and thus, so are "standard" values for widths. There isn't necessarily a "right" size that you can learn or "know", it really just depends on your design. If you want your site to be the full width of any given viewport, well, you set your values to be 100%. If you know, though, that your design will start to suffer and break when it gets wider than 1000px (by setting and testing various values in your local development environment as you build your site), then that's how you land at 1000px as your max-width value. It's really that simple: Trial and error, on a site-to-site, design-to-design, section-to-section basis. Percentage values for things like the portfolio images come from Nick knowing that he wants images to be able to sit next to each other, two in row, so you translate that to mean "they both need to be about 50% of the width of their containing element, because two pieces fitting in one whole is equal to two halves, and half of 100% is 50%." From there, you just subtract your percentage widths a little bit to allow for some spacing around the images so they look nicer, so you land at 45% width. There is no law or rule or anything that you'll learn, really. It's just whatever works! You try one value, and if you see that it's too big or too small, you adjust until you find the right one. For these videos, they have their sites and designs planned ahead of time, so they "just know" the exact values to use. But in a normal situation, you will be trying different values until you find the one that works!
Hope this helps to clarify a little bit.
Erik
Jeff Lemay
14,268 PointsWhat you don't see in any of the videos/tutorials here is all the prep that went into the sites/projects they're building. Nick didn't just pick a number out of thin air, he (or someone else) already designed the site and is just giving you a quick run through how it was built.
In reality, a designer creates a mockup for you and you try to match it as best you can or you use a framework that has built in padding/margin/columns/etc.
Kevin Faust
15,353 Pointsoh i see, thanks! was just worried that i'm supposed to know all this stuff
Kevin Faust
15,353 PointsKevin Faust
15,353 Pointsahhh that makes a lot more sense now. Thanks Eric!