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

CSS

Posted by Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

Personal project - Confused and stuck

Hi guys,

I've recently finished the HTML and CSS course and was advised in the video to not go any further until I've got some practice of my own in.

I've mocked up a website I want to build but I'm have some issues.

  • Logo not aligning to centre of nav bar
  • Nav links not sitting above each other floating right
  • Bringing text in a list to sit on an image with a transparent white background
  • Importing a font

Generally I feel a bit of a mess now I'm not following a tutorial. Any advice any can provide is welcomed.

I'm still not Github savvy so I've attached a dropbox link with some screenshots, HTML and CSS.

Thank you in advance.

https://www.dropbox.com/sh/tw95lzkawobkywi/AAAGIvbH5nU-QSL3wRv84M6Ia?dl=0

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Okay so this is a bit tricky to go through (maybe try throw your code in a Workspace and share a Snapshot or on CodePen or something), but here's a few pointers:

Aligning things vertically centered is a massive headache in HTML/CSS... Flexbox makes that a fair bit easier, but I guess it's considered slightly more 'advanced'. In any case, I recommend taking the CSS Flexbox Layout course after you've done the recommended prerequisite courses.

If you want the nav links sitting above each other on the right, just remove the display: inline declaration from the nav li rule. Looking at the wireframes/mockups, you probably want to do that only on the 'mobile' view/layout, and then add it back in for the 'desktop' layout using media queries (covered in CSS - Beyond the Basics or CSS Layout Basics).

Having the 'caption overlay' is one part of the CSS Layout Basics course, so I recommend heading down that path (doing the prerequisite first) to learn this.

Importing fonts is part of the CSS Basics course.

So, although you were recommended to practice before continuing on, it looks like what you're trying to achieve wasn't quite covered in the course you've completed and would require further learning.

Otherwise, you could spend a lot of time asking on forums or searching Google or Stack Overflow for answers that will probably be addressed in later courses anyways...