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
Ibrahim Rodríguez
Courses Plus Student 2,495 PointsHelp with markup
Hi guys,
I hope you are doing okay. I just designed a quick project to practice my HTML/CSS training, but I'm having hard time defining a final markup before starting css. See the links of the design and markup below:
Design: http://cl.ly/image/3k1D47210L0O
Markup: http://codepen.io/ibby/pen/vEuxB
So here you have my questions/problems.
I'm not sure if I made a good use of HTML5 tags, I'm doubtful with section tag, any tips on improving divs or markup is appreciated.
What's the best approach for the little phone icon on the top bar? An image apart or apply the image as background of the <p> tag?
I'm not sure yet about how should I position elements, is it better floating them or just positioning them relative and absolute?
Thanks for your help in advance and sorry for so many newbie questions.
3 Answers
Nick Pettit
Treehouse TeacherGood questions! I'll try my best to answer them.
HTML5 Tags
Your usage of the <section> element looks good to me, although you may want to consider breaking up the page a little more. The <section> element means that the content is grouped and all relates to the same idea or theme. Put another way, if you think about the page as an outline, sections might be individual items in that outline. Each new headline (<h1>, <h2>, etc) might merit a new <section> as well, if they're totally new ideas.
The <div> element doesn't have any semantic meaning. It's good for when you need a block level element to group objects but you don't want to convey anything in the structure.
Iconography If you just have the one icon, I think it's best to set it as the background of the element and add some padding to the left side of the element so that it shows up. Make sure you set repeat to none.
If you have lots of icons, you may want to consider using an icon font. Here's a good example of how to use them.
Page Layout It depends on the element, but I would try floating them first. Positioning can be very tricky. That said, this site looks like a great candidate for a CSS framework. You should try out Zurb Foundation or Twitter Bootstrap.
I hope that helps!
Ibrahim Rodríguez
Courses Plus Student 2,495 PointsThanks so much for helping me out Nick Pettit !
Ibrahim Rodríguez
Courses Plus Student 2,495 PointsI have a last question Nick Pettit. Using these frameworks will distract you from learning the basics of HTML/CSS?
Nick Pettit
Treehouse TeacherYou can learn the basics by using the frameworks. I would open up the code and make sure you understand what they're doing for you. That way you can learn from a good example, but you're also able to debug your code easily if something goes wrong.