Code Critique

Question

Hey! I'm looking for a critique of the my index.html code and the CSS for it also. I have only finished the mobile version so please keep that in mind. Any help would be greatly appreciated!

HTML

<!DOCTYPE html>
<html lang="en">
  <head>  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laura M. Hibbard :.: Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <div id="contentwrap"><!-- START #contentwrap  -->
<!-- START HEADER --> 
    <header>
        <p class="p1"> Laura M. Hibbard</p>
        <p class="p2">Web Developer</p>
        <nav>
            <ul>
                <li><a href="index.html" class="selected">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="resume.html">Resume</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav> 
    </header>
<!-- END HEADER -->   

<!-- START SECTION -->   
    <section class="about">
        <figure><img src="images/laura2.jpg" alt="A Picture of Me" /></figure>
        <p class="1">About Me</p>
        <p>  Growing up there were many things my parents instilled in me however of the most tangible attributes has been self-reliance. 
             As a homeschooling student you learn how to identify what needs to be done and develop the process working toward completion.<BR><BR>
             These skills have helped me to take personal responsibility and initiative. For me great Developers are those embracing these attributes, 
             creating success for your company as well as for me.
        </p><br><br> 
        <p class="1"> As a Developer I would bring the basic ingredients you need:</p>  
        <ul>
            <li>
                  I am a passionate people person who can communicate effectively both individually and in a team environment.</li>
            <br>
            <li>  I have a strong work ethic with the ability to take personal responsibility for outcomes, desire to learn 
                  and grow contributing to the overall success of the project. </li>
            <br>
            <li>  I am committed to work thorugh any roadblocks along the way.</li>
        </ul>     
        <p>   I would appreciate the opportunity to discuss the project you are seeking to complete as well as any other 
              you sense may be a fit me. I genuinely hope that you will consider me as a potential Developer.
        </p>
    </section>
<!-- END SECTION -->

<!-- START FOOTER -->
    <footer>
        <a href="https://www.elance.com/s/neotericbelle/" >
        <object width="300" height="360"><param name="movie" value="https://images.elance.com/media/flash/widget/profile/profile-widget-300.swf?userId=7755981&catId=&defaultTab=0&rid=4R3L2"></param><param name="allowFullScreen" value="false"></param><param name="allowscriptaccess" value="always"></param><embed src="https://images.elance.com/media/flash/widget/profile/profile-widget-300.swf?userId=7755981&catId=&defaultTab=0&rid=4R3L2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="360"></embed></object>
        </a>
        <ul>    
            <li>
                <a href="https://www.linkedin.com/pub/laura-hibbard/65/2b5/295"><img src="images/linkedin.png" alt="Linked In Profile" /></a>
                <a href="https://bitbucket.org/NeotericBelle"><img src="images/bitbucket.png"  alt="Bit Bucket Profile" /></a>
            </li>
        </ul>
        <ul>    
            <li>
                <a href="https://www.linkedin.com/pub/laura-hibbard/65/2b5/295"><p>Linkedin</p></a>
                <a href="https://bitbucket.org/NeotericBelle"><p>Bit Bucket</p></a>
            </li>
        </ul>
        <p class="copy">Copyright &copy; 2014  Laura M. Hibbard </p>
    </footer>
<!-- END FOOTER -->  

    </div><!-- END #contentwrap  -->

<!--    <img src="images/bitbucket.png"  alt="Bit Bucket Profile" />   -->

  </body>
</html>

CSS

/*****************************************
  GLOBALS
 *****************************************/


body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #636467;
  background-color: #bfdecc;
  border: 1px solid #ede0d8;
}

body a {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #636467;
    padding: 3px;
    text-decoration: none;
}

body a:hover {
    position: relative;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ede0d8;
    text-decoration: none;
}       

#contentwrap {
    margin: 0 auto;
    max-width: 100%;
}

/*****************************************
  END GLOBALS
 *****************************************/


/*-----------------------------Start Media Queries--------------------------------*/




@media (max-width: 480px) {



/*****************************************
  START index.html 
 *****************************************/


/* START HEADER */

  header p.p1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 2.6em;
    font-weight: 300;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding-top: 5%;
    padding-bottom: 0;
    text-align: center;
  }

  header p.p2 {
    font-family: 'Ubuntu', sans-serif;
    display: inline-block;
    width: 100%;
    padding-bottom: 30px;
    padding-top: 1px;
    margin: 0;
    text-align: center;
    font-weight: 300;
    font-size: 1em;
    border-bottom: 1px solid #ede0d8;
  }

  header nav  {
    width: 100%;
    text-align: center;
    z-index: 100;
    display: inline-block;
    float: right;
    font-family: inherit;
    font-size: 2em;
  }

  header nav ul{
    background-color: #ffb28e;
    margin: 0;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
  }

  header nav ul li {
    display: inline;
    width: 100%;
    height: 10px;
  }

  header nav ul li a {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: .5em;
    color: #636467;
    padding: 3px;
    border: 2px solid #ffb28e;
    text-decoration: none;
  }

  header nav ul li a:hover {
    position: relative;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: .5em;
    color: #636467;
    text-decoration: underline;
    padding: 3px;
  }

  header nav a.selected {
    position: relative;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: .5em;
    color: #636467;
    text-decoration: underline;
    padding: 3px;
  }

  /* END HEADER */


  /* START SECTION */
  section {
    background-color: #cfc6bd;
    border-top: 1px solid #ede0d8;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  section.about img {
    margin-top: 10%;
    border-radius: 50%;
    border: 1px solid #ede0d8;
    width: 218;
    height: 262;
    margin-bottom: 30px;
}

  section.about p {
    font-size: 1em;
    text-align: center;
    font-weight: 300;
    padding-left: 13px;
    width: 90%; 
    margin: 0;
    padding-bottom: 20px;
  }

  section.about ul {
    font-size: 1em;
    text-align: center;
    font-weight: 300;
    margin: 0;
    width: 80%;
    padding-bottom: 25px;
  }

  /* END SECTION */



/* START FOOTER */  

  footer {
    border-top: 1px solid #ede0d8;
    padding: 0;
    margin: 0;

  }

  footer ul{
    display: inline-block;
    width: 100%;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

footer object {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 15px;
}



footer li a img {
    width: 30px;
    padding: 0px 20px 0px 20px;
    margin: 0px;
    text-decoration: none;
}

footer li a p {
    display: inline-block;
    font-size: 1em;
    text-align: center;
    font-weight: 300;
    padding-left: 15px;
    padding-top: 0;
    margin: 0;
}

footer p.copy {
    margin-top: 30px;
    margin-bottom: 0; 
    clear: both;
    text-align: center;
    border-top: 1px solid #ede0d8;
    border-bottom: 1px solid #ede0d8;
    background-color: #ffb28e;
    padding: 5px;
}

/* END FOOTER */


/*****************************************
  END index.html 
 *****************************************/



}

Answer 1 · 2014-11-18T15:24:23Z

November 18, 2014 3:24pm

Few quick suggestions;

I wouldn't recommend using br tags to act as margins. If you need more space, increase the margin-bottom of the element through css. This makes it a lot easier when you want to tweak spacing in the future and also gives you a lot more control.
You should add the title attribute your links for accessibility. Give it the same level of importance as an alt tag.

Apart from that, it's fine!

Answer 2 · 2014-11-18T14:58:04Z

November 18, 2014 2:58pm

Hi Laura,

One thing that could maybe improve the CSS would be grouping some of the same styles such as font-family so you don't have to repeat them but overall the code looks good and well indented/commented.

If I'm being really picky I'd leave the paragraphs in the HTML on one line rather than break it on to multiple lines in the code but that could just be me :)

-Rich

Answer 3 · 2014-11-18T16:10:14Z

November 18, 2014 4:10pm

Below is what I can think of:

1) Naming convention for class attribute of <p> tag could have been better. Instead of saying class="1" , class="p1" or class="p2", I would choose a word which would explain for which element this style applies to. For example, class="about" was used for section 'About me', similar naming could be followed throughout.

2) Yes, I would agree with Ben on the br tags. At least after each list item <li> this may not be required , since each list item will already have decent amount of margin. Also If you are supporting multiple devices like mobile , desk tops etc.. defining absolute margins like margin-bottom:10px may actually take up more margin space on smaller devices.

Thanks

Welcome to the Treehouse Community

Looking to learn something new?

Laura Hibbard

Laura Hibbard

Code Critique

3 Answers

Ben Griffith

Ben Griffith

Laura Hibbard

Laura Hibbard

Ben Griffith

Ben Griffith

Rich Bagley

Rich Bagley

Laura Hibbard

Laura Hibbard

Santosh Kumar

Santosh Kumar