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

General Discussion

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Posted by Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Code review feedback? Workspace snapshot - Practicing CSS Layout with a Treehouse course page!

Hi everybody! Does anyone have a spare moment in their day and want to look at somebody else's code? I just thought I could get some other students to look at my code and give me feedback to help me improve. I am typically looking at the areas of how I laid out the page with CSS, do you think the methods I used are appropriate? Is my HTML structure adequate? Or could I have done better with my HTML structure and could I have used better options with my CSS code?

I have made a practice area to practice CSS layout, and I decided to use one of the Treehouses' courses pages: https://teamtreehouse.com/library/positioning-elements-sidebyside-with-inline-display

I wanted to practice CSS layout because I feel like I hit a wall when I view other webpages and think about how I would approach replicating the design with my own code.

https://w.trhou.se/1zypz9weqz

Note: I haven't made this page responsive, just wanted to practice the method of laying out the page. It is therefore only coded for desktop screens.

Would appreciate anyone willing to check it out! Thanks.

1 Answer

varlevi
varlevi
8,113 Points
varlevi
varlevi
8,113 Points

Wow Jamie, this looks great! One thing I would change is the class names, which are a little long. Shortening them would certainly help with readability. For example, instead of class names like "video-resources" and "video-extra", you could probably just use names such as "resources" and "extras" because the page's purpose (the video) is already known. Another example would be "review-list". Because this is a class for a list, you could just say "review", and that would be fine unless you used "review" as a class name elsewhere, which I don't believe you did in this project.

Really the only other thing I would update is the footer tags. You placed them right below the video as the navigation for Teacher's Notes, Questions, etc. I would just remove these tags, or replace them with the generic "div" tags.

Other than that, great job keeping your code organized (the CSS comments were very helpful) and good luck on your Web Development Journey!

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Wow wasn't expecting that kind of a reply! This helped boost my confidence a ton! Thanks a lot for the kind words! :) I see what you mean about the class names and that helped out what you said, I seem to struggle when it comes to coming up with names for my classes. I see about the footer tags, an that the generic div tag would be better here since there isn't really any article footer visually on the layout. Thanks for pointing that out!

Thank you very much misterbooks5! :)

varlevi
varlevi
8,113 Points
varlevi
varlevi
8,113 Points

Any time, Jamie! I always have a tough time with class names as well. Glad I could help!