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

HTML How to Make a Website Creating HTML Content Structure the Image Gallery

Posted by Michael Jewell
Michael Jewell
Courses Plus Student 1,157 Points

Website Design Question

I am working on 'How to make a Website. Once I select to preview the website it takes me to an "index of/" page. I then have the option to select the html or img folders. That doesn't seem normal.

Also using this code I have an extra bullet point & can't seem to find the where the mistake is.

Lastly, after inputting the first code to load the image to the website, there is no image. And I have reviewed several time to find the error with no luck.

Any help or guidance would be appreciated.

Thanks

Justin Kraft
Justin Kraft
26,327 Points
Justin Kraft
Justin Kraft
26,327 Points

If at all possible could you paste your HTML you wrote please? It'd help in assisting, identifying the errors. Thanks

5 Answers

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

The bullet point comes up next to the image because you have ul and li tags around the image. That's the default behavior of the ul and li tags.

If you don't want the bullet point to show next to the image, you need to go into the CSS file and add the following:

section li {
    list-style: none;
}

That bit of CSS code selects the li tag within the section element and sets the style of the bullet points to none.

Michael Jewell
PLUS
Michael Jewell
Courses Plus Student 1,157 Points
Michael Jewell
Michael Jewell
Courses Plus Student 1,157 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Jewell | Social Marketing</title> </head> <body> <header> <a href="index.html"> <h1>Michael Jewell</h1> <h2>Social Marketing</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-01.jpg" alt""> </li> </ul> </section> <footer> <p>Ā© 2015 Michael Jewell</p> </footer> </body> </html>

Justin Kraft
Justin Kraft
26,327 Points
Justin Kraft
Justin Kraft
26,327 Points

I saved your HTML exactly and opened it in Google Chrome and it loaded without the errors you mentioned.

A few quick fixes that may or may not help:

  • Be sure to include the doctype at the top of the file !DOCTYPE html
  • Include opening and closing html tags after the doctype tag and below the rest of your content
  • Any information, e.g. meta and title tags for best practices should be placed within a head tag
Alexander Doby
Alexander Doby
2,627 Points
Alexander Doby
Alexander Doby
2,627 Points

I think that two of your problems are how you have your file tree set up. All of your HTML files should be in the top level of your file tree. There should then be a folder for images and a folder for CSS. It sounds like you have your .html files inside of a folder.

As for the bullet point? Where does it show up?

Michael Jewell
PLUS
Michael Jewell
Courses Plus Student 1,157 Points
Michael Jewell
Michael Jewell
Courses Plus Student 1,157 Points

The bullet points comes up next to the picture.

The html is a file then images are in a folder named img