2
\$\begingroup\$

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>
  <head>
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <div class="left">
        <a href="#">About</a>
        <a href="#">Store</a>
      </div>
      <div class="right">
        <a href="#">Gmail</a>
        <a href="#">Images</a>
        <a href="#">Apps</a>
        <button type="button" name="button" id="signin">Sign In</button>
      </div>
    </header>

    <div class="middle">
      <img src= "https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png"
      alt="Google Logo" width="360" height="100">
      <br>
      <input type="text" name="userinput" id="userinput">
      <br>
      <button type="button" id="searchbutton">Google Search</button>
      <button type="button" id="searchbutton">Im Feeling Lucky</button>
    </div>

    <footer>
      <div class="left">
        <a href="#">Advertising</a>
        <a href="#">Business</a>
      </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;
  border-radius: 24px;
  box-shadow:5px 10ox;
}

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

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

.right{
  float: right;
}

.left{
  float: left;
}

.middle{
  margin-left: 130px;
  padding-top: 200px;
}

button{
  line-height: 28px;
}

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

footer{
  padding-top: 200px;
}

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

div{
  word-spacing: 40px;
  display: inline-block;
}
\$\endgroup\$
2
\$\begingroup\$

Your code is good, but I have some suggestion to improve it.

HTML

You used semantic HTML for the header and footer, but for the main content you did not use any semantic html. If you use semantic HTML tags for your main content like main tag and section tag, it will be more interesting.

In the below picture you can see you followed everything except the main content.

enter image description here

CSS

You can order your CSS code. I would order by layout; first your body CSS, then your header CSS and then finally your footer CSS. Alternately you can order by other things like alphabet.

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

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

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

.right{
  float: right;
}

.left{
  float: left;
}

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

.middle{
  margin-left: 130px;
  padding-top: 200px;
}

 #userinput{
  height: 30px;
  width: 500px;
  border-radius: 24px;
  box-shadow:5px 10ox;
}

button{
  line-height: 28px;
}

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

footer{
  padding-top: 200px;
}
| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

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.

inside your Css

#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 :)

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