Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

mrx3
mrx3
8,742 Points

Just finished my practice site. I would like some ideas if you have time?

I've been practicing around with the concepts I've learned from Nick, Guil, and you people on the forum. My CodePen link is below for my page. I was wondering what you think of CSS and Markup Language? For instance is there anything you would change, is CSS grouped right, or anything else you can come with that's wrong with?

I know the colors are not the best, and it's not very interactive like most of the sites on the Internet. It's just for practice, and fun. I really enjoy making these sites, and learning on this site. Thanks in advance for the help and any comments.

CodePen: http://cdpn.io/zEtjJ

Richard Duncan
Richard Duncan
5,568 Points

The markup and CSS look good to me, I can't see any issues it's nice and clean you've kept it separate which is good.

If I were you in terms of the next step maybe think about adapting this to make a responsive design, or changing the footer so that it is flush with the bottom of the page regardless of the content depth or both.

Solid work though keep it up!

3 Answers

Mr. X this is a great start! I'm in a similar spot in my learning so it was helpful for me to take a look through your work.

A couple of things I noticed....

One thing that initially caught my eye was a bit of a spacing issue with your nav. It appeared to be off-center to the right ever so slightly. I didn't have time to figure out the culprit in the CSS but there is something amiss.

A suggestion I would make when organizing your CSS is to group it by page section, flowing from top to bottom. It's really all personal preference but I like to have my general rules at the top, then focus on the main sections of your site, moving progressing downward. Header, nav, footer, colors, etc. Also, it may be helpful to create a bit more visual separation between your comments and actual CSS.

Lastly, and this is more of a suggestion for when you get into bigger projects, but I'd take a look at your HTML indentations. They made the code a little difficult to follow at times.

A question I had for you too...did you add the nav class=nav for a specific reason? I'm still a novice myself and I found that curious.

Keep up the great work!

mrx3
mrx3
8,742 Points

Thanks for the kind comments! I don't really know why I gave it a class, I should have just left it nav. I did notice as well that my nav is a little off center, I've been doing some research on line and looking for at other examples. I to try to make the CSS like you mentioned, Start at the top, and work my down. I just made a practice resume site with a background like this: http://html5up.net/twenty and this: http://w3layouts.com/wildflat-corporate-flat-responsive-web-template

These two sites I found are awesome, I love they way they look. I made the menu exactly like you see here. Sometimes the HTML gets large that it's hard to keep everything in order, and I need to focus on exactly what you said, "Try to keep a little more organized. Thanks again for the kind comments Benjamin!

Just figured out the positioning issue with your nav. Add padding to your nav ul selector with a value of 0 to reset the padding and center the nav. Like this...

nav ul {
  margin: 0;
  padding: 0;
}
mrx3
mrx3
8,742 Points

Thanks Benjamin!!! Much appreciated!!!!!

No problem. If you need another review just let me know!