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

Ryan Maneo
Ryan Maneo
4,342 Points
Posted by Ryan Maneo
Ryan Maneo
4,342 Points

Thoughts on this landing page?

I am constantly telling people that I am learning Web Development, and need practice, so a friend of mine asked me to make a landing page for a Game Server being made, (For the game "Minecraft") I am now finished, and pretty happy with it, but I want everyones thoughts on it too, any noticeable issues?

NOTE: Logo(s) not made by me, they were provided graphics for the project. https://wellandelconcept.000webhostapp.com

Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

Looks pretty dang cool man! :thumbsup:

Jacob McKinney
Jacob McKinney
6,796 Points

Your comment "Made By" is incorrect, you should be using a meta tag - <meta name="author" content="John Doe">

Your "Header" section is invalid as it doesn't contain a navigation, you actually have no true header on this page.

Your image tag is a self closing tag and should end as /> not just >

You have more than 1 H1 tag on your page, you can use one. In the other places, use H2, H3 etc tags.

In your H3 tag, you've over used the bold tag, using Strong around the entire thing or 1 bold tag and then encapsulating items that shouldn't be bold with CSS for this type of styling. You're also missing your alt/title text for the link to your twitter page.

Your alt tag should contain more helpful information inside of it. Say "WDL Studios Logo".

Ryan Maneo
Ryan Maneo
4,342 Points
Ryan Maneo
Ryan Maneo
4,342 Points

@jacobmckinney @Jacob McKinney thank you for pointing out those things. :) Is the header actually producing an error for you though? Or is it just bad practice to use a header tag without navigation? -- I used header because there technically was 1 navigation item, the @wellandel which leads to the projects twitter.

Ryan Maneo
Ryan Maneo
4,342 Points
Ryan Maneo
Ryan Maneo
4,342 Points

@Chris Davis thanks :)

1 Answer

Jacob McKinney
Jacob McKinney
6,796 Points

The only "error" to the header is that there are tags that are not closed before you close the header. Otherwise its just "as a practice" and for Search Engines.

Also, you can't put a <smaller> inside of a <p>, nor is there a tag "</br>", I think you're looking for <br />, as a break is a self-closing tag.

If you want a cheat, bookmark this site: validator.w3.org - Its a great free resource, straight from the w3c guys!

Ryan Maneo
Ryan Maneo
4,342 Points
Ryan Maneo
Ryan Maneo
4,342 Points

Thanks much, I added closing tags for the IMG's, replaced the redundant h1 tags, updated the alt tags, cleaned up some of the </br> tags (although, the top left description doesn't fully break without </br> at the end, weird), I also replaced <smaller> by just customizing the <p> further. I added alt/title to the twitter, Although, I don't really understand this: In your H3 tag, you've over used the bold tag What does this mean exactly? It seems to look / work fine, but I don't know.

Jacob McKinney
Jacob McKinney
6,796 Points

I was seeing your H3 as one line: 

<h3><a target="_blank" href="http://twitter.com/wellandel" alt="Twitter Link" title="Twitter">@<b>wellandel</b></a>
    <p id="wld"><br><smaller><b>Presented by</b></smaller> <br><b><i>WLD</i</b></b>Studios</br>
<i>The <b>home</b> of <b>opportunity</b></i></p></h3>

I was really just trying to reference: 

<p id="wld"><br><smaller><b>Presented by</b></smaller> <br><b><i>WLD</i</b></b>Studios</br>
<i>The <b>home</b> of <b>opportunity</b></i></p>

which would be much better as with something like:

<style>#wld span { font-size: 10px; font-weight: bold; } #wld i:first-child { font-weight: bold; } </style>
<p id="wld"><span>Presented by</span><br /><i>WLD</i>Studios</br>
<i>The <strong>home</strong> of <strong>opportunity</strong></i></p>
Ryan Maneo
Ryan Maneo
4,342 Points
Ryan Maneo
Ryan Maneo
4,342 Points

Ohh ok, makes sense. Theres some new syntax there, so I'll probably play with it a bit. Thanks again for your feedback :)