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
Peter Edward
414 PointsFirst Theme Update
Been trying to create my first template similar to this http://i.imgur.com/1H2eubr.png . Here is how far I got after about 1 hour. http://i.imgur.com/Jt9w5px.png . I have no idea how I would get the boxes like in the first image. I also need help getting the padding and such for each menu item, and not the whole menu list. Thanks!
3 Answers
John Locke
15,479 PointsI usually approach themes piece by piece. I get the header and footer right because they repeat on every page. The price boxes are each a floated div. Each one is going to take box shadow. Set your font sizes for each element in those boxes, use classes in your CSS to set those. The button can either be an HTML5 button, or an anchor tag styled as a button. Use the shopping cart as a background image on the link. Add a gradient to the button, BOOM you're done.
If this seems overwhelming, do it piece by piece. Analyze other sites, look at the source code. Use Firebug or Chrome Web Developer Tools to see how other sites do it. Add your own style to it. There are no shortcuts to learning, but the more you dig in, the easier it gets.
James Barnett
39,199 PointsPeter Edward - I noticed you haven't done the CSS Foundations course yet, you should probably finish that before trying to re-create a whole template like you are here.
Peter Edward
414 PointsWow James, thanks a lot. I didn't even know those lessons existed within the basic package (Not gold). Thanks!