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

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points
Posted by Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

HTML/CSS-Is this ok?

Hi I am a newbie at these 2 languages and so created my own static website for practice. Can you offer your impressions, tips etc. for improvement? Don``t expect anything fancy :P Thanks for your time! (At the end is the finished product)

<!DOCTYPE html>
  <html>
    <head>
      <title>Homepage</title>
      <meta name="viewport" content="width=device-width">
      <meta charset="utf-8">

      <link rel="stylesheet" href="style.css">

     </head>

    <!-------Begin body here----> 
    <body>

      <header class="main-header">
      <h1>Wild Sahara</h1>
      </header>  

      <div class="intro">
      <p>Lorem ipsum dolor sit amet, cu liber commodo nostrud quo, ea solet blandit nam. Te tantas partem altera nam, ut atomorum consulatu laboramus eos. Te pri feugiat apeirian sententiae, dicam possit et mea. Adversarium delicatissimi his eu. Placerat omittantur his et, ea has mazim errem ludus. Mel utinam essent audire te, suas theophrastus his ei. Te agam docendi sadipscing has, ut soleat nostro qui, eam nibh putent ex. </p>
       </div>

       <div class="desert1" "group">
      <img src="sahara.jpg" class="photo-1">

        <p>Ad vocent aperiam platonem mea. Ut mei putent salutatus, ut has offendit      <br />  recusabo, eos ne delicata scriptorem. Liberavisse definitionem eam at.</p>
        </div>

      <div class="desert2">
      <img src="sahara.jpg" class="photo-2" "group">

        <p>Ad vocent aperiam platonem mea. Ut mei putent salutatus, ut has offendit<br /> recusabo, eos ne delicata scriptorem. Liberavisse definitionem eam at.</p>
      </div>

            <footer class="footer">
           <ul>
              <li><a href="#link">Algerian Sahara</a></li>
              <li><a href="#link">Chadean Sahara</a></li>
              <li><a href="#link">Libyan Sahara</a></li>
          </ul>

           <p class="copyright">&copy; Immanuel Jaeggi Creations 2018</p>

    </footer>
  </body>  
</html>

* {
 box-sizing: border-box;  
  }

/* Element selectors */

body {
 color: black;
 margin: 0;
 font: normal 1em/1.5 "Helvetica Neue", Helvetica, Arial; 

  }

h1 {
 color: white; 
 font-size: 5rem;
 font-weight: normal;
 text-align: center; 
 }


img {
  display: block;
 max-width: 800px;

 margin-right: auto; 
 margin-left: auto;  
}


p {
 text-align: center;
  font-size: 1.25em;
  width: auto;
  padding: 25px 30px 30px;

  }

footer ul li {
     display: inline-block;
     margin: 0 auto;
 }


a {
    color: lightblue;
  letter-spacing: normal;
  border-right: 1px solid black;
  text-align: justify;
  }




/* Class selectors */

.main-header {
      width: 100%;
      height: 500px;
      padding: 150px 100px 150px 100px;
      margin: 50px;

      background: #ffa949 url("Algeria_Sahara_Desert.jpg") center no-repeat; 
      border-radius: 10px;
      overflow: hidden;
      position: relative;

}


.photo-1 {
    width: 70%;
    border-radius: 10px;
   }

.photo-2 {
    width: 70%;
    border-radius: 10px; 
    }


.footer {
    text-align: center;
    border-right: 1px black;
    color: black;
    }


.copyright {
    font-size: 1em;
    color: firebrick;
  font: Helvetica

  }

.intro {
    max-width: 960px;
    text-align: center;
  }


/* Floated columns */

.desert1,
.desert2 {
    width: 46%;
  }


.desert2 {
    float: right;
  }

.desert1 {
    float: left;
  }


/* Float Clearfix */

.group:after {
    content: "";
    display: table;
    clear: both;
  }

/* Pseudo selectors*/

a:link {
    text-decoration: none;

  }

a:hover {
    color: firebrick;
  }

http://port-80-8f10o4xtfv.treehouse-app.com/

Moderator edited: Markdown added so that code renders properly in the forums.

2 Answers

calp
calp
10,317 Points
calp
calp
10,317 Points

You're doing great for a beginner. Back when I first started I couldn't put a page together this well.

Here's some of my first thoughts You should not add extra - to your HTML comments. When adding multiple classes you do not need to put the second class in new quote marks. Instead of 

<div class="desert1" "group">

You should have

<div class="desert1 group">

You should put alt tags on your images for screen readers and such. You need to be careful when setting widths to make sure you don't have a horizontal scrollbar on your website.

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points
Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

Thanks a lot for your helpful tips. Any special advice on my width settings? I did see the scrollbar and want to get rid of it, but am still unsure how.

Mark Casavantes
PLUS
Mark Casavantes
Courses Plus Student 13,401 Points
Mark Casavantes
Mark Casavantes
Courses Plus Student 13,401 Points

Hello Immanuel,

May I recommend this website for checking your work. Copy and paste your code into this website and it will identify the lines and errors you have.

For HTML use: https://validator.w3.org/nu/#textarea

For CSS use: https://jigsaw.w3.org/css-validator/#validate_by_input

For JavaScript use: http://www.jslint.com/

I hope you find this helpful to you.

Happy Coding,

Mark