2
\$\begingroup\$

My girlfriend and a friend started a Kiwanis club around here, so I figured it would be a good opportunity to try coding my first website. I'm pretty new to coding still and it's pretty basic, so I'm just looking for general pointers or any bad practices I may be doing.

GitHub

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kiwanis of Kennett Square</title>
    <meta charset="utf-8">
    <link href="css/styles.css" type="text/css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Ruda' rel='stylesheet' type='text/css'>
</head>

<body class="body">

    <div id="page"> 


         <header class="mainHeader">


         <div class="socialBar">
            <img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
            <h1 align="right">Kiwanis of Kennett Square</h1>
            <h2>Find us on: </h2>
            <a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
            <a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
            <a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
         </div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="photos.html">Photos</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

    <content class="content">

        <img src="images/masthead.jpg" alt="Masthead">

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.
            </p>
            <br>
            <p>
                Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.
            </p>
            <br>
            <p>
                Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
            </p>

    </content>


    <div class="mainFooter">
        <p>Email us at: <a href="mailto:kiwanisksq@gmail.com" target="_top">KIWANISKSQ@GMAIL.COM</a>
        </p>
    </div>

    </div>
</body>
</html>

.body {
font-family: 'Ruda', sans-serif;
font-size: 87.5%;
background-color:#efefef;
margin: 0 auto;
width: 60%;
clear:both;
line-height:1.5;
}
/*
======= MAIN HEADER =======
*/
.mainHeader {
    margin:5px auto 5px auto;
}
.mainHeader img {
    width: 15%;
    display: inline;
    margin: 0 auto 0 auto;
    padding: 5px 0 5px 0;
}
.mainHeader li {
    font-size: 150%;
    display:inline;
    margin: 0px 25px;
    font-weight: bold;
    letter-spacing: .5px;
}
.mainHeader nav {
    background-color: #00457C;
}
.mainHeader ul {
    text-align: center;
    padding: 10px;
}
.mainHeader h1 {
    color: #193365;
    display: inline;
    font-size: 300%;
    padding: 0px 0px 0px 50px;
}
/*
======= SOCIAL BAR =======
*/
.socialBar {
    text-align: right;
}
.socialBar h2 {
    display: inline;
    padding-right: 5px;
}
.socialBar h1 {
    display: block;
}
.socialBar img {
    width: 4%;
    padding: 0px 5px 0px 5px;
}
.socialBar a {
    display:inline;
}
#logo {
    float:left;
    width:12%;
}

/*
======= MAIN CONTENT =======
*/

.content p {
    width: 90%;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
}
.content img {
    width:75%;
    display:block;
    margin: 0 auto;
    padding: 5px 0 5px 0;
}
#contactform {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
a {
    text-decoration: none;
    text-transform:uppercase;
    color: white;
}
a:hover {
    text-decoration: underline;
}
/*
======= MAIN FOOTER =======
*/
.mainFooter {
    background-color: #00457C;
    font-size: 150%;
    margin: 0px auto 0px auto;
    color:white;
    text-align: right;
    width:100%;
}
.mainFooter p {
    padding: 10px;
}
\$\endgroup\$
  • \$\begingroup\$ DANG it!!! It was closed right when I was about to click on the submit button! I will provide the raw review code somewhere. \$\endgroup\$ – Ismael Miguel Nov 6 '14 at 16:00
  • \$\begingroup\$ Here is my review: pastebin.com/uWQRdfd7 \$\endgroup\$ – Ismael Miguel Nov 6 '14 at 16:02
  • 4
    \$\begingroup\$ @IsmaelMiguel: In the future, don't bother coming up with a review if a question doesn't have embedded code. The OP, in general, may possibly never get this done, even after receiving comments about the closure. \$\endgroup\$ – Jamal Nov 6 '14 at 16:06
3
\$\begingroup\$

Validation Errors

If you run your markup through the validator, you'll find the following errors:

  • Duplicate ids
  • Obsolete align attribute
  • Invalid element (content, perhaps you meant to use the main element instead?)

Use custom fonts sparingly

Using a custom font for your entire content can make it completely unreadable for users with slower connections.

Inappropriate use of the <br /> element

The br element should be used to force a line break within inline content (ie. inside a paragraph), not to increase spacing between elements. Add margins or padding instead.

.body

There's no reason to have a .body class for the body element. There's probably other classes that could be eliminated in favor of an element selector, but this is the most obvious one.

Shorthand / Optimizations

You're using shorthand for margins/paddings, which are good, but you can go a little bit further here to optimize them:

padding: 10px 0px 10px 0px;

Can be shortened to

padding: 10px 0;

This is unnecessary because h1 elements are block elements by default:

.socialBar h1 {
    display: block;
}

This is unnecessary on your image and anchor elements, because those are inline by default:

display: inline;

In your body element, this seems unnecessary since you only have 1 element that's floated at all:

clear:both;

Is it really a headline?

Based on the content, I'm not convinced that the h2 element is used correctly here. It doesn't read like a headline. The fact that it is preceded by an h1 element makes me extra suspicious that it's being used as a subheading (which is considered incorrect). It might make more sense to use a paragraph tag instead or improve the wording so that it sounds more like a headline that can stand on its own.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.