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
Jason Rivera
3,088 PointsStruggling to comprehend CSS
I was doing perfectly fine right up until I got to the "values and units" part in CSS Basics of the Front-end track. I'm having a hard time understanding HOW do I know how many pixels, or rems, or ems to use for an element?
I am not an artistic person at all, so design is my biggest weakness. Everything else I'm fine with understanding and following along. So, I just kept struggling along and it just got even worse once I got to the layout and box model. At that point I just heard words coming out of his mouth and started to just tune him out.
Anyone else ever struggle as bad with css as I currently am? Any tips or advice would help. Thanks in advance.
Jason Rivera
3,088 PointsJoseph Wasden Thank you for the reply. And yes I am looking for a more general explanation as to the "why" certain units of measurements are used. Correct me if I'm wrong, but I know pixels are used when you want an element to be an exact size. Rems and ems are used for an element to be responsive.
Again I could be wrong but I think I may be right lol. I think what's confusing me is knowing when to use certain units of measurement and figuring out what the standard sizes are for certain elements. But, you did touch on that when you said it pretty much depends on what it is you're trying to do, which is understandable. Maybe I'm just overthinking all this.
As I said, I don't consider myself to be a designer by any means so maybe this part is just freaking me out just a bit lol.
Joseph Wasden
20,407 PointsIn general, it's a good practice to stick with one unit of measurement in the project. this creates consistent expectations when working with the DOM elements.
Also, while units of measurement like REM, EM, etc are relatively sized, try not to get too hooked on them as "The Solution" for responsive situations. You'll eventually learn about a concept called media queries, which is a fancy word for saying that your CSS will apply certain rules (like sizes for elements and text, for example) for elements based on the width of the viewport (meaning, screen, browser window, or whatever the user is using to view the webpage). Media queries are really where responsive design is handled most of the time. Relative sizing units like EM, REM, and Percentages are a compliment to that, but you could very well use something like pixels in responsive design.
Greg Kaleka
39,021 PointsYeah as far as pixels vs (r)ems, you don't have to worry about it too much as you're learning, but generally speaking, (r)ems are better unless you have a specific reason to use pixels, because they're responsive. As far as standard number of units for things, there really aren't any. Just depends how big you want stuff hah.
2 Answers
Greg Kaleka
39,021 PointsHey Jason,
Sounds like you're hitting "The Wall"! I'm going to copy/paste my answer from over there down below (and there are other good answers you should check out), but basically, we all hit the wall. CSS, Javascript, Python, Swift, whatever. Coding is hard, and it takes time to learn. If you're feeling overwhelmed or burnt out, take a break. Sometimes if something is hard to grasp it's ok to continue and come back to it. Sometimes, though, it's a sign that you need to slow down. Don't be afraid to go back several courses and do it all over again! You can't rush the process. Review and practice, and importantly, apply what you've learned. This is the only way to move knowledge from your short-term memory to your long-term memory.
A quick tip on CSS from one non-designer to the next: get a development environment set up where you can change code in your editor, and refresh the page in your browser to see the difference. Or go play around in a codepen. The important point is you need to just mess around with values and see what happens. Find a simple design that you like and try to copy it with CSS. I have no freaking clue what values to put in for how many pixels when I start. I pick a number, refresh the page, see that it looks terrible, tweak, refresh, rinse and repeat until it looks acceptable . Good luck!
Hey Jon,
Just to add to the good answers here already, yes, this is absolutely common.
One thing that I try to do as soon as I learn a new concept, here on Treehouse or elsewhere, is to do the thing they're teaching me, and then immediately apply it to something slightly different. For example, if you learn how to build a navigation bar, and the teacher walks you through building it with a logo and link to the home page on the left, and main page links in the middle, go to codepen and build exactly the same thing, then build a slightly different variant. Maybe put the logo on the right (gasp!), or style the links differently.
The idea is to generalize the knowledge you're gaining. The more you do this, the easier it will become to apply individual skills to various projects.
I also recommend reading this post on why learning code is so hard and the fact that you're likely to be frustrated for a while (maybe even more than you are now!). If you can, you should embrace the frustration, because it's necessary, will always happen (even once you're an "expert" you will experience frustration, just with more complex problems), and leads to learning
. However, you definitely should take breaks to avoid burnout. More and more, I am realizing that I come up with the best ideas and ways to solve problems when I am away from my keyboard, anyway.
If you can embrace the frustration because you live for that rush that comes with solving a hard programming problem, you've found the right field.
Good luck!
Cheers
-Greg
Jason Rivera
3,088 PointsJoseph Wasden Greg Kaleka You guys are awesome! Thank you so much. I actually had just finished styling my name with text and box shadows on Atom. With a little bit of Googling I was able to do it and was excited with just that little victory lol. Again thank you guys so much.
Greg Kaleka
39,021 PointsNice! Yeah, you have to content yourself with little victories, because that's all there is. Programming is just a bunch of little steps that turn into something big
Joseph Wasden
20,407 PointsGlad you had a win! Keep it up. :)
Joseph Wasden
20,407 PointsJoseph Wasden
20,407 PointsSometimes, the amount of new information in a topic can be overwhelming, or our apprehension about finally trying to learn something daunting, or both. You got this! Just keep bringing your questions to the community.
As far as knowing how many units of measurement to use for an element, that all depends on the context. Are you trying to understand why a certain number of units of measurement were used in one of the videos? if so, please post a link to that video. Or were you looking for a general explanation of units of measurement and how/why they are used?