3
\$\begingroup\$

I am currently completing "The Odin Project" and one of the first projects was to create a google homepage. I was wondering if some people could tell me all the long winded and unnecessary code I added and also tell me how I can better go about sticking the footer to the bottom of the page.

https://github.com/LHUF/google-homepage

HTML:

    <!DOCTYPE html>
<html>
    <head>
        <title>Google</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="aboutstore"><a href="about.html" id="about" class="links">About</a> <a href="store.html" class="links">Store</a></div>

        <div class="gmailimages"><a href=gmail.html id="gmail" class="links">Gmail</a> <a href="images.html" class="links">Images</a></div>

        <div id="searcharea"><h1><a href="file:///home/louis/TOP_Projects/google-homepage/index.html"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="300dp" height="100dp" alt="Google"></h1></a>
        <form method="GET">
            <input type="text" id="searchbar"></input><br>
            <input type="submit" value="Google Search" class="searchbuttons"></input>
            <input type="submit" value="I'm Feeling Lucky" class="searchbuttons" id="imfeelinglucky"></input>
        </form></div>

        <div id="unitedkingdom">United Kingdom</div>
        <div id="bottomleftoptions"><a href="advertising.html" class="links">Advertising</a> <a href="business.html" class="links">Business</a> <a href="howsearchworks.html" class="links">How Search Works</a></div>
        <div id="bottomrightoptions"><a href="privacy.html" class="links">Privacy</a> <a href="terms.html" class="links">Terms</a> <a href="Settings" class="links">Settings</a></div>

    </body>
</html>

CSS:

#imfeelinglucky {
    margin-left: 10px;
}

.searchbuttons {
    margin-top: 20px;
    text-align: center;
    height: 30px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


#searchbar {
    width: 400px;
    height: 25px;
    margin-top: -30px;
}

#searcharea {
    text-align: center;
    padding-top: 200px;

}

#unitedkingdom {
    position: relative;
    bottom: 5%;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top: 1px;
    border-bottom: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 505px;
    color: rgba(0,0,0,.54);
    background: #f2f2f2;
    padding-left: 25px;
    font-size: 15px;
}

.gmailimages {
    position: absolute;
    top: 1%;
    right: 1%;
}

.aboutstore {
    position: absolute;
    top: 1%;
    left: 1%;
}

#bottomrightoptions {
    padding-right: 25px;
    font-size: 13px;
    padding-top: 15px;
    color: rgba(0,0,0,.54);
    background: #f2f2f2;
    position: absolute;
    float: right;
    padding-left: 800px;
    bottom: 0.5%;
    right: 0%;


}

#bottomleftoptions {
    padding-left: 25px;
    font-size: 13px;
    padding-top: 15px;
    color: rgba(0,0,0,.54); 
    background: #f2f2f2;
    position: absolute;
    float: left;
    padding-right: 800px;
    bottom: 0.5%;
    left: 0%;
}


#about {
    margin-right: 5px;
}

#gmail {
    margin-right: 5px;
}

.links {
    color: #000;
    text-decoration: none;
    font-size: 13px;
}

body {
    font-family: Arial, sans-serif;
    margin:0;
    padding:0;
}
\$\endgroup\$
  • 1
    \$\begingroup\$ Welcome to code review where we review working code and provide solutions on how to improve that code. Questions such as tell me how I can better go about sticking the footer to the bottom of the page may indicate the code is not working as intended. \$\endgroup\$ – pacmaninbw Jan 4 at 14:59
  • \$\begingroup\$ Yes this is working on my browser I was looking for a review of how I could maybe achieve this better and so it works on phone etc \$\endgroup\$ – Louis Hough Jan 4 at 20:06
2
\$\begingroup\$

while your code runs, personally I would change the formatting to start with

I noticed your search area div has a mistake in it, your H1 encloses the Anchor tag and the image but you close the H1 tag before closing the anchor tag, which is syntactically incorrect. I also noticed that you were missing quotation marks around the value of one of your anchor tags in the gmailimages, I will make these changes in the suggestions I post below.

Some things like your anchor tags inside of your divs could be on new lines to make the code more readable, let me show you what it looks like when I move the tags to their own lines.

<body>
    <div class="aboutstore">
        <a href="about.html" id="about" class="links">About</a> 
        <a href="store.html" class="links">Store</a>
    </div>

    <div class="gmailimages">
        <a href=gmail.html id="gmail" class="links">Gmail</a> 
        <a href="images.html" class="links">Images</a>
    </div>

    <div id="searcharea">
        <h1>
            <a href="file:///home/louis/TOP_Projects/google-homepage/index.html">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="300dp" height="100dp" alt="Google">
            </a>
        </h1>
        <form method="GET">
            <input type="text" id="searchbar"></input><br>
            <input type="submit" value="Google Search" class="searchbuttons"></input>
            <input type="submit" value="I'm Feeling Lucky" class="searchbuttons" id="imfeelinglucky"></input>
        </form>
    </div>

    <div id="unitedkingdom">United Kingdom</div>
    <div id="bottomleftoptions">
        <a href="advertising.html" class="links">Advertising</a> 
        <a href="business.html" class="links">Business</a> 
        <a href="howsearchworks.html" class="links">How Search Works</a>
    </div>
    <div id="bottomrightoptions">
        <a href="privacy.html" class="links">Privacy</a> 
        <a href="terms.html" class="links">Terms</a> 
        <a href="Settings" class="links">Settings</a>
    </div>
</body>

The next thing that I would suggest is to look into HTML5, there are nice tags for things like

  • Navigation Menus
  • Headers
  • Footers
  • etc.
|improve this answer|||||
\$\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.