First ever webpage (Google homepage) 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:



    &lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Google&lt;/title&gt;
        &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div class="aboutstore"&gt;&lt;a href="about.html" id="about" class="links"&gt;About&lt;/a&gt; &lt;a href="store.html" class="links"&gt;Store&lt;/a&gt;&lt;/div&gt;

        &lt;div class="gmailimages"&gt;&lt;a href=gmail.html id="gmail" class="links"&gt;Gmail&lt;/a&gt; &lt;a href="images.html" class="links"&gt;Images&lt;/a&gt;&lt;/div&gt;

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

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

    &lt;/body&gt;
&lt;/html&gt;


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;
}
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.

&lt;body&gt;
    &lt;div class="aboutstore"&gt;
        &lt;a href="about.html" id="about" class="links"&gt;About&lt;/a&gt; 
        &lt;a href="store.html" class="links"&gt;Store&lt;/a&gt;
    &lt;/div&gt;

    &lt;div class="gmailimages"&gt;
        &lt;a href=gmail.html id="gmail" class="links"&gt;Gmail&lt;/a&gt; 
        &lt;a href="images.html" class="links"&gt;Images&lt;/a&gt;
    &lt;/div&gt;

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

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


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


Navigation Menus
Headers
Footers
etc.