I was hoping to get some feedback on my basic recreation of the google homepage. Im doing the Odin Project learning course and this was the first project trying to use the basics of HTML/CSS

HTML file:

    <!DOCTYPE html>
<html>

<body>
<div class="left">
<a href="#">Store</a>
</div>
<div class="right">
<a href="#">Gmail</a>
<a href="#">Images</a>
<a href="#">Apps</a>
</div>

<div class="middle">
<br>
<input type="text" name="userinput" id="userinput">
<br>
<button type="button" id="searchbutton">Im Feeling Lucky</button>
</div>

<footer>
<div class="left">
</div>
<div class="right">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Settings</a>
</div>
</footer>
</body>
</html>


CSS file:

    #userinput{
height: 30px;
width: 500px;
}

#signin{
background-color: blue;
color: white;
border: 1px solid blue;
}

#searchbutton{
margin-top: 20px;
opacity: .60;
}

.right{
float: right;
}

.left{
float: left;
}

.middle{
margin-left: 130px;
}

button{
line-height: 28px;
}

body{
position: relative;
text-align: center;
font-size: 14px;
}

footer{
}

a{
color: black;
text-decoration: none;
}

div{
word-spacing: 40px;
display: inline-block;
}


All looks good as a start, I would advise on sticking the footer to the bottom of the page using the following piece of css.

position: fixed;
bottom: 0;


This will affect the positioning of the text but that can be remedied by setting the position to fixed on the right div to realign it to the right of the page.

Html Id's Must be A unique Value for each element, If you wish to Name things with the same name then class Should be used instead.

#userinput > Box Shadow has a spelling mistake. of 10ox instead of 10px.

background-color: Can be shortened to just background:YourColor;

Opacity Property should be between 0 & 1, 0.60 => The 0 is redundant and can be removed


inside your footer Css I would swap the div & the a, order around as the a is inside the div. & also The default color is black anyway. So this can possibly be removed. I noticed you using padding-top it seems to set the height of the footer, this is Ok, but just 'height' is 4 less Characters. So shortens your code slightly.

also if you are just starting out try to get into the habbit of using 'vw', 'vh', 'vmin' & 'vmax' units for any widths and heights.
They stand for;

  'vh'   => viewport Height,
'vw'   => viewport Width,
'vmin' => viewport Minimum,
'vmax' => viewport Maximum.


They Are responsive to The device that A page is being viewed on, Where-as px, rem, em etc are not truely responsive. Hope these help :)