Project 2: Google Clone

Objective

Your task is to create a simple clone of the Google homepage. This exercise will help you practice basic HTML and CSS skills by replicating a well-known website layout. This project will enhance your understanding of web design and improve your attention to detail.

Instructions

  • Homepage Structure:
    • Header: Include the Google logo at the top left. Use a placeholder image or text that says "Google."
    • Search Bar: Create a large search bar in the center of the page with placeholder text "Search Google or type a URL."
    • Buttons: Add two buttons below the search bar:
      • One for "Google Search."
      • One for "I'm Feeling Lucky."
    • Footer: Include a footer with links similar to Google’s, such as "Advertising," "Business," "Privacy," and "Terms."
  • Design and Layout:
    • HTML Structure: Use basic HTML tags such as <header>, <main>, <footer>, <h1>, <input>, and <button> to build the structure.
    • CSS Styling: Apply basic styles to make your page look similar to Google’s homepage. Focus on:
      • Centering the content.
      • Styling the search bar and buttons.
      • Matching colors and fonts as closely as possible to Google’s design.
    • Responsiveness: Ensure your page looks good on both desktop and mobile devices. Adjust the layout and styles as needed for different screen sizes.
  • Guidance for Implementation:
    • Header: Place the Google logo (a simple text or placeholder image) in the top-left corner.
    • Search Bar: Use an <input> element for the search bar. Style it to be large and centered on the page.
    • Buttons: Use <button> elements for the search and lucky buttons. Style them to match Google’s look.
    • Footer: Create a simple footer with text links. You can use <a> elements styled as links.
  • Additional Features (Optional):
    • Add subtle shadows or borders to the search bar and buttons to make them stand out.
    • Experiment with different fonts and alignments to closely mimic the Google look and feel.
  • Final Touches:
    • Review your page to ensure all elements are aligned correctly and the page looks clean and professional.
    • Compare your clone with the actual Google homepage and make adjustments as needed.

Guidance and Tips

  • Start Simple: Focus on getting the basic structure and styles correct before adding any additional features.
  • Use Browser Developer Tools: Inspect elements on the actual Google homepage to understand how they are styled and structured.
  • CSS Flexbox or Grid: Use Flexbox or CSS Grid to center and align your elements effectively.
  • Practice Makes Perfect: Don’t worry if your clone isn’t perfect. This task is about practicing your HTML and CSS skills, so take your time to make improvements.