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 HTML Forms Choosing Options Going Further

I'm finding it hard to practice CSS. I just don't know which typography, colors, sizes(...) to use. HELP!

I've been studying CSS for sometime now but I'm still not very good at it. The problem is that I don't have any projects to work on and I can't think of anything. Moreover, CSS involves art! I just don't know which typography, colors, pictures, sizes to choose. The instructors seem to know beforehand what would look better using this and that...

How have you guys been practicing CSS?

I desperately need to practice it!

7 Answers

Konrad Pilch
Konrad Pilch
2,435 Points

Just copy other sites ^^ Thats the best. You will learn CSS HTML and color theory as well. E.g copy treehouse index or treehouse library soemthing.

Thank you! ;)

Konrad Pilch
Konrad Pilch
2,435 Points

:) I learned that the best way because if you can look at any website and do it, then you know that you can do any website you want . I started like that . I was putting a nav bar on top, then i put a nav bar verticaly and then i put both. And so on.. Its good because you have different things in difference places with different style etc.. so if you practice the CSS , and you can do it, then it will be perfect. But one thing i recomend you is to dont post challenges/problems from your code into treehouse straight away. Try to play with it and that way you will see what does what . Ill say stay up to max 2h on one problem/challenge . When i started int HTML and CSS i did that and had many challenges and i had to spend all day to find to do one thing. But that gaved me a very good surrounding in the HTML and CSS in 3D how it looks and workd if you know what i mean .

Look also for colours. And i reccomend you to read on color theory as well e.g Blue is for social, red is for food etc.. I did learn better that way as well. When i go on a website now days, i check that website out . Sometiems or quite often source code as well.

Then if you want to be a front end developer and make fancy looking websites, go for JS and master it ^^ and probably some PHP for a start up if ur interested. As server side language to make simple websites and get out there faster etc..

Hope this helps even more!

Konrad Pilch
Konrad Pilch
2,435 Points

Heresthe best color wheel you can have . And here you have great designs. .

Konrad Pilch
Konrad Pilch
2,435 Points

Oh , also go on CSS Tricks and learn the best practices. That's what I do now.

Rob Turner
Rob Turner
1,458 Points

Sounds more like you are struggling for inspiration. My suggestion would be to explore and see what's out there on the interwebs:

  • Play around with colors using Adobe Color Wheel
  • Check out some fonts online (eg fonts.com)
  • See what other people have put together on portfolio sites (eg behance.net)

Hope this helps.

Thank you! ;)

Have you taken the how to build a website course by Nick Pettit. If not I would recommend taking it you deal with mostly html but you also work with CSS as you build the web site you can branch out on your own with color and design and just experiment. If you've already taken the course then the hard part of writing the code is done and you can take what you already have and just play with it. Start with basics and just keep experimenting. There are also web sites that have the hex and rgb colors listed so you don't have to overwhelm your self with remembering everything. You can also reference the html and css index so again your not overwhelmed with trying to remember everything. There are a lot resources out there and once you start to experiment with all that you can do I think you'll feel a lot less overwhelmed.

Once you've played around with that a fun and simple way to practice is to make a blog. I personally don't blog and I wont ever use the one that I'm making, but it's a simple site to design and you can really go any direction with it. I love to cook so I'm making a site that I could "blog" about my latest recipe and I have an archive of all my recipes, an about me section, and links to other peoples recipes that I've found online. Again I'll never really use it but the point is to practice.

I hope that helps, let me know if you need more ideas!

Thank you! ;)

You could always look at the responsive sites listed at http://mediaqueri.es/ for some inspiration.

You could also use a color wheel to see what colors work together http://www.sessions.edu/color-calculator

Konrad Pilch
Konrad Pilch
2,435 Points

I think if you use bootstrap or foundation , it will teach you good html which will make it better as well if you make the design , and adjust it to mobile, it will teach you a lot as well. Then you should move out of it and do it without the framework. If you use it before, you will get better idea of how things work .

But you should deffinitely check out treehouse CSS courses like Rob Tuner said. Their really worth it. Its not hard, its just the matter of understanding. You can do it eaither the asy way, or either the better and harder way which at the end i think will be worth more but it will take also code more. But once you coded it one, you can re-use it anyways. But at the beggining dont reuse any code and just code it frmo your understanding and memory . Just look out fro hints or look on google for manuals instead on vidoe to see if you can find the answer your looking for. Try to focus on one thing specific . E.g this week im going to learn how to do a hamburger menu, and do that. Next week how to do a responsive feed fro small mobile,normal mobile,tablet, laptop, small desktop, medium desktop, and massive desktop. They are the same in a way but you should deffo check out iphone s4 as its small and look how it will look on something bigger like iphone 6 . As well as on tablet and different screen sizes. Have in mind 27inches imac . Things on it , looks smal but the screen its self is very wide , rectangular so yeah.

Hope this helped .

I'm having a problem with understanding sizes in html and css. I dont quite understand where I am starting from to make proper size assessments for pictures, banners, etc . For example if I want to place two separate pictures in my header how do I determine what size the photos should be, how much room I have in my header, how the pictures will be kept separate or place close together-when do I use pixels or em's...can any one recommend something that has been written on this or direct me something here in treehouse that will deal with my struggles with sizes?

Rob Turner
Rob Turner
1,458 Points

These points are covered in the Web Design track. It might also be worth checking out this course when it's released

http://teamtreehouse.com/library/responsive-images-2/upcoming

Thanks for the helpful tips! Immensely appreciated!